Hands-On Full-Stack Web Development with ASP.NET Core

Learn end-to-end web development with leading frontend frameworks, such as Angular, React, and Vue

Tamir Dresher, Amir Zuker, Shay Friedman

• Publisher: Packt Publishing
• Year: 2018
• Print ISBN: 9781788622882
• eBook ISBN: 9781788627757
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in C#
• Index: Computer Science

Become a full-stack developer by learning popular Microsoft technologies and platforms such as.NET Core, ASP.NET Core, Entity Framework, and Azure

Key Features

• Bring static typing to web development with features compatible in TypeScript 3
• Implement a slim marketplace single page application (SPA) in Angular, React, and Vue
• Modernize your web apps with Microsoft Azure, Visual Studio, and Git

Book Description

Today, full-stack development is the name of the game. Developers who can build complete solutions, including both backend and frontend products, are in great demand in the industry, hence being able to do so a desirable skill. However, embarking on the path to becoming a modern full-stack developer can be overwhelmingly difficult, so the key purpose of this book is to simplify and ease the process.

This comprehensive guide will take you through the journey of becoming a full-stack developer in the realm of the web and.NET. It begins by implementing data-oriented RESTful APIs, leveraging ASP.NET Core and Entity Framework. Afterward, it describes the web development field, including its history and future horizons. Then, you'll build webbased Single-Page Applications (SPAs) by learning about numerous popular technologies, namely TypeScript, Angular, React, and Vue. After that, you'll learn about additional related concerns involving deployment, hosting, and monitoring by leveraging the cloud; specifically, Azure.

By the end of this book, you'll be able to build, deploy, and monitor cloud-based, data-oriented, RESTful APIs, as well as modern web apps, using the most popular frameworks and technologies.

What you will learn

• Build RESTful APIs in C# with ASP.NET Core, web APIs, and Entity Framework
• See the history and future horizons of the web development field
• Bring static-typing to web apps using TypeScript
• Build web applications using Angular, React, and Vue
• Deploy your application to the cloud
• Write web applications that scale, can adapt to changes, and are easy to maintain
• Discover best practices and real-world tips and tricks
• Secure your backend server with Authentication and Authorization using OAuth 2.0

Who this book is for

This book is for developers who are keen on strengthening their skills in the field of cloud-based full-stack web development. You need basic knowledge of web-related pillars, including HTML, CSS, and JavaScript, as well as C# and REST.

This book targets novice developers in the realm of Web development and ASP.NET who desire to advance to modern Web and ASP.NET Core development and leverage the Cloud to manage and bring everything together.

App Development with Angular

Web apps have evolved to become rich clients in all senses of the phrase. The development of such modern apps benefits substantially from frameworks that provide developers with a rapid and manageable means of implementation.

The era of jQuery led projects to the point where the HTML DOM was highly coupled with the code—there was simply no productive separation of concerns. Additionally, rich apps usually ended up with performance issues due to the nature of browsers' flexibility toward the DOM, and the maintainability of such projects suffered greatly over time. While there was a way to improve the implementation in this regard while using jQuery, writing real encapsulated and reusable code with optimized performance was not for the faint of heart.

In this chapter, we unravel Angular, one of the leading frameworks that help developers rapidly implement and manage apps. Throughout this chapter, we will build the Everyday Market app using Angular, while covering Angular's fundamentals as well. The following topics will be covered:

• Angular overview
• Angular CLI
• Modules
• Components
• Data binding
• Component interaction
• Injectable services
• HTTP
• Distribution

First, let's start with an overview of Angular.

Angular overview

Google's Angular is a massively popular MV* JavaScript framework for building complex modern applications, be that for the web, mobile, or desktop. It comes with nearly everything you need to build complicated frontend apps, including powerful templates with fast rendering, data management, HTTP services, form handling, routing, modules, and more.

Historically, Google launched the first version, toward the end of 2010, of what they were proud to present as the best framework for SPA: AngularJS. The AngularJS framework relates to the former incarnation of today's Angular, which was given version numbers of 1.x. Interestingly, AngularJS is still quite active and continues to be updated.

Later, Google decided that AngularJS was not on par with recent progress made in the field of web UI development. Its structure and the way it was built made it difficult to improve its performance and design to meet future standards. Therefore, Google announced that they had been working on the successor to AngularJS, which was Angular. Confusingly, readers should note that while there are similarities in the high-level building blocks, these are actually two completely separate frameworks.

By the end of 2016, Google released its new Angular framework. Angular is a vast framework that provides a complete toolset intended to allow developers to build complete modern apps. This notion alone was met with quite a bit of controversy. On one hand, there are many developers who love the fact that they're handed nearly everything they need to build apps from start to finish. On the other hand, others tend to prefer the flexibility and freedom to employ their own formulation of toolsets for different parts of their applications.

Building blocks

Angular is one of the most comprehensive SPA frameworks available, as it attempts to provide almost everything you need to implement complete apps. Due to this fact, Angular brings quite a lot to the table.

Let's review the key application building blocks:

• Modules: Unrelated to ECMAScript or TypeScript modules, Angular modules are logical containers that encapsulate logical parts.
• Components: Angular enables you to decompose your app's visual tree into smaller reusable units called components.
• Templates: Angular adheres to MVC-style programming, meaning the view is separated from the component's logic. Views in Angular are called templates and consist mostly of plain HTML.
• Metadata: Angular uses metadata extensively, enabling declarative-style programming.
• Router: Angular Router enables you to implement client-side routing to support user-intuitive and shareable links.
• Data binding: Having the view and code separated can be a nuisance, as these usually need to interact with each other. To deal with this issue, enter data binding.
• Directives: Directives allow extending or customizing existing elements in all sorts of ways.
• Pipes: Pipes enable transforming values in an encapsulated and reusable way.
• Services and dependency injection: Angular promotes encapsulating business logic into application services. Dependency injections can be used to compose everything together.
• Observables: Angular enables advanced asynchronous patterns, such as observer, pub/sub, and sagas, with the use of Reactive Extensions (RxJs) and its observable APIs.
• Change detection: Leveraging Zone.js, Angular detects state changes and makes minimal updates to the HTML DOM to optimize app performance.

The preceding blocks are the key features you use in Angular apps. Actually, Angular is more than just an application framework as it is meant to be a real platform in the sense of providing everything you need to write, test, build, deploy, upgrade, and maintain the app. By that notion, the Angular platform adds more platform-oriented building blocks to the overall picture:

• Angular CLI: A CLI tool provided by the team to assist you with starting and managing your project.
• Elements: Angular elements enable the implementation of components as standard web components that can improve interoperability between apps and technologies.
• Schematics: Angular CLI uses a schematics system to manage and execute its command system. You can use schematics to extend the command system to customize scaffolding, and even perform code alterations.
• Universal: Angular Universal enables isomorphic rendering in your Angular apps. In many projects, you might need to use server-side rendering, which can as...

Table of contents

• Title Page
• Copyright and Credits
• PacktPub.com
• Contributors
• Preface
• Becoming a Full-Stack .NET Developer
• Setting Up Your Development Environment
• Creating a Web Application with ASP.NET Core
• Building REST APIs with ASP.NET Core Web API
• Persisting Data with Entity Framework
• Securing the Backend Server
• Troubleshooting and Debugging
• Getting Started with Frontend Web Development
• Getting Started with TypeScript
• App Development with Angular
• Implementing Routing and Forms
• App Development with React
• App Development with Vue
• Moving Your Solution to the Cloud
• Deploying to Microsoft Azure
• Taking Advantage of Cloud Services
• Other Books You May Enjoy