React vs Angular vs Ember vs Vue.js

As you already know there are a lot of new JavaScript frameworks published in the earlier of 2017. But how to select the best one that fits to your project? This approach can cause a huge headache… So i decided to compare these frameworks for you.

Part 1 React

What is the main idea?

A JavaScript library for building user interfaces - React

React is Facebook’s popular UI javascript framework. The most remarkable part about React is that it covers only the UI views of an application, other parts such as server requests must be developed using other frameworks.

• There are elements which should be small and have not too much logic in it, can be composed together to bigger elements, can hold a state, this means the element itself does not change, but it’s state can change, are stored in a React DOM
• For web applications, the real DOM gets compared with React DOM and only the change will be re-rendered, this makes ReactJs performant
• More complex elements are stored in ES6 classes
• A class can have a state, lifecycle methods (componentDidMount, componentWillUnmount, …)
• React can be used with JSX, which is a statically-typed, object-oriented programming language.
• Is only a part of a Javascript stack of technologies, combinable with lots of other tools

Part 1 React: Stability of the framework

• Already in version 15.4.2 of react
• Releases are in a monthly basis

Part 1 React: Existence of an active community and documentation quality

• Official Q&A via stackoverflow with over 1000 topics, 7200 posts, 3500 users (all time)

React Discuss

• On stackoverflow 27000 questions

Newest 'reactjs' Questions

• Overall 860 contributors in the github project
• almost 10000 forks, and 55000 github stars
• reddit topic with 17000 readers
• some websites

ReactJS News

• official blog

Blog - React

• reactiflux chat

Discord

Part 1 React: Open source, licencing and feature of the framework

• Source code hosted on github
• BSD3 (with additional patent clause!)

Your license to use React.js can be revoked if you compete with Facebook

Part 1 React: Advanced UI widget library (AutoComplete, Layout managers, Grid etc…)

Quote: https://www.quora.com/Can-you-make-single-page-app-with-ReactJS

If you are asking this question it makes me suspect that you are assuming that React is an extensive framework, like Angular or Backbone, which it is not. React is strictly a tool for rendering the view (think of it as the V in MVC) and doesn’t really have anything to do with routing or anything like that. It will not really make it easier or harder to build a single-page app or not.

Part 1 React: Virtual DOM support

• Kind of a virtual DOM is implemented as the basic idea of React
• Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.

Part 1 React: Themes and skinning support

• Matieral UI:

Material-UI

• Belle

Belle - React components with great UX

• React Bootstrap

React-Bootstrap

• Elemental UI

Elemental UI

Part 1 React: Validations support

Not out of the box, other Javascript library needed

Part 1 React: Content lazy loading support

Unsupported

Part 1 React: Plugins support

Yes, this is the main aim of react

Part 1 React: Native mobile apps using react

• React can also render on the server using Node and power mobile apps using React Native.
• React Native (v 0.42) can be used for both iOS and Android on Mac, Linux and Windows
• There are a view big players are using React Native, such as: Facebook, Instagram, Airbnb, Baidu, Vogue
• FB mostly uses react because it’s their framework anyway

Part 1 React: The future of the framework

• Facebook is pushing react
• Google has a growing trend for reactjs:

Google Trends

• Compared to AngularJS, its still less:

Google Trends

Part 1 React: Starter kits

There are some starter-kits, which use reactjs with some other javascript libraries:

kriasoft/react-starter-kit

React.js Boilerplate

davezuko/react-redux-starter-kit

Part 1 React: Tooling

There are lots of complementary tools: which simplifies daily work with React (but can also cause a vendor lock-in to these plug-ins)

facebook/react

Part 1 React: Findings while deeper analysis:

For this analysis I’ve chosen https://github.com/kriasoft/react-starter-kit

• Code has high cohesion, at least in components.
• Sometimes this cohesion makes things harder (you have an app, with a list, the list has bunch of items, the item itself has some other components in it)
• you have at least 5 components here
• JSX makes things bit harder, I didn’t like it, most developers like something like a template (view) with some placeholders where the data (model) gets rendered into
• Integration of bootstrap was not straight forward (tried 30mins)

