2015-04-15 angular js

• Joel Skrepnek
• Owen Mead-Robin­s

first session

• David Orchard (@DaveO): Building Walmart’s Grocery To Go in Angular
• dev
• cloudfour
• grocery v1: gulp uild
  • browserify
  • underscore server side template
  • modular css files
  • asset pipelines for css
• v1 problem
  • usability
  • performance
  • developer productivility
  • tight coupling between client and server
• exhaustive multi-year framework
  • single page app
  • power
  • com
  • backbone/ ember
• sytles for web frames
  • control or intversion of control
    • js define controllers, views and DOM gets rendered
      • backbone, ember
    • dom defines which contorllers/models/views
      • angular
• model checking
  • explict and potentally naive re-render
    • backbone
  • dirty checking
    • angular
  • oveserale
    • react
      • adds a virtual DOM abstraction to optimize DOM render
• angular
• angular benefits
  • easy to develop/use
  • many modules, ui-router
  • good testing
    • karma, protractor
    • %http.flush(), $timeout, $httpBackend
    • promises
• haters gotta hate
• Grocery V2
  • angular
  • nodejs
  • extend Gulp to integrate with W2G/ATG
  • Replace JSPs one at a time
  • partial SPA first (product detail + cart)
• Status
  • Cart with Add to Cart shipped out
  • product detail, list, favorites
  • remaining features
  • performance -> big one
• buidl and other imp
  • mockserver
  • cache busting
  • angular’s template cache
  • karma tests, jshint
  • CI on dev and release branches
  • Perf measurement
• lesson learned
  • customers
  • productivity
  • build
  • SPA complexity
    • state, gc
• how to deal with different status on the browser and how to store and destroy the states
• performance ilessons
  • don’t call functions in watchers
    • has made some code gross
      • ng-if = “blookSlotService.locationType ##= ‘pickup’ && bllokSlotService.daysArray[$parent.$parent.$parent.$index].slots[book”
  • Lazy-load into DOM: we sue ng-include
    • <ng-include id=‘ng-inc-why-dekuver-flyout’
    • 20% speed up
  • some obvious things didn’t work:
    • http batch to node layer
    • one way bindings slow down initial render
• react within angular
  • POC #1, heavy angular page with little interactivity
    • render perf 6x ( 400ms to 600ms)
  • POC #2, heavy angular with many interactive
    • hard to convert
    • render perf: 4x
• angular -> react receipes
  • keeps state in angular $scope
  • ng-if doesn’t work with jsx
    • create a component for each ng-if
  • event handler updating state
    • create a component to render the state
    • it calls param on event
    • pass in a function
      • calls $scope.apply around the old function
      • sets caller’s state after
  • directives? forms?
  • ngReact?
• living the dream?
  • angular allows coarse and light grained components
  • react forces light grained
    • lots of coupling
  • philosophy: lots of fine grained components reduces productivity due to tight coupling
• angular 2.0
• all angular -> snappy, slide move up and down
• angular 2 migration plan
  • type script
  • new router -> 1.4
  • timezone ->

2nd slide

• Decoupling angular js using providers
• Tyler Jones: Decoupling Modules and Components in Angular Using Provider
• spacelist - spacelist.ca
• $injector
  • invoke(fn)
  • instance(type)
• Factory
  • componenet
  • invoked by $injector service
• Service
  • componenet
  • instantiated by $injector service
• Factory vs Service
  • factory -> to make a new type
  • service -> to make a new manager
  • http://api.randomuser.me
• Provider
  • component
  • invoed by $provider
  • Required to have a $get property
  • $get is invoked with the $injector
• factory is another form of a providor
• service is another form of a factory
• '''everything is provider'''
• how this works
  • $provider created with component ‘$prvodier’ which is itself
  • $injector created with componet $injector which is itself
  • all components registered with module.provider are added to $provider
  • angular runs all blocks registered with module.config
  • $get property of components in the $provider are added to the $injector
  • Angular runs all blocks registered with module.run
• why do we want $get and providers?
  • to be able to configure our services at run time
  • inject settings and configuration between modules
• write a useful provider
• key and data injection
  • problem:
    • setting api keys in each env while keeping the application generic
    • adding data to the page on initial reuest the server
  • requirements
    • keeping js builds generic, by loading keys based on env
    • reducing number of requests
    • stripepublic key, googlemaps key, kissmetricsid, ga key
• github @squirly

action item

• what’s react?
• what’s jsx?
• checkout YVR dev slack
• ng-react?