Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017

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

Matt Raible

May 11, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

Transcript

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

    View full-size 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 full-size slide

  3. #DevoxxUK
    Authentication Standards

    View full-size slide

  4. My Angular Journey

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. #DevoxxUK
    Google Trends - Angular

    View full-size slide

  9. #DevoxxUK
    Google Trends - Angular 2

    View full-size slide

  10. #DevoxxUK
    Google Trends - Angular 4

    View full-size slide

  11. Who wants to learn ?

    View full-size slide

  12. #DevoxxUK
    Hello World with AngularJS



    Hello World



    Name:


    Hello {{name}}!




    View full-size slide

  13. #DevoxxUK
    Hello World with Angular



    Angular QuickStart








    <br/>System.import('app').catch(function(err){ console.error(err); });<br/>


    Loading AppComponent content here ...


    View full-size slide

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

    View full-size slide

  15. #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 full-size slide

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

    View full-size slide

  17. #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 full-size slide

  18. #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 full-size slide

  19. #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 full-size slide

  20. #DevoxxUK
    bus.ts

    View full-size slide

  21. #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 full-size slide

  22. #DevoxxUK
    Angular Demo!
    Start with angular-cli

    Build Search Feature

    Data via HTTP

    Form Validation

    CSS Frameworks

    View full-size slide

  23. #DevoxxUK
    Built-in Components






    let num = index">

    View full-size slide

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

    View full-size slide

  25. #DevoxxUK
    The asterisk (*) effect



    Our heroes are true!




    Our heroes are true!


    View full-size slide

  26. #DevoxxUK
    Angular Forms
    Template-Driven

    import { FormsModule } from '@angular/forms';
    Reactive Forms

    import { ReactiveFormsModule } from '@angular/forms';

    View full-size slide

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

    View full-size slide

  28. #DevoxxUK
    Reactive Forms Validation

    Name
    formControlName="name" required >

    {{ formErrors.name }}


    View full-size slide

  29. #DevoxxUK
    Data Architectures
    MVW / Two-way binding

    Flux

    Observables

    View full-size slide

  30. #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 full-size slide

  31. #DevoxxUK
    Style Guides
    John Papa’s Angular Style Guide

    https://github.com/johnpapa/angular-styleguide

    Official Angular Style Guide

    https://angular.io/styleguide

    View full-size slide

  32. #DevoxxUK
    Cool Projects
    Web Workers and Service Workers

    Electron

    ng-bootstrap

    Angular Material

    JHipster, baby!

    View full-size slide

  33. #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 full-size slide

  34. Testing Applications

    View full-size slide

  35. #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 full-size slide

  36. #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 full-size slide

  37. #DevoxxUK
    Types of Tests
    Unit Tests

    End-to-End Tests

    View full-size slide

  38. #DevoxxUK
    Unit Test Example

    View full-size slide

  39. #DevoxxUK
    bus.spec.ts

    View full-size slide

  40. #DevoxxUK
    Live Coding!
    Unit Tests

    Integration Tests

    Continuous Integration

    Deployment

    Continuous Deployment

    View full-size slide

  41. #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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. #DevoxxUK
    Lab: Test an Angular Project
    Unit testing

    Integration testing

    Continous Integration

    Deploy to the ☁!
    http://bit.ly/ng-test

    View full-size slide

  46. #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 full-size slide

  47. #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 full-size slide

  48. #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 full-size slide

  49. #DevoxxUK
    Testing JavaScript Applications

    View full-size slide

  50. #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 full-size slide

  51. #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 full-size slide

  52. #DevoxxUK
    Lab: Authentication with OpenID Connect
    http://developer.okta.com

    http://bit.ly/ng-okta

    youtube.com/watch?v=Kb56GzQ2pSk

    View full-size slide

  53. #DevoxxUK
    https://github.com/mraible/ng-demo

    https://youtu.be/Jq3szz2KOOs
    (Building)

    https://youtu.be/TksyjxipM4M
    (Testing)
    Angular and Angular CLI Demos

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. #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 full-size slide

  57. developer.okta.com/blog

    View full-size slide

  58. #DevoxxUK
    Keep in touch!

    raibledesigns.com

    @mraible

    Presentations

    speakerdeck.com/mraible

    Code

    github.com/mraible
    Questions?

    View full-size slide