Angular JS Meetup

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?
COMMENTS
Related Post