20170307 react meetup

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 % }

- 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’} ) } }


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);
}


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

react

React Meetup At Pinterest

20170307 react meetup

Opentable

Evolution of Pintereset Web

How we migrated pintereset profiles to react

modernizing legacy codebases with redux(npr)

ReactNative

Serverless

dynamic + static

App & Site

Popular

Latest

Category

Tag Cloud