RxJS, Preact and Inferno -- Alternatives to the typical React approach to building applications
Last week I had the opportunity to attend Modern Web's meetup at Netflix and it was entertaining to say the least. We listened to some great talks by Corey Grunewald, Mars Julian and Stephen Rivas, Jr. We also got a thorough overview of version 4 of React Router from the creators, Ryan Florence and Michael Jackson. Jay Phelps gave an interesting talk on RxJS and how to use it with Redux and React.
Inspired by Jay Phelps talk, this week we are looking at some libraries that offer alternatives to the typical approach to a React application. Redux seems to be the default for complex state management and redux-thunk or redux-saga are the commonly used libraries for handling asynchronous operations with Redux. RxJS is slightly different approach to handling asynchronous data and doesn't necessarily need to be use in connection with Redux. We're also exploring some alternative libraries to React, Preact and Inferno. Both libraries mimic the React API fairly closely, but under the hood have different implementations.
Happy Coding!
-Sophia Shoemaker
You might not need Redux by Dan Abramov
People often choose Redux before they need it. “What if our app doesn’t scale without it?” Later, developers frown at the indirection Redux introduced to their code. “Why do I have to touch three files to get a simple feature working?” Why indeed!
Dan Abramov, the creator of Redux explains why you might not need Redux in your application and when you'd want to use it.
Tutorials
RxJS + Redux + React = Awesome
These slides from Jay Phelp's talk at the Modern Web meetup give an overview of the issues in using callbacks and Promises for asynchronous data. He then dives into RxJS and how it can help resolve some of these issues. Watch the video here: https://www.youtube.com/watch?v=AslncyG8whg and check out the redux-observable library that allows you to combine RxJS goodness with Redux awesomeness.
RxJS -- Don't Unsubscribe
RxJS makes use of two different objects, Observables and Observers to transmit asynchronous data. Observables have a subscribe
method which takes an Observer object. When an Observable emits some data, the Observer can take that data and use it as it needs. When the Observer is no longer interested in handling the data from the Observable, it can unsubscribe
. This article discusses some better techniques to unsubscribing from Observables.
Use RxJS with React
There are a myriad of use cases for RxJS. With just a few operators you can implement Redux-like state machine, schedule animation or deal with any type of events no matter whether it’s WebSocket message or filling in the text input. This article explores how to implement the core concepts of Redux -- reducers, actions and the connect function all using RxJS.
Code
Preact
Preact is a fast, 3kb alternative to React, with the same ES2015 API. Preact retains a large amount of compatibility with React, but only the modern (ES6 Classes and stateless functional components) interfaces.
Inferno
Inferno is React-like, isomorphic JavaScript library for building high-performance user interfaces. Inferno uses techniques to separate static and dynamic content which allows it to only "diff" renders that have dynamic values. Inferno is compatible with the standard React API, allowing you to transition from React to Inferno. Inferno also has a Babel plugin allowing JSX syntax to transpile to the Inferno virtual DOM.
React v15.3.2 shipped
Some highlights from this release:
- Add
as
to supported HTML attributes - Fix memory leak in
onSelect
implementation - Fix issue with
dangerouslySetInnerHTML
and SVG in Internet Explorer - Avoid "Member not found" exception in IE10 when calling preventDefault() in Synthetic Events.
About

Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.