Why We Built Our New Developer UI on React Instead of Angular

We launched v1 of the Cloud Elements integration platform back in 2013 — a product that has served our customers and our company's growth well over the past few years. But it's 2017, and web technologies have evolved quickly in turn causing user expectations to evolve even faster. It was time for us to rethink the overall developer journey and that provided an opportunity to rethink our technology stack too.

In the world of product release cycles and launch deadlines, the choice of technology is crucial. Here is a look at our experiences along the way, to help shed some practical light on React.

Where We're Coming From

Prior to React, we were using AngularJS — which was probably the most popular front-end framework at the time it was chosen. But as  mentioned, time has moved on and the reign of AngularJS v1.x  has been usurped by its younger sibling, Angular 2.

One main objective of moving away from AngularJS v1.x was the predicted end of life for this framework. While it is still actively supported, it was a good opportunity to transition to something new.

The Advantages Of Using Javascript Frameworks

Going in, the team knew that continuing to use a JavaScript framework would provide several notable advantages:

Efficiency : Projects that used to take months and hundreds of lines of code now can be achieved much faster with well-structured prebuilt patterns and functions.

Safety : JavaScript frameworks have security testing built-in and are supported by large communities where members and users also act as testers.

Cost : Most frameworks are open source and free. Since they help engineers to build custom solutions faster, the ultimate price for web apps will be lower.

Why React

When considering different options to creating our new UI, React was an obvious choice due to how declarative, efficient and flexible it is. Unlike Angular, ReactJS is a JavaScript-based open-source library with a JSX compiler. It is mainly focused on the user interface, allowing us to create reusable UI components.

React is all about components. Building an application with React is a matter of composing many of these components together to bring the application UI to life — much like lego! These encapsulated components manage their own state, since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app, without worrying about state within the DOM.

You can design a simple view for each state in your application and React handles the rendering of your components as your data changes.

While some will strive for fully stateless components, the true power and performance of React comes from embracing the application state concept.

With React, you should always remember that it is not actually a JS framework, but instead a library for rendering your views.

While there are a number of frameworks to choose from (Vue, Ember and Angular 2, for example), React has some key advantages:

  1. JSX is a JavaScript syntax that enables HTML quotes and usage of HTML tag syntax for the rendering of subcomponents. It promotes building of machine-readable code and provides the ability to combine components in one compile-time verified file.
  2. Due to the usage of virtual DOM, it provides a great performance boost, compared to Angular 1.x. In addition to that, React components can be created and reused among applications.
  3. The key difference between ReactJS and AngularJS is that React is JS-centric, vs HTML-centric. JavaScript is far more robust than HTML, which makes React far more simple, focused and consistent.

How React Has Improved Our Developer Experience

React offers support through forums such as Stackoverflow, Reactiflux Chat, Freenode IRC, Facebook and Twitter, which also made our decision much easier when switching.

React might not do everything, but it presents a list of complementary tools including debugging tools, component workbenches, JSX Integrations, basic starter kits, full-stack starter kits, model management and so much more that work hand-in-hand with its platform.

Ross Garrett is head of product marketing at Cloud Elements.

Comments

Comments(3)

sshyamprasath

Nice article. One thing I would like to say is as you mentioned in the article Reactjs is focusing only on rendering UI. On the other hand Angular 2.x or 4.x has many other elements like directives, services, components makes clear seperation of concerns. Typescript and RxJS gives more power to Angular 2.x or 4.x. 

 

Amir-Zahedi

Not a very accurate article. Looks like the author is just excited having moved aways from a legacy library and understandably so without having true knowledge of anything else other than react when it comes to modern SPA frameworks. Still some nice to have perspectives

denis-domchik

this is just stupid to think that jsx is more convenient than html used in angular 2