Book Image

ASP.NET Core 2 and Vue.js

By : Stuart Ratcliffe
5 (1)
Book Image

ASP.NET Core 2 and Vue.js

5 (1)
By: Stuart Ratcliffe

Overview of this book

This book will walk you through the process of developing an e-commerce application from start to finish, utilizing an ASP.NET Core web API and Vue.js Single-Page Application (SPA) frontend. We will build the application using a featureslice approach, whereby in each chapter we will add the required frontend and backend changes to complete an entire feature. In the early chapters, we’ll keep things fairly simple to get you started, but by the end of the book, you’ll be utilizing some advanced concepts, such as server-side rendering and continuous integration and deployment. You will learn how to set up and configure a modern development environment for building ASP.NET Core web APIs and Vue.js SPA frontends.You will also learn about how ASP.NET Core differs from its predecessors, and how we can utilize those changes to our benefit. Finally, you will learn the fundamentals of building modern frontend applications using Vue.js, as well as some of the more advanced concepts, which can help make you more productive in your own applications in the future.
Table of Contents (15 chapters)

Preface

These days, it is rare to see a standard web application with little to no client-side code involved. Developers are usually burdened with writing masses and masses of JavaScript, often using libraries such as jQuery, to create rich and responsive user interfaces. As an application like this grows, it is incredibly easy for this client-side code to become unwieldy and a nightmare to maintain. This style of web application also relies on the DOM to store the application's current state, and we end up writing a lot of code to micromanage and manipulate the DOM in order to correctly display that state.

Imagine a web application using nothing but jQuery on the client, where we have a single piece of data that we need to display in multiple places within a UI. Now think about how we'd need to go about changing that piece of data, and ensuring that the DOM represents the correct value in every location where we are displaying it. Up to a handful of places is perhaps not a big deal; we could write a bunch of similar lines of jQuery that manually go and update each UI element currently displaying that piece of data, and just make sure we don't forget any.

By now, you should be able to see the problem we're trying to solve. This way of developing web applications is incredibly error-prone for anything but the most simple user interfaces. However, this is 2018 and we aren't limited to writing our client applications with jQuery any more. There are countless SPA frameworks dedicated to building UIs for our web applications that automatically react to data changes and handle the displaying of that data in the DOM for us. We no longer need to write countless lines of code with a single purpose of changing the value of a DOM element.

We don't manipulate the DOM with these frameworks. Instead, we manipulate the data. The DOM simply acts as a means of displaying that data to our users. Let's go back to the preceding example, where we have a single piece of data being displayed in 10 different UI elements. When that piece of data changes, instead of manually updating all 10 DOM elements to reflect the change, we simply store it in a JavaScript object and update the value whenever we like. The SPA framework then reacts to these changes, and handles all the heavy lifting for us by updating any DOM element that cares about that piece of data; one simple data change rather than 10 separate DOM manipulation calls.

As with choosing a technology for the frontend of a modern web app, there are also plenty of options when it comes to building a backend. Some of the most popular choices currently include Node.js, PHP, Rails, Golang, and ASP.NET. Node.js is incredibly popular for a number of reasons, most notably for being able to use JavaScript for the whole application. The Laravel framework is arguably one of the only reasons PHP is still a viable option, else it would likely be fading into the background the way Rails is. Golang is a fairly new language that is getting some very good reviews, particularly in the performance benefits it provides over Node. However, due to how new Golang is, there are far fewer packages and frameworks to assist us in building more complex applications. ASP.NET is older than both Node.js and Golang, and, as such, there is no such shortage of packages and frameworks like there is with Go. In fact, the .NET framework has a lot of functionality already built in where you'd normally be reaching for an external package in other languages and frameworks. Even when you do need an external package, there is usually one made by Microsoft themselves, which helps avoid a well-known issue with Node.js applications referred to as "dependency hell". ASP.NET is also based around strongly-typed compiled languages that can provide a number of performance and security benefits over a weakly typed language, such as JavaScript.

ASP.NET has been around since January 2002 when version 1.0 of the .NET framework was released as the successor to Microsoft Active Server Pages. Since then, there have been a multitude of major versions released, the current being version 4.7 at the time of writing. In 2016, Microsoft changed their game entirely, with the release of ASP.NET Core. For the first time in over 14 years, ASP.NET was made both open source and cross-platform in a complete rewrite from the ground up. When version 1.0 of ASP.NET Core was released, there was one potentially significant downside depending on the size and complexity of your application. If you have a requirement to host on a platform other than Windows, you can't target the full .NET framework. The issue with this was a potential lack of necessary APIs that had not yet been ported over to the core CLR. However, version 2.0 has recently been released, and with it comes a compatibility shim that enables .NET Core apps to reference any .NET framework library.

If you've been avoiding the move to ASP.NET Core, then now is a great time to change that. Version 2.0 has added a number of other improvements aside from backward compatibility with .NET framework APIs and libraries: Simplified configuration setup, simplified NuGet package references, and additional SPA project templates, to name but a few. One of Microsoft's most well-known developers, Steve Sanderson (creator of the very popular KnockoutJS framework), has made it his goal to make ASP.NET Core the best backend choice for single-page applications. To achieve that goal; his team has implemented some amazing features to seamlessly integrate frontend and backend builds using ASP.NET Core middleware. These features, along with the latest improvements released in version 2.0, really do make ASP.NET Core a fantastic choice for any web application.

With so many SPA frameworks to choose from, why should we bother with Vue? Most developers with any kind of interest in modern web application development have probably heard of React and Angular, but far fewer will have heard of Vue. Initially created by a single developer, Evan You, and currently developed by a relatively small international team, you could be forgiven for ignoring it in favor of its main competition. After all, React and Angular are developed by the tech giants that are Facebook and Google, respectively.

However, after working at both Google and the Meteor Development Group, Evan You knows a little something about SPA frameworks. Vue was created after both React and AngularJS had some time to be battle tested by thousands of developers around the world. In the eyes of its creators, Vue incorporates the best parts that either of these frameworks had to offer, while also trying to avoid the pitfalls that caused common grievances throughout the community. The result is a very lightweight and focused library dedicated to building UIs only. However, the Vue team has always intended for this library to be incrementally adoptable in any web project, and has provided several supporting libraries that make Vue a fantastic choice for building fully fledged SPAs as well.

In my opinion, Vue is far simpler to learn than most of the alternatives, which makes it a great choice for experienced backend .NET developers looking to branch out into the world of frontend frameworks and modern SPAs. If you already know enough HTML and jQuery to make a standard MVC application, then the template syntax used by Vue won't be much of a problem, and a lot of the syntax can be directly compared to that of Razor. The barrier to entry may be low, and the library itself may be incredibly lightweight, but Vue can be every bit as powerful as any other SPA framework that exists today.