The Art of Angular in 2016 - Devoxx France 2016

1. The Art of in 2016 Photos by McGinity Photo Matt Raible • http://raibledesigns.com 2016

2. Blogger on raibledesigns.com Founder of AppFuse Father, Skier, Mountain Biker, Whitewater Rafter Web Framework Connoisseur Who is Matt Raible? Bus Lover

3. How to Become an Artist Part 1 of 3: Learn the Basics on Your Own Take some time and try various mediums of art Recognize your strengths Do your research and learn the basics Get the supplies you will need Observe the world around you Make time for your art every day Seek out the opinions of others Develop your own style http://www.wikihow.com/Become-an-Artist

4. Jobs on Dice.com April 2016 0 750 1,500 2,250 3,000 Backbone Angular Em ber Knockout React

5. Job Growth 0 750 1500 2250 3000 February 2014 January 2015 September 2015 April 2016 Ember.js AngularJS Backbone Knockout React

6. LinkedIn Skills April 2016 0 75,000 150,000 225,000 300,000 Backbone Angular Knockout Em ber React

7. LinkedIn Skills April 2016 0 17,500 35,000 52,500 70,000 Backbone Knockout Em ber React

8. Skills Growth 0 75000 150000 225000 300000 February 2014 January 2015 September 2015 April 2016 Ember.js AngularJS Backbone Knockout React

9. Google Trends

10. What about Angular 2?

12. Who wants to learn ?

13. Hello World with AngularJS <!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{name}}!</h1> </div> <script src="http://code.angularjs.org/1.4.6/angular.min.js"></script> </body> </html>

15. Hello World with Angular 2 <html> <head> <title>Angular 2 QuickStart</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css">   <script src="node_modules/es6-shim/es6-shim.min.js"></script> <script src="node_modules/systemjs/dist/system-polyfills.js"></script> <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script> <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="node_modules/rxjs/bundles/Rx.js"></script> <script src="node_modules/angular2/bundles/angular2.dev.js"></script> </head> </html>

16. Hello World with Angular 2  <script> System.config({ packages: { app: { format: 'register', defaultExtension: 'js' } } }); System.import('app/main') .then(null, console.error.bind(console)); </script> </head>  <body> <my-app>Loading...</my-app> </body> </html>

17. app/main.ts import {bootstrap} from 'angular2/platform/browser'; import {AppComponent} from './app/components/app.component'; bootstrap(AppComponent);

18. app/app.component.ts import {Component} from 'angular2/core'; @Component({ selector: 'my-app', template: '<h1>My First Angular 2 App</h1>' }) export class AppComponent { }

19. Angular 2 Choices Choose 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

20. ES6 vs TypeScript https://kangax.github.io/compat-table/es6/ You still have to use a transpiler to   get ES6 support in IE11 Babel Traceur

21. Who’s using Babel?

22. Emerging Stacks TypeScript Package Manager: npm Module Loader: SystemJS Transpiler: Traceur Build Tool: Broccoli ES6 Package Manager: JSPM Module Loader: SystemJS Transpiler: Babel Built Tool: Gulp

23. Getting Started Angular 2 QuickStart https://github.com/angular/quickstart.git Start with Angular 2 Seed https://github.com/mgechev/angular2-seed.git Advanced Angular 2 Seed https://github.com/NathanWalker/angular2-seed-advanced.git

24. Angular 2 Demo! Start with angular2-seed Build Search Feature Data via HTTP Unit Tests Integration Tests

25. 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="#item of items; #num = index"></div>

26. Angular 2 Forms Forms can be complex To help, Angular provides Controls Validators Observers

27. Control let nameControl = new Control("Abbie"); let name = nameControl.value; // -> Abbie // now you can query this control for certain values: nameControl.errors // -> StringMap<string, any> of errors nameControl.dirty // -> false nameControl.valid // -> true <input type="text" ngControl="name">

