Post on 14-Apr-2017
transcript
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
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
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
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…
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)
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
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 …
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);
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">
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)">
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'], })
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>
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" />
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">
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">
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 !
P L AT F O R M T O O L S
• 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
• 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
• 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
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
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
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
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
Let’s have a pause…
T H E A N G U L A R - R E A C T D E B AT E
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
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
B A C K T O T H E R O A D
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
2 0 1 6
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
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
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/
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…