We create dedicated software to answer the needs and challenges of the Company, and help optimize business processes. Go from an idea to a product.

hello@inwedo.com
Angular 2 React business processes

Angular 2 vs React

On the fence

There are new systems, approaches, and tools appearing on the market every day.

It’s getting more and more difficult for beginners to choose a JavaScript framework for their project or to start learning. Too many tools in the JS world make learning and using them more complicated than it should be. This article aims to give you some idea about both frameworks by comparing and outlining their characteristics.

Note: It’s worth mentioning that it’s really hard to compare these two JS frameworks since Angular 2 is a rich framework while React is just a UI component library.

Let’s begin with the characteristics of each framework:

Angular 2

Angular 2 is all about components. Imagine you wanted a weather module in the corner of your page that always gave the current weather info. In Angular 2, this would be a Weather component made up of Decorators and a Controller Class. The pieces of our page components can talk to each other creating a complex web app with simple singular pieces. Angular 2 comes with everything you need to build an app including form handling, a router, an HTTP client for syncing with a back-end servers/databases, and tools for writing unit and performance tests. It follows a more traditional MVC flavored pattern where models and views talk to each other both ways. Flux uses its own unique approach of only allowing data between objects to flow in one direction. Google used Angular 1 for the YouTube app for PS3. Angular 2 is used on many websites such as PayPal and VEVO.

React

React’s main purpose is to update views the user is seeing to reflect the current state of data stored in the application. It does this using a virtual DOM. React can be combined with Flux or Redux, which is a suggested data architecture pattern where communication between the parts of an application are one direction only. In this case, React handles your views and Flux manages the business logic. Facebook boasts that the advantages of this one-way approach are that it supports a simpler mental model that other developers who look at the code can understand, it is easier to track down bugs, and makes it easier to create meaningful unit tests. React alone is not a framework. It doesn’t provide support for routing or syncing to a back-end server. To do these things, you must combine React with another library or framework like using React with Backbone or React with jQuery AJAX. Facebook uses React+Flux in their Instagram website and in Facebook’s chat feature.

Learning

You can say that entry barrier depends on what you choose at the beginning of your adventure with both languages. In React it’s about the libraries you choose and in Angular 2 — whether you pick TypeScript or not. Angular 2 may seem to be more demanding than React at first because the number of new concepts that you have to get good at will probably be higher, but it may be a huge advantage in the future to know this all-in-one tool that Angular 2 definitely is. React is a UI library that is built to do one thing only, but it does this pretty well. It can be combined with other libraries to become a complete Framework. Angular 2 already is a complete framework (all-in-one solution) for building front-end driven web apps.

Say hello

The first thing to face in React is an XML/HTML-like syntax, the JSX. It may not seem most familiar for some devs when they start, but it doesn’t add much complexity — just expressions, which are actually JavaScript. What you also need to learn are components and props, but you don’t have to get familiar with any new logical structures because it’s actually all about JS. What’s a nice surprise when it comes to React is that it’s really easy to start using it. I guess we can even say that you could try learning it in one night and succeed. Even programmers who have limited experience in front-end development can quickly learn things in React. The worst part can be finding the right libraries for all of the required capabilities, but building a structure of an app and its development is simple.

When it comes to starting (saying hello) with Angular 2 it definitely takes a little longer, but it may be easier to have an idea of what we need to set up and how components are interacting. If you have some experience in Java or .NET it will be easier for you to build a happy relationship with TypeScript. The framework itself is rich in topics to learn, starting from modules, dependency injection, decorators, components, services, pipes, templates, directives, and more advanced like change detection, zones, AoT compilation, and Rx.js.

Check it before…

…you start working on a project and pick your JS framework. There are a few matters that are worth thinking through from a perspective of your project. These are:

• Size of the project

• Maintenance time

• Target platforms (web, mobile, desktop)

• Team size

• Developers experience

• Scoop of functionality definition

Depending on your final thoughts on each and every matter above, you should use what you already know about each framework and decide which one fits best. Both have some good and bad sides so it depends what kind of project you’re in and what are your coding habits and preferences. If you are looking for people’s opinions, remember to ask if they tried both frameworks. The view really changes after using both heavily for a while.

If you love the tech choices and you can live with the additional boilerplate overhead, pick Angular 2.

If you’re unhappy with Angular 2 tech choices, and you want something simpler, with more freedom and fewer things imposed — pick React.

Last advice

What I’ve observed and learned while reading different opinions about these two frameworks is that at first many people think that Angular 2 is better because it will be easier to cover big projects. However, they admit that starting with React, where you have a simple app from the very begging of its tutorial is faster. Surprisingly, lots of people who talk about differences between these two never tried them both for a longer time. I noticed that people who use the two frameworks actively for some time were starting to appreciate React more. Still, never imagined deleting Angular 2 from their list. Having said that, my last advice is: try them both! Don’t blindly use the same approach every time. Once you have some experience in both, you’ll be able to choose when it’s necessary to use one or another.

· You can try out React using the tutorials here: https://facebook.github.io/react/

· Here is a good video explaining React+Flux: https://facebook.github.io/flux/…

· You can try out Angular 2 by following the tutorials at http://angular.io or a great official tutorial http://www.angular2.com/ which shows us the architecture, components and good practices — all through creating the app.

Daria Karasek
I strongly believe in creating opportunities, rather than waiting for them to come. I'm working as a Growth Hacking Manager at Inwedo. My main focus is to deliver high-quality content and dig through all the communication channels to the people that, as Inwedo we can help with optimizing their business processes or translating their thoughts into amazing products.