Awesome
React + RxJS + Angular 2.0's di.js TodoMVC Example
React provides the blazing fast DOM rendering. RxJS allows us to deal with events and user interaction as "Arrays over time" that we are able to filter over with map, filter, and their related friends. Finally, Angular 2.0's di.js dependency injection tool allows us to bring in some measure of testability to the application (not yet demonstrated here).
This exists simply because these tools are interesting, and seeing them all playing together is fun.
Inspired by (by this I mean liberally borrowed from):
Todo:
- Add some tests!
Learning RxJS
The Reactive Extensions for JavaScript (RxJS) is a set of libraries for composing asynchronous and event-based programs using observable sequences and fluent query operators modeled after Language Integrated Queries (LINQ).
Before you continue, you should watch this Async JavaScript at Netflix talk from Jafar Husain (@jhusain). It's really great.
Why use RxJS?
"It's Underscore for events."
In a lot of ways, this is valid enough reason to use Rx. If events are OK, and promises are "pretty cool", Rx Observables bring it to the next level. You eliminate the need for passing around strings and dealing with callbacks with events. You remove the hassle of dealing with memory leaks when you forget to remove a listener.
Promises are a big step up from events. They can help solve these problems too, but they don't take it as far as they can. We are dealing with objects, that agree to do one thing and deliver the results when they are available. Rain, sleet or snow. There is no stopping the resolution of a promise once it has been set.
Rx Observables allow us to subscribe to an event, and to all of the events that follow. We are attaching to a stream of events flowing through a pipe. We can use tools like map, filter, and reduce (this is just the beginning) to modify the event stream, removing the need for gross control flow logic in our code. We eliminate "callback hell" start thinking about our data in more interesting ways. Data is the state of our applications.
RxJS Resources
- The introduction to Reactive Programming you've been missing
- LearnRX
- Creating Observables (RxJAva)
- Which Operator to Use? (static)
- Which Operator to Use? (instance)
Just as a note, Rx took quite some time to get my head around. I've been giving it passing attention for at least two years because my good friend Paul Taylor has been super excited about it for quite some time. The work he gets to do with Jafar at Netflix is pretty nuts. Pushing the envelope in big, interesting ways, and I take notice when really smart people are tackling difficult problems in interesting ways. I even spent my 40th birthday in 2014 at Jafar Husain's house for a day of instruction (which was an awesome experience). Even with that it took sitting down and doing this project to really get to the "ah-ha" tipping point moment :sparkles::punch::sparkles:
Learning React
React uses a virtual DOM diff implementation for ultra-high performance. It can also render on the server using Node.js — no heavy browser DOM required.
The React getting started documentation is a great way to get started.
Here are some links you may find helpful:
Articles and guides from the community:
Get help from other React users:
Learning Angular 2.0's di.js library
Dependency Injection Framework for the future generations...
Well... This one is a bit sticky ;)
Why use Angular's future dependency injection library?
This is bleeding edge for sure, but it is interesting and useful. While we don't have tests yet, having DI in place makes it a LOT easier. One of the goals of this project is to explore how testable this approach is.
It was inspired by this React + Angular DI article from Merrick Christensen ([@iammerrick)(https://https://twitter.com/iammerrick)) which pokes at the surface of using Angular DI with React. It would be really freaking awesome to get annotation support in React, or that is to say in JS generally. It makes DI so much nicer, and you can use it for other interesting things as well.
Implementation
This application follows the Flux architecture that is recommended for react. We work in the src folder, where we will find the entry point to the application index.js.
By the nature of it, the use of RxJS changes some of the event-centric ideas in Flux, but it keeps the spirit of it for the most part.
The application is built with es6, only using minor features (primarily the => fat-arrow notation for functions). Where React is involved, we are using JSX (and liking it).
Running
This application is assembled via gulp. You will need to npm install in the project folder to install dependencies, and then the application can be launched via gulp watch. This will build the project, start the web server, and open a browser page. It uses BrowserSync to monitor for changes and reload the page when they are detected.
The es6 is converted to es5 using the 6to5 library via Browserify. Browserify bundles everything together for us and converts from the commonjs node style requireing, into straight JS the browser can understand. It's been browserified!
What's the point of all this? (a disclaimer)
The point was to have fun and explore some cool technologies. This isn't here to serve as a recommendation! There is a huge amount of potential in these tools. You could even be successful with them today, given the right team and project. This approach is fun and interesting. There isn't a ton of boilerplate. The idea of eliminating control flow logic with declarative functional reactive style programming is an important concept that we should all be paying attention to. It solves some very hard problems that tradtional imperetive approaches can struggle to accomplish, or accomplish in ways that are difficult to reason about.
Credit
This TodoMVC application was created by @jhooks.