Over a million developers have joined DZone.

Why We Chose React

The rationale I’m about to share describes why we chose to use React in early 2015 over Angular for building Grommet.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

As many of you know, technologists are an opinionated bunch and debates on topics like which JavaScript framework is king are never-ending. With that in mind, the rationale I’m about to share describes why we chose to use React in early 2015 over Angular for building Grommet.  I understand I won’t convince everyone. In fact, I’m sure that this will cause all sorts of religious reactions. I’m expecting replies countering each point I make with pointers to blogs disproving assertions (yes, I’ve read most of those blogs). The bottom line is we continue to see strong adoption of Grommet based on the React model, and our adopters are providing feedback that affirms the benefits described below.

With that said, we chose React because of the following benefits.  While conducting our investigation, we relied on the experiences and feedback of other adopters. As such, I’ve noted which company pointed out the benefits during our evaluation.  Since our adoption, many other companies have started using React.

  • Declarative – Probably the biggest benefit we’ve seen with React is the declarative nature that allows developers to declare the structure and behavior of each component.  As state changes, it’s handled with events and the code to render the component is written once.  This has tremendous benefits in simplifying development and increasing quality. The Virtual DOM is a key enabler of this capability.  (Yahoo!, BBC, Atlassian HipChat)
  • Simplicity – The model is simple; when components are created, they are self-contained and interaction with the components is through a simple interface using properties and states. Once developers start “thinking React” it dramatically simplifies applications. It also makes applications easy to debug because there is a predictable flow of data when data always flows in one direction. (Atlassian HipChat, Netflix)
  • Isomorphic – The ability to run the same JavaScript code on both the client and the server allows for both a fast initial page load from the server and a great experience on the client. It’s the best of both worlds and not possible in many web frameworks. (BBC)
  • Small – It does just enough to develop enterprise applications but isn’t the kitchen sink.  With recently added support for ES6 and Components, the API has got even smaller. (Netflix, Atlassian HipChat)
  • Fast – You can read about various performance comparisons but, needless to say, React is very fast, even faster than some folks who’ve tried to hand-optimize solutions. (Netflix)
  • Testable – The simple interfaces are easy to test in a headless and automated manner.  (Atlassian HipChat)
  • Modular – Using components puts the code (markup and behavior) together in the same module rather than separating technologies (HTML and JavaScript). React takes the modular approach by including everything that’s needed for a module in one file. (Netflix)
  • Short learning curve – Many have found the learning curve to be dramatically shorter for React than other platforms. The code is simpler and the API can be memorized in a single day.  (Netflix, Yahoo!)
  • Community – React is the fastest-growing JavaScript platform on GitHub. The Grommet team frequently attends meet-ups in the San Francisco Bay Area and is closely connected to the React community.  (Yahoo!)

While we don’t have the React Native project for Grommet going yet, we’re starting soon.  This will allow developers to learn one platform and write applications for the Web, iOS, and Android. Compare this to Web, Swift/Objective-C, and Android/Java.

Having said all this, Angular was the obvious choice when we started our evaluation. However, as we were starting Grommet in early 2015, Angular 2.0 was the hot topic. The Angular conference in October 2014 talked up Angular 2.0 in a big way.  Angular 2.0 was originally targeted for release in October 2015, but still hasn’t released as of January 2016;  it’s now said to be “really close.”  As we evaluated Angular, we realized that the rug was going to be pulled out from under us when 2.0 was released.  The Angular community stated publicly that there will be no migration path explored from Angular 1.x to 2.0 until after 2.0 releases. That was a really tough position to put our project and company in when viewed from a macro level. In August of 2015, the Angular team announced plans to support Angular 1.x and 2.0 in the same application for migration purposes.  However, the migration is far from automated.

Another detracting finding we uncovered in our investigation was the fact that Google itself barely used Angular. At the time of our evaluation, Google was using Angular for DoubleClick and YouTube on the PS3…and that was all we could find.  In that case, maybe it makes sense why the Angular community is willing to completely change the core of the platform. They don’t have their entire enterprise to migrate down a new path.  I couldn’t put Grommet or Hewlett-Packard Enterprise in that position.

In the end, there is no perfect platform.  Grommet provides a solid foundation that is enabling teams to create great enterprise applications.  We are pleased with our decision to adopt React and are excited to continue growing the capabilities of the platform and the community.

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

web dev,react,framework,javascript

Published at DZone with permission of Bryan Jacquot, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}