Building scalable modular app with Angular2 concept

Building scalable modular app with Angular2 concept

• 1.
  Content ● Introduction ● Basic understanding ofAngularJS-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 modularapp 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 frameworkfor 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 ofscalability https://www.pinterest.com/pin/1 41370875780051108/ ● Application server scalability ● Data server scalability ● One step forward – Project size – Businesses
• 6.
  Basic knowledge ofmodularity ● 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 withAngular-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, toolsand 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 sampleproject 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.)