Angular intro

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 dao’s 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 it’s 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. I’m 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 didn’t 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 get’s 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 it’s 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