In the past year, we transitioned from teaching BackboneJS, to AngularJS for our front-end framework choice, and now we are adding in ReactJS.
Why we’re teaching ReactJS and Flux architecture
It’s not just because they are the latest new hotness, although they are very quickly gaining in popularity. Many of the programmers I respect have encouraged us to teach it, and are using React in their own companies and projects. It’s also an important (and possibly simpler) alternative to the MVC or MV* architectures that have been used for almost every web app project for years.
Why you should try it
Having built some code in it, I think ReactJS is worth adding to your toolset or considering for a new project. It has some great advantages:
-
It’s only the view layer, which means it’s simpler to understand which things you need to learn, compared to a whole MV* framework like Angular. You can use your favorite router, such as Backbone, Angular, or Facebook’s Dispatch.
-
JSX (JavaScript + XML, essentially HTML tags) is a great addition to the build process. You probably already use Browserify, CoffeeScript, or some other transpiler or build process. Being able to specify the HTML and JS for your web component in one place makes it easier to understand exactly what it does. And, the Reactify JSX transform for Browserify fits right in to your build flow.
-
JSX tags are easier to understand your app with. The Chrome Developer Tools React Extension is great debugging tool.
-
The Reactive Manifesto outlines how all applications are becoming more “Reactive.” If you haven’t seen it yet, it’s worth a read. Also read about Functional Reactive Programming.
-
The next version of JavaScript is EcmaScript version 6 (Harmony). ES6 mode saves some time and lines of code, and offers great new features.
Here’s what others had to say about ReactJS:
You have nodes within nodes. For example you have
<body>, and within that you have a<div>, and within that you have an<h1>. React components work as basically a 1:1 mapping. You create your custom components and your custom sub-components. I really like that paradigm. It helps me think as a front-end developer about the stuff that I actually care about—the way the content is presented to the user.
I like the patterns that ReactJS uses. For instance, it has some optional methods that you can use to implement various different lifecycle hooks (the stuff that was inspired by iOS), like
shouldUpdateComponent. In my opinion, in Backbone, the view system is highly evented, and it’s really easy to get tangled in an event cascade, where events are triggering other events, and then triggering other events. For me, it’s hard to keep that model in my mind. In React, for every single component, it’s pretty easy to tell what the lifecycle of that single component is.
I like the one-way binding system. I like how it creates this single circular flow of responding to events, changing the model, and updating the view. It’s easy to reason about.
–Ryan Sobol, Director of Education, Code Fellows
Pros:
- A slimmer overall minified bundle. With React as the view layer, we can remove dependencies on jQuery and Underscore.js.
- Server-side rendering. This is a huge feature, and actually quite easy with React. Even better, if you have a single-page JavaScript application for your site, React can bootstrap the HTML of the page server-side and then start up the app without re-rendering any HTML!
Cons:
- Heavy handed DOM wiping and reflows.
- Memory leaks and dreaded “Zombie Views.”
–Ryan Roemer, partner at Formidable Labs
What do you like about ReactJS? Let us know!
