The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
Post on 24-Jan-2018
79 Views
Preview:
Transcript
#DevoxxUK
Getting Started with
Matt Raible • @mraible
Blogger on raibledesigns.com
Java Champion and Web Developer
Father, Skier, Mountain Biker, Whitewater Rafter
Open Source Connoisseur
Who is Matt Raible?
Bus LoverOkta Developer Advocate
#DevoxxUK
Authentication Standards
My Angular Journey
#DevoxxUK
Jobs on LinkedIn (US)April 2017
0
2,000
4,000
6,000
8,000
Backbone AngularJS Ember Knockout React Vue
#DevoxxUK
Jobs on LinkedIn (US)April 2017
0
3,500
7,000
10,500
14,000
Backbone Angular Ember Knockout React Vue
#DevoxxUK
Stack Overflow TagsApril 2017
0
75,000
150,000
225,000
300,000
Backbone Angular Knockout Ember React
#DevoxxUK
Google Trends - Angular
#DevoxxUK
Google Trends - Angular 2
#DevoxxUK
Google Trends - Angular 4
Who wants to learn ?
#DevoxxUK
Hello World with AngularJS
<!doctype html> <html ng-app> <head> <title>Hello World</title> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="name" placeholder="Enter a name here"> <hr> <h1>Hello {{name}}!</h1> </div> <script src="http://code.angularjs.org/1.5.8/angular.min.js"></script> </body> </html>
#DevoxxUK
Hello World with Angular <!DOCTYPE html> <html> <head> <title>Angular QuickStart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="styles.css"> <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script> <script src="node_modules/zone.js/dist/zone.js"></script> <script src="node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('app').catch(function(err){ console.error(err); }); </script> </head>
<body> <my-app>Loading AppComponent content here ...</my-app> </body> </html>
#DevoxxUK
app/main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
#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 { }
#DevoxxUK
app/app.component.ts
import { Component } from '@angular/core';
@Component({ selector: 'my-app', template: `<h1>Hello {{name}}</h1>`, }) export class AppComponent { name = 'Angular'; }
#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
#DevoxxUK
ES6, ES7 and TypeScript
ES5: es5.github.io
ES6: git.io/es6features
ES7: bit.ly/es7features
TS: www.typescriptlang.org TSES7 ES6 ES5
#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
#DevoxxUK
bus.ts
#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
#DevoxxUK
Angular Demo!
Start with angular-cli
Build Search Feature
Data via HTTP
Form Validation
CSS Frameworks
#DevoxxUK
Built-in Components
<div *ngIf="str == 'yes'"></div> <div [ngSwitch]="myVar"> <div *ngSwitchWhen="'A'"></div> </div> <div [ngStyle]="{color: colorinput.value}"></div> <div [ngClass]="{bordered: true}"></div> <div *ngFor="let item of items; let num = index"></div>
#DevoxxUK
The asterisk (*) effect
https://angular.io/docs/ts/latest/guide/structural-directives.html#!#asteris
<div *ngIf="hero">{{hero}}</div> <div *ngFor="let hero of heroes">{{hero}}</div>
#DevoxxUK
The asterisk (*) effect
<!-- Examples (A) and (B) are the same --> <!-- (A) *ngIf paragraph --> <p *ngIf="condition"> Our heroes are true! </p>
<!-- (B) [ngIf] with template --> <template [ngIf]="condition"> <p> Our heroes are true! </p> </template>
#DevoxxUK
Angular Forms
Template-Driven
import { FormsModule } from '@angular/forms';
Reactive Forms
import { ReactiveFormsModule } from '@angular/forms';
#DevoxxUK
Template-Driven Validation
<label for="name">Name</label> <input type="text" class="form-control" id="name" required [(ngModel)]="model.name" name="name" #name="ngModel" > <div [hidden]="name.valid || name.pristine" class="alert alert-danger"> Name is required </div>
#DevoxxUK
Reactive Forms Validation
<form [formGroup]="heroForm" *ngIf="active" (ngSubmit)="onSubmit()"> <label for="name">Name</label> <input type="text" id="name" class="form-control" formControlName="name" required > <div *ngIf="formErrors.name" class="alert alert-danger"> {{ formErrors.name }} </div> </form>
#DevoxxUK
Data Architectures
MVW / Two-way binding
Flux
Observables
#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
#DevoxxUK
Style Guides
John Papa’s Angular Style Guide
https://github.com/johnpapa/angular-styleguide
Official Angular Style Guide
https://angular.io/styleguide
#DevoxxUK
Cool Projects
Web Workers and Service Workers
Electron
ng-bootstrap
Angular Material
JHipster, baby!
#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
Testing Applications
#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
#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!
#DevoxxUK
Types of Tests
Unit Tests
End-to-End Tests
#DevoxxUK
Unit Test Example
#DevoxxUK
bus.spec.ts
#DevoxxUK
Live Coding!
Unit Tests
Integration Tests
Continuous Integration
Deployment
Continuous Deployment
#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
#DevoxxUK
Don’t be afraid of testing!
#DevoxxUK
Don’t be afraid of testing!
#DevoxxUK
Don’t be afraid of testing!
#DevoxxUK
Lab: Test an Angular Project
Unit testing
Integration testing
Continous Integration
Deploy to the ☁!
http://bit.ly/ng-test
#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!
#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
#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
#DevoxxUK
Testing JavaScript Applications
#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
#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
#DevoxxUK
Lab: Authentication with OpenID Connect
http://developer.okta.com
http://bit.ly/ng-okta
youtube.com/watch?v=Kb56GzQ2pSk
#DevoxxUK
https://github.com/mraible/ng-demo
https://youtu.be/Jq3szz2KOOs (Building)
https://youtu.be/TksyjxipM4M (Testing)
Angular and Angular CLI Demos
#DevoxxUK
Shortcut to becoming an Angular Expert
JUST DO IT.
#DevoxxUK
Shortcut to becoming an Angular Expert
YOU DID IT!
#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
#DevoxxUK
Keep in touch!
raibledesigns.com
@mraible
Presentations
speakerdeck.com/mraible
Code
github.com/mraible
Questions?
top related