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
-
-
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
- step0: start even smaller
- 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
-
modify AppDelegate.m / MainActivitiy.java file
-
code push
-
-
so you do this? No
-
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
-
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
