app OF THE CENTURY

WITH

ANGULAR 7

featuring Samir "War Machine" Hanini

2018 training by Loïc TRUCHOT

FOREWORD

• Me, Loïc TRUCHOT, JavaScript developer
• About exp, question and community leading
• About a secret game in this little presentation

What, When & WhY

• SPA complete framework
• router, ajax, seo, lang, forms, format, etc.
• targets :
  • browser (app or element)
  • server (Universal)
  • mobile (PWA & Ionic)
  • OS (Electron)
• VS React ? VS Vue ?
• Learning curve ↗↘⇗

Versioning desambiguation

• AngularJS vs Angular (2+)
• dirty checking vs zone.js
• each 6 months
• 7 -> sept 2018
• 8 -> march 2019
• the price of stability
• semantic versioning :
  • major.minor.patch
• ng update
• https://update.angular.io/

A StRANGE SCHEMA

LIVE CODING SESSION

MOST BASIC NG APP EVER

• angular = tree of modules, combining modules, services & components containing templates, containing directives
• first app module
• first app component

WORKSHOP SESSION

SET YOUR ENVIRONMENT

• vs code
• extensions: prettier, tslint, ALS, vs-icons
• npm i -g @angular/cli@7.0.0-beta.2
• tslint.json + codelyzer + rxjs-tslint
• @see https://github.com/n-a-n/minimal-ng-app/blob/master/tslint.json
• "prettier.tslintIntegration": true
• "editor.formatOnSave": true

WORKSHOP SESSION

Add TO IT a start button

• git clone https://github.com/n-a-n/minimal-ngx-app.git
• expression interpolation
• event binding + $event
• property binding: attributes vs properties
• ngModel
• *ngIf, #elseBlock, [ngSwitch], ng-template, ng-container
• template reference variable
• safe navigation operator
• know your syntatic sugar *, [], (), {{}}, [()]

ANGULAR CLI

• npm i -g @angular/cli@7.0.0-beta.2
• create app
• server, build, lint, update
• generate NG things
  • module, component, service, pipe, guard, etc.
• schematics ext: generate everything

STRANGE SCHEMA ANALYSIS

• How many different component ?
• How many similar component ?
• containers & dumb component ?
• shared & scoped data ?

LIVE CODING SESSION

DISCOVERING COMPONENT

WORKSHOP SESSION

Add 4 TIMES A DUPLICATE COMPONENT

• git clone https://github.com/n-a-n/naked-ngx-quizz.git
• ng g c
• *ngFor + index
• ngClass, ngStyle
• @Input
• @Output & EventEmitter
• life cycle & best practices

LIVE CODING SESSION

DISCOVERING SERVICES

• A shared data/actions layer
• An HttpService for my HttpModule
• environment ?
• provide service (in root, or elsewhere)
• transform with RxJS
• | async & ngOnChange or share subject ?
• build-in pipes (json, async, date, upper/lowercase, currency,  percent, etc.)
• new pipes !

WORKSHOP SESSION

Services for ajax & for state

• Now, build a score service, with a get win rate method
• Put the current score in app component
• End game after 10 question
• Create a score pipe, to avoid inconsistent percent
• Reset scores on init
• Use pipes in controller 

STOP ! REFACTO TIME !

And (RE-)discovering MODULES

• ng g m
• rearrange folders + paths @alias
• declaration
• imports
• exports
• providers
• best practices & lazy loading

ANOTHER STRANGE SCHEMA ANALYSIS

• How many routes ?
• What is common ?
• Is the router a source of truth ?
• How to choose well-named routes ?
• Do we need some guards ?

LIVE CODING SESSION

DISCOVERING ROUTER

• a dedicated routing module
• root & wildcard
• routerlink
• lazy loading modules
• guards
• router as source of truth

WORKSHOP SESSION

Add 3 ROUTES & guards

• Create your own lazy route 'edit-quizz'
• Use it as a source of truth for ids
• Create a guard to prevent intrusion
• Create a menu in app component for each theme

LIVE CODING SESSION

DISCOVERING FORMS

• ngForm
• reactive forms

WORKSHOP SESSION

Add A CREATE/EDIT FORM

• Add somewhere a "create new", that navigate to edit-quizz
• Add "theme" value
• add a post server method !!!
• add a put, for edit...

WHAT ABOUT State Management ?

LIVE CODING SESSION

DISCOVERING STORES

WORKSHOP SESSION

ADD STORE

• action, effects, reducer, selector
• dispatch, select
• what about entities

WHat's NEXT ?

a lot of work

• unit testing & marble testing
• explore reactive forms possibilities
• e2e testing
• mobile & other target