A Comparative Introduction to Front-End Frameworks: AngularJS and React

6 min readJul 31, 2017

I’ve been working to grow my understanding and capabilities for two front-end frameworks that seem to be the most popular here in Silicon Valley. Although it’s a close call, React appears to be the current leader of the pack. It is used by the likes of Facebook (where it was created), Instagram, Airbnb, Dropbox, ProductHunt, and Netflix. AngularJS, implemented at Google (where it was created), PayPal, YouTube, Vevo, and Upwork, is a close second in the popularity contest.

So if you are also dabbling with one or both of these frameworks, this introduction is intended to help you understand the basics of implementation as you begin your exploration. It was challenging for me to find this information in a consolidated format so I hope this helps organize it for you. I’ve broken an application setup into a 4 Step process:

Establish a Controller with Properties & Methods
Initialize & Render
Pass Variables between Scopes
Add Event Listeners

Once you have all the information, you can decide for yourself which framework you like more! Please share your comments and let me know what you think.

To start off, I’d like to do a quick summary of the MVC (Model-View-Controller) structure. Below is one of my favorite visual explanations for interaction since it also includes the database and client/router relationships. Traditionally, the MVC design structure was implemented to create a clear separation between functions. The Controller handles the application logic and the interaction with the client. The Model handles the actual data. And the View manages the presentation layer which is eventually rendered to the client. While this design is standardized in concept, in practice, each framework approaches it in a unique way and I will attempt to call that out as it arises.

AngularJS

AngularJS is a true example of the MVW (Model-View-Whatever) structure (over the classic MVC structure). AngularJS combines the Model and Controller into one file. Restrictions between the two are not as distinct in AngularJS as in other frameworks. AngularJS also introduces the use of directives, which follow the format of ‘ng-xxx’ and identify certain attributes and functionalities for a given element so that Angular knows how to handle them. As you walk through my 4 Step process on setting up a basic Angular application, you can follow along with the code below.

//myJSFile.jsangular.module('myApp', [])
  .controller('controllerName', function() {
    this.myGreeting = 'hello';
    this.greetingsArray = ['goodbye', 'welcome'];
  }
  this.pickGreeting = () => {
    console.log('select this greeting');
  }; 
});//subComponent.jsangular.module('myApp')
  .component('subComponent', {
    bindings: {select: '<', greetings: '<'},
    templateURL: 'filePath/templates/subComponent.html'
  });

<! html file of parent component><html ng-app='myApp'><head>
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/ 1.6.5/angular.min.js'></script>
    <script src='filePath/myJSFile.js'>
    <script src='filePath/subComponent.js'>
  </head>
  <body>
    <div ng-controller='controllerName as ctrlName'>
      <input type='text' ng-model='ctrlName.myGreeting'     placeholder='Text here will display below'>
      <h1>{{ctrlName.myGreeting}}</h1>
      <subComponent select='ctrlName.pickGreeting' greetings='ctrlName.greetingsArray'/>
    </div>
  </body>
</html><! html file of subComponent><div>
  <li ng-repeat='eachGreeting in $ctrl.greetings'></li>
  <a ng-click='$ctrl.select()'>Click here to Select</a>
</div>

Step 1: Establish a Controller with Properties & Methods

Start the .js file with a name so your HTML file can connect with this JS file.
Create a controller that holds all of its properties and methods within the anonymous function. These properties and methods will all be accessible in the .html file. The controller setup may look slightly different if you have only one .js file with one component or many .js files, which are subcomponents. I am showing an example for a multi-subcomponent structure.

Step 2: Initialize & Render your Page

Initialize the .html file in the <html> tag or wherever you want to tell Angular to be active in the page.
Include a script tag in the <head> which loads the Angular library.
Include a script tag in the <head> to connect any .js files which hold your controller logic
Add a templateURL property to the subcomponent file to point to the .html file which it should render

Step 3: Pass Variables between Scope

