AngularJS vs React — lalicode

AngularJS vs React

Nov. 21, 2017

I've been looking at what tech stack to use for a personal project called bloodhunt using Riot's League of Legends API.

I spent some time learning about Angular using AngularJS tutorial for beginners with NodeJS ExpressJS and MongoDB (Part I). To be clear, I have significantly more experience with React. Here are my thoughts of Angular vs React and my experience learning Angular.

Angular has a higher learning curve

Angular code is harder to read and learn. Angular focuses on the use of Directives, which extend on html markups. Look at the my-todo html tag below.


<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="script.js"></script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="main">
      <my-todo list="todo" title="Angular To-do"></my-todo>
    </div>
  </body>
</html>

Directives have 3 attributes, restrict, templateUrl, and scope. Restrict can be set to a combination of 'E', 'A', 'C' or 'M'. In the example below, 'EA' means that the directive is used as a new HTML element and is going to take over any matching HTML element that has a matching attribute as the directive. For more details checkout Creating custom AngularJS directives for beginners.


app.directive('myTodo', function() {
  return {
    restrict: 'EA',
    templateUrl: 'todo.tpl.html',
    scope: {
      list: '=',
      title: '@'
    }
  };
})

templateUrl points to some html and Angular directives that can be reused with different values. Scope is what glues together Javascript with HTML. '=' binds the value of the expression and the literal value. '@' implies that the value of the attribute of the same name will be passed as a string.

In my opinion the use of random characters to denote something is ~hacky~. Code should be elegant and easy to read. Anyone learning or reading Angular code has to know what these character symbols mean (E, A, C, M, = , @) and where they can be used.

React on the other hand doesn't use such cryptic symbols. However, a newbie may be confused by functions such as setState() and componentWillReceiveProps(). Would you rather deal with googling unknown symbols or unknown functions?

Angular has two-way binding whereas React has one-way

Enough trash talking Angular's learning curve. Angular is very powerful once you get to know it. It's supports two-way binding, which means that the model and view automatically update one another. The goal is to have the Model be the single source of truth. Because of two-way binding, less code is needed.

React has one-way binding so more code is needed. In React, changes are handled using events and handler functions. It uses the concept of state to maintain values and props to configure a child components values. When a child component's values gets updated and is needed in a parent component, more code is needed because React doesn't automatically update the state of the parent component. A handler function is used to update the parent's state with the new value. The goal is to have state be the single source of truth.

Summary

Angular takes longer to learn than React but supports two-way binding. There's plenty of factors that go into which framework you want to choose such as performance and popularity but I value readability and ease of use. I don't like Angular's approach of using character symbols to represent various concepts but I do like how it takes care of synchronizing the model and view. React requires more code because of one-way binding but it is easy to learn and easy to read. Both are very powerful frameworks and are strongly influencing how front-end development will look like in the future.

Add comment

lalicode

The code of Lali

AngularJS vs React

Angular has a higher learning curve

Angular has two-way binding whereas React has one-way

Summary