React

After a 3 months wait, v15.5.0 is released. The team is also busy working towards v16 which is currently in alpha.
You can find React’s Patent clause here. Robert Pierce of El Camino Legal LLP has written this article criticizing Facebook’s patent clause and arguing it is not open source software. Hacker News comments here.

Aurelia

It’s now approaching a whole year since Aurelia reached v1.0.
Following the Early March Mega Release there will be an April update with — aurelia-router 1.3.0
aurelia-templating-resources 1.4.0
aurelia-cli 0.28.0
aurelia-ui-virtualization 1.0.0-beta.3.1.0
aurelia-i18n 1.5.0
and some patch releases
Several other great new Aurelia features are coming in future releases:
New Chrome Debugger
Webpack v2 support
CLI enhancements
Hot module reload
VS Code plugin enhancements
HTML Template Validation
For more details see the Aurelia blog.

Angular 2+

Angular 4 RTM will be released in March 2017! (v4.0.2)
Angular 2 reached RTM on 15th September and reached v2.4.10 before v4.
Since v2 was released, the Google team has mostly met its own proposed schedule on releasing new minor and major versions
Angular 2.1 — Route Preloading
Angular 2.2 — AOT + ngUpgrade
Angular 2.3 — Language Service
Angular 2.4 — “Stability Interjection”
Angular 4 — March 2017

The Google Team have agreed to release new patch versions every week, a new minor version every month and a major version every 6 months.

So this is the plan for new major versions

Angular 5 — Sept/Oct 2017
Angular 6 — March 2018
Angular 7 — Sept/Oct 2018

By new major version we mean new features and potential breaking changes since the last release. So we should not necessarily get overexcited about new major versions, or conflate higher major numbers with very much higher quality.

For full details see Igor Minar’s blog post and opening keynote. Igor makes many interesting points in the keynote.
Google always use the latest version of AngularJS for their own applications. He also mentions TypeScript and the desire to support v2.1.

Some of the new Angular features we can expect by March are:
– Better Compiler Errors
– Faster
– Smaller

Angular 4 is backwards compatible with Angular 2 (but not Angular 1) so Angular 2+ looks to be the better bet for new applications that you will need to maintain and improve over a long lifetime.

For applications that you expect to be one-off releases and need to release very soon, it might still make more sense to use Angular 1.x if your experience is with Angular 1.x and you want to take advantage of the more mature ecosystem that surrounds it, however the case for Angular v2+ over v1 will only grow stronger as time goes on.

The Google team recommends we use the latest version.

Polymer

Polymer v1.9 has been released.
If you haven’t currently invested in Polymer 1.x, I recommend using v2.x instead.
The 4th Release Candidate version of Polymer 2.0 has now been released. A series of videos from Polymer Summit 2016 are available on YouTube.
To learn about the upgrade path to Polymer 2.0 watch Polymer 2.0 in 2.0 seconds. To understand how it works see Polymer 2.0: Under the Hood. Rob Dodson describes Polymer as an opinionated usage of Web Components.

Ember

Ember v2.12 and v2.13 Beta are out

These days, developers are interested to use AngularJS and ASP.NET MVC (wiring MVC and AngularJS). So in this post we will learn how to combine the best of both worlds and use the goodness of AngularJS in ASP.NET MVC. 

To start, let’s create ASP.NET MVC application and right click on the MVC project. From the context menu, click on Manage Nuget Package. Search for the AngularJS package and install into the project.

After successfully adding the AnngularJS library, you can find those files inside the Scripts folders.

Reference of AngularJS library

You have two options to add an AngularJS library reference in the project: MVC minification and bundling or by adding AngularJS in the Script section of an individual view. If you use bundling, then AngularJS will be available in the whole project. However you have the option to use AngularJS on a particular view as well.

Let’s say you want to use AngularJS on a particular view (Index.cshtml) of the Home controller. First you need to refer to the AngularJS library inside the scripts section as shown below:

@section scripts{

    <script src=”~/Scripts/angular.js”>script>

}

Next, apply the ng-app directive and any other required directives on the HTML element as shown below:

<div ng-app=”” class=”row”>

     <input type=”text” ng-model=”name” />

     {{name}}

div>

When you run the application you will find AngularJS is up and running in the Index view. In this approach you will not be able to use AngularJS on the other views because the AngularJS library is only referenced in the Index view.

You may have a requirement to use AngularJS in the whole MVC application. In this case, it’s better to use bundling and minification of MVC and all the AngularJS libraries at the layout level. To do this, open BundleConfig.cs from the App_Start folder and add a bundle for the AngularJS library as shown below:

  public static void RegisterBundles(BundleCollection bundles)

        {

            bundles.Add(new ScriptBundle(“~/bundles/angular”).Include(

                        “~/Scripts/angular.js”));

After adding the bundle in the BundleConfig file, next you need to add the AngularJS bundle in the _Layout.cshtml as listed below:

<head>

    <meta charset=”utf-8″ />

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>@ViewBag.Title – My ASP.NET Applicationtitle>

    @Styles.Render(“~/Content/css”)

    @Scripts.Render(“~/bundles/modernizr”)

    @Scripts.Render(“~/bundles/angular”)

    @Scripts.Render(“~/bundles/jquery”)

    @Scripts.Render(“~/bundles/bootstrap”)

    @RenderSection(“scripts”, required: false)

head>

After creating an AngularJS bundle and referring to it in _Layout.cshtml, you should be able to use AngularJS in the entire application.

Technical

Size (minified, not gzipped)

React+Redux — 156k or 167k with plugins
Angular 1 – 158k minimum, 240k with router, HTTP and animation system
Polymer — 222k minimum, 302k (spec compliant)
Aurelia — 252k minimum, 302k with standard plugin
Ember — 435k including router
Angular 2 — 698k minimum, 919k with RxJS, 1023k with RxJS and router and HTTP client

(Not that Redux is in any way large, but it is unfair to add Redux to the file size for React only. Redux happens to be more commonly used by React users, but it is an optional extra regardless of which framework you choose.)

Rob mentions that the Angular team are using tree shaking to reduce the file size.

Latest Performance Developments 

The dbmon tool to measure the performance was popularised by Ryan Florence from Facebook in his talk at Conf 2015 showing React was faster than Angular 1 and much faster than Ember back in 2015.

The dbmon test has recently been updated with adjustable mutations percentage. This is the latest performance results using this tool:

React — 52 to 54fps
Angular — 45 to 46fps
Angular 2– 49 to 52fps

Only naive implementations for Polymer and Ember are currently available
Polymer 1.8 — 44–46 fps
Polymer 2.0 –37 to 40 fps
Ember — 44–46 fps

Some other selected framework/technology results:
Vue — 51–53 fps
Vue 2–41 to 44fps
Elm — 51 to 53fps
Inferno — 54 to 56fps
Vanilla JS varies from 50 to 72 fps

Choosing a JavaScript Framework has been never an easy decision because there is so much to consider.

Rob Eisenberg is a JavaScript framework expert. He is the mechanic behind Caliburn.Micro, Durandal and Aurelia, and has also worked on the Angular 2.0 and Angular Material teams. This post was originally written as a summary of Rob’s talk. 

The frameworks under the spotlight are:

Angular 1.x
Angular 2 (Angular 2+)
Aurelia
Ember
Polymer
React

Angular 1.x is an all-in-one framework. Rob says it is pretty much deprecated, there’s literally a fixed number of months left on the lifetime of that framework
and it’s probably fair to say that you shouldn’t start a new project in Angular JS right now, and you should be thinking about how you might migrate any existing code bases.

Rob describes Angular 2, Aurelia, Ember and Polymer as also All-in-one frameworks, but modern ones.

React is not a framework, per se. It’s a view rendering engine or a component model.

Rob recommends Visual Studio Code and is using it on his Mac. 

For a very simple Hello World application, we will compare these frameworks:

Angular 1.x
index.html is 13 lines of code
We see the ng-controller and ng-model directives.
app.js is 8 lines of code.

Rob describes this as a throwback to the previous generation of frameworks: Angular specific modules rather than ES2015 modules. He describes the Angular 1 two way data-binding model.
(As of Angular 1.5 we have Angular Components as a superior alternative to using controllers and directives.)

Angular 2
Rob says Angular 2 really focuses on TypeScript, and it is much more difficult to use plain JavaScript so most people are going to be kind of pushed down the TypeScript road necessarily with Angular 2 (The equivalent documentation is available for TypeScript, JavaScript and Dart. Judge for yourself how much more difficult it is to use with plain JavaScript)
index.html is 32 lines of code
(I could not believe that there isn’t a simpler way to write this in Angular 2. Rob has found some Angular 2 documentation that pulls in a whole load of modules. For the purposes of developing a hello world type app, Rob is pulling in the following modules:
es6-shim
system-polyfills.js
shims for IE.js
angular2-polyfills.js (no longer part of the Angular2 RC)
system.src.js
Rx.js
angular.dev.js
There is also a bunch of code for here configuring a System JS module loader. System JS is written by Guy Bedford and Max Norlund and has nothing to do with Angular 2)
main.ts — 4 lines
app.component.ts — 20 lines

Rob explains the Angular2 decorator. He uses an inline template rather than using a template URL. He also explains two-way data-binding in Angular2, and points out that Google have deviated from the HTML specification by using mixed casing.

Aurelia
index.html — 10 lines. This imports System JS and uses it to import the Aurelia bootstrapper.
app.js — 8 lines
app.html — a template with 5 lines of code. Rob explains the two way data binding mechanism used here.

Ember
index.html — 16 lines. Imports jquery, handlebars, ember and app.js
app.js — 23 lines.

Rob says Ember is a very strict MVC paradigm and requires a router even for Hello World.

Polymer
index.html — 10 lines.
my-app.html — 22 lines including template, a script block and 4 blank lines.

Rob says the web components centric philosophy concerns him because it doesn’t make sense to do everything in HTML but there it is, that’s my opinion
Rob likens Polymer to the long forgotten Microsoft Acropolis project from 2008 which tried to do everything in XAML.

React
index.html — 13 lines, importing es5-shim, es5-sham and console-polyfill
app.js — 39 lines.

The latest tooling in Visual Studio for .NET Core will be pretty good. Fortunately, the dotnet sdk, and subsequently the CLI, have libraries available for various Single Page Application framework quick starts.

With the latest version of Visual Studio 2015+ installed, you should have the dotnet core SDK version 1.0.3 installed. If not, you can download the SDK.

The “dotnet –info” command can be used to confirm SDK version. 

To get started with “dotnet new” (new being the command to create new projects), the SPA templates for Angular and other various frameworks can be utilized after installing this package:

dotnet new –install Microsoft.AspNetCore.SpaTemplates::*

This will run for a bit and install various dependencies. After installation is complete, the available templates can be viewed by running “dotnet new” by itself.

By using this template, you get a nice base starting point for an Angular application. Some of the niceties are having the build process already configured for bundling, minification, and various dependencies already configured.

Webpack, TypeScript, and other things will appear already configured when the project is opened in future version of Visual Studio 2015+.

Running the project for the first time can take a bit of time since all of the npm packages and such are pulled down. But, the template does have a few little niceties and is a fully working Angular project. The “Hello, world!” view has some nice information about the template and details some parts of the technology used in the template.

This post shows how to configure Angular 2+ Routing on an ASP.Net MVC web application in Visual Studio 2015+

Step 1 – Make sure you have installed the prerequisites

Visual Studio 2015+
TypeScript 2.0 

Step 2 – Create ASP.NET MVC Web Application

Go to Visual Studio’s File New Project menu, expand the Web category, and pick ASP.NET Web Application 

Select the template MVC:

Step 3 – Configure Angular 2+

We need now to prepare our frontend to run Angular 2+

Create tsconfig.json which is the TypeScript compiler configuration file.

<span class="js__brace">{</span> 
  <span class="js__string">"compilerOptions"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"target"</span>: <span class="js__string">"es5"</span>, 
    <span class="js__string">"module"</span>: <span class="js__string">"commonjs"</span>, 
    <span class="js__string">"moduleResolution"</span>: <span class="js__string">"node"</span>, 
    <span class="js__string">"sourceMap"</span>: true, 
    <span class="js__string">"emitDecoratorMetadata"</span>: true, 
    <span class="js__string">"experimentalDecorators"</span>: true, 
    <span class="js__string">"lib"</span>: [ <span class="js__string">"es2015"</span>, <span class="js__string">"dom"</span> ], 
    <span class="js__string">"noImplicitAny"</span>: true, 
    <span class="js__string">"suppressImplicitAnyIndexErrors"</span>: true 
  <span class="js__brace">}</span> 
<span class="js__brace">}</span> <br />Add package.json file to your project folder with the below code:<br />The most important things in your package.json are the name and version fields. <br />Those are actually required, and your package won't install without them. <br />The name and version together form an identifier that is assumed to be completely unique. <br />Changes to the package should come along with changes to the version.<br /><br />