Part 1 React: Mostly combined with

React is combined mostly with:

• redux
• react-router
• webpack
• babel
• express
• karma
• eslint

Part 2 Angular

Angular

Angular material starter kit build with Angular 4 (developed by me):

Video demo

Related article

Angular Material Starter Kit

Angular 2.0 was announced at the ng-Europe conference 22–23. September 2014. The final version was released on September 14, 2016.
Angular 2 is not a version upgrade, but a complete rewrite. The primary differences in Angular 2 over AngularJS are:

• Develop Across All Platforms (For web, hybrid mobile, native mobile and native desktop)
• Speed & Performance (Code generation, Web Workers and server-side rendering)
• Mobile development: Desktop development is much easier when mobile performance issues are handled first
• Modularity: Much core functionality has moved to modules, producing a lighter, faster core
• Modern browsers only : Reducing the need for browser compatibility workarounds
• Angular 2 recommends the use of Microsoft’s TypeScript language, which introduces the following improvements: * Class-based Object Oriented Programming * Static Typing * Generics * Lambdas etc…
• Improved dependency injection: Bindings make it possible for dependencies to be named
• Dynamic loading
• Asynchronous template compilation
• Simpler Routing
• Replaced controllers and $scope with components and directives : a component is a directive with a template
• Reactive programming support using RxJS

Part 2 Angular: Latest release

• As of today the latest Angular release is 4.0.0-rc.2

Part 2 Angular: UI Components

• Angular Material 2 (Material Design components built on top of Angular 2)
• Fuel-UI (Bootstrap 4 for Angular 2)
• Kendo UI for Angular 2 (One UI Toolkit for Web, Desktop and Mobile)
• PrimeNG (a collection of rich UI components for Angular 2)
• Semantic UI for Angular 2
• Onsen UI for Angular 2

Part 2 Angular: Data Libraries

• Angular 2 Fire database (Observable based, realtime bound, object based database)
• Apollo (Data stack for modern apps, built with GraphQL)
• Meteor
• NgRX

Part 2 Angular: Migration from Angular 1

• See my article about how to migrate from AngularJS to Angular 2

Upgrade from AngularJS to Angular 2

Part 2 Angular: Virtual DOM support

• Supported

Part 2 Angular: Templating and Themes

• There are predefined template syntax but you can define your own template tags using directives

Part 2 Angular: Validations support

• Angular 2 built-in validators (required, minlength, maxlength, pattern)
• There are plugins such as ng2-validation (range, digits, number, url, email, date, json, phone …)
• You can also build your custom validators.

Part 2 Angular: Lazy loading

Lets assume we have two pages in our application, “home” and “admin”. Some people might never reach the admin page, so it makes sense to only serve the load of the admin page to people that actually need it or that have access to it. This is where we will use lazy loading.

• Supported

Part 2 Angular: Plugins support

• Angular 2 plugins

Libraries - The Open Source Discovery Service

• Angular 2 modules

Modules Tagged with "angular2" - AngularJS Modules, Plugins and Directives

Part 2 Angular: Tooling

• Angular Universal (Server side rendering for Angular 2 apps)
• Augury (A Google Chrome Dev Tools extension for debugging Angular 2 applications)
• Codelyzer (A set of typescript lint rules for code analysis of Angular 2 TypeScript projects)

Part 2 Angular: Books

• Angular 2 Book

Angular 2

• eBook Become a ninja with Angular 2

Become a ninja with Angular - the ebook

• Learning Angular 2 Book

Learning Angular 2 | PACKT Books

• Angular 2 in Action

Manning | Angular in Action

• Testing Angular 2 Applications

Manning | Testing Angular Applications

• Angular 2 Development with TypeScript

Manning | Angular 2 Development with TypeScript

• ng-book 2

ng-book 2: The Complete Book on Angular 2

• Rangle’s Angular 2 Training Book

Introduction · Rangle.io : Angular 2 Training

Part 2 Angular: Online Training

• Udemy courses

Online Courses - Anytime, Anywhere | Udemy

• Lynda courses

- Lynda

Part 2 Angular: Community

