Skip to content

JavaScript is a powerful language, but if your looking to make a complex application, using it without a framework will result in masses of complex boilerplate code. To make it simpler, there are a number of frameworks out there that help with the basic functionality such as HTML manipulation, data loading, overall application architecture and etc.

The three most popular frameworks at the moment are React, Angular and Vue.js.

React

React is a library for building user interfaces developed by Facebook. React is based around creating components, such as a button or a side menu, that can render HTML based on input parameters. React components are written using an extension to JavaScript called JSX, that allows you to conveniently combine JavaScript code and HTML. Components can be composed together to create complex UI elements and whole applications. React is not a framework per se, it only provides the view layer, however, its rich ecosystem of tools and libraries has everything you’ll need to create complex applications. React is easy to start with, but with time you are expected to learn new libraries to fill the missing gaps.

<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello world</h1>,
      document.querySelector('#app')
    );
  </script>
</body>

Read more: https://reactjs.org/

Angular

Angular — a component-oriented “batteries included” type of framework developed by Google. Angular applications are usually written in TypeScript. It provides most o the things you’ll need to build a web application including a CLI tool to bootstrap, develop and build the project as well as libraries to manage forms, data loading, routing, etc. Although it does provide most of the things out of the box, it has a higher abstraction and complexity levels, and the need to learn TypeScript as a primary development language makes the initial learning curve steeper.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

Read more: https://angular.io/

Vue.js

Vue.js is a framework designed to be modular and incrementally adoptable. You can start using it as a view layer and add additional libraries as you need them. In contrast to other frameworks, the most important libraries are maintained by the core Vue.js team.

You might also encounter other frameworks out there that have a smaller community or are getting superseded, such as Ember.js or AngularJS.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Read more: https://vuejs.org/

Further reading