AngularU Learning Notes (brain dump)

Day 1

Main Thread <– message passing –> web worker
  • restrictions using web worker – no access to dom
  • can angular and the app business logic could be in a web worker
  • Ex. ionic / onsen ui
Angular 2
  • Angular Renderer (can be ios/angular u) <– —> main js thread
  • Ex. NativeScript (cross platform framework for js applications)
  • React Native — integration between it and A2
  • Angular 1 – DOM template + Data = DOM View
  • Server-side rendering
    • Faster startup
    • SEO
    • Previews
TypeScript
Next milestones
  • Finish Core / API Sugaring / Perf+ / Docs
  • Migration Support / Animate / Material Design / CLI
    • CLI – scaffolding
  • Server Render / Native / Web Workers / ?
Slides
Q/A
Random:
Tomorrow
Angular / TypeScript
egghead.io
Showing Angular2 application
ng6 Why You Should Use ES6 with Angular Today
  • https://angularclass.com/
  • ES2015 now with Angular 1.x
  • ES6 spec is final (ES7 in the works)
  • Angular 1.x is going to be here for a while
  • JSPM uses SystemJS
    • compatible with Babel and Traceur
Webpack
  • Loads and bundles modules
  • Plugin system
  • easy setup
Useful features for Angular
  • Example ES6 class for angular today
    • export default class { constructor($http, myService) { } …
  • Gotchas…
  • It’s not completely ready and depending on the trans-compiler – need to be aware of what works and what doesn’t.
  • ebook – http://exploringjs.com/
Dominating Shadow DOM
Migrating to Angular2
  • Directive that is made more component based
  • Directive sets the things it needs through the attributes of the element controller
  • Directive does not fetch data from server.
  • Observable –
    • new Rq.ReplaySubject();
    • onNext(this.boxes);
  • David East – https://github.com/davideast/angularu-a2-migration
Dominating Shadow DOM
  • Chrome Dev Tools – setting to “Show user agent shadow DOM” (under Elements)
  • Disecting Custom Elements – Element –> Shadow Host
  • Use the createShadowDom() to create shadow dom element.
  • Terminology
    • Shadow host
    • Shadow root
    • etc.
HackStack.js: AngularJS Applications Broken APIs Delivered Late
MEAN stack
Upgrading the Web
Security
  • RFC 1738 – // user : password @ host : port / url-path (1994)
  • “The use of URLs containing passwords that should be secret is clearly uswise”
What’s wrong with the Web?
  • Insecure / Complex
  • Certificate Authorities – many have been hacked / versign, etc.
  • Document Object Model – “Worst API ever” – very hackable if you have access.
    • “I feel confident in saying the the DOM is the worst API ever created.”
  • CSS – Crappy Stylesheets
  • JavaScript – is a hot mess and it’s getting messier
  • Many Have Tried – Microsoft, Apple, Adobe, Oracle – In most cases, the technology was better but was not open and there was no transition.
  • Upgrade the Web – Keep the things it does well.
  • HDTV
  • Helper App – could have an element that if the browser doesn’t know what it is – they call another app that knows what to do with it.
  • Transition Plan
    • convince one progressive browser maker to integrate.
    • convince one secure site to require its customers to use that browser
    • Strong Cryptography – ECC 521 / AES 256 / SHA 3-256
    • ECC521 public keys as unique identifiers
    • Secure JSON over TCP – much more flexible – not just request/response
    • URL – web: publickey @ ipaddress / capability
    • Trust Management – Petnames
    • Vat – would create “Cooperation under mutual suspicion”
    • JavaScript Message Server <–> Qt
  • The Old Web: Promiscuity
  • The new Web: Commitment

Day 2

– Angular 2 Forms
– Building Office 365 SPAs with Angular and CORS
– Directives in Angular: 1 + 2 = WIN
– Componentize your app with Polymer Elements OR Foundation for Apps: Integrating AngularJS with Responsive Web Apps
– Creating d3 Components with Angular2 and TypeScript OR Angular + Cordova + Monaca = Killer mobile app development
– A Token Walks into a SPA…
TypeScript and Angular 2.0
Moving to TypeScript
  • mv files from *.js –> *.ts
  • create tsconfig.json
  • fix errors (still produces correct js files)
  • add classes
  • move to using es6 modules
Angular 2 Forms
Building Office 365 SPAs with Angular and CORS
  • Azure AD – OAuth
  • ADAL JS
    • 2 components – adal.js / adal.angular.js

From the other – https://github.com/jacobscarter/angular-crazy-fast-prototyping

Directives in Angular: 1 + 2 = WIN
Decorators
  • <div ng-click=”handlePaused()”>
  • Gives new functionality to the dom node.
Directives (A2)
  • @Directive({
    selector: ‘[blue]’
    })
    export class Blue { … }
Componentize your app with Polymer Elements
Polymer Starter Kit
Offline
A Token Walks into a SPA…
  • jwt – json web token decode/encode
  • Used decodeJWT filter
  • No state on the server for logged in or not instead we have a jwt or we don’t.
  • RouterOutlet for Angular2
  • Change from RouterOutlet to LoggedInOutlet from ‘./LoggedInOutlet’
  • http://jwt.io/
  • http://auze.ro/auth-angularu
  • @mgonto
Design+Performance

  • Speed is more important than design embellishment
  • Users expect sites to render in under 2 seconds
  • Added in-page reminders for how things are going with performance – example etsy.
  • window.onload is not the best metric for measuring website speed
  • http://www.webpagetest.org/
  • Good metrics
    • Start Render
    • Speed Index
  • Scripts and css have a higher priority
  • Can have scripts labeled async and then they won’t have the high priority to the browser
  • gzipped?
  • custom metrics – define most important elements on the page
  • http://stevesouders.com/talks
  • @souders
  • https://developers.google.com/web/fundamentals/performance/critical-rendering-path/index?hl=en