Modern Web with
Angular 2
As a Platform
Anas Raza Firdousi
@AnasFirdousi
PayPal
Single Page Application
Traditional Web Applications
Browser
Server
Initial Request
HTML Response
1
Form POST
HTML Response
2
Ajax Based Application
Browser
Server
Initial Request
HTML Response + JavaScript Code
1
Ajax
XML / JSON
Ajax
XML / JSON
2
3
$.get(“ . . . “)
$.post(“ . . . “)
Processing
XMLHttpRequest $.get(“...”)
XMLHttpResponse $.post(“...”)
Ajax Based Application
Single Page Application
Browser
Server
Initial Request
HTML Response + Angular App
1
Http Request
JSON / Resource Files
Http Request
JSON / Resource Files
2
3
$.get(“ . . . “)
$.post(“ . . . “)
Minimal
Processing
Templating & Rendering
+
Major Processing
Static File Server
+
Data Endpoints
+
Business Validations
Library, Framework & Platforms
What’s a library?
Suite of pre-written code
Provides utility functions
Platform agnostic
Quick DOM Traversal
Easy DOM Manipulation
Simple DOM Event Handling
Ajax
. . .
? Modularity
? App State Management
? Data Flow Management
Write less, creates a lot of mess
What’s a framework?
A lot of stuff libraries do
Modularity
App State Management
Data Flow Management
Testing
What’s a platform?
A lot of stuff libraries do
A lot of stuff frameworks do
Languages & Tooling
Cross Platform & Cross Domain
Out-of-the-box feature support
Much more . . .
Angular 2 as a Platform
Angular 2 as a Platform
Language
JS (ES5)
JS (ES6)
TypeScript
Dart
Modularization
DI
Lazy Load
Decorators
Zones
Render
Optimize
Compile
Change
Render
Cross Domain
Browser
Server
Mobile
Desktop
Tooling
CLI
Augury
TS Tools
Codeylzer
More . . .
FRP
Offline
PWA
Native
1
0.5
0
Angular 1
Oct 2015
Angular 1
May, 2016
Angular 2
May 2016
1.1M
1.3M
360K
Based on 30-day active visitors to Angular docs
Are people really using it ?
Inside an Angular 2 App
Breaking the UI into Components
Breaking the UI into Components
Footer
List
Header
Search
App
H
S
L
F
Op
LI
LI
LI
Keys of an Angular 2 App
App
H
S
L
F
Op
LI
LI
LI
Server
// footer.ts
@Component({
})
export class Footer {
constructor(){
}
onClick() {
}
}
// footer.ts
@Component({
})
export class Footer {
constructor(){
}
onClick() {
}
}
// footer.ts
@Component({
})
export class Footer {
constructor(){
}
onClick() {
}
}
// footer.ts
@Component({
})
export class Footer {
constructor(){
}
onClick() {
}
}
Service 1
Service 2
Service 3
Service 4
Service 5
DI
Data Binding
Templating
Http
Routing
. . .
Component
Services
Dependency Injection
//todoservice.ts
@Injectable()
export class TodoService{�
todos:Todos[] = [];
getTodos(){
Return this.todos;
}
�}
//todoservice.ts
@Injectable()
export class TodoService{�
todos:Todo[] = [];
getTodos(){
Return this.todos;
}
�}
//todoservice.ts
@Injectable()
export class TodoService{�
todos:Todo[] = [];
getTodos(){
return this.todos;
}
�}
//todoservice.ts
@Injectable()
export class TodoService{�
todos:Todo[] = [];
getTodos(){
return this.todos;
}
�}
Component
Dependency Injection
Services
Template
Data Binding
Directive
+
+
Pipes
Custom Pipes
Event & Data Flow
Top to Bottom
Bottom to Top
Event & Data Flow
Top to Bottom
Bottom to Top
Event & Data Flow
Top to Bottom
Bottom to Top
[ data ]
data
data
data
data
Event & Data Flow
Top to Bottom
Bottom to Top
Event & Data Flow
Top to Bottom
Bottom to Top
Event & Data Flow
Top to Bottom
Bottom to Top
( event )
event
event
event
Let’s live code?
Caution !
github.com/afirdousi/ipc-2016-angular2-app
Go play with it!
What we just saw?
Angular 2 : Building blocks
Service
Data & Event Flow
Component
Templating
DI
Pipes
Angular 2 Show-stoppers
Performance
Productivity
Versatility
Compiler Optimizaton
HTML Template
Deploy
HTML Template
Optimized JavaScript
Deploy
Template Compiler
Size of Application
200
150
100
50
0
Angular 2
Angular 1
Angular 2
NOW
170K
56K
45K
Your Code
How to split?
Lazy Loading
1
4
3
2
Via routes!
Lazy Loading
1
Route 1
Lazy Loading
2
Route 2
Lazy Loading
Angular Universal
Performance
Productivity
Versatility
augury.angular.io
cli.angular.io
Workflow Automation: Angular CLI
Create Project
Generate Components
Dev Server
Deploy!
Scaffold Tests
Lint & Format
Generate Routes
Run Tests
Preprocess CSS
Deployment Build
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
Previously...
Create a project directory
Write a tsconfig.json file
Write a typings.json file
Write a package.json file
Install packages
Create folder structure
Write app.component.ts
Write main.ts
Write index.html
Write style.css
npm start
With Angular CLI...
ng new AwesomeApp
cd AwesomeApp
ng serve
angular.io/styleguide
3rd Party UI Toolkits - For Angular
http://valor-software.com/ng2-bootstrap/
https://github.com/primefaces/primeng
material.angular.io
Performance
Productivity
Versatility
Unified Development
Mobile Development
mobile.angular.io
Native Mobile Apps
Installed Desktop
Chrome
Node
Electron
HTML + JS
Win/Mac/Linux
Menus, notifications, etc.
Installed Desktop
Chrome
Node
Electron
Faster
Platform APIs
Auth, DB, hardware
Angular 2 is not a library
Angular 2 is not a framework
Angular 2 is a platform
Angular 2 -
Onsite On-Demand Training
bit.ly/ng-training-onsite
bit.ly/request-ng-training
Code: IPC2016
Thanks!
@AnasFirdousi
anasfirdousi.com
inj
inj
inj
inj
inj
inj
inj
inj
inj
I want “UserService”
I dont have “UserService”
“UserService”
inj
inj
“UserService”
User
Service
User
Service
inj
User
Service
inj
User
Service
inj
User
Service
User
Service
inj
User
Service
inj
User
Service
inj
User
Service
inj
inj
“UserService”
User
Service
User
Service
inj
User
Service
inj
User
Service
inj
User
Service
User
Service
inj
User
Service
inj
User
Service
inj
User
Service