• Official Google Group

Angular and AngularJS discussion

• Instant messaging channels (#Angular2 the Freenode IRC Server, Slack channel for #Angular2 on DartLang network)
• Gitter Chat with 8551 Angular2 Developers
• Reddit community with little over 6200 members
• DevChat Adventures in Angular (weekly podcast dedicated to the Angular JavaScript framework and related technologies, tools, languages, and practices.)
• Subscription on ng-newsletter (the free, weekly newsletter of the best AngularJS content on the web)
• Stack Overflow (25,103 questions tagged)
• Issues reporting on github
• Events and Meetups
• Angular Camp

AngularCamp. July 2017 - Barcelona

• Angular Air: A live video podcast all about Angular

Angular Air

Part 3 Ember

Ember.js: A framework for creating ambitious web applications.

• Ember is an open source framework for web applications
• Ember is designed to help developers to create “ambitious web applications”
• Ember works respecting the MVC pattern (separation of responsibilities). It makes the application easier to:

Maintain

Distribute and share the code with other developpers

Ember philisophy

Regroup all best community practices, standards and conventions and in the Ember framework

• Ember core team members participate in W3C committees specifications and standards
• Every member on Ember’s core team is actively working on one or more production apps that use Ember

Part 3 Ember: Knowledge required

• Javascript
• HTML 5
• NodeJs

Part 3 Ember: Who is using it?

• Playstation now
• Apple help platform
• Apple music store
• Nasa.gov

Part 3 Ember: Latest release

The latest release LTS (Long Time Support) release is v2.11.3
This version was released the 08.03.2017

Part 3 Ember: Frequency of public updates, fixes and releases

• Releases are in a monthly basis

Part 3 Ember: Main features

• Productivity
• A lot of things are “out of the box” with Ember CLI
• Project generation
• Testing (codemash)
• Development server
• Reusable templates
• IDEs support
• TDD possible
• Convention Over Configuration
• Ember Data library
• Model as ORMs with relationships on the client side
• If we respect the name convention in our model, we don’t have to worry about the fetching of data coming from the server
• Relationship video example →

104 - Ember Data 2.0: Relationships

• Lazy loading possible for Model members for example:
• User has many Addresses
• We can load the User in one payload without Addresses
• And later load the Addresses in another payload
• Ember store
• The store is a central repository of models in the application
• Components and routes can ask the store for models, and the store is responsible for knowing how to fetch them
• You can think of the store as a read-through cache for your app’s models
• When a model is already present in the store, the data are not requested in the back-end (work like a cache). If we want to load again a model already present in the store, we have to inform the store explicitly

Part 3 Ember: Cross-Platform Development

• Ember-cli for Cordova

poetic/ember-cli-cordova

Part 3 Ember: UI Components

• Inspired by Google Material Design

Material Design Lite

• Semantic UI

Semantic UI

• Bootstrap for Ember

ember-addons/bootstrap-for-ember

Part 3 Ember: Data Libraries

• Support model with relationships

emberjs/data

Part 3 Ember: Lazy loading

• Lazy loading on Model classes with relationship like ORMs object (see chapter Main features)
• Ember-cli lazy load

duizendnegen/ember-cli-lazy-load

• Image lazy loading with Ember

Lazy Loading Images in Ember

Part 3 Ember: Deployment

• Ember-cli deploy does the job

Ember CLI Deploy · Deploy pipeline for Ember apps

Part 3 Ember: Virtual DOM support

• Ember uses Virtual DOM

Part 3 Ember: Validations support

• Ember model validator should do the job

esbanarango/ember-model-validator

• Ember easy form

Introducing Ember-EasyForm

• We can also build our custom validator extending an InputText object for example and implementing a custom validation

Emberjs and Validation

Part 3 Ember: Plugins support

• Ember Add-ons

Ember Addons

Part 3 Ember: Tooling

• Configure a client-side REST server

Ember CLI Mirage · Develop and test your Ember app against a client-side server

• Spend less time wiring up HTTP stubs, and get back to developing your app
• Use factories to define your server’s state per test. Acceptance testing just got a whole lot easier
• Share a functional prototype of your app that runs entirely in the client, before writing a single line of your API
• Available for Firefox and Chrome, Ember Inspector is a handy extension to look into the state of a running Ember app. It offers a way to inspect:
• the template hierarchy
• the complete routes layout
• Ember Data’s store explorer
• deprecations, performance, and much more

Part 3 Ember: Books

• Just search on your favourite search engine :)

