Slide 1
Slide 1 text
#DevoxxUK
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
No content
Slide 4
Slide 4 text
#DevoxxUK
Authentication Standards
Slide 5
Slide 5 text
My Angular Journey
Slide 6
Slide 6 text
#DevoxxUK
Jobs on LinkedIn (US)
April 2017
0
2,000
4,000
6,000
8,000
Backbone AngularJS Ember Knockout React Vue
Slide 7
Slide 7 text
#DevoxxUK
Jobs on LinkedIn (US)
April 2017
0
3,500
7,000
10,500
14,000
Backbone Angular Ember Knockout React Vue
Slide 8
Slide 8 text
#DevoxxUK
Stack Overflow Tags
April 2017
0
75,000
150,000
225,000
300,000
Backbone Angular Knockout Ember React
Slide 9
Slide 9 text
#DevoxxUK
Google Trends - Angular
Slide 10
Slide 10 text
#DevoxxUK
Google Trends - Angular 2
Slide 11
Slide 11 text
#DevoxxUK
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
#DevoxxUK
Hello World with AngularJS
Hello World
Name:
Hello {{name}}!
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
#DevoxxUK
Hello World with Angular
Angular QuickStart
System.import('app').catch(function(err){ console.error(err); });
Loading AppComponent content here ...
Slide 17
Slide 17 text
#DevoxxUK
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Slide 18
Slide 18 text
#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 { }
Slide 19
Slide 19 text
#DevoxxUK
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
#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
Slide 21
Slide 21 text
#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
Slide 22
Slide 22 text
#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
Slide 23
Slide 23 text
#DevoxxUK
bus.ts
Slide 24
Slide 24 text
#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
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
#DevoxxUK
Angular Demo!
Start with angular-cli
Build Search Feature
Data via HTTP
Form Validation
CSS Frameworks
Slide 27
Slide 27 text
#DevoxxUK
Built-in Components
Slide 28
Slide 28 text
#DevoxxUK
The asterisk (*) effect
https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris
{{hero}}
{{hero}}
Slide 29
Slide 29 text
#DevoxxUK
The asterisk (*) effect
Our heroes are true!
Our heroes are true!
Slide 30
Slide 30 text
#DevoxxUK
Angular Forms
Template-Driven
import { FormsModule } from '@angular/forms';
Reactive Forms
import { ReactiveFormsModule } from '@angular/forms';
Slide 31
Slide 31 text
#DevoxxUK
Template-Driven Validation
Name
Name is required
Slide 32
Slide 32 text
#DevoxxUK
Reactive Forms Validation
Name
{{ formErrors.name }}
Slide 33
Slide 33 text
#DevoxxUK
Data Architectures
MVW / Two-way binding
Flux
Observables
Slide 34
Slide 34 text
#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
Slide 35
Slide 35 text
#DevoxxUK
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
#DevoxxUK
Cool Projects
Web Workers and Service Workers
Electron
ng-bootstrap
Angular Material
JHipster, baby!
Slide 37
Slide 37 text
#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
Slide 38
Slide 38 text
Testing Applications
Slide 39
Slide 39 text
#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
Slide 40
Slide 40 text
#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!
Slide 41
Slide 41 text
#DevoxxUK
Types of Tests
Unit Tests
End-to-End Tests
Slide 42
Slide 42 text
#DevoxxUK
Unit Test Example
Slide 43
Slide 43 text
#DevoxxUK
bus.spec.ts
Slide 44
Slide 44 text
#DevoxxUK
Live Coding!
Unit Tests
Integration Tests
Continuous Integration
Deployment
Continuous Deployment
Slide 45
Slide 45 text
#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
Slide 46
Slide 46 text
#DevoxxUK
Don’t be afraid of testing!
Slide 47
Slide 47 text
#DevoxxUK
Don’t be afraid of testing!
Slide 48
Slide 48 text
#DevoxxUK
Don’t be afraid of testing!
Slide 49
Slide 49 text
#DevoxxUK
Lab: Test an Angular Project
Unit testing
Integration testing
Continous Integration
Deploy to the ☁!
http://bit.ly/ng-test
Slide 50
Slide 50 text
#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!
Slide 51
Slide 51 text
#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
Slide 52
Slide 52 text
#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
Slide 53
Slide 53 text
#DevoxxUK
Testing JavaScript Applications
Slide 54
Slide 54 text
#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
Slide 55
Slide 55 text
#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
Slide 56
Slide 56 text
#DevoxxUK
Lab: Authentication with OpenID Connect
http://developer.okta.com
http://bit.ly/ng-okta
youtube.com/watch?v=Kb56GzQ2pSk
Slide 57
Slide 57 text
#DevoxxUK
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs
(Building)
https://youtu.be/TksyjxipM4M
(Testing)
Angular and Angular CLI Demos
Slide 58
Slide 58 text
#DevoxxUK
Shortcut to becoming an Angular Expert
JUST DO IT.
Slide 59
Slide 59 text
#DevoxxUK
Shortcut to becoming an Angular Expert
YOU DID IT!
Slide 60
Slide 60 text
#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
Slide 61
Slide 61 text
developer.okta.com/blog
Slide 62
Slide 62 text
#DevoxxUK
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible
Questions?