<span class="js__brace">{</span> 
  <span class="js__string">"name"</span>: <span class="js__string">"angular-quickstart"</span>, 
  <span class="js__string">"version"</span>: <span class="js__string">"1.0.0"</span>, 
  <span class="js__string">"description"</span>: <span class="js__string">"QuickStart package.json from the documentation for visual studio 2015+ &amp; WebApi"</span>, 
  <span class="js__string">"scripts"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"start"</span>: <span class="js__string">"tsc &amp;&amp; concurrently \"tsc -w\" \"lite-server\" "</span>, 
    <span class="js__string">"lint"</span>: <span class="js__string">"tslint ./app/**/*.ts -t verbose"</span>, 
    <span class="js__string">"lite"</span>: <span class="js__string">"lite-server"</span>, 
    <span class="js__string">"pree2e"</span>: <span class="js__string">"webdriver-manager update"</span>, 
    <span class="js__string">"test"</span>: <span class="js__string">"tsc &amp;&amp; concurrently \"tsc -w\" \"karma start karma.conf.js\""</span>, 
    <span class="js__string">"test-once"</span>: <span class="js__string">"tsc &amp;&amp; karma start karma.conf.js --single-run"</span>, 
    <span class="js__string">"tsc"</span>: <span class="js__string">"tsc"</span>, 
    <span class="js__string">"tsc:w"</span>: <span class="js__string">"tsc -w"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"keywords"</span>: [], 
  <span class="js__string">"author"</span>: <span class="js__string">""</span>, 
  <span class="js__string">"license"</span>: <span class="js__string">"MIT"</span>, 
  <span class="js__string">"dependencies"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"@angular/common"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/compiler"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/core"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/forms"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/http"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/platform-browser"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/platform-browser-dynamic"</span>: <span class="js__string">"Version#"</span>, 
    <span class="js__string">"@angular/router"</span>: <span class="js__string">"Version#"</span>, 
 
    <span class="js__string">"angular-in-memory-web-api"</span>: <span class="js__string">"~0.2.4"</span>, 
    <span class="js__string">"systemjs"</span>: <span class="js__string">"0.19.40"</span>, 
    <span class="js__string">"core-js"</span>: <span class="js__string">"^2.4.1"</span>, 
    <span class="js__string">"rxjs"</span>: <span class="js__string">"5.0.1"</span>, 
    <span class="js__string">"zone.js"</span>: <span class="js__string">"^0.7.4"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"devDependencies"</span>: <span class="js__brace">{</span> 
    <span class="js__string">"concurrently"</span>: <span class="js__string">"^3.2.0"</span>, 
    <span class="js__string">"lite-server"</span>: <span class="js__string">"^2.2.2"</span>, 
    <span class="js__string">"typescript"</span>: <span class="js__string">"~2.0.10"</span>, 
 
    <span class="js__string">"canonical-path"</span>: <span class="js__string">"0.0.2"</span>, 
    <span class="js__string">"tslint"</span>: <span class="js__string">"^3.15.1"</span>, 
    <span class="js__string">"lodash"</span>: <span class="js__string">"^4.16.4"</span>, 
    <span class="js__string">"jasmine-core"</span>: <span class="js__string">"~2.4.1"</span>, 
    <span class="js__string">"karma"</span>: <span class="js__string">"^1.3.0"</span>, 
    <span class="js__string">"karma-chrome-launcher"</span>: <span class="js__string">"^2.0.0"</span>, 
    <span class="js__string">"karma-cli"</span>: <span class="js__string">"^1.0.1"</span>, 
    <span class="js__string">"karma-jasmine"</span>: <span class="js__string">"^1.0.2"</span>, 
    <span class="js__string">"karma-jasmine-html-reporter"</span>: <span class="js__string">"^0.2.2"</span>, 
    <span class="js__string">"protractor"</span>: <span class="js__string">"~4.0.14"</span>, 
    <span class="js__string">"rimraf"</span>: <span class="js__string">"^2.5.4"</span>, 
 
    <span class="js__string">"@types/node"</span>: <span class="js__string">"^6.0.46"</span>, 
    <span class="js__string">"@types/jasmine"</span>: <span class="js__string">"2.5.36"</span> 
  <span class="js__brace">}</span>, 
  <span class="js__string">"repository"</span>: <span class="js__brace">{</span><span class="js__brace">}</span> 
<span class="js__brace">}<br /><br />Create a sub-folder app on the root folder. On this folder we need to create our typescript files: <br />- main.ts<br />- app.module.ts<br />- app.component.ts<br />- app.component.html<br />- need to create also components to each route we need. <br />On this example we need to create two components Roo1Component and Root2Component that must be declares on app.module.ts</span> <br /><br />Create your index.html<br /><br />

<span class="html__doctype">&lt;!DOCTYPE html&gt;</span> 
<span class="html__tag_start">&lt;html</span><span class="html__tag_start">&gt; 
</span><span class="html__tag_start">&lt;head</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;script</span><span class="html__tag_start">&gt;</span>document.write('<span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"' + document.location + '"</span> <span class="html__tag_start">/&gt;</span>');<span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;title</span><span class="html__tag_start">&gt;</span>Angular2+ Routing<span class="html__tag_end">&lt;/title&gt;</span> 
    <span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"/"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;meta</span> <span class="html__attr_name">charset</span>=<span class="html__attr_value">"UTF-8"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;meta</span> <span class="html__attr_name">name</span>=<span class="html__attr_value">"viewport"</span> <span class="html__attr_name">content</span>=<span class="html__attr_value">"width=device-width, initial-scale=1"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;base</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"/"</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;link</span> <span class="html__attr_name">rel</span>=<span class="html__attr_value">"stylesheet"</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"styles.css"</span><span class="html__tag_start">&gt; 
</span> 
    <span class="html__comment">&lt;!-- load bootstrap 3 styles --&gt;</span> 
    <span class="html__tag_start">&lt;link</span> <span class="html__attr_name">href</span>=<span class="html__attr_value">"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"</span> <span class="html__attr_name">rel</span>=<span class="html__attr_value">"stylesheet"</span><span class="html__tag_start">&gt; 
