$30 off During Our Annual Pro Sale. View Details »

The Ultimate Getting Started with Angular Workshop - Devoxx France 2017

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

Matt Raible
PRO

April 05, 2017
Tweet

More Decks by Matt Raible

Other Decks in Technology

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