React Conf 17 Recap
- 1. React Conf 2017 @alxbabkov (twitter) Rex Software
- 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.
- 4. Experience React Conf in 2D
- 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.
- 13. Cross Platform Chart Rendering • Use Victory -> Extremely high code reuse. CODE REUSE IS SO “HOT” RIGHT NOW
- 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.