Why I chose ReactJS over other web app front ends?
I did a lot of work with www.meteor.com, and found it to be missing some key features such as easier joins of collections. And there was a mobile app in the iTunes store, Ralph Chat, that was slow scrolling and hitting ‘send’, I believe this is because they were using the old template system that Meteor has recently replaced with Blaze. Since MeteorJS is pre version 1.0, I still plan to try Meteor out again once it’s released, as I’ve got an app almost finished in MeteorJS.
However, I wanted to get a different web app & mobile app going and fast, so I took a very quick look at AngularJS. It was confusing, with their API terms such as scope, dependency injection, their own module system, and a few other Angular specific terms. Although that’s not why I decided against Angular as I don’t mind a bit of a learning curve if it’s the right tool for the job. I was reading other blog posts about Angular’s poor performance in mobile apps & browsers, and since we live in a “mobile 1st” world I was hesitant. Even though the Ionic mobile GUI for AngularJS looks amazing, I decided to try ReactJS.
There were also blog posts by guys with far more Angular experience than me (I only ran through the Angular tutorial, and hooked up a simple Firebase.io test app). These guys were saying ReactJS is easier to reason about, they write fewer lines of code, and ReactJS renders way faster than Angular, or Backbone. There’s even people using ReactJS within an Angular or Meteor project, so I figured why not just write the app from scratch in ReactJS.
In terms of Backbone, I use the Rdio music streaming app on iPhone & iPad, it’s super slow, very annoying to use when scrolling through album lists… and it was written in Backbone… Although the Google Music Play app is also super slow (i have no idea what it’s written in?)
I also took a look at mobile specific frameworks such as Ionic, Titanium, Sencha and a few others… I decided that ReactJS may take a little extra time to do the GUI without the pre-built mobile GUI that other frameworks offer, but I’ll have the benefit of using the same code base for both mobile apps (with something like PhoneGap) and desktop browsers.
btw – I chose to use Parse.com for the backend storage, push & analysics. I was initially going to use FireBase, but they don’t have full internal searching implemented yet, due to their real time DB.. I may use FireBase for parts of my app that need realtime updates if Parse.com can’t handle that task.
What I personally Like about ReactJS!
So far I’m liking the speed at which I can mock up GUI with ReactJS. It’s actually faster to not keep switching between files, as the controller code and the HTML (JSX) are all in the same function call. I suppose you could separate this out if you needed to for large teams using something like RequireJS, but for what I need it’s pretty slick.
The concept of props and state are super simple to understand. props are properties you pass from one ReactJS component down to it’s siblings, and state is for things that change so the GUI updates automatically. You can easily pass state and props down or up between components; although it takes a bit of getting used to the patterns used (passing this.yourHandlerName down the component chain), yet it’s simple and quite obvious when reading the code what’s going on.
Also, ReactJS is a hard baked project that’s in heavy use by both Facebook and Instagram unlike pre v1.0 MeteorJS.
I won’t bother with any code examples as you can check out the simple examples on the ReactJS site.
What I don’t like about ReactJS!
The big things are that ReactJS doesn’t have it’s own module system, doesn’t have it’s own backend DB like MeteorJS does, doesn’t have an official router (I’m using React Router and so far so good, although I’ve yet to do anything major with it). In that respect ReactJS is like AngularJS without a router or module system.
For modules I’m using RequireJS (actually Browserify & Watcherify) which follows the RequireJS format. But this took me a while to wrap my head around how it works i.e. I didn’t realize including ReactJS in my HTML file’s <script> tag was breaking things as I needed to use the node model of ReactJS for React Router to work (not the script tag). It’s extra stuff and time that you wouldn’t have to mess with in Angular or Meteor. But I think it’s going to be worth it to have a full ReactJS front end, and other frameworks have their own learning curve.
ReactJS could use a more explanations in the documentation, it’s good but not great. It would be nice to see a bit more description or examples in the docs for using things like Refs or child properties. I find the ReactJS documentation isn’t laid out in an easy way to find things, it’s more like a blog, but it’s just a matter of me getting used to it. And with the help of Stack Overflow I’ve been able to get things moving fairly quickly. Granted, I haven’t done much reading on ReactJS, no books, just checking out a few code examples and it’s pretty straight forward.
I didn’t have the luxury of time to do more research and testing of various frameworks, so I did the best I could when choosing and relied on both my previous experience, gut instinct, my research, and reading other developers blogs. At the end of the day, I’m picking a horse to ride, if the horse falls over and I can’t get the horse back on it’s feet then I’ll change horses. But for now I’m knee deep in ReactJS and liking it.