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
High five for React!
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.
medium.com
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.
slideshare.net
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.
michalzalecki.com
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.
github.com
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.
github.com
React v15.3.2 shipped
Some highlights from this release:
- Add
asto supported HTML attributes - Fix memory leak in
onSelectimplementation - Fix issue with
dangerouslySetInnerHTMLand 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.
fullstackreact.com
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.
Sophia Shoemaker