insanelab.com insanelab.com

July 4, 2017 - Web development

Vue, React, AngularJS, and Angular2. Our take on popular JavaScript frameworks

by Antoni Żółciak
More by this author

Here’s a fun fact: JavaScript was named among the best programming languages to learn in 2017 by no other than IBM. The IT giant noted that JS is used by a stunning 94.4 percent of websites and “that’s unlikely to change.” JavaScript ensures “great user-friendly web pages, as it responsible for the overall web interface, including animations and interactions.” No matter how you look at this, JavaScript matters.

That also points potential web developers in the right direction: if you’re into front end, you need to face JavaScript at some point. And a proper development map might help with that.

Let’s assume that you do know JavaScript fundamentals. The pure (no, not poor) thing. Provided the thesis is correct (meaning you do know the basics), you might be interested in learning a bit more about modern JavaScript frameworks. These abstractions often come with pre-loaded functionality and some way of structuring an app.

While some may consider that limiting, the majority of coders around the world prefer to work with frameworks (don’t confuse them with libraries), as they make the job easier, faster, and, frequently, more reliable.

All right! Having said all that, it’s time to dig a little deeper.

Our development team prepared a list of the frameworks that they use on a daily basis. While there surely are more JavaScript frameworks around, these are the ones that we focus most on.

Below, you’ll find a short overview of our beloved technology and its respective features.

Vue.js. The cool kid on the block

This one is like a high-school superstar. It’s not a mature technology, so we really can’t say what will happen to Vue five years from now. Currently, however, it’s among the most notable topics on every possible conference agenda.

If you decide to grab a beer with a JS geek, he’ll talk about Vue. If Vue was a pop star, it would be whoever is on top right now. If… Well, you get the idea.

It was first established in February 2014 by Evan You. In 2016, Vue.js had an amazing 89 percent developer satisfaction ratingand is currently one of the most starred projects on GitHub of all time.

But enough about the buzz. What is Vue.js? To start, it is both the fastest and the smallest framework of all JavaScript frameworks described in this article. Its syntax and principles don’t require much hustle to dive into. What’s more, it also has extensive documentation. There’s a huge chance that the action you’d like to perform has already been documented. On the other hand, if an action is not documented, you have a small chance of finding the solution online, since Vue is less popular than Angular or React.

Note: Vue is pronounced the same way as “view.”

5 random facts about Vue.js

  • It can be extended through its plugin system.
  • It has a library for server-side rendering (Nuxt.js).
  • It supports scoped styles straight away.
  • It has a CLI tool that allows you to quickly scaffold Single Page Applications through setups for a modern front-end workflow.
  • It’s used in Laravel 5.4 and newer for handling frontend templates.

Just like React, Vue.js handles only the view layer. That way, it lets developers implement their own business logic. It’s also known for the implementation of the Flux architecture, Vuex. As our teammate, Maciej Kolodziejczak, puts it:

Vuex, in my opinion, is way better and easier to use than React’s Redux.

What’s more, Vue.js has one of the best developer tools available for Chrome, and Vue’s syntax is used by Weex, a React Native competitor for building native mobile apps with JavaScript. It’s worth noting, though, that Weex is not really ready, especially for commercial projects. Currently it’s more of an approach than an actual technology.

Vue.js advantages for developers:

  • Easy to learn and understand, which enables rapid app development
  • Integrates with Laravel, so a developer with Vue knowledge becomes a useful addition to a team that produces apps and back ends with Laravel
  • Provides a quick start due to a very convenient CLI tool
  • Has a lot of additional modules like router and state management tools; although not as many as other frameworks have

Vue.js advantages for clients:

  • Lower cost for a front-end application as well as a full-feature web application when working with a combination of  Laravel and Vue.js
  • Fast and reliable solution that guarantees stability
  • Usable for smaller modules like a calendar, contact form, or widgets

React.js. Leading the satisfaction statistics

Created by Facebook’s Jordan Walke, React is the fifth most popular GitHub project. In 2015, however, React.js (and React Native) were at the very top.

State of JS states that React has the highest developer satisfaction rating, at 92 percent. Together with Vue.js, they are in “a class of their own.” According to the survey, React users are more likely than average to have experimented with multiple other technologies before deciding which one to go with.

5 random facts about React.js

  • It handles only the “view” layer, which means that the business logic is decoupled and can be implemented in any way.
  • It has a great implementation of Flux architecture, called Redux.
  • For templating, it uses a syntax (JSX) that may be confusing at first.
  • It allows developers to use their React.js knowledge to creative mobile applications with React Native.

Developers also value React for its ability to utilize VirtualDOM and the consequent speed of the framework. Often users are also a part of a huge community surrounding the technology. While maintained by Facebook, React is also growing thanks to open-source projects and additional modules.

