React Meetup At Pinterest

20170307 react meetup

  • pinterest

Opentable

  • opentable.com/career
  • M2M - monolith to microsities
  • google pagespeed

  • today
    • data: [sql server, mongo, elastic search]
    • service: [user, availtiy, reservation, restaurant, cuisines, offers]
    • experience: [home, geo, profile, search, rest ref, mobile web]
    • react, redux, immutablejs, infermojs, node 7, express, hapi, es 7 /babel
    • performance 48 to 98
    • simplicity - react on way binding, isomorphic rendering, predictability
    • state replication
    • component composability
    • progressive streaming/rendering
    • deployment in less than 5 minutes

Evolution of Pintereset Web

  • old stack: 2014 django, jinja, backbone,
  • new stack:
  • roadmap to react
    • 2014 -> common js -> render consolidation -> nunjucksification -> sever-side nunjucks -> react nunjucks bridge -> now

How we migrated pintereset profiles to react

  • why react? 2013
  • no code freeze
  • rewrite the whole app from scratch is risky and expensive
  • how can we avoid this?
    • migrate piece by piece
  • hybrid app
    • two frameworks for a certain period of time
    • transition from old framework to new framework
  • challenges
    • javascript rendering on the server-side
    • react render: components inside your old framework
    • make sure new UI performs well
    • adapter for old data sources
  • server-side nunjucks { % block content % }
    { % for pin in pins %}
  • { {module('Pin', data=pin)} }
  • { % endfor % }

{ % endblock % } </code>

  • server-side before
    • user agent -> web app, python django web server -> api
  • server-side after
    • user agent -> web app => api
    • web app -> worker (node restify server rendering nunjucks)
  • Denzel-React Bridge // Denzel Component in Nunjucks { {module(DenzelPin, {pinId: '123'} ) } }

// React component in Nunjucks { {component(ReactPin, {pinLd: ‘123’} ) } } </code>

class DenzelReactBridge extends Modue { onAddedToDom() {

} }

  • A/B testing framework { % if context.inExperiment('react') % } { {component(ReactPin, {pinId: '123'} ) } } { % else % } { {module(DenzelPin, pinId='123')} } { % endif % }
  • adapters for old resources
  • 20% domInteractive response end boardpage views
  • 10% pinpageviews profile page views

modernizing legacy codebases with redux(npr)

  • NPR: national public radio
  • justin bachorik
  • https://npr.codes/

  • 10+ years website
    • jquery, jquery plugins,
    • backbone, mustache, handlebar
    • flash
    • new features
  • tough decisions ahead
  • (Re)introduction to redux
  • redux: applicaiton state { audioUrl: http://wwww.npr.org/audio.mp3, duration: 139, isPlaying: true }
  • redux: actions { type: Actions.TOGGLE_PLAY }
  • redux: reducers
    • has to be pure
    • immutability (state, action) => state

const Player = (state, action) - { switch(action.type) { case Actions.TOOGLE_PLAY } }

  • Redux: Store api
    • getState()
    • dispatch(action)
    • subscribe(listener)
  • Redux: unidrectional data flow
    • store, reducer, state, view(react), action
  • Redux: middleware const myMiddleware = store => next => action => { // @todo: something useful? return next(action); } const myMiddleware = ({dispatch, getState}) => next => action => { // @todo: something useful? return next(action); } </code>

const myMiddleware = ({dispatch, getState}) => next => action => { // @todo: something useful? return next(action); }

  • example: outgoing data
  • Redux: Outgoing middleware const outgoingMiddleware = { { getState } } => next => action => { // @todo: something useful? return next(action) }
  • Redux: Incoming middleware const incoming = { { dispatch } } => next => action => { if(!inited) { ${'document'}.on('stationChanged', station => dispatch( { type: Actions.STATION_CHANGED, station })) } }
  • So what?

  • Steps
    • step0: start even smaller
      • learn, get a feel
      • build process to webpack was hard
      • good culture of testing
    • step 1: start small
    • step 2: teach your app to communicate
    • step 3: world domination
  • use middleware to isolate legacy code and new code
  • require.js r.js

ReactNative

  • client: eaze => medical marijana
  • me: i made react native fast, you can too -> launchdrawer.com
  • tal kol: @talkol medium. perforamce limitation, recycling rows for high performance react native list views
  • what does the driver app do?
  • why not javascript?
  • example app?
    • github.com/hgale/LocationDemo
    • fixes are in pull request
  • testing
    • test on a device
    • trest with app backgrounded and screen locked
    • test with app backgrounded for ~8 minutes on ios
    • test 10~20 minutes
  • react-native-background-timer?
    • no, on ios based on executing finite-length tasks
    • see https://github.com/ocetnik/react-native-background-timer/blob/master/ios/RNBackgroundTimer.m
    • how much time you get after you app gets backgrounded is determined is not guaranteed. App will be killed after roughly ~3-5 minutes
  • iOS background modes
    • in the interfacce builder in xcodde
    • background modes, check on location updates
    • put it in your plist file
  • NSLocationAlwaysUsageDescription

  • Backgroudn timer code?
  • React Native Timers don’t work in the background
    • see brent vatne’s feature request http://github.com/
  • things to node
    • 90% of the driver app is javascript
    • code push doesn’t support native code
      • https://github.com/microsoft/react-native-code-push
    • modify AppDelegate.m / MainActivitiy.java file
    • code push
  • so you do this? No
    • use signifcant-change location service: http://developer.apple.com/lirary/content/documentations/iPhone/conceptural/ipphoneosprogrammmingguide/backgroudeecution/backgroundexcution.html
    • chris scott https://github.com/transitiorsoft/react-native-background-geolocation
  • further reading
    • location demo pull request with timer fix

    • ios/android native module api’s supports emitters, promises, and callbacks

      • ios facebook,github/native-modules-android.html
      • andorid:
  • what about android?
    • no need to ask permission to run in the background
    • use a service, general-purpose entry point for keeping an app running in the background
    • services have higher priority than activities
    • see android application fundamentals section on services
      • https://developer.android.com/guide/components/fundamentals.html
  • my contact
    • http://launchdrawer.com @htormey

Serverless

  • david wells
  • building static website with react & phenomic mooc/phrnomic
  • future stack
    • npm, postcss, webpack, phenomic, disqus, auth0, css modules, react, redux
  • dynamic vs static
  • dynamic -> speakerdeck.com/biilmann/the-jam-stack
  • static website -> no hacking, cdn,
  • supersimple.
    • md -> contents
    • pheonomic -> contents generator, react + webpack
  • cheap -> s3, neifify => really free. nenofy?, namofy?
  • dynamic + static
  • serverless -> github.com/serverless/site
  • search engine indexable
  • service workers npm run build
  • lambda function as html
    • scale for you
    • pretty good with spotty traffic: auto scaling
  • App & Site
  • webpack - offline
COMMENTS
Related Post