GDG Devfest talk by Kyaw Zaw Win

1. 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

2. 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)

3. 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)

4. Understanding AngularJS-2
●
Tree structure
●
Rendering
– Platform-browser (AoT)
– Platform-browser-dynamic (JIT)

5. Basic knowledge of scalability
https://www.pinterest.com/pin/1
41370875780051108/
●
Application server scalability
●
Data server scalability
●
One step forward
– Project size
– Businesses

6. 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!

7. 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

8. 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

9. 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

10. Sample Project (Cont.)