Part 3 Ember: Online Training

• A few videos are free

Video List- EmberScreencasts

• Just search on youtube :)

Part 3 Ember: Community

• Ember watch

Ember.js Talks on EmberWatch

• Stackoverflow 20,192 questions tagged

Newest 'ember.js' Questions

• Official discussion forum

Ember.JS

• Simply google your question :)

Part 3 Ember: About the Ember core team member

Every member on Ember’s core team is actively working on one or more production apps that use Ember.
It means that the core team is forced to experience all the joys and pains of using the framework, just like every other developer does. And this means the core team will naturally look out for the good of all developers using the framework.

Ember core team members participate in W3C committees specifications and standards.

Part 3 Ember: Guidance is set by those with the most experience

So here’s a question: Who do you want to set the guidance and best practices for using a framework? Developers with some experience using the framework or developers that actually created the framework?

That’s the difference between Angular and Ember.

Angular doesn’t provide much guidance on how to use the framework, so it becomes the wild west when a company first adopts Angular. Every team uses the framework however they see fit.

Part 3 Ember: Developper anecdote

Here’s a case in point: there are four development teams currently using Angular at my work place, and every team has structured their Angular app differently. There is no consistency even though we’re all using the same framework. And we have literally spent multiple days worth of time discussing and debating how our apps should be structured. And they are still not structured the same way.

Ember, on the other hand, has its guidance and best practices set by its core team members. And these guidances and best practices are baked directly into the framework, so it’s easy to follow.

Because Ember specifically defines how an application should be structured, the developers do not waste hours upon hours debating how an app should be structured. Instead they can spend that time actually developing the app and providing value to the business.

It also means new team members that already know Ember can become productive in any Ember app within minutes because they know how the app is structured and where to go to add a new feature or fix a bug. Like I shared above, after only spending a few hours learning Ember, I was able to browse and understand the structure of a large Ember application. That can’t be said for most developers learning Angular.

Vue.js

More precisely Vue.js version 2.

Introduction - Vue.js

Overview over all frameworks by Vue.js:

Comparison with Other Frameworks - Vue.js

An article about: Why we chose Vue.js

Why We Chose Vue.js

Building

Used Vue.js webpack.

vuejs-templates/webpack

Plugins

vuejs/awesome-vue

Communication with rest service

pagekit/vue-resource

Starter pack

villeristi/vue.js-starter-template

Stability of the framework, frequency of public updates and releases

Centralized around a small development team.
Often releasing.

Existence of an active community, documentation quality and extensibility of the framework.

Community is mostly active on the surrounding plugins.
Core plugins supported by core development team.

Open source, licensing and feature of the framework

Source code is available on GitHub

vuejs/vue

Development done mostly by Evan You, financed by

Evan is creating Vue.js | Patreon

Advanced UI widget library (AutoComplete, Layout managers, Grid etc…)

Using existing UI frameworks can be integrated seamlessly.
bootstrap, font-awesome, etc…
Good example for this is the vue-material project:

marcosmoura/vue-material

Virtual DOM support

Supported

Themes and skinning support

Only through dynamic classes, styles and css.

Validations support

vee-validate enables simple Vue.js 2.0 UI validation.
More complex validations can be implemented as directives fairly easily.

Content lazy loading support

Depends on how webpack is used. It should be possible.

Plugins support

Based on plugin support.

Can we build native mobile apps using the same framework

There is a cordova demo available.
Weex supports vue format.

Get Started

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — —-

Many thanks to Gabriel, Patrick, Matthieu and Emre for their help.

If you liked my article, don’t forget to clap, share or comment it. It’s important for me to reach more people. Please check my latest article:

15 books that every programmer should buy

Angular Material Starter Kit