28. Control Group let vehicleInfo = new ControlGroup({ make: new Control('VW'), model: new Control('Deluxe Samba'), year: new Control('1966') }); vehicleInfo.value; // -> { // make: "VW", // model: "Deluxe Samba", // year: "1966" // }

29. FORM_DIRECTIVES import {Component} from 'angular2/core'; import {FORM_DIRECTIVES} from 'angular2/common'; @Component({ selector: 'vehicle-form', directives: [FORM_DIRECTIVES],

30. ngForm directives: [FORM_DIRECTIVES], template: ` <h2>Vehicle Form</h2> <form #f="ngForm" (ngSubmit)="onSubmit(f.value)"> <label for="name">Name</label> <input type="text" id="name" placeholder="Name" ngControl="name"> <button type="submit">Submit</button> </form>`

31. ngSubmit export class VehicleForm { onSubmit(form: any): void { console.log('form value:', form) } }

32. FormBuilder export class VehicleFormBuilder { myForm: ControlGroup; constructor(fb: FormBuilder) { this.myForm = fb.group({ 'name': ['Hefe'] }) } }

33. ngFormModel <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)"> <input type="text" id="name" placeholder="Name" [ngFormControl]="myForm.controls['name']">

34. Validation constructor(fb: FormBuilder) { this.myForm = fb.group({ 'name': ['', Validators.required] }) }

35. Validation <div class="form-group" [class.has-error]="!myForm.find('name').valid && myForm.find('name').touched">

36. Validation <input type="text" id="name" placeholder="Name" [ngFormControl]="myForm.controls['name']" #name="ngForm"> <span *ngIf="!name.control.valid" class="help-block"> Name is invalid </span> <span *ngIf="name.control.hasError('required')" class="help-block">Name is required</span>

37. Data Architectures MVW / Two-way binding Flux Observables

38. Observables and RxJS Promises emit a single value whereas streams emit many values Imperative code “pulls” data whereas reactive streams “push” data RxJS is functional Streams are composable

39. Style Guides John Papa’s Angular Style Guide https://github.com/johnpapa/angular-styleguide Minko Gechev’s Angular 2 Style Guide https://github.com/mgechev/angular2-style-guide

40. Upgrading from Angular 1.x to 2.x Big Bang Incremental ngUpgrade import {UpgradeAdapter} from 'angular2/upgrade'; var adapter = new UpgradeAdapter(); var app = angular.module('myApp', []); adapter.bootstrap(document.body, ['myApp']);

41. Cool Projects Web Workers and Service Workers Universal Angular 2 Electron ng2-bootstrap and Fuel-UI Angular watchers JHipster, baby!

42. ng-book 2 A 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!

43. Who’s using Angular? Made with Angular https://www.madewithangular.com Built with Angular 2 http://builtwithangular2.com 5 things Angular @5thingsAngular

44. When will Angular 2 be released?

45. How to Become an Artist Part 2 of 3: Learn from Others Enroll in local art classes Study the masters Go to art school Make friends in the artist community Visit art studios http://www.wikihow.com/Become-an-Artist

46. Shortcut to becoming an Angular Artist JUST DO IT.

47. Contact Me! http://raibledesigns.com @mraible Presentations http://slideshare.net/mraible Code http://github.com/mraible Questions?

48. Scott Davis’s Angular 2 Training http://shop.oreilly.com/category/learning-path/on-the-road-to-angular-2.do

49. 2016 Angular 2 Tutorials Getting Started with Angular 2 http://raibledesigns.com/rd/entry/getting_started_with_angular_2 Testing Angular 2 Applications http://raibledesigns.com/rd/entry/testing_angular_2_applications

50. Helpful Articles Angular 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

The Art of Angular in 2016 - Devoxx France 2016

The Art of Angular in 2016 - Devoxx France 2016

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(14)

Similar to The Art of Angular in 2016 - Devoxx France 2016

Similar to The Art of Angular in 2016 - Devoxx France 2016(20)

More from Matt Raible

More from Matt Raible(20)

Recently uploaded

Recently uploaded(20)

The Art of Angular in 2016 - Devoxx France 2016