Tweet
Tweet

Slide 1

Slide 1 text

#DevoxxFR Getting Started with Matt Raible • @mraible

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

#DevoxxFR Authentication Standards

Slide 4

Slide 4 text

My Angular Journey

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

#DevoxxFR Google Trends - Angular

Slide 10

Slide 10 text

#DevoxxFR Google Trends - Angular 2

Slide 11

Slide 11 text

#DevoxxFR Google Trends - Angular 4

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Who wants to learn ?

Slide 14

Slide 14 text

#DevoxxFR Hello World with AngularJS Hello World
Name:

Hello {{name}}!

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

#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 { }

Slide 19

Slide 19 text

#DevoxxFR app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: `

Hello {{name}}

`, }) export class AppComponent { name = 'Angular'; }

Slide 20

Slide 20 text

#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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

#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

Slide 23

Slide 23 text

#DevoxxFR bus.ts

Slide 24

Slide 24 text

#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

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

#DevoxxFR Built-in Components

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

#DevoxxFR The asterisk (*) effect

Our heroes are true!

Our heroes are true!

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

#DevoxxFR Template-Driven Validation Name
Name is required

Slide 32

Slide 32 text

#DevoxxFR Reactive Forms Validation Name
{{ formErrors.name }}

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

#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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

#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']);

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

#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

Slide 39

Slide 39 text

Testing Applications

Slide 40

Slide 40 text

#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

Slide 41

Slide 41 text

#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!

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

#DevoxxFR Unit Test Example

Slide 44

Slide 44 text

#DevoxxFR bus.spec.ts

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

#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

Slide 47

Slide 47 text

#DevoxxFR Don’t be afraid of testing!

Slide 48

Slide 48 text

#DevoxxFR Don’t be afraid of testing!

Slide 49

Slide 49 text

#DevoxxFR Don’t be afraid of testing!

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

#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!

Slide 52

Slide 52 text

#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

Slide 53

Slide 53 text

#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

Slide 54

Slide 54 text

#DevoxxFR Testing JavaScript Applications

Slide 55

Slide 55 text

#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

Slide 56

Slide 56 text

#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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

#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

Slide 62

Slide 62 text

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