Thought I'd post my React Conf notes here for anyone who is interested!
-
New! Prerelease channels: In order to support other library and framework devs, and to enlist early feedback, the React team is debuting 3 new prerelease channels: Latest (stable), Next (on-deck for stable release, but doesn't adhere to semver and may intro breaking changes), and Experimental (caution! likely to contain large and breaking changes). Latest is the only channel recommended for user-facing applications.
-
New! Experimental release of Concurrent Mode: Concurrent Mode supports interruptible rendering, including suspending render in components whose data has not yet returned (Suspense API). I got a glimpse of SuspenseList in action in the context of rendering a list of photos from a remote source and it was pretty neat - I think there's a lot to be excited for here, especially for mobile developers. This new API required a significant rewrite of React, however, and the team is still ironing out some kinks around page transitions, so emphasis on "experimental" (read: don't expect to use this API in user-facing code in the very near-term!) Good news for those of us who use/are interested in using GraphQL is that Relay is already baking Suspense in and there are indications the patterns intro'd by GraphQL are driving thinking on implementation across the ecosystem, meaning when Suspense is released in stable there shouldn't be friction when using together with GraphQL front-ends (was a concern I had early on). See this thread and this thread re:react-router and related discussions. I recommend reading the "What Suspense is/is not" and the "Traditional vs Suspense" docs to get a better sense of the API and its relation to data-fetching, or watching Joe Savona's talk from Day 2 if you prefer video.
- Design systems were a popular topic of discussion this year, as tools such as Figma and Framer(X) have further integrated the practice of design and front-end development. Many teams are at some stage of developing an atomic/component-based design system in coordination with development teams that aligns really well with the React component model. Design-system-driven development promotes code reuse for common UI and helps teams codify interaction patterns and "look and feel" across products. There were two talks (3 if you count Jed Watson's talk on react-select) in particular that dealt with this: the React team's talk[1:15:00] on rebuilding FB web, and the Airbnb design system engineering team on rebuilding the Airbnb design system[6:10:00] and moving away from DLS - great takeaways here in terms of "best practices" when developing design system components and avoiding fragmentation and prop-bloating via base/variant pattern.
-
State machines and state diagrams: following Cameron Yick's talk on visualizing front-ends (resources here), a lot of folks were discussing David Khourshids talk from React Rally 2017 on state machines and subsequent release of the XState library (notes on latest here). State machines are common in design for expressing atomic component states, so it makes a certain amount of sense that there's a renewed interest in this pattern given the energy so many teams are putting into design-system-driven development. Ryan's been using this library for Reach components and has been tweeting some neat examples, if interested.
-
React dev-tools have been updated to support better profiling and reloading (Fast Refresh is available already for React Native, and being actively developed for React DOM. May replace hot-reloader!!!)
-
Fantastic talk[2:58:00] on mobile-first web animations and tools + techniques from Alexandra Holacheck. Other fantastic talks that had me thinking about component composition (the art and science) from Jenn[2:32:00] and Jed[6:02:00].
-
Misc updates: The React team is building their own internal CSS-in-JS solution (not yet public). There is likewise work happing internal to the team on focus management and different input types (touch, gestures, stylus, etc), as well as on better support for SSR: lazy-loaded components, streaming (and hybrid SSR/streaming/progressive hydration), and Suspense compatibility.
-
For GraphQL and Typescript users, this will be of interest: https://graphql-code-generator.com/docs/getting-started/
-
React solves back-end + distributed systems problems: one-way data flow via event-sourcing lightening talk[5:26:00] and release of Faust Python stream processing library from Robinhood. Looks really interesting!
-
Some really creative projects, perhaps of particular interest for those with kids are the Wick Editor for creating games and animations and Thoriumsim next gen startship controls!
Ooh, sorry, embedded slide attribution as follows:
slide #1 - Joe Savona;
slide #2 Tae and Maja;
slide #3 Jed Watson!