Furthermore, React will be getting a “second life” soon due to the announcement of React Fiber, a rewritten React with backward compatibility.

React advantages for developers:

  • Huge, supportive community
  • Not a full-scale framework
  • JSX, a JavaScript syntax, can be an advantage
  • Great developer tools
  • Forces modern best practices

React advantages for clients:

  • The majority of developers will be familiar with this framework
  • Offers the capability of creating a mobile app using logic from web app with React Native
  • Well tested environment that minimizes possible bugs and errors being produced by the framework itself

AngularJS. Wisdom of elders

Google issued the first AngularJS framework in 2009, believing that declarative programming should be used to create user interfaces and connect various software components. On the other hand, imperative programming was supposed to define an application’s business logic.

The actual author behind the technology is Miško Hevery from Brat Tech LLC. Back then, it was created to be the software behind an online JSON storage service. The business didn’t really take off, so the company abandoned the idea and released Angular as an open-source library.

AngularJS adapts and extends traditional HTML to present dynamic content through a two-way data-binding.

But while all that might sound interesting, the truth is that AngularJS is… kinda old. Actually, it’s the oldest framework of those described here. It’s four years older than ReactJS, five years older than Vue.js, and an astounding seven years older than Angular 2.

Nonetheless, it has the largest number of contributors on GitHub (1,562), followed by ReactJS, Angular 2 and Vue.js.

Admittedly, AngularJS has a steep learning curve. That disadvantage is somehow offset by a large community guaranteeing the existence of solutions to a majority of the problems a developer might encounter.

5 random facts about AngularJS

  • A lot of projects still use AngularJS, so knowing it is handy for maintaining them.
  • It provides viable and stable solutions for teams that don’t want to use the new Angular or Ember.js.
  • It uses dirty checking (digest cycle); whether it’s better or worse than observable pattern depends on your needs.
  • YouTube’s app for Sony PlayStation 3 was developed with AngularJS.
  • It’s HTML-centric.

AngularJS is one of the most used JavaScript frameworks for SPAs, and also is a good option for enterprise-based apps. But it’s also old, and mostly used by older applications.

AngularJS advantages for developers:

  • In 2017, you probably shouldn’t start to learn it if you haven’t done so already
  • Use the new Angular or Ember if you need something more versatile.

AngularJS advantages for clients:

  • Mainly used to maintain old applications that are not ready or not profitable enough to rewrite
  • High cost of creating more complicated apps due to framework complexity.

Angular2 (or Angular for short)

While it may be hard to fully understand Angular2 concepts without digging into the source code, the framework is pretty powerful with a lot of things built in already.

It’s a TypeScript-based open-source web application platform that came to life as a ground-up rewrite of AngularJS. Compared to the previous version, it doesn’t have a concept of scope or controllers. Instead, it uses a hierarchy of components as its main architectural concept. It also supports dynamic loading, has improved dependency injection, and provides simpler routing and asynchronous template compilation.

5 random facts about Angular2 (or Angular)

  • It uses TypeScript, which allows developers to use Dart or plain ECMAScript.
  • It utilizes a components pattern using TS classes with decorators.
  • There’s a steep learning curve.
  • The development process is fast.
  • It has advanced testing features.

Basically, Angular gets rid of the unnecessary complexity that was present in AngularJS. Many think, however, that it still may be too long of a configuration and setup process for a single developer—even with CLI.

The Insane Lab developer team is also not very fond of the documentation provided, especially for JS and Dart. On the other hand, they do appreciate splitting the technology into a lot of modules.

Angular advantages for developers:

  • If you like TypeScript you’ll be happy
  • Enforces the way you write code, which makes it a good choice when working with multiple developers
  • Uses a single code base for both mobile and desktop apps
  • Good solution for a dynamic single page app with a lot of client-side code

Angular advantages for clients:

  • Because of the way the framework is built it may lower the cost for enterprise apps
  • A large number of developers already know how to work with the framework

Is there such a thing as the best JavaScript framework?

Short answer? No. It depends on the company’s goals, requirements, and final functionality. For example, Angular2 is more like a jack of all trades, especially for big projects. It’s complex and requires a lot of time to fully learn and understand (but less than AngularJS). With JavaScript-centric React, on the other hand, a developer can scrap bits and pieces together to make something useful quickly and efficiently.

Each of the frameworks represents a different approach to web application development for MVPs, startups, and businesses.

That’s also the reason why you should consider working with somebody who can advise you on choosing the best technology for your project, one that will not only be sufficient for the development phase but for growing the business as well.

And—guess what? We can do that.

What is your challenge?

Tell us with any means provided. We'd love to hear from you!