Web Technologies

Web application development has evolved. It has become a powerful, rich, and complex. In yesteryear’s web applications, the heavy lifting was done on the server side; only servers had the processing power to build rich and complex applications. Browsers presented data to the users, captured user input, and sent it back to the server for major processing. Browsers and JavaScript code on the browser performed basic validations.

Over the years, client machines became more powerful and browser technologies evolved. HTML, CSS, and JavaScript languages have transformed. ES (ECMAScript) is a language specification created to standardize JavaScript. Over time, browsers have adapted features standardized with ES.

Browsers have widely adapted ES5, a version of JavaScript specification released in 2009. It made the JavaScript language a first-class citizen in programming languages. A minor version, 5.1, was released in 2011; however, ES6, or ES2015, has provided major improvements to the language and allowed developers to take the best advantage of the platform. So far, ECMAScript updates have been made yearly. Currently (at the time of authoring this book), we are at ES9/ES2018.

As more capabilities are added to the language and to browsers, more features are moved to the client on the browser, the complexity of browser applications increases, and new-generation web applications take advantage of sophisticated HTML5, JavaScript, and CSS3 features.

Additional complexity, scope for reusability, and patterns mean there is a need for frameworks and libraries. Angular is one of the best open source frameworks available. A tremendous number of applications and developers have taken advantage of this framework.

Introduction to Angular

Angular is a framework for building front-end applications. It is an open source project driven by Google. Contributors to the framework are from around the world. Angular helps build applications that cater to multiple device form factors—desktops, tablets (e.g., iPads and Android devices), and mobile phones. This book primarily focuses on browser applications for desktop screens.

Angular’s Roots in MV*

The AngularJS 1.x framework began as an MV∗ framework, which could be MVC or MVVM. The MVC architectural pattern—Model-View-Controller—is popular. This pattern helps build highly cohesive, loosely coupled, modular applications. It helps with the separation of concerns.

Figure 1-1 is a representation of the MVC pattern.

There is a variation to the pattern called MVVM, or Model-View-ViewModel. It is suitable for an application that extensively uses data binding on the user interface.

With MVVM, a model represents a domain entity. Typically, it is used with a business logic implementation. The model object is independent of the presentation logic. The same object might be shown on different views or screens.

Hence, the model object may not be easily bindable to controls on the view. The pattern recommends creating a ViewModel, which is a separate object that is specific to each view or screen. It is easily bindable with the controls. We transform model to a view model. Figure 1-2 is a representation of the MVVM pattern.

Angular from AngularJS

Front-end web application development moved in directions that either put together reusable components or built libraries that created those building blocks/components.

Angular version 2.x and upward saw major redesign. The 1.x versions are referred to as AngularJS. Today’s framework is known as Angular. The convention is to refer to the 1.x versions of the framework as AngularJS and everything beyond version 2.0 is just Angular.

Angular is a modern framework that primarily uses components to create views. Although components are the building blocks for views, during the course of the book, you also learn about modules, services, dependency injection, and so forth.

Angular with TypeScript had the most traction in the developer community. This book extensively uses TypeScript when developing Angular applications.

TypeScript

TypeScript is a superset of ECMAScript. It is an open source project backed by Microsoft. It supports data types. This book uses the TypeScript language for building an Angular application.

As discussed, ES6 (ECMAScript), or ES2015, was a major upgrade to JavaScript as a language. TypeScript compliments JavaScript features. TypeScript supports all JavaScript features, including data types, interfaces, generics, and enums. TypeScript compiles the code in browser-understandable JavaScript. It can be integrated with major bundling solutions like Webpack.

As you will see in this book, you can build high-quality applications that take advantage of the powerful features that TypeScript provides beyond JavaScript.

Material Design

Material Design is Google’s design language, which provides a rich set of guidelines. This design language mimics real-world objects, hence the “material” metaphor. Components and controls on the user interface show depth and texture, cast shadows, and use animation in a meaningful way.

Conclusion

Angular, TypeScript, and Material Design are a powerful combination used to build rich web UI applications.

Angular helps build browser applications with high reusability, consistency, and scalability. This framework helps build single-page applications with out-of-the-box features, like routing. It enables easy communication with RESTful HTTP services, and manages and validates user input with sophisticated features building forms.

TypeScript is a superscript of ECMAScript. It allows you to use data types. It provides great integration with code editors and IDEs (integrated development environments). It integrates well with bundling tools like Webpack.

Angular Material provides components that confine to Material Design guidelines out of the box. It eases integrating the design language with an Angular and TypeScript application.

This chapter began with the context and history of web applications, described Angular and its evolution, and introduced TypeScript. And at the end, it introduced Material Design and the value it brings to the user experience and UI development.

References