Angular is a framework for building client applications. It has gone through multiple versions with Angular 2 being a complete rewrite and introducing a component-based architecture. Key features of Angular include TypeScript support, service workers, ahead of time compilation, dependency injection, and routing. It aims to help build progressive web apps.
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
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
#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