</span> 
 
    <span class="html__comment">&lt;!-- Polyfill(s) for older browsers --&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/core-js/client/shim.min.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/zone.js/dist/zone.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"node_modules/systemjs/dist/system.src.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
 
    <span class="html__tag_start">&lt;script</span> <span class="html__attr_name">src</span>=<span class="html__attr_value">"systemjs.config.js"</span><span class="html__tag_start">&gt;</span><span class="html__tag_end">&lt;/script&gt;</span> 
    <span class="html__tag_start">&lt;script</span><span class="html__tag_start">&gt; 
</span>        System.import('app/main.js').catch(function (err) { console.error(err); }); 
    <span class="html__tag_end">&lt;/script&gt;</span> 
 
<span class="html__tag_end">&lt;/head&gt;</span> 
<span class="html__tag_start">&lt;body</span><span class="html__tag_start">&gt; 
</span>    <span class="html__tag_start">&lt;my</span>-app<span class="html__tag_start">&gt;</span>Loading App&lt;/my-app&gt; 
<span class="html__tag_end">&lt;/body&gt;</span> 
<span class="html__tag_end">&lt;/html&gt;</span> <br /><br />Angular will launch the app in the browser with our component and places it in a specific location on index.html.

Refactoring Existing Code to Angular

Start Small

Regardless of the type of code you’re refactoring, it’s usually best to start with a small component. It doesn’t always make sense to move everything into using some other library just because you can, but rather just change things as you need to develop new features or fix bugs. The simplest way to start is by taking a part of the code and replacing it with an Angular controller. Take away any code that modifies the DOM, and instead build it into the markup using Angular’s databinding features. You’ll definitely encounter cases where you need to access some more general code when doing this, which is a perfect case to move the code into a service. Then, it’s very easy to inject it into your controller.

Organizing Code

It’s usually a good idea to keep things simple. When you start, just create a page-specific angular module. This is probably quite obvious if you’re working with a single page app, but in a case where your app has traditional page changes, keeping modules on their own pages for starters is a good idea. As you keep adding things into the module, you’ll probably start seeing things that should be shared between controllers. In a case like that, you should move the code into a service.

Eventually you’ll start seeing cases where you need the same functionality in different modules. When this happens, create a base module and put the shared things there. You can then add a dependency to the base module into your page-specific modules.

Dealing with the DOM

You can easily move much of legacy DOM handling code into Angular simply by using Angular’s builtin directives and databinding features. However, in the likely case that you have used some jQuery plugins or done some other slightly more involved DOM trickery, things may be a tiny bit more difficult to sort out.

The most straightforward things can easily be wrapped into a directive. Sometimes the only thing you need to do is take the jQuery (or other) function call, wrap it in a directive and call it a day. For anything nontrivial, it’s usually worth checking out whether you can simply plug in Angular UI and be done with it. Even if that’s not the case, you can use their code as an example on how to do more complex plugin integrations or such into directives.

Working with Legacy Code
Especially with large applications, it’s often not feasible to move everything into Angular at once. You’re going to need to access your Angular services from some of the legacy code, and you’re also going to need to be able to respond to changes that happen via legacy event handlers inside your Angular code.

AngularJS

The following steps suggest a method to integrate AngularJS into your existing applications:

Write at least one small AngularJS application from the ground up that uses a model, custom HTML directives, services, and controllers. In other words, in this application, ensure that you have a practical comprehension of the AngularJS separation of responsibilities.

Identify the model portion of your code. Specifically, try to separate out the code that augments the model data in the model into controller functions and code that accesses the back-end model data into services.

Identify the code that manipulates DOM elements in the view. Try to separate out the DOM manipulation code into well-defined custom directive components and provide an HTML directive for them. Also identify any of the directives for which AngularJS already provides built-in support.

Identify other task-based functions and separate them out into services.

Isolate the directives and controllers into modules to organize your code.

Use dependency injection to link up your services and modules appropriately.

Update the HTML templates to use the new directives.

Obviously, in some instances it just doesn’t make sense to use much if any of your existing code. However, by running through the preceding steps, you will get well into the design phase of implementing a project using AngularJS and can then make an informed decision.

Elm

Elm has three different ways to embed components and applications: fullscreen, embedded and worker. Fullscreen replaces the page with the Elm app, great for writing web-based games. Embedded mode functions in the same way as React: it renders into a particular DOM node. Worker lets you use the Elm component inside of a web worker, as a background process that works with the rest of your app.

To communicate with JavaScript code, you can pass things into Elm with flags for one-way communication (similar to passing properties into a React component), or you can use subscriptions to listen for events from the Elm component, such as mouse clicks or text input changes (similar to event callbacks in React). When we limit the comparison between Elm and React to React’s mode of integration, Elm is a bit more complicated in terms of having to set up flags and subscriptions but once you get used to it, it’s about as easy as React.

What could give Elm an edge over React is the compilation and bundling. You can compile multiple Elm components into one bundle and then include a script tag and an initialization script: you now have access to all of your Elm components in a nice convenient package. Because it is built into Elm, you don’t have to rely on Grunt, Gulp, Webpack, SystemJS or whatever flavor of module bundler and build system is popular today. 

ReactJS

React has only one way of being integrated into a code base: it can only replace DOM nodes. This is great because it keeps things simple, and when you’re working on integrating React into an existing code base, all you need to worry about is passing data from the rest of the web app into the React components.

All the other nice things about React, like using Redux, Nuclear.js, Immutable.js and ReactRouter, can be integrated later on. React is only one part of the framework and it can function as a replacement for the view rendering of any other framework. You don’t even have to use the JSX syntax! You can start using React in an existing web app by including the React and ReactDOM scripts and with a few lines of JavaScript you can define and insert a React component into the page.

Which is Easier To Get Started With?

Elm and React and Angular all give you the opportunity to try them out in the browser, so you can learn their syntax and how they work immediately. React’s version of “try it out” is simpler, while Elm’s version is a full-page code editor which has multiple examples demonstrating the syntax, how to work with buttons, how to do drag & drop, and some basic HTML5 Canvas examples. While React’s version does show the compiled JavaScript code, Elm gets a point in its favor because the examples are better and the editor allows free-form code to be written. There is also a new online editor for Elm called Ellie that makes it even easier to try out right in the web browser.

Both Elm and React are installed using NPM, the Node Package Manager. Elm is globally installed and provides its own package manager. The default install of Elm includes the core libraries, HTML libraries and the Virtual DOM rendering engine. The default install of React includes React and the React-DOM library.

The React tutorial suggests installing create-react-app, which is a way to get React up and running quickly. It does not include Webpack or any other build tool, but it does let you use JSX syntax, ES6 JavaScript, and the Flow type-checker. Type-checking is built right into the Elm compiler.

Elm and React are easy to install and both have made efforts to keep things as simple as possible. React gets a point here with its officially endorsed create-react-app boilerplate project (though there are boilerplate starter projects out there for Elm, too).

The Development Feedback Loop
While developing the app, the React’s starter kit nice to work with because it made the feedback loop fast. The JavaScript code was recompiled whenever a change was made and the browser reloaded the web page. Elm’s equivalent is elm-reactor which also watches Elm files, recompiles and reloads the web browser.

What give Elm an edge over React are the compiler error messages. While Elm has better type-checking, and React does not have any built-in type-checking (aside from rudimentary component properties type-checking), comparing the error messages is another part of the feedback loop.

For performance, this is a benchmark that tries to compare the performance of Elm, React, Ember, and Angular in a fair way:

https://github.com/evancz/react-angular-ember-elm-performance-comparison

Let us first declare that Angular is a mammoth and Vue.js is the tiger hungry enough to become big soon. 

Vue.js is less opinionated solution than Angular. That allows you to structure your app the way you want it to be, instead of being forced to do everything the Angular way. It’s only an interface layer so you can use it as a light feature in pages instead of a full blown SPA. There are many tools in Angularjs and so many complex syntax that it can confuse you sometimes. 

React and Vue.js has some similar features . They both:

1) Utilize a virtual DOM
2) Provide reactive & composable view components.
3) Keep focus in the core library, with concerns like routing and global state management handled by companion libraries.