Babbel Bytes

Insights from the Babbel engineering team

React Amsterdam Conference Highlights

Davide Ramaglietta

Davide Ramaglietta and Alexander Gudulin from R2D2 team of the Learning Engineering Area attended the biggest React conference in the world with 1200+ attendees. Here is their impressions on the event and opinions on what they heard:

We had the feeling that nowadays hottest topic 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, whom was speaking about using State Machines and Statecharts to manage state’s applications in particular React Component’s state. 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 Finite State Machine

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, he 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 his own react-automata library, a state machine abstraction for React that provides declarative state management and automatic test generation.

If you are interested of going in more details about the topic, here the link to the slides of the talk.

Structure Your App’s Story With Sagas and Selectors

When you build an app with react and when it scales 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 input or as a result of API call. Where should we put the function for filtering a list of something?

We need to use selectors for that. 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 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 may be 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 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

Among 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 here

Some others engaging talks came from Tracy Lee speaking about Reactive programming with RxJS, the “GraphQL at scale with AWS” by Richard Threlkeld who exposed the realtime and offline features of AWS AppSync and lastly Manjula Dube showed all the new possibilities that React16 and its new core algorithm has 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? Did we learn something? What did we hear that is worthed to share with our team and colleagues? Did we get enough gadgets? Did we met some cool people? Did we increased my network of developer fellas? Each of us has his/her own answers to this 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

Facebook Twitter Google+ Reddit EMail
Comments