Front‐end Development with ASP.NET Core, Angular, and Bootstrap
Published by
John Wiley & Sons, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256www.wiley.com
Copyright © 2018 by John Wiley & Sons, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978‐1‐119‐18131‐6
ISBN: 978‐1‐119‐24396‐0 (ebk)
ISBN: 978‐1‐119‐18140‐8 (ebk)
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Publisher, or authorization through payment of the appropriate per‐copy fee to the Copyright Clearance Center, 222 Rosewood Drive, Danvers, MA 01923, (978) 750‐8400, fax (978) 646‐8600. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748‐6011, fax (201) 748‐6008, or online at http://www.wiley.com/go/permissions.
Limit of Liability/Disclaimer of Warranty: The publisher and the author make no representations or warranties with respect to the accuracy or completeness of the contents of this work and specifically disclaim all warranties, including without limitation warranties of fitness for a particular purpose. No warranty may be created or extended by sales or promotional materials. The advice and strategies contained herein may not be suitable for every situation. This work is sold with the understanding that the publisher is not engaged in rendering legal, accounting, or other professional services. If professional assistance is required, the services of a competent professional person should be sought. Neither the publisher nor the author shall be liable for damages arising herefrom. The fact that an organization or Web site is referred to in this work as a citation and/or a potential source of further information does not mean that the author or the publisher endorses the information the organization or Web site may provide or recommendations it may make. Further, readers should be aware that Internet Web sites listed in this work may have changed or disappeared between when this work was written and when it is read.
For general information on our other products and services please contact our Customer Care Department within the United States at (877) 762‐2974, outside the United States at (317) 572‐3993 or fax (317) 572‐4002.
Wiley publishes in a variety of print and electronic formats and by print‐on‐demand. Some material included with standard print versions of this book may not be included in e‐books or in print‐on‐demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2018930062
Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United States and other countries, and may not be used without written permission. All other trademarks are the property of their respective owners. John Wiley & Sons, Inc., is not associated with any product or vendor mentioned in this book.
For Signe, for the support over the project
SIMONE CHIARETTA (Brussels, Belgium) is a web architect and developer who enjoys sharing his development experiences and more than 20 years’ worth of knowledge on web development with ASP.NET and other web technologies. He has been a Microsoft MVP for ASP.NET for eight years, has authored several books about ASP.NET MVC (Beginning ASP.NET MVC 1.0 and What’s New in ASP.NET MVC 2?, both published by Wrox, and OWIN Succinctly and ASP.NET Core Succinctly, published by Syncfusion), and has contributed to online developer portals (like Simple Talk). Simone also co‐founded the Italian ALT.NET usergroup ugialt.NET and is the co‐organizer of many conferences in Milan, including the widely appreciated Web.NET European Conference in 2012.
You can read Simone’s thoughts and development tips on his blog: http://codeclimber.net.nz.
When not writing code and blog posts and taking part in the worldwide.NET community, Simone likes to play with Arduino, drones, and underwater robots, and he is training to complete his first Ironman in 2018. He is one of the many expats living and working in the capital of Europe, Brussels, where he is leading the team that develops the public web site of the Council of the European Union, one of the ruling bodies of the European Union.
UGO LATTANZI is a Microsoft‐certified ASP.NET MVP who specializes in enterprise application development with a focus on web applications, service‐oriented applications, and environments where scalability is a top priority. He is highly skilled in technologies such as ASP.NET MVC, NodeJS, Azure, and more. He is currently the Chief Software Architect for Technogym, and he formerly has served as a technical manager for MTV and has been a consultant for some of the largest companies in Italy. He also has enjoyed an active role in the tech community, serving as a technical writer, editor, and speaker for numerous conferences, book publishers, newspapers, webcasts, and forums. He’s also the co‐owner of the Web.NET European Conference located in Milan.
I WANT TO START BY THANKING MY GIRLFRIEND SIGNE, for her support and for putting up with the many hours that this project took from my free time. This book would have not been possible without her support and blessing.
Then I would like to thank the editorial group at Wiley/Wrox. To Jim Minatel for helping draft the original idea behind the book and getting started with the project, and to Kelly Talbot, who without any shadow of a doubt did an amazing job with the copyediting of the manuscript and improving the language and readability of the book, and who kept pushing me and motivating me during the various rewrites that this book needed due to fundamental changes in the technologies covered.
And also a great thank you to Ugo Lattanzi, the technical editor, who helped catch some technical flaws and overall helped a lot with the quality of the book.
Besides the people directly involved in the writing of the book, I also want to thank the ASP.NET team, first for creating such a great framework, and also for helping me out in the early stages to understand where the framework was going. In particular I want to thank Bertrand Le Roy, Scott Hunter, and Scott Hanselman for providing me with up‐to‐date details about the upcoming releases.
A special thanks goes to Mads Kristensen for writing the preface and for always helping me out with questions about integration of front‐end features into Visual Studio 2017.
I also want to thank Jason Imison for his help in better understanding the role of OmniSharp inside VS Code and to Juri Strumpflohner, for helping me out with some Angular‐related matters.
Finally, I also have to thank my coworkers and manager Gunter for their support and review of the manuscript.
The web becomes an increasingly capable platform with each new browser release. Tomorrow’s new features become available to early adopters while yesterday’s stabilize for mass adoption. This ever‐growing toolbox of HTML, CSS, and JavaScript capabilities seems to be accelerating and shows no signs of slowing down. In fact, it’s growing so fast that specialized tooling is required to take advantage of these new features—tooling such as WebPack and Gulp.
The amount of knowledge required to build modern browser applications is illustrated by the new job title “front‐end engineer”—a term that didn’t exist just a few years ago.
In addition to the advances in the web platform, the server‐side technologies powering the web are evolving as well. To provide the best experience for both end‐users and web developers, the server‐side platform must be ultra‐fast, secure, cross‐platform, and cloud scalable, and it must have great tooling.
Most web applications consist of client‐side code running in the browser and server‐side code running on one or more servers. To be a proficient web developer, it is necessary to know enough of both client and server technologies, and that is a big challenge. Because how much is enough, and how much time should we devote to continuously learning?
One way to make it easier for ourselves is to choose the right set of frameworks and tools to build our applications upon. Frameworks are useful because they usually wrap complex platform features into easy‐to‐use components, so web developers can focus on writing their applications’ logic instead of all the plumbing needed to work with the browser or server platforms.
Choosing the right frameworks is important. The options are many, but there are a few that have shown to be particularly well‐suited for building modern web applications. ASP.NET Core as the application framework for the server and Angular for the client is a great combination. Bootstrap makes sure the app looks good in all browsers and on all types of devices.
Simone has done a great job showing how these frameworks complement each other and how tooling provides a solid development experience. In the fast‐moving world of web development, it is good that we have books like this to give us a pragmatic approach to building web applications using the latest and greatest in both client and server technologies.
MADS KRISTENSEN
There was a time when “backend” and “front‐end” developers were doing pretty different work. Backend developers were writing code to render web pages, using some server‐side language; front‐end developers were programming some interactivity using JavaScript and making the web pages look beautiful with CSS.
A few years ago, with the arrival of SPAs (Single Page Applications), JavaScript was not only used to add “some” interactivity, but was used to build the application itself. The skill‐set of the so‐called backend developers had to expand to include all the tools that were typical of front‐developers, such as specific JavaScript frameworks and some basic understanding of CSS.
The goal of this book is to explain the tools in “front‐end” developers’ toolbox and how to use them effectively in combination with ASP.NET Core MVC.
In everyday life, a polyglot is a person who knows and is able to use several languages. They are not necessarily bilingual (or multi‐lingual), but they can use their second or third or fourth language with a good level of proficiency.
With that definition in mind, what is a polyglot developer? It’s a developer who knows more than one (programming) language or framework and uses them within the scope of the same application.
From the beginning of IT industry, applications were mainly written in one language. I personally started with C, then moved to Visual Basic, landed on Cold Fusion, used JavaScript at its early stages (both on the client and the server), did a bit of Java, and finally landed on the.NET platform, but only one at a time.
It was the time of the big enterprise frameworks, when vendors tried to squeeze into their language or platforms all the possible features that an application might need. You probably remember when Microsoft tried to shield web developers from the actual languages of the web, HTML and JavaScript, introducing ASP.NET WebForms and the ASP.NET Ajax Framework. And if you look back at your personal experience in the IT industry, you’ll probably find many other similar examples.
But lately a new trend has appeared, which has gone in the opposite direction. The IT industry understands that maybe some languages are more suitable than others for specific tasks, and instead of trying to force everything on top of one single language, applications are being written in multiple languages. We are entering the era of the polyglot developer.
Now that we share the same definition of a polyglot developer, let’s see what the benefits of being one are.
The first and probably most important benefit of being a polyglot is being able to choose the right tool for the job without having to compromise because your language or framework of choice doesn’t support a given feature.
For example, by using the Microsoft AJAX Framework, you are limited by the functionalities it provides, while by directly using JavaScript you have all the flexibility provided by the language.
And I’m confident you will agree with me that as a web developer you have to know HTML, but nevertheless using the design surface of Visual Studio, you can build web applications just by dragging elements from the toolbox. Obviously, you do not have the same level of control as when crafting your HTML code directly.
So, to a certain degree, every web developer is already a polyglot developer.
The integration of SASS into Visual Studio 2015 is another example. A few years ago the Ruby community came up with the idea of a preprocessor for CSS styles. Instead of creating a.NET version of SASS, Microsoft decided to integrate the original version into its IDE, and SASS was the right tool for preprocessing CSS styles.
A second benefit of knowing multiple languages or frameworks is that you can take inspiration from what vendors and open‐source communities are doing in other languages, and when you cannot just use it, you can adapt it or make a version specific to your own.
A very good example of this is ASP.NET MVC. About 10 years ago, the popular language of the moment was Ruby, thanks to its simple web framework, Ruby on Rails, built on top of the Model View Controller pattern. The.NET developer community took inspiration from it and started building.NET web frameworks also based on the MVC pattern. This led to Microsoft building the ASP.NET MVC framework that is one of the main topics of this book.
Using several languages and frameworks brings an additional, if not technical, benefit: It forces you to step out of your existing comfort zone, making you more adaptable and breaking the potential boredom of always following the same routine. Not surprisingly, many developers are hesitant to experiment with new things and prefer the comfort of using the tools, frameworks, and language they know best, even if doing so gives them less flexibility and control. But if you are reading this book, you are probably not one of them. So, through the rest of the book, prepare to learn new languages and frameworks that originated outside of the Microsoft.NET space. In the beginning, you’ll be stepping out of your comfort zone. By the time you are done, you’ll find that your comfort zone has become even larger and more rewarding.
The audience of this book is web developers who have knowledge of ASP.NET MVC, either with the latest version or with previous versions of the framework, and who want to start using the tools and frameworks that are popular in the front‐end development world. Additionally, this book can serve as a guide for developers who are already adopting some of the front‐end tools and frameworks but want to make a more efficient use of them via the integrations that have been introduced with Visual Studio 2017.
This book is about front‐end development with ASP.NET Core MVC. Together with giving an overview of the latest framework from Microsoft, it also covers some of the most popular frond‐end frameworks and tools, like Angular, Bootstrap, Nuget, Bower, webpack, Gulp, and Azure.
In addition to the frameworks, the book shows the new front‐end development‐oriented features of Visual Studio 2017 but also how to develop an ASP.NET Core MVC application without it, using instead standard developers’ text‐editors like Visual Studio Code on Mac OS X.
This is not a beginners’ book, so I assume that you know the basics of HTML, JavaScript, and CSS, that you know C# or VB.NET (keep in mind that all samples will be in C#), and that you have already worked with ASP.NET MVC and WebAPI.
If you still haven’t decided whether this it the right book for you, in this section I’m briefly going to explain how the book is structured and the content of each chapter.
The book has lot of samples, so the best way to experience it is to try them yourself on your computer. In order to do so, you’ll need either Windows 7, 8, or 10 and you’ll need Visual Studio 2017 Community edition.
ASP.NET Core MVC can also be developed on any text editor on Windows, Mac OS X, or Linux. Microsoft also developed a cross‐platform text editor called Visual Studio Code. You will also need it in order to follow along in Chapter 8 about developing outside of Windows. You can use any of the other compatible text editors, but the commands used and screenshots will be different from the ones used with Visual Studio Code.
The source code for the samples is available for download from the Wrox website at www.wiley.com/go/frontenddevelopmentasp.netmvc6.
To help you get the most from the text and keep track of what’s happening, we’ve used a number of conventions throughout the book.
As for styles in the text:
persistence.properties.We present code in two different ways:
We use a monofont type with no highlighting for most code examples.
We use bold to emphasize code that is particularly important in the present context or to show changes from a previous code snippet.
As you work through the examples in this book, you may choose either to type in all the code manually, or to use the source code files that accompany the book. All the source code used in this book is available for download at www.wrox.com. Specifically for this book, the code download is on the Download Code tab at:
www.wiley.com/go/frontenddevelopmentasp.netmvc6
You can also search for the book at www.wrox.com by ISBN (the ISBN for this book is 978‐1‐119‐18131‐6) to find the code. And a complete list of code downloads for all current Wrox books is available at www.wrox.com/dynamic/books/download.aspx.
Most of the code on www.wrox.com is compressed in a.ZIP,.RAR archive, or similar archive format appropriate to the platform. Once you download the code, just decompress it with an appropriate compression tool.
We make every effort to ensure that there are no errors in the text or in the code. However, no one is perfect, and mistakes do occur. If you find an error in one of our books, like a spelling mistake or faulty piece of code, we would be very grateful for your feedback. By sending in errata, you may save another reader hours of frustration, and at the same time, you will be helping us provide even higher quality information.
To find the errata page for this book, go to www.wiley.com/go/frontenddevelopmentasp.netmvc6 And click the Errata link. On this page you can view all errata that has been submitted for this book and posted by Wrox editors.
If you don’t spot “your” error on the Book Errata page, go to www.wrox.com/contact/techsupport.shtml and complete the form there to send us the error you have found. We’ll check the information and, if appropriate, post a message to the book’s errata page and fix the problem in subsequent editions of the book.