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 Renderer (can be ios/angular u) <– —> main js thread
• Ex. NativeScript (cross platform framework for js applications)
• React Native — integration between it and A2
• • https://github.com/uber5001/angular-react/
• Angular 1 – DOM template + Data = DOM View
• Server-side rendering
• • Faster startup
  • SEO
  • Previews

• Visual Studio Code
• mhevery
• https://github.com/mhevery/angular-u-app
• angular.io

Random:

• https://github.com/google/traceur-compiler/
• Module loader – https://github.com/systemjs/systemjs
• Flux –
• • http://victorsavkin.com/post/99998937651/building-angular-apps-using-flux-architecture
  • https://egghead.io/series/react-flux-architecture
• jspm
• webpack
• • https://github.com/andreypopp/typescript-loader (20+ star)
  • https://github.com/babel/babel-loader (240 star)
• http://swagger.io/
• https://github.com/lukehoban/es6features
• “Took until 3:23 to hear the first reference to Web3.0” – Twitter
• http://javascriptplayground.com/blog/2015/05/the-state-of-javascript/

Tomorrow

• The future of JS is ES6
• (not part of presentation) https://www.npmjs.com/package/gulp-traceur
• TypeScript <– ES6 <– ES5
• http://weblogs.asp.net/dwahlin/creating-a-typescript-workflow-with-gulp
• http://www.typescriptlang.org/

• https://github.com/johnpapa/HotTowel-Angular-TypeScript – example for using typescript
• Type definitions – http://definitelytyped.org/
• Once Typescript 1.5 comes out – then it will have the features of traceur ?? not sure if I heard correctly

• 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

• Loads and bundles modules
• Plugin system
• easy setup

• 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/

• insider.windows.com
• dev.modern.IE
• Microsoft Edge
• Example – http://codepen.io/anon/pen/zGPxjw

• 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

• 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.

• https://github.com/rangle/hackstack

• https://www.youtube.com/watch?v=HmWm21cCAXM

• RFC 1738 – // user : password @ host : port / url-path (1994)
• “The use of URLs containing passwords that should be secret is clearly uswise”

• 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

– 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…

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

• Azure AD – OAuth
• ADAL JS
  • 2 components – adal.js / adal.angular.js

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

Decorators

• <div ng-click=”handlePaused()”>
• Gives new functionality to the dom node.

Directives (A2)

• @Directive({
  selector: ‘[blue]’
  })
  export class Blue { … }

Polymer Starter Kit

• 1.0 – App Templates
• https://www.polymer-project.org/1.0/

• Service worker offline
• I found this: http://jakearchibald.com/2014/offline-cookbook/
• http://bit.ly/polycasts

• 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