The Art of Angular in 2016 - Devoxx UK 2016
50
The Art of in 2016 Photos by McGinity Photo Matt Raible • @mraible
-
Upload
matt-raible -
Category
Technology
-
view
1.698 -
download
0
Transcript of The Art of Angular in 2016 - Devoxx UK 2016
The Art of in 2016
Photos by McGinity Photo
Matt Raible • @mraible
Blogger on raibledesigns.com
Founder of AppFuse
Father, Skier, Mountain Biker, Whitewater Rafter
Web Framework Connoisseur
Who is Matt Raible?
Bus Lover
How to Become an ArtistPart 1 of 3: Learn the Basics on Your Own
Take some time and try various mediums of artRecognize your strengthsDo your research and learn the basicsGet the supplies you will needObserve the world around youMake time for your art every daySeek out the opinions of othersDevelop your own style http://www.wikihow.com/Become-an-Artist
Jobs on LinkedInMay 2016
0
1,250
2,500
3,750
5,000
Back
bone
Angu
lar
Embe
r
Knoc
kout
Reac
t
Job Growth
0
750
1500
2250
3000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React
LinkedIn SkillsMay 2016
0
75,000
150,000
225,000
300,000
Back
bone
Angu
lar
Knoc
kout
Embe
r
Reac
t
LinkedIn SkillsMay 2016
0
17,500
35,000
52,500
70,000
Back
bone
Knoc
kout
Embe
r
Reac
t
Skills Growth
0
75000
150000
225000
300000
February 2014 January 2015 September 2015 April 2016 June 2016
Ember.js AngularJS Backbone Knockout React
Google Trends
What about Angular 2?
Who wants to learn ?
Hello World with AngularJS<!doctypehtml><htmlng-app><head><title>HelloWorld</title></head><body><div><label>Name:</label><inputtype="text"ng-model="name"placeholder="Enteranamehere"><hr><h1>Hello{{name}}!</h1></div><scriptsrc="http://code.angularjs.org/1.5.6/angular.min.js"></script></body></html>
Hello World with Angular 2<html><head><title>Angular2QuickStart</title><metaname="viewport"content="width=device-width,initial-scale=1"><linkrel="stylesheet"href="styles.css"><!--1.Loadlibraries--><!--Polyfills,forolderbrowsers--><scriptsrc="node_modules/core-js/client/shim.min.js"></script>
<scriptsrc="node_modules/zone.js/dist/zone.js"></script><scriptsrc="node_modules/reflect-metadata/Reflect.js"></script><scriptsrc="node_modules/systemjs/dist/system.src.js"></script>
</head></html>
Hello World with Angular 2<!--2.ConfigureSystemJS--><script>System.config({packages:{app:{format:'register',defaultExtension:'js'}}});System.import('app/main').then(null,console.error.bind(console));</script></head><!--3.Displaytheapplication--><body><my-app>Loading...</my-app></body></html>
app/main.ts
import{bootstrap}from‘@angular/platform-browser-dynamic';import{AppComponent}from'./app.component';
bootstrap(AppComponent);
app/app.component.ts
import{Component}from‘@angular/core’;
@Component({selector:'my-app',template:'<h1>MyFirstAngular2App</h1>'})exportclassAppComponent{}
Angular 2 ChoicesChoose a language
JavaScript (ES6 or ES5)
TypeScript
Dart
Anything that transpiles to JS
Setup dev environment
Install Node
Choose Package Manager
Choose Module Loader
Choose Transpiler
Choose Build Tool
ES6 vs TypeScripthttps://kangax.github.io/compat-table/es6/
You still have to use a transpiler to get ES6 support in IE11
Babel
Traceur
Who’s using Babel?
Emerging StacksTypeScript
Package Manager: npm
Module Loader: SystemJS
Transpiler: Traceur
Build Tool: Broccoli
ES6
Package Manager: JSPM
Module Loader: SystemJS
Transpiler: Babel
Built Tool: Gulp
Getting Started
Angular 2 QuickStart
https://github.com/angular/quickstart
Angular 2 Seed
https://github.com/mgechev/angular2-seed
Angular CLI
https://github.com/angular/angular-cli
Angular 2 Demo!Start with angular-cli
Build Search Feature
Data via HTTP
Unit Tests
Integration Tests
Built-in Components
<div*ngIf="str=='yes'"></div><div[ngSwitch]="myVar"><div*ngSwitchWhen="'A'"></div></div><div[ngStyle]="{color:colorinput.value}"></div><div[ngClass]="{bordered:true}"></div><div*ngFor="letitemofitems;letnum=index"></div>
Angular 2 FormsForms can be complex
To help, Angular provides
Controls
Validators
Observers
ControlletnameControl=newControl("Abbie");letname=nameControl.value;//->Abbie//nowyoucanquerythiscontrolforcertainvalues:nameControl.errors//->StringMap<string,any>oferrorsnameControl.dirty//->falsenameControl.valid//->true
<inputtype="text"ngControl="name">
Control GroupletvehicleInfo=newControlGroup({make:newControl('VW'),model:newControl('DeluxeSamba'),year:newControl('1966')});
vehicleInfo.value;//->{//make:"VW",//model:"DeluxeSamba",//year:"1966"//}
FORM_DIRECTIVES
import{Component}from‘@angular/core';import{FORM_DIRECTIVES}from‘@angular/common';@Component({selector:'vehicle-form',directives:[FORM_DIRECTIVES],
ngForm
directives:[FORM_DIRECTIVES],template:`<h2>VehicleForm</h2><form#f="ngForm"(ngSubmit)="onSubmit(f.value)"><labelfor="name">Name</label><inputtype="text"id="name"placeholder="Name"ngControl="name"><buttontype="submit">Submit</button></form>`
ngSubmit
exportclassVehicleForm{onSubmit(form:any):void{console.log('formvalue:',form)}}
FormBuilder
exportclassVehicleFormBuilder{myForm:ControlGroup;
constructor(fb:FormBuilder){this.myForm=fb.group({'name':['Hefe']})}}
ngFormModel
<form[ngFormModel]="myForm"(ngSubmit)="onSubmit(myForm.value)">
<inputtype="text"id="name"placeholder="Name"[ngFormControl]="myForm.controls['name']">
Validation
constructor(fb:FormBuilder){this.myForm=fb.group({'name':['',Validators.required]})}
Validation
<divclass="form-group"[class.has-error]="!myForm.find('name').valid&&myForm.find('name').touched">
Validation
<inputtype="text"id="name"placeholder="Name"[ngFormControl]="myForm.controls['name']"#name="ngForm">
<span*ngIf="!name.control.valid"class="help-block">Nameisinvalid</span><span*ngIf="name.control.hasError('required')"class="help-block">Nameisrequired</span>
Data ArchitecturesMVW / Two-way binding
Flux
Observables
Observables and RxJSPromises emit a single value whereas streams emit many values
Imperative code “pulls” data whereas reactive streams “push” data
RxJS is functional
Streams are composable
Style GuidesJohn Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
https://angular.io/docs/ts/latest/guide/style-guide.html
Minko Gechev’s Angular 2 Style Guide
https://github.com/mgechev/angular2-style-guide
Upgrading from Angular 1.x to 2.xBig Bang
Incremental
ngUpgrade import{UpgradeAdapter}from‘@angular/upgrade';
varadapter=newUpgradeAdapter();varapp=angular.module('myApp',[]);
adapter.bootstrap(document.body,['myApp']);
Cool ProjectsWeb Workers and Service Workers
Universal Angular 2
Electron
ng2-bootstrap and Fuel-UI
Angular watchers
JHipster, baby!
ng-book 2A comprehensive guide to developing with Angular 2
Sample apps: Reddit clone, Chat with RxJS Observables, YouTube search-as-you-type, Spotify Search
How to write components, use forms and APIs
Over 5,500+ lines of code!
Who’s using Angular?Made with Angular
https://www.madewithangular.com
Built with Angular 2
http://builtwithangular2.com
5 things Angular
@5thingsAngular
When will Angular 2 be released?
How to Become an ArtistPart 2 of 3: Learn from Others
Enroll in local art classesStudy the mastersGo to art schoolMake friends in the artist communityVisit art studios
http://www.wikihow.com/Become-an-Artist
Shortcut to becoming an Angular Artist
JUST DO IT.
Contact Me! http://raibledesigns.com
@mraible
Presentationshttp://slideshare.net/mraible
Codehttp://github.com/mraible
Questions?
Scott Davis’s Angular 2 Training
http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do
2016 Angular 2 TutorialsGetting Started with Angular 2
http://raibledesigns.com/rd/entry/getting_started_with_angular_2_rc1
Testing Angular 2 Applications
http://raibledesigns.com/rd/entry/testing_angular_2_0_rc1
Helpful ArticlesAngular 1 to 2 Quick Reference
Scott Davis’s Getting Ready for Angular 2
Testing Angular 2 with Karma and Jasmine
Angular2 Observables, Http, and separating services and components
Managing State in Angular 2 Applications
Create a Desktop App with Angular 2 and Electron
