際際滷

際際滷Share a Scribd company logo
Angular
https://angular.io/
Versions
1. AngularJs (initial release 2010)
 Traditional MVC architecture
2. Angular-2 (released on 2016)
 Rewritten from scratch (no backward compatibility)
 Component based architecture
3. Angular version 3
4. Angular (released on March 2017)
 No core changes from Angular2
 Faster and smaller
5. Angular (release on September 2017)
 Even faster and even smaller
1. Typescript support
2. Service Worker
3. Ahead of Time Compilation (AOT)
4. Dependency Injection
5. Router
Building Progressive Web Apps with Angular
Using
TypeScript
https://www.typescriptlang.org
 Superset of JavaScript
 Compiles to plain JavaScript
 Open source programming language
 Developed by microsoft
 Fully supports EcmaScript 6 features
 let
 class
 lambda functions
 Decorators
 Destructuring imports
Service Worker
https://youtu.be/cmGr0RszHc8?t=265
 Core of the progressive web app
 Enables computation intensive and network intensive code to run in
background
 Cache assets and responses
Examples:
 https://ng-pokedex.firebaseapp.com/pokemon
 https://alligator.io/angular/service-workers/
Ahead of Time Compilation
 Compiles before rendering
 Reduces startup time
 ng build -prod --aot
Dependency Injection
 Dependent does not create its dependencies on its own
 Configured from outside
Router
 Essential for Single Page Applications
 Located in a dedicated module - Router
 Simple configuration
 Configure the routes
 Add a router outlet
 Add links
 Provides programmatic navigation
Demo
Thanks
More from angular
 Unit Test - end to end
 Angular Animation
 Firebase
 MEAN stack

More Related Content

Angular intro

  • 2. Versions 1. AngularJs (initial release 2010) Traditional MVC architecture 2. Angular-2 (released on 2016) Rewritten from scratch (no backward compatibility) Component based architecture 3. Angular version 3 4. Angular (released on March 2017) No core changes from Angular2 Faster and smaller 5. Angular (release on September 2017) Even faster and even smaller
  • 3. 1. Typescript support 2. Service Worker 3. Ahead of Time Compilation (AOT) 4. Dependency Injection 5. Router Building Progressive Web Apps with Angular Using
  • 4. TypeScript https://www.typescriptlang.org Superset of JavaScript Compiles to plain JavaScript Open source programming language Developed by microsoft Fully supports EcmaScript 6 features let class lambda functions Decorators Destructuring imports
  • 5. Service Worker https://youtu.be/cmGr0RszHc8?t=265 Core of the progressive web app Enables computation intensive and network intensive code to run in background Cache assets and responses Examples: https://ng-pokedex.firebaseapp.com/pokemon https://alligator.io/angular/service-workers/
  • 6. Ahead of Time Compilation Compiles before rendering Reduces startup time ng build -prod --aot
  • 7. Dependency Injection Dependent does not create its dependencies on its own Configured from outside
  • 8. Router Essential for Single Page Applications Located in a dedicated module - Router Simple configuration Configure the routes Add a router outlet Add links Provides programmatic navigation
  • 10. Thanks More from angular Unit Test - end to end Angular Animation Firebase MEAN stack

Editor's Notes

  • #3: We all know, Angular had couple of nicknames in the recent past. Angular v1 was called as angularJs. because NodeJs was grabbing the market in that period. So google picked that Js part and prepended it to their product. Angular v2 was called as angular 2. Angular v3 disappeared like windows 9 and iphone 9. Angular v4 was released on March (2017) and since this Google requested to call angular as angular 6 months later this (September) Angular v5 was released. How component based architecture differs from Traditional MVC is by giving importance to independence over code reuse. We know In Java Spring projects we organize all views in one package, all controllers in one, all Service classes in another and all daos in another. Any controller can use any number of service classes so are the service classes and daos. But in component based architecture every feature will be developed in one package with dedicated controller, service and dao. But in component based architecture we create component in a way we can reuse and we bundle specific components together as a module, each module will serve a different functionality or feature. For example we build pwm project and it has 2 optional features one is FileUpload and another is InterPortfolioTransfer, We can easily remove and plug the feature according to customer requirements if they are components. Then they released version 2 of angular, they called it as angular 2. They claimed they rewrote it from the scratch to shift it to Component based architecture from age old MVC framework. So its not backward compatible, and i still wonder why nobody pointed a finger. Again after 6 months they released Angular 4 and announced that they would like to call angular as angular finally. They announced there are no core changes and fully backward compatible but now Angulr is faster, smaller and developer friendly. So Where is Angular 3. Nobody knows.. It lives with Windows 9 and Iphone 9 most likely. let it be. 3 is not there due to misalignment of router packages.
  • #4: Even before AngularJS exists, there were many popular js frameworks. So why did google introduced Angular... and most importantly using Google Chrome Web browser, We all know google chrome was launched by our current Google CEO Sundar Pichai. Im not telling that he is promoting his brain child. But people think like that... Google strongly believes that Mobile Native apps are going to die. And the future is on Progressive Web Apps which only relies on the browser and not on mobile / desktop platform Fire base, which was acquired by google couple of years back. It is a mobile and web application development platform. Now it has become the complementary technology for Angular. Dependency Injection, Spring was marketed successfully for its core concepts Dependency Injection and Aspect Oriented Programming. Angular has adopted the Dependency Injection. Angular Animations - Xwalk, react-native didnt become successful because they lack in graphics and animations. They were not as good as mobile native app which is built with Android or Objective C. Because of these reasons angular is really working hard on their animations. Segregated animation packages from core. The dedicated package is Angular animations Router. In our traditional web app, every time we switch to a different page there is a backend call. Angular want to avoid it to be progressive web app builder. Now the page routing has been made easier with Angular router. And FYI, they cross selling their product, Google Analytics with it. More Information later. New router life cycle events. Tracks the routing cycle. Unit Tests is the core for any kind of a stable development.
  • #5: Es6 let, modules, lambda functions, decorators, destructuring imports TypeScript is free and open source pl developed by ms. superset of js and optional static typing. It transcompiles into js
  • #6: Service Worker - Revolution of the web platform - offline first: SW is the core of progressive web apps Resource caching and push notification Cache for offline content Cache assets Webworker is separate execution context. Faster More responsive More battery efficient Enables better testing Supported in every major browser Challenges No dom access No shared memory with ui Serialization Concurrency issues Difficult to extract . :/ Mp hard Service worker can handle background network tasks for our app. 60 fps is about the limit how human eye can detect Js - non blocking asynchronous io AppCache vs ServiceWorker https://www.youtube.com/watch?v=BfL3pprhnms How to setup basic service worker (with caching) Using gulp Service worker requires us to have https chrome://serviceworker-internals https://www.youtube.com/watch?v=FpJ_XyPmWzY Service Workers Introduction - service worker registration
  • #7: Ahead of time compiler converts code even before browser downloads and runs it. The traditional js is well known for being an interpreted language, which is Js code will be read by browser only when it gets to render it. Now the time has come for JS to change. Ng build --aot -prod Reduces start up time
  • #8: Class should not configure its dependent objects statically, instead it should be fed from outside
  • #9: Configure the routes Each routes determines which component to be visible when user navigates to a certain url Router outlet Displays a corresponding component when a route become actve Add links Add links for user to access