The Angular road from 1.x to 2.0
-
Upload
vassilis-pitsounis -
Category
Software
-
view
3.032 -
download
1
Transcript of The Angular road from 1.x to 2.0
![Page 1: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/1.jpg)
T H E A N G U L A R R O A D F R O M 1 . X T O 2 . X
VA S S I L I S P I T S O U N I S
![Page 2: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/2.jpg)
VA S S I L I S P I T S O U N I S
Web Developer since 2000Front End mind & code oriented Having (serious) fun with
G I T H U B . C O M / VA P I T S
@ VA P I T S
F O L L O W M E AT
L I N K E D I N . C O M / I N / VA P I T S
![Page 3: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/3.jpg)
C O N T E N T S
• 2.0 Facts & Strengths
• Why TypeScript
• Now & Then
• Platform Tools
• Starters
• The Angular React Debate
• Tip: Move code logic above framework
• Q & A
![Page 4: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/4.jpg)
FA C T S 2 . 0• It’s a complete new approach, NOT
an Angular 1.x upgrade
• Supports several languages including plain JavaScript, TypeScript, and Dart.
• It is MUCH (really) faster.
• Provides you everything that you need to create a web app
• More than a framework…
![Page 5: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/5.jpg)
S T R E N G T H S
• Perfomance
• Server-side rendering
• Routing
• Community and team
• CLI - Universal - Mobile
• TypeScript (yes, I admit it finally)
![Page 6: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/6.jpg)
W H Y T Y P E S C R I P T
• Angular 2.0 favourite
• Can compile to any JS version
• Optionally static typing and type inference
• Enhanced IDE support
• Adoption
![Page 7: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/7.jpg)
T H E NN O W CAN
I
WALK
THE
SAME
ROAD?
N G - R E P E AT N G - M O D E L
N G - C O N T R O L L E R …
* N G F O R [ ( N G M O D E L ) ]
@ C O M P O N E N T …
![Page 8: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/8.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
<body ng-app="myApp"> import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);
![Page 9: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/9.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
<body ng-app="myApp"> import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);
<div ng-class="{active: isActive}"><div [ngClass]="{active: isActive}"> <div [class.active]="isActive">
![Page 10: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/10.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
<body ng-app="myApp"> import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);
<div ng-class="{active: isActive}"><div [ngClass]="{active: isActive}"> <div [class.active]="isActive">
<button ng-click="myFunction($event)"> <button (click)="toggleImage($event)">
![Page 11: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/11.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
<body ng-app="myApp"> import { bootstrap } from '@angular/platform-browser-dynamic'; import { AppComponent } from './app.component'; bootstrap(AppComponent);
<div ng-class="{active: isActive}"><div [ngClass]="{active: isActive}"> <div [class.active]="isActive">
<button ng-click="myFunction($event)"> <button (click)="toggleImage($event)">
ng-controller
@Component({ selector: ‘router-outlet', templateUrl:’app/my.template.component.html', styleUrls: [‘app/my.template.component.css'], })
![Page 12: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/12.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
ng-href<a [href]="angularDocsUrl">Angular Docs</a> <a [routerLink]="['Home']">Home</a>
![Page 13: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/13.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
ng-href<a [href]="angularDocsUrl">Angular Docs</a> <a [routerLink]="['Home']">Home</a>
<input ng-model="myScope"/> <input [(ngModel)]="myVariable" />
![Page 14: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/14.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
ng-href<a [href]="angularDocsUrl">Angular Docs</a> <a [routerLink]="['Home']">Home</a>
<input ng-model="myScope"/> <input [(ngModel)]="myVariable" />
<li ng-repeat="user in users"> <li *ngFor="let user of users">
![Page 15: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/15.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
ng-href<a [href]="angularDocsUrl">Angular Docs</a> <a [routerLink]="['Home']">Home</a>
<input ng-model="myScope"/> <input [(ngModel)]="myVariable" />
<li ng-repeat="user in users"> <li *ngFor="let user of users">
<div ng-style="{color: colorPreference}"><div [ngStyle]="{color: colorPreference}"> <div [style.color]="colorPreference">
![Page 16: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/16.jpg)
A N G U L A R 1 . X A N G U L A R 2 . 0
ng-href<a [href]="angularDocsUrl">Angular Docs</a> <a [routerLink]="['Home']">Home</a>
<input ng-model="myScope"/> <input [(ngModel)]="myVariable" />
<li ng-repeat="user in users"> <li *ngFor="let user of users">
<div ng-style="{color: colorPreference}"><div [ngStyle]="{color: colorPreference}"> <div [style.color]="colorPreference">
orderBy & filter expresión N O N E !
![Page 17: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/17.jpg)
P L AT F O R M T O O L S
![Page 18: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/18.jpg)
• Generate a New Project
• Generate Components, Directives, Pipes and Services, Routes
• Creating a Build
• Running Unit Tests
• Running End-to-End Tests
• Deploying the App via GitHub Pages
• Support for offline applications
• CSS preprocessor integration
• 3rd Party Library Installation
H T T P S : / / C L I . A N G U L A R . I O
![Page 19: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/19.jpg)
• CLI, that helps a lot…
• SERVER
• E2E
• UNIT TESTS
• READY TO GO
• ANGULAR OFFICIAL SUPPORT - PLANS TO MERGE
P R O S C O N S
• Early Beta state
H T T P S : / / C L I . A N G U L A R . I O
![Page 20: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/20.jpg)
• Super Easy
• Insane perfomance
• Works with your current 2.0 project
H T T P S : / / U N I V E R S A L . A N G U L A R . I O
• SEO Friendly
• Social sites preview finally works
![Page 21: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/21.jpg)
H T T P S : / / M O B I L E . A N G U L A R . I O
Create an installable mobile web app with Angular CLI
Make the App Installable with Web App Manifest
Add an app shell component to the App
Add basic offline capabilities with Service Worker
![Page 22: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/22.jpg)
A N G U L A R 2 . 0 S TA R T E R S
A N G U L A R 2 W E B PA C K S TA R T E R
A N G U L A R 2 - W E B PA C KH T T P S : / / G I T H U B . C O M / P R E B O O T / A N G U L A R 2 - W E B PA C K
H T T P S : / / G I T H U B . C O M / A N G U L A R C L A S S / A N G U L A R 2 - W E B PA C K - S TA R T E R
![Page 23: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/23.jpg)
A N G U L A R 2 W E B PA C K S TA R T E R
• Popular
• Covers all needs
• Ready to go
• Webpack
• TypeDoc
• Not much, maybe more than you need if you build a small app
P R O S
C O N S
![Page 24: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/24.jpg)
A N G U L A R 2 - W E B PA C K
• Covers all needs
• Ready to go
• Webpack
• Smaller size
• TypeDoc Documentation
• Not big community around
• No Releases strategy
P R O S
C O N S
![Page 25: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/25.jpg)
Let’s have a pause…
![Page 26: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/26.jpg)
T H E A N G U L A R - R E A C T D E B AT E
![Page 27: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/27.jpg)
H E R E A R E S O M E U S E R S C O M M E N T I N G R E L AT E D A R T I C L E S
![Page 28: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/28.jpg)
![Page 29: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/29.jpg)
A FA I R C O M PA R I S O N I S N O T P O S S I B L E , B U T:
A N G U L A R V S R E A C T
• Both are great solutions • Still Angular is a framework
(or more) React is a library • Angular is HTML Centric • React is JS Centric
![Page 30: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/30.jpg)
B A C K T O T H E R O A D
![Page 31: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/31.jpg)
M O V E Y O U R L O G I C A B O V E F R A M E W O R K
S E E T H E T R A N S I T I O N A S A N O P P O R T U N I T Y T O
![Page 32: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/32.jpg)
2 0 1 6
![Page 33: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/33.jpg)
U N T I L N O W ( W E L L U S U A L LY ) W E F O L L O W T H I S A P P R O A C H
Fram
ewo
rkC O D E L O G I C M O D U L E S S E R V I C E S
C O M P O N E N T S D I R E C T I V E S C O N T R O L L E R S
R E S U LT
![Page 34: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/34.jpg)
G O A B O V E F R A M E W O R K A N D F E E L F R E EFr
amew
ork
C O D E L O G I C
S E R V I C E SC O M P O N E N T S D I R E C T I V E S
R E S U LT
Log
ic
S I M P L E & E A S Y
![Page 35: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/35.jpg)
R E S O U R C E S
Angular-CLI https://cli.angular.io/
Angular Universalhttps://universal.angular.io/
Angular Mobilehttps://mobile.angular.io/ Angular2 Webpack Starter https://github.com/AngularClass/angular2-webpack-starter
angular2-webpack https://github.com/preboot/angular2-webpack
Documentationhttps://angular.io/docs/
![Page 36: The Angular road from 1.x to 2.0](https://reader033.fdocuments.in/reader033/viewer/2022051006/58effd291a28abde7a8b45c3/html5/thumbnails/36.jpg)
G I T H U B . C O M / V A P I T S @ VA P I T S L I N K E D I N . C O M / I N / VA P I T S
Q & A
Follow me…