To give access to methods and properties on the controller (and all elements below it), include a directive in a <div> or other element.
Include double brackets to inject dynamic text in any elements for data binding between the HTML file and the model in the .js file.
Passing variables between subcomponents needs a match between a bindings object in the .js file and the element in the .html file. Within the .html file, specify the variable or method which is being passed to another .html subcomponent file. In the example, this indicates that ‘subComponent’ will have access to the pickGreeting method on the controller but it will be able to call it utilizing $ctrl.select( ). Within the subcomponent, specify the way the data should be passed. The example includes a binding for ‘<’ which indicates a one-way data binding. There are a number of other types of bindings but I won’t expand on those here.

Step 4: Add Event Listeners

To take user input from a field and update the model, include a directive on any tag that accepts input. This is a two-way bind as any updates in the model will also update this field in the HTML.
To call a method from the controller based on user interaction, add the instantiated method in double quotes on a tag or element after a directive identifying the expected user interaction.
To display every element in an array, add a directive in a <li> or other repeatable element. There are a number of other types of directives that can be added. You can even define your own!

React

React utilized JSX to make code more readable by combining the HTML and JS code into a single file. Many people say that React is only the V in MVC but it certainly still maintains the data and logic under strict scope rules. React creates components which handle all the data and logic in a single file and then returns HTML code for rendering. You can follow along with the below code snippets:

//.js file - stateless componentvar SubComponent = (props) => (
  <div><h1>First Item is still: {props.myItem}</h1></div>
);//.js file - stateful componentclass ClassName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {items: []};
  }
  
  onItemClick( ) { 
    this.setState({ 
      items: this.state.items.concat(['hello']) 
    }); 
  }render () { 
    return (
      <div><h1>First Item: {this.state.items[0]}</h1>
      <SubComponent myItem={this.state.items[0]} />
      <li onClick={this.onItemClick.bind(this)}>Click to Add an Item
      </li></div>); 
  }
};ReactDOM.render(<ClassName propName={window.method}, document.getElementById('appName'));

<! html file of component>
<head>
  <script src='https://fb.me/react-dom-0.14.6.js'></script>
  <script src='https://fb.me/react-with-addons-0.14.6.js'></script></head>
<body>
  <div id='appName'>
    <h1>My App</h1>
  </div>
  <script src='filePath/myJSFile_stateful.js'></script>
  <script src='filePath/myJSFile_stateless.js'></script>
</body>

Step 1: Establish a Controller with Properties & Methods

Create a component that inherits from the React component. This can be a functional stateless component or a stateful class component. Both are shown. Stateful class components require a render method.
The html code block on components must start and end with matching tags so I suggest you start with a <div> and end with a </div>

Step 2: Initialize & Render

Include two script tags in the <head> which load the React library. You can use the ones in the example or download libraries and reference those locations in your files.
Include a script tag in the <body> to load each of your .js files that hold your controller logic and your model data.
Identify the elements to be accessible to React by assigning an id to elements within the <body>
Call the ReactDOM render method from the bottom of your .js file which attaches your component variable to the DOM by taking two arguments: the first is a tag of the class created in your .js file passing any global scope data and methods, and the second is a call to the .html id created in the last bullet point

Step 3: Pass Variables between Scopes

Variables are passed within the program by the keyword ‘props’ which manages scope between components and the model. For a stateless component, this is as described in Step 1. For a stateful component, use a constructor to call super( ) in order to extend the built-in methods of the parent class and set state variables. Pass props to super as a parameter if you need access to ‘this’ in the constructor.
Use set state in other methods to update state variables. They cannot be assigned directly with =
Use state to access state variables in HTML code within the render method
Passing state variables happens through variable assignment in the HTML code which arrives at other components under the keyword ‘props’.

Step 4: Add Event Listeners

Create methods on the class component to handle events
Add event handlers to the HTML elements in the return within the render method which calls your methods. Make sure to bind them to ‘this’ to ensure the execution happens as expected during runtime

A Comparative Introduction to Front-End Frameworks: AngularJS and React

Written by Kelly Curtis