Going from AngularJs to ReactJs might be easier than you think.

Note: The following post assumes at least a basic knowledge of AngularJs and ReactJs.

In Quadion we love to try new technologies. And in my particular case, after being an Angularjs developer for almost 5 years, trying ReactJs looked like an exciting experience. Although in 2017/2018 both frameworks are considered as the top frameworks for frontend (together with vue.js), they are somewhat different. The former is a complete framework which lets you build entire pages with the structure they provide, while the latter is just a library that does one thing (building components, more on that later), but really well.

Even though AngularJs had its moment, the older versions (1.x) are slowly being left behind in terms of interest. And that’s understandable, because the Google team is putting their efforts in newer versions.

AngularJs has been proven to be a reliable framework to build powerful apps, offering lots of advanced features. However, Google is putting all of its effort into Angular (don’t confuse it with AngularJs — Angular refers to version 2 and above) which might be difficult to migrate to (although paths to do so exist).

Even though I had enjoyed a lot working with such a great framework, I felt that the new member in the neighborhood had lots to offer, so we decided to give it a try.

ReactJs is the current emerging technology. But it is not just “a trend”: it has arrived to stay. Backed by Facebook, it has an amazing community, growing at high speed. We know the lifecyle of javascript frameworks is brutal, so it was natural to wonder ourselves: Does it worth to learn a new framework/library ? Should we wait until the community is more developed ? What will be the cost of shifting our minds from the “AngularJs paradigm” to the “ReactJs paradigm” ? Should we continue with the newest Angular versions, instead of trying ReactJs ?

Given the increasing tendency of ReactJs, these doubts were natural. And it turned out that our background in Angular helped us a lot to make the transition smoother. It was just a matter of adapting some key concepts, and we were ready to go! Understanding their similarities (and differences) helped us to start new projects in ReactJs.

This is a small comparison which I believe it might help AngularJs developers understand what’s behind ReactJs and its features.

Directives and Components

From the AngularJs side, although from version 1.5 components were available, if you needed powerful DOM manipulation directives were the answer. Moreover, directives allowed you to encapsulate reusable functionality that could be configured through an interface (attribute binding), though it was not perfect: it could be complicated to understand the differences between inherited scopes and isolated scopes.

On the other hand, ReactJs offers their own “components” which are something very similar: reusable pieces of html + js, that can be configured from the outside. Instead of scope, we just have the concept of “state”, which is internal to the component: a component might have a state, or not. And that’s it.

Let’s see an example of a directive

Here we just use a directive, with an isolated scope, that renders the strings that gets through its “hello-text” interface.

On the other hand, ReactJs offers a different syntax, but that allows you to achieve a similar result.

Besides the concept of state, ReactJs offer a special property called “props”, which is basically what we passed to the React Component. Pretty much like when we passed our “Hello world!” to our AngularJs’ directive! What is important about props is that they’re thought only to be read. Moreover, if the component (just like the example) does not require an internal “state” (more on that later) it can be written as a simple js function:

This makes a cleaner and simpler code (note: component variables should always be upper case). Of course, AngularJs offers more control over how we passed information to our widgets, offering one way binding, two way binding, and more.

ReactJs makes it simple by forcing you to use one way binding, including functions to handle value updates in the upper component container if needed.

In the end, both offer a nice way to write widgets, that means, pieces of reusable functionality that have their own state, and can update themselves given their internal state.

On a personal note, I believe that ReactJs simplicity is a core feature, since developers don’t have to worry on which type of scope should they use, nor which attribute binding should they consider.

Scope and State

The definition for scope, according to AngularJs docs, is

Scope is an object that refers to the application model. It is an execution context for expressions. Scopes are arranged in hierarchical structure which mimic the DOM structure of the application. Scopes can watch expressions and propagate events.

Scope is the glue between controllers and views in AngularJs. That way, it is the perfect place to handle state of our apps, where we load our initial data and where our model resides. Once scope changes, view is updated to reflect changes.

Regarding ReactJs, while there’s no such dictionary definition for what state is in their docs, we think of it as the javascript context in which our model lies for each component, and the place that, when updated, will trigger new renders. Does that sound you familiar ? Yes, that sounds like one of the AngularJs core concepts, databinding (although in AngularJs it is less clear how the DOM actually changes — it just looks like magic).

There are, though, differences in how changes are detected. AngularJs tries to be smart in detecting any change you do to scope (through the digest cycle). While this might be a powerful concept, it has some caveats and may be too complex for some cases. For instance, it forces the framework to offer wrappers for many common javascript functions (prefixed by $ — for instance $timeout to replace setTimeout) in order to prevent execution of code that cannot be detected by the digest cycle. You might be surprised of how many times this has confused developers.

ReactJs, on the other hand, makes this simpler and expects you to tell it what and when you update, through the setState method. Through its reconciliation algorithm, it will detect, after batching many state changes, how much of your app has changed, and what needs to be rendered again.

DOM manipulations

AngularJs always discouraged the integration of jQuery to AngularJs projects; regardless of that, they offered a small subset of it, through their angular.element() API. In a way, it was used to transform the dom such as we were used to do it with jQuery. There’s no such thing in ReactJs. If you want to do DOM transformations, you should use the javascript API, which, as of today, is more consistent across browsers than ever.

Despite that fact, ReactJs components encourage dom modifications through the usage of render function as pure components: Given your state, you just build the output you want. If state changes, ReactJs will call render() again, so you have just to worry about render the output you want given your state.

That means, we treat the render function as a pure function. It allows to use pure javascript and JSX (a syntax extension to js) to create the structure we want. The imperative declaration of changes is discouraged, and the render function encourage to work in a cleaner way. To me, it is a very powerful feature.

AngularJs, however, uses directives in plain HTML to describe the view we want to render. To that, AngularJs offers built in directives that we can place in our html code, whether we do it in the template of a directive, or in a separated html, linked through templateUrl property.

As you can see, there are differences, between putting “some sort of html into js” (ReactJs approach, with JSX) and putting “some sort of js into html” (AngularJs approach). Proper debugging is one of the benefits of the first approach , it is easier to understand what is going to be rendered while debugging the render function; on the contrary, understanding the final output of the html compilation (how do I debug ng-repeat, without looking into AngularJs source code?) might be at least tricky, especially for new developers.

Ecosystem

AngularJs has a built-in suite of services that allows you to fetch data from the server, to describe proper routing, inject your dependencies, and even write localized apps using internationalization, and much more, all backed by the same community that develops the framework. This also comes with a cost, since the script files might be too unnecessarily big for your application.

ReactJs, however, is a thin library that only comes with few functionalities, and most of the utilities are provided by 3rd parties, backed (in most cases) by open source communities; an example of this is React Router. Furthermore, ReactJs is under continuous improvement and development, adding lots of new features in every release, making it a not-so-stable library. All of this might be a problem or not, according to your needs.

Summary

All in all, both are a great option to built your apps. Given that AngularJs is being left behind, and that ReactJs is having its momentum, it is a wonderful opportunity to try a flexible library to build the component your app needs.

Would you like to know more? Do you need our help? Contact Us!
www.quadiontech.com

From AngularJs to ReactJs: A Brief Comparison was originally published in Quadion Technologies on Medium, where people are continuing the conversation by highlighting and responding to this story.