Davide Ramaglietta and Alexander Gudulin from the R2D2 team of the Learning Engineering Area attended the biggest React conference in the world with 1200+ attendees. Here are their impressions on the event and opinions on what they heard:
We had the feeling that nowadays the hottest topics in the React community are state management, the switch of REST architecture in favour of GraphQL and the potentiality of React 16 and further.
setState Machine
For both of us, the most interesting and intriguing talk was given by Michele Bertoli from Facebook (follow him on Twitter), who was speaking about using State Machines and Statecharts to manage the state of applications, in particular the states of React components. The concept was already been discussed in 1987 by David Harel in his paper “Statecharts: A visual fromalism for complex systems” and in 1998 by Ian Horrocks with his book “Constructing the User Interface with Statecharts”. Probably most of us heard about State Machines during their university studies, so we should all be familiar with it. In case you want to refresh some knowledge, see Finite State Machine on Wikipedia.
While most of the modern approaches (see Redux or Mobx) focus on the actions that a user can make and how they change the single object representing the single state of our application, Michele Bertoli suggests to focus on the states of our app. Hence, conceptualize the application as a set of states and transitions from a state to another. To help you in this tasks, he recommends the use of Statecharts.
He also suggests the xstates library to represent “Functional, Stateless JS Finite State Machines and Statecharts”. Also, he maintains his own react-automata library, a state machine abstraction for React that provides declarative state management and automatic test generation.
If you are interested in going into more detail, check out the slides of the talk.
Structure Your App’s Story With Sagas and Selectors
When you build an app with React and when it grows, it’s hard to say where the business logic should live. We can split the logic in three types:
- Data manipulation
- Conditionals
- Async flow
Data manipulation
Some data comes from the user’s input or as a result of an API call. Where should we put the function for filtering a list of something?
We need to use selectors for that. A selector is a pure function with state object as argument.
Selectors can be used in mapStateToProps function and derived data would be passed directly to the React component.
Conditionals
We can use selector for the conditions and dispatch the action. The benefit of this approach is
- Action creators have access to the state object.
- They allow to return you whatever you want.
But maybe it’s better to place the conditions inside reducer?
Async flow
When an app make calls to remote services all the time, redux thunk doesn’t work anymore. Rebecca Hill says, redux saga is a better way. The mental model is that a saga is like a separate thread in app. Saga is a redux middleware, so you can manipulate it with normal redux action.
As a conclusion, don’t include extra tools and complexity if you don’t need it. Could not agree more.
Watch the full video.
Others
In addition to the topics mentioned above, there have been some other interesting presentations. It was particularly impressive to see what amazing stuff Shirely Wu could do combining D3.js (a library used for data visualization) and React. Her live coding session was thrilling! Here an example of the results.
Speaking about exciting live coding session, we can’t omit to mention the one and only Ken Wheeler (follow him on Twitter). He literally made the all conference jumping at rhythm of disco 90s music while showing a 3D visualization of a music mixer obtained by combining React with the AudioContext interface. The full talk can be found here.
Some other engaging talks came from Tracy Lee, Richard Threlkeld, and Manjula Dube. Tracy Lee spoke about Reactive programming with RxJS. In “GraphQL at scale with AWS”, Richard Threlkeld exposed the realtime and offline features of AWS AppSync. Lastly, Manjula Dube showed all the new possibilities that React16 and its new core algorithm have to offer.
Open Source Awards
There was time also for some awards! Congratulations to Apollo GraphQL, which was named the breakthrough of the year, and to Storybook, who won the award as the most impactful contribution to the community. As we also use this tool in our Learning Teams, we feel in due to forward some appreciation as well. Good job!
Conclusions
As always after attending a conference, the feelings are various and contrasting. Could have been better? Have we learned something? What did we hear that is worth to share with our team and colleagues? Did we get enough gadgets? Did we meet some cool people? Did we increase our network of developer fellas? Each of us has his/her own answers to these questions. We would like to keep seeing more of these conferences out there, to thank Babbel and the conference organizer and to remember a precious tip that came from Sara Vieira and her horror story: Close all your illegal activities on your laptop before going on stage and showing it to the whole crowd out there!!
Link to all talks
Photo by Samuel Pereira on Unsplash