2. Why’d we go?
• Every staff member in our business gets a 3k
learning and development budget + leave every
year to attend conferences, buy books, put toward
courses for self improvement etc.
• Conferences are invaluable - if you’re new to a
field or working in an area where tech is in heavy
flux (e.g. javascript) they’re 10 times more
valuable.
• We are hiring by the way ;)
3. React Conf
• Run on a raffle system - not sure how we got 3 people
past the line (1 in 20 odds once you take into account
diversity scholarships etc.).
• 2 Days of react goodness.
• In Santa Clara … not a lot to do in Santa Clara.
• Facebook react engineers in attendance.
• You don’t see the facebook logo much, nobody selling
you anything.
5. It’s all about Fiber
• The keynote was about fiber, react cartoons on
fiber, talks on async relating to fiber, panel focus
on fiber. It’s all the rage.
6. More fiber
• “Fiber" is a new rendering / scheduling / reconciliation engine designed to replace the
existing “stack” implementation. Its been in R&D for 2+ years, in dev for the last 5
months or so.
• Javascript is single threaded, meaning it gets blocked - most of the time spent on the
main thread with react is spent rendering components - imagine if every 16ms or so
(i.e. 60 FPS) the work that had been done so far could be saved, “paused” and then
other higher priority work associated with animation and user interaction (e.g. clicks
and taps) could be handled -> WIN. Once the higher priority work was done, the lower
priority work could continue.
• http://isfiberreadyyet.com/ - .. no. But… facebook is testing it on their site. It’s now
active for 50% of the fb.com userbase ~ 1 billion users.
• Server rendering is not currently supported but is expected to be sorted in the next
couple of months. Once that’s done, will be released to core. Interestingly fb do not use
server rendering anywhere.
• 2 months until stable but you can start using it today if you want.
7. Still about Fiber
• An innovation engine (like what the NBN would have been if it wasn’t mostly copper):
• Approachable code base -> More community contribution.
• Easier to write custom renderers (possible before but hacky before).
• Performant animations, deferred rendering for off screen / hidden components, god knows what
else.
• Other benefits:
• Return an array of components instead of a single component - no more div wrapping. -> Return
an array rather than a div ;)
• Ability to add error boundaries (don’t crash your whole app if you don’t want to!!)
• It will not deliver any major performance benefits when it is merged in… you know that video of the
triangles… that won’t happen overnight. What is being merged in is feature parity to current “stack”
engine in all its synchronous glory.
• Async rendering will likely require a new api for components / different lifecycle methods etc.. but…
the important thing is that stack get’s released - once it’s in, the platform is there and the fun starts.
8. and package size…
• Large bundle sizes: react = poor web citizen.
• React core team has started working with
chrome engineers (Addy Osmani etc) to improve
out of box size / load strategy / performance of
core.
• Code Splitting for the win (component + route
based) - if you’re not doing code splitting… do
code splitting.
9. Native - cool releases
• 2 companies we didn’t expect
• Microsoft (react native ci / cd, live device testing, user analytics,
crash reporting, beta platform + release platform). http://
mobile.azure.com - https://www.youtube.com/watch?v=By_gEjapx24
• Wix (custom physics engine - https://github.com/wix/react-native-
interactable). Fluid user interactions at 60FPS via a declarative API
and no native code.
• 1 company we did
• Airbnb - YAR (yet another router… aka https://github.com/airbnb/
native-navigation). Works for brown field apps, different take on api,
performant, nice animations… open sourced but not ready - 6-8
weeks.
10. Testing
• JEST is good, great AND cool, use JEST for most
things. Zero (+ a little) config = win.
• Commonly associated with snapshotting components
for react, but can be used to do normal tests +
snapshot data or practically anything else as well
• e.g. if i give this array of objects to a function which
filters those objects down… what happens if inbound
objects get some new properties? - run - copy -
paste… or just use snapshots :)
11. MobX or Redux
• Redux for larger apps, larger teams, complex
apps, easier tests - scales better ™.
• Mobx - faster for prototyping, not bad for smaller
teams, simpler applications.
• Subjective: If you’re undecided - learn redux.
12. Theming and CSS
• Not too many talks on this but lots of talks with
individuals on it.
• Basically… theming for components is still a
problem.
14. Reason
• A new language by Facebook.
• Has full support for React out of the box.
• Javascript…ButGood™.
• https://facebook.github.io/reason/.
• Be aware of it, maybe play with it but otherwise just see what
happens.
• TBH - i still don’t fully get where it sits or if it’s going to get take up.
• but… Facebook has re-written 25% of messenger.com in it.
15. Meeting the react core and
native teams
• This was fun.
• They’re totally just people, drink, bleed, suffer
imposter syndrome, are accountable to bosses
and all the rest.
• Are super excited about the possibilities of Fiber.
