The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017

Learn how to set your environment up from scratch, develop a simple app, test it, integrating CSS frameworks (Angular Material or Bootstrap), secure it with OpenID Connect, and deploy it to the cloud.

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

Transcript

1. #DevoxxUK
   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. View Slide

4. #DevoxxUK
   Authentication Standards
   

   View Slide

5. My Angular Journey
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. #DevoxxUK
   Google Trends - Angular
   

   View Slide

10. #DevoxxUK
    Google Trends - Angular 2
    

    View Slide

11. #DevoxxUK
    Google Trends - Angular 4
    

    View Slide

12. View Slide

13. Who wants to learn ?
    

    View Slide

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

    View Slide

15. View Slide

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

    View Slide

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

    View Slide

18. #DevoxxUK
    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. #DevoxxUK
    app/app.component.ts
    import { Component } from '@angular/core';
    @Component({
    selector: 'my-app',
    template: `Hello {{name}}`,
    })
    export class AppComponent { name = 'Angular'; }
    

    View Slide

20. #DevoxxUK
    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. #DevoxxUK
    ES6, ES7 and TypeScript
    ES5: es5.github.io
    
    ES6: git.io/es6features
    
    ES7: bit.ly/es7features
    
    TS: www.typescriptlang.org
    TS
    ES7
    ES6
    ES5
    

    View Slide

22. #DevoxxUK
    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. #DevoxxUK
    bus.ts
    

    View Slide

24. #DevoxxUK
    Get Started with Angular
    Angular QuickStart
    
    https://angular.io/docs/ts/latest/quickstart.html
    
    Angular Seed
    
    https://github.com/mgechev/angular-seed
    
    Angular Seed Advanced
    
    https://github.com/NathanWalker/angular-seed-advanced
    

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. #DevoxxUK
    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. #DevoxxUK
    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. #DevoxxUK
    Cool Projects
    Web Workers and Service Workers
    
    Electron
    
    ng-bootstrap
    
    Angular Material
    
    JHipster, baby!
    

    View Slide

37. #DevoxxUK
    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

38. Testing Applications
    

    View Slide

39. #DevoxxUK
    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

40. #DevoxxUK
    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

41. #DevoxxUK
    Types of Tests
    Unit Tests
    
    End-to-End Tests
    

    View Slide

42. #DevoxxUK
    Unit Test Example
    

    View Slide

43. #DevoxxUK
    bus.spec.ts
    

    View Slide

44. #DevoxxUK
    Live Coding!
    Unit Tests
    
    Integration Tests
    
    Continuous Integration
    
    Deployment
    
    Continuous Deployment
    

    View Slide

45. #DevoxxUK
    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

46. #DevoxxUK
    Don’t be afraid of testing!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

50. #DevoxxUK
    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

51. #DevoxxUK
    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

52. #DevoxxUK
    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

53. #DevoxxUK
    Testing JavaScript Applications
    

    View Slide

54. #DevoxxUK
    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

55. #DevoxxUK
    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

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

    View Slide

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

    View Slide

58. #DevoxxUK
    Shortcut to becoming an Angular Expert
    JUST DO IT.
    

    View Slide

59. #DevoxxUK
    Shortcut to becoming an Angular Expert
    YOU DID IT!
    

    View Slide

60. #DevoxxUK
    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

61. developer.okta.com/blog
    

    View Slide

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

    View Slide