Home » Software Development » Why I chose ReactJS ?

Why I chose ReactJS ?

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?)

Another reason is that the guys working on Puffball.io are using ReactJS for their EveryBit.com frontend, and doing a good job of it.

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.

I don’t have to learn a template specific language, everything is in JavaScript or HTML. This makes it easy to just get things done by using as few languages as possible. It may make code a little longer in some parts, but I’m OK with that, as it’s easier to understand and easier to maintain.

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!

On a development side, ReactJS can get a bit strange when all HTML/JSX (JSX is a simple way of writing HTML inside JavaScript) is inside your controller code, although it’s something you can easily live with or use modules. There are a few other things to figure out (as with any framework), stuff like using className instead of class in your HTML. ReactJS doesn’t change the DOM directly, it uses a diffing algorithm, which means you have to do certain things the React way, although it’s rather easy to grasp after a short time; you can read more about that on the ReactJS site.

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 find most of my dev time is still spent screwing around wrapping my head around JavaScript specifics (objects, callbacks) and with CSS trying to make things look pretty. In terms of CSS and HTML apps, this is the price you pay compared to using a mobile specific HTML framework or a native app, but I’m betting on a bigger payoff down the road, so I can easily port the app to iOS, Android, desktop browser, and Windows or BlackBerry phones.

Summary

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.

Advertisements

2 Comments

  1. Did you pick a certain UI framework that played nicely with react? I’m using bootstrap right now using http://react-bootstrap.github.io/, which works well, but a more mobile oriented framework (like ionic which I used in another mobile app) would be great…

    • flyinghorsedancing says:

      Ha, you hit a bit of a challenge I have too. I’m just re-writing the bootstrap HTML myself, it’s just minor mods i.e. change ‘class’ to ‘className’. I was thinking about switching to Ionic/Angular just for the UI, but really like using React. But so far, most of my UI is old school hacking on CSS, which is quite a pain. This is where React falls down, no fancy mobile widgets. Meteor seems to have same issue. It’s a problem waiting for a solution. Try http://www.react-components.com I haven’t tried this but looks promising: http://khan.github.io/react-components

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: