The Ultimate Getting Started with Angular Workshop - Devoxx France 2017

These slides are from a workshop I did at Devoxx France 2017. I showed how to set up an Angular development environment from scratch, develop a simple app, test it, integrating CSS frameworks (Angular Material and Bootstrap 4), secure it with OpenID Connect, and deploy it to the cloud.

Source code and tutorial: https://github.com/mraible/ng-demo

Transcript

1. #DevoxxFR
   Getting Started with
   Matt Raible • @mraible
   

   View Slide

2. Blogger on raibledesigns.com
   Java Champion and Web Developer
   Father, Skier, Mountain
   Biker, Whitewater Rafter
   Open Source Connoisseur
   Who is Matt Raible?
   Bus Lover
   Okta Developer Advocate
   

   View Slide

3. #DevoxxFR
   Authentication Standards
   

   View Slide

4. My Angular Journey
   

   View Slide

5. #DevoxxFR
   Jobs on LinkedIn (US)
   April 2017
   0
   2,000
   4,000
   6,000
   8,000
   Backbone AngularJS Ember Knockout React Vue
   

   View Slide

6. #DevoxxFR
   Jobs on LinkedIn (US)
   April 2017
   0
   3,500
   7,000
   10,500
   14,000
   Backbone Angular Ember Knockout React Vue
   

   View Slide

7. #DevoxxFR
   Stack Overflow Tags
   April 2017
   0
   75,000
   150,000
   225,000
   300,000
   Backbone Angular Knockout Ember React
   

   View Slide

8. #DevoxxFR
   People with ember.js on LinkedIn - huh?
   

   View Slide

9. #DevoxxFR
   Google Trends - Angular
   

   View Slide

10. #DevoxxFR
    Google Trends - Angular 2
    

    View Slide

11. #DevoxxFR
    Google Trends - Angular 4
    

    View Slide

12. View Slide

13. Who wants to learn ?
    

    View Slide

14. #DevoxxFR
    Hello World with AngularJS
    
    
    
    Hello World
    
    
    
    Name:
    
    
    Hello {{name}}!
    
    
    
    
    

    View Slide

15. View Slide

16. #DevoxxFR
    Hello World with Angular
    
    
    
    Angular QuickStart
    
    
    
    
    
    
    
    
    <br/>System.import('app').catch(function(err){ console.error(err); });<br/>
    
    
    Loading AppComponent content here ...
    
    
    

    View Slide

17. #DevoxxFR
    app/main.ts
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app.module';
    platformBrowserDynamic().bootstrapModule(AppModule);
    

    View Slide

18. #DevoxxFR
    app/app.module.ts
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    @NgModule({
    imports: [ BrowserModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }
    

    View Slide

19. #DevoxxFR
    app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`,
    })
    export class AppComponent { name = 'Angular'; }
    

    View Slide

20. #DevoxxFR
    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
    

    View Slide

21. #DevoxxFR
    ES6, ES7 and TypeScript
    TS
    ES7
    ES6
    ES5
    ES5: es5.github.io
    
    ES6: git.io/es6features
    
    ES7: DRAFT
    
    TS: www.typescriptlang.org
    

    View Slide

22. #DevoxxFR
    TypeScript
    $ npm install -g typescript
    
    function greeter(person: string) {

    return "Hello, " + person;

    }

    

    var user = "Jane User";

    

    document.body.innerHTML = greeter(user);
    $ tsc greeter.ts
    
    https://www.typescriptlang.org/docs/tutorial.html
    

    View Slide

23. #DevoxxFR
    bus.ts
    

    View Slide

24. #DevoxxFR
    Easiest ways to get started
    Angular QuickStart
    
    https://github.com/angular/quickstart
    
    Angular Seed
    
    https://github.com/mgechev/angular-seed
    
    Angular CLI
    
    https://github.com/angular/angular-cli
    

    View Slide

25. View Slide

26. #DevoxxFR
    Angular Demo!
    Start with angular-cli
    
    Build Search Feature
    
    Data via HTTP
    
    Form Validation
    
    CSS Frameworks
    

    View Slide

27. #DevoxxFR
    Built-in Components
    
    
    
    
    
    
    let num = index">
    

    View Slide

28. #DevoxxFR
    The asterisk (*) effect
    https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris
    {{hero}}
    {{hero}}
    

    View Slide

29. #DevoxxFR
    The asterisk (*) effect
    
    
    
    Our heroes are true!
    
    
    
    
    Our heroes are true!
    
    
    

    View Slide

30. #DevoxxFR
    Angular Forms
    Template-Driven
    
    import { FormsModule } from '@angular/forms';
    Reactive Forms
    
    import { ReactiveFormsModule } from '@angular/forms';
    

    View Slide

31. #DevoxxFR
    Template-Driven Validation
    Name
    required
    [(ngModel)]="model.name" name="name"
    #name="ngModel" >
    class="alert alert-danger">
    Name is required
    
    

    View Slide

32. #DevoxxFR
    Reactive Forms Validation
    
    Name
    formControlName="name" required >
    
    {{ formErrors.name }}
    
    
    

    View Slide

33. #DevoxxFR
    Data Architectures
    MVW / Two-way binding
    
    Flux
    
    Observables
    

    View Slide

34. #DevoxxFR
    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
    

    View Slide

35. #DevoxxFR
    Style Guides
    John Papa’s Angular Style Guide
    
    https://github.com/johnpapa/angular-styleguide
    
    Official Angular Style Guide
    
    https://angular.io/styleguide
    

    View Slide

36. #DevoxxFR
    Upgrading from AngularJS to Angular
    Big Bang
    
    Incremental
    
    ngUpgrade import {UpgradeAdapter} from ‘@angular/upgrade';
    var adapter = new UpgradeAdapter();
    var app = angular.module('myApp', []);
    adapter.bootstrap(document.body, ['myApp']);
    

    View Slide

37. #DevoxxFR
    Cool Projects
    Web Workers and Service Workers
    
    Electron
    
    ng-bootstrap
    
    Angular Material
    
    JHipster, baby!
    

    View Slide

38. #DevoxxFR
    Lab: Create an Angular Project
    Create a project
    
    Run the application
    
    Add a search feature
    
    Add an edit feature
    
    Add validation
    
    http://bit.ly/ng-create
    

    View Slide

39. Testing Applications
    

    View Slide

40. #DevoxxFR
    Quality
    “A person who knows how to fix motorcycles—with Quality—is less
    likely to run short of friends than one who doesn't. And they aren't
    going to see him as some kind of object either. Quality destroys
    objectivity every time.”
    
    — Zen and the Art of Motorcycle Maintenance
    

    View Slide

41. #DevoxxFR
    Software Testing
    With motorcycles, you drive to test them.
    
    With software, you can test it without driving it.
    
    Or rather, you can automate the driving.
    
    If you don’t automate tests, you’re still testing!
    

    View Slide

42. #DevoxxFR
    Types of Tests
    Unit Tests
    
    End-to-End Tests
    

    View Slide

43. #DevoxxFR
    Unit Test Example
    

    View Slide

44. #DevoxxFR
    bus.spec.ts
    

    View Slide

45. #DevoxxFR
    Live Coding!
    Unit Tests
    
    Integration Tests
    
    Continuous Integration
    
    Deployment
    
    Continuous Deployment
    

    View Slide

46. #DevoxxFR
    What you learned
    How to…
    
    Build an Angular application with modern tools
    
    Unit test Angular services, mocking Http provider
    
    Unit test Angular components, mocking service
    
    Integration test an Angular application
    
    Continuously test and deploy with a CI server
    

    View Slide

47. #DevoxxFR
    Don’t be afraid of testing!
    

    View Slide

48. #DevoxxFR
    Don’t be afraid of testing!
    

    View Slide

49. #DevoxxFR
    Don’t be afraid of testing!
    

    View Slide

50. #DevoxxFR
    Lab: Test an Angular Project
    Unit testing
    
    Integration testing
    
    Continous Integration
    
    Deploy to the ☁!
    http://bit.ly/ng-test
    

    View Slide

51. #DevoxxFR
    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!
    

    View Slide

52. #DevoxxFR
    ng-book 2
    A comprehensive guide to developing with
    Angular 4
    
    Worth all your hard earned $$$
    
    https://www.ng-book.com/2
    
    “Thank you for the awesome book, it's the bible
    for Angular.” — Vijay Ganta
    

    View Slide

53. #DevoxxFR
    Testing Angular Applications Book
    Unit testing directives, pipes, services, and routes
    
    End-to-end testing with elements and forms
    
    5 of 10 chapters available
    
    Estimated publication: Fall 2017
    
    www.manning.com/books/testing-angular-applications
    

    View Slide

54. #DevoxxFR
    Testing JavaScript Applications
    

    View Slide

55. #DevoxxFR
    Who’s using Angular?
    Made with AngularJS
    
    https://www.madewithangular.com
    
    Angular Expo
    
    http://angularexpo.com
    
    Awesome Angular
    
    https://github.com/AngularClass/awesome-angular
    

    View Slide

56. #DevoxxFR
    Angular Performance Checklist
    Network performance
    
    Bundling
    
    Minification and Dead code
    elimination
    
    Ahead-of-Time (AoT) Compilation
    
    Compression
    
    Pre-fetching Resources
    
    Lazy-Loading of Resources
    
    Caching
    https://github.com/mgechev/angular-performance-checklist
    

    View Slide

57. #DevoxxFR
    Lab: Authentication with OpenID Connect
    http://developer.okta.com
    
    http://bit.ly/ng-okta
    
    youtube.com/watch?v=Kb56GzQ2pSk
    

    View Slide

58. #DevoxxFR
    https://github.com/mraible/ng-demo
    
    https://youtu.be/Jq3szz2KOOs
    (Building)
    
    https://youtu.be/TksyjxipM4M
    (Testing)
    Angular and Angular CLI Demos
    

    View Slide

59. #DevoxxFR
    Shortcut to becoming an Angular Expert
    JUST DO IT.
    

    View Slide

60. #DevoxxFR
    Shortcut to becoming an Angular Expert
    YOU DID IT!
    

    View Slide

61. #DevoxxFR
    The JHipster Mini-Book
    2.0 Release on Dec 5, 2016
    
    jhipster-book.com
    
    21-points.com
    
    @jhipster_book
    
    Write your own InfoQ mini-book! github.com/mraible/infoq-mini-book
    

    View Slide

62. #DevoxxFR
    Keep in touch!
    
    raibledesigns.com
    
    @mraible
    
    Presentations
    
    speakerdeck.com/mraible
    
    Code
    
    github.com/mraible
    Questions?
    

    View Slide