Skip to content

Instantly share code, notes, and snippets.

@rdwivedi
Forked from sinedied/angular.md
Created May 16, 2018 06:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rdwivedi/dcd6d987037daa032cb0823f75c9b669 to your computer and use it in GitHub Desktop.
Save rdwivedi/dcd6d987037daa032cb0823f75c9b669 to your computer and use it in GitHub Desktop.
The Missing Introduction to Angular 2 and Modern Design Patterns

Introduction to Angular

Angular (aka Angular 2) is a new framework completely rewritten from the ground up, replacing the famous AngularJS framework (aka Angular 1.x).

More that just a framework, Angular should now be considered as a whole platform which comes with a complete set of tools, like its own CLI, debug utilities or performance tools.

Getting started

Newcomer

If you're new to Angular you may feel overwhelmed by the quantity of new concepts to apprehend, so before digging in you may want to start with this progressive tutorial that will guide you step by step into building a complete Angular application.

Angular 1 veteran

If you come from Angular 1 and want to dig straight in the new version, you may want to take a look at the Angular 1 vs 2 quick reference.

Style guide

Good news, there is a standard Angular style guide written by the team.

More that just coding rules, this style guide also gives advices and best pratices for a good application architecture and is an essential reading for starters.

Cheatsheet

Until you know the full Angular API by heart, you may want to keep this cheatsheet that resumes the syntax and features on a single page at hand.

Unit testing

A good starting point for learning unit testing with Angular is the official testing guide.

But as you will most likely want to go bit further in real world apps, these example test snippets are also very helpful to learn how to cover most common testing use cases.

Going deeper

Even though they are not mandatory, Angular was designed for the use of design patterns you may not be accustomed to, like reactive programming, unidirectional data flow and centralized state management.

These concepts are difficult to resume in a few words, and despite being tightly related to each other they concern specific parts of an application flow, each being quite deep to learn on its own.

You will essentially find here a list of good starting points to learn more on these subjects.

Reactive programming

Angular uses RxJS to implement the Observable pattern. An Observable is a stream of asynchronous events that can be processed with array-like operators.

From promises to observables

While Angular 1 used to rely heavily on Promises to handle asynchronous events, Observables are now used instead in this new Angular version. Even though in specific cases like for HTTP requests, an Observable can be converted into a Promise, it is recommended to embrace the new paradigm as it can a lot more than Promises, with way less code. This transition is also explained in the Angular tutorial.

Learning references

Unidirectional data flow

In opposition with Angular 1 where one of its selling points was two-way data binding, Angular now enforces unidirectional data flow. What does it means? Said with other words, it means that change detection cannot cause cycles, which was one of Angular 1 problematic points. It also helps to maintain simpler and more predictable data flows in applications, along with substantial performance improvements.

Wait, then why the Angular documentation have mention of a two-way binding syntax?

If you look closely, the new two-way binding syntax is just syntactic sugar to combine two one-way bindings (a property and event binding), keeping the data flow unidirectional.

This change is really important, as it was often the cause of performance issues with Angular 1, and it one of the pillars enabling better performance in new Angular apps.

While Angular tries to stay pattern-agnostic and can be used with conventional MV* patterns, it was designed with reactive programming in mind and really shines when used with reactive data flow patterns like Redux, Flux or MVI.

Centralized state management

As applications grow in size, keeping track of the all its individual components state and data flows can become tedious, and tend to be difficult to manage and debug.

The main goal of using a centralized state management is to make state changes predictable by imposing certain restrictions on how and when updates can happen, using unidirectional data flow. This approach was first popularized with React with introduction of the Flux architecture. Many libraries emerged then trying to adapt and refine the original concept, and one of these gained massive popularity by providing a simpler, elegant alternative: Redux. Redux is at the same time a library (with the big R) and a design pattern (with the little r), the latter being framework-agnostic and working very well with Angular.

The redux design pattern is based on these 3 principles:

  • The application state is a single immutable data structure
  • A state change is triggered by an action, an object describing what happened
  • Pure functions called reducers take the previous state and the next action to compute the new state

The core concepts behind these principles are nicely explained in this example (3 min).

Which library to use?

You can make Angular work with any state management library you like, but your best bet would be to use @ngrx/store. It works the same as the popular Redux library, but with a tight integration with Angular and RxJS, with some nice additional developer utilities.

Here are some resources to get started:

When to use it?

You may have noticed that the most starter templates does not include a centralized state management system out of the box. Why is that? Well, while there is many benefits from using this pattern, the choice is ultimately up to your team and what you want to achieve with your app.

Keep in mind that using a single centralized state for your app introduces a new layer a complexity that might not be needed, depending of your goal.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment