AngularJS2
https://angular.io/

Building Scalable Modular SPA (Desktop Browser)

By

Kyaw Zaw Win

Content

Introduction

Basic understanding of AngularJS-2

Basic knowledge of scalability

Basic knowledge of modularity

Basic comparison with AngularJS-1

Keys features, tools and dependecies of AngularJS-2

Hands on knowledge sharing with scalability-in-mind anguarjs-2 sample modular project

Introduction

Building scalable modular app with AngularJS 2

Scalable (capability to cope and perform under an increased or expanding workload, cost effectively)

Modularity (loose coupling independent each other)

Understanding AngularJS-2

One framework for all (desktop, mobile web, standalone desktop app, hybrid app, native mobile app - reactnative)

Built-in on-demand loading and dependencies injection for code-splitting (no need hacky ways)

Speed and Performance (eg. No more laggy dirty checking. Use zone.js)

Tightly integrated with npm (node modules)

No more headache with SEO! (Angular Universal)

Buit-in AoT and JIT (Platform-browser vs Platform-browser-dynamic)

Understanding AngularJS-2

Tree structure

RenderingPlatform-browser (AoT)

Platform-browser-dynamic (JIT)

Basic knowledge of scalability

https://www.pinterest.com/pin/141370875780051108/

Application server scalability

Data server scalability

One step forward

Project size

Businesses

Basic knowledge of modularity

Module is a module which are not depend on each other.

Example

Puzzles (one complete big puzzle image is made of many small puzzles)

Human Body (a complete human body is made of many parts, eyes, nose, mouth, arms, lags). Human don't die either one or more part get removed!

Basic comparison with Angular-1

Jquery-Lite (native dom API)

Slow dirty checking a.k.a digest loop (ngzone - zonejs)

No built-in on-demand loading (No scalability and performance)

Extend core to inject dependencies dynamically

Hook into ui-router life cycle with promise to load scripts on-demand

Not universal (bad seo experience)

Broadcast/emit (RxJS observer/observable) way to by pass scope changes

Keys features, tools and dependecies of AngularJS-2

Npm (node package manager)

Typescript/dart/coffeescript preprocessor

Zonejs (change detection)

RxJS (observable)

AngularJS-2 module in tree structure

Dependencies Injection pattern

EventAggregator pattern

Sample Project

A sample project which has user login, register, user listing, update user profile, todo feature and todo item count for each user.

Modules

Core module (compulsory, include once)

Shared/common module (optional)

User module

Todo module

Sample Project (Cont.)