In a previous post, I shared some research on various Javascript frameworks. The frameworks have matured and there are three that standout in popularity. These are Angular.js, React.js and Vue.js. Below I will give my impressions of each of these frameworks.

Angular

Angular.js is a full featured framework with support across a variety of platforms. I code using Microsoft .NET on the backend and Visual Studio is now shipped with templates to set up an Angular SPA (Single Page Application).

Code in Angular is developed in Typescript modules and components which are converted ultimately into Javascript. HTML markup is not directly added to the DOM, but is imported/defined in the Typescript file. The HTML markup is modified to implement loops, model insertions, conditional sections, etc. 

Support for services, dependency injection and routing.

Works with other libraries, like RxJS (Observables). Use of a shadow DOM limits use of libraries like jQuery.

My initial impression is that it is a robust framework for an SPA. It appears to be awkward or an afterthought to setup for multiple pages as delivered by a typical .NET MVC application. Lazy loading of pages and controls is possible, but again appears to be an awkward process, though, to be fair, I'll need to code more extensive examples to test this. It seems to be heavy on the library size and the site can be slow to load if everything is loaded at the outset.

React

React is described as a JavaScript library for building user interfaces. Like Angular, React defines the HTML markup within the component code. This is simplified by developing using JSX, but can be developed using vanilla JavaScript. The components can be rendered to multiple DOM nodes. Makes use of JavaScript classes. Often paired with Redux for state management.

Hooks all state to be managed without defining a class.

React appears to be more extensible to multiple page apps than Angular. This would make it more suited for use in a multiple page setup and seems more efficient for initial load times. Library size is also smaller than Angular. I'm still not sold on the shadow DOM definitions used by React (or Angular). Both React and Angular make the DOM definition easier with the use of JSX (React) and directly importing html documents for Angular using Typescript. This seems to limit use of outside libraries not targeted to the framework, such as JQuery or Bootstrap, to connect to the DOM. It is possible utilizing events in the framework to access the final DOM, but this seems like a kludge. I prefer direct use of the template tag to define document fragments.

Vue

Vue is described as The Progressive JavaScript Framework. Vue is designed to be incrementally adoptable. Focus is on the view layer only (as opposed to model and controller layers). Vue uses "Mustache" syntax, {{}}, to declaratively render data to the DOM. Files appear to be standard HTML and JavaScript files. Components can be defined and inserted into the DOM using tags with component name.

 Vue comparison to other frameworks can be found here

The computer programming world is constantly changing in the available libraries, frameworks and standards. I have been working on some new programming projects, so have been researching some of the latest frameworks for JavaScript to see if I want to use any of them.  JavaScript is a programming language used primarily in browsers to provide interactive and responsive user interfaces on web pages. A JavaScript framework is composed of supporting libraries for UI interaction, server communication and coding standards.

Here are some of the most popular JavaScript frameworks available at the time this post was written:

List from https://colorlib.com/wp/javascript-frameworks/:

Reactive Frameworks

• Reactive.js - has nice plugins, but some don't seem to work
• WebRx - developed in TypeScript. Based on ReactiveX.
• Riot.js - replaces custom tags in HTML with JS code generated by a compiler. Possible solution as it looks straight forward.
• Mithril - Small and fast. All in JavaScript. Need to consider how it will interface with .NET
• Vue.js - looks run of the mill.

MVC JavaScript Frameworks and Libraries

• Angular.js - Popular framework, but transitioning to new version
• jQuery - Not a framework, but simplifies DOM access and changes.
• React - Popular. .NET MVC support at https://reactjs.net and discussion here
• Socket - website isn't very helpful. looks like it is used for chat or multi-user games. Utilizes Node.js
• Polymer - library to build reusable HTML elements.
• Node.js - not a framework, development platform like Java and .NET
• Meteor - use Node.js
• D3.js - very nice data visualizations
• Ember - works in conjunction with Babel. Compiles files into JavaScript.
• Aurelia - Integration with HTML tags looks promising. Limits framework intrusion by using defaults. Programmer friendly syntax.
• Knockout - looks nice, but may not be actively supported. Some markup is a little quirky. Good .NET support
• Keystone - use Node.js
• Stapes.js - Small.
• Inferno - small and extremely fast rendering. Similar to React

I found a slick way to parse a string in SQL at link.  It utilizes the XML features offered by SQL Server to break down the string into components.  Here is the code sample from the link:

declare @s varchar(max) = 'I=940;A=29.5;D=20090901|
I=941;A=62.54;D=20090910|
I=942;A=58.99;D=20091005|
I=954;A=93.45;D=20091201|
I=944;A=96.76;D=20091101|
I=946;A=52.5;D=20091101|
I=943;A=28.32;D=20091101|
I=945;A=52.5;D=20091101|
I=955;A=79.81;D=20091201|
I=950;A=25.2;D=20091124|
I=948;A=31.86;D=20091110|
I=949;A=28.32;D=20091120|
I=947;A=25.2;D=20091109|
I=951;A=242.54;D=20091124|
I=952;A=28.32;D=20091129|
I=956;A=38.94;D=20091210|
I=957;A=107.39;D=20091215|
I=958;A=32.55;D=20091228|
I=959;A=27.3;D=20091228|
I=960;A=24.79;D=20091230|
I=1117;A=28.32;D=20100131|
I=1115;A=272.58;D=20100131|
I=1116;A=159.6;D=20100209'
declare @xml xml

select @xml = '<item><value>'+replace(replace(@s,
 ';','</value><value>'), 
'|','</value></item><item><value>')+
'</value></item>'

select N.value('substring(value[1],3)', 'int') as Invoice,
       N.value('substring(value[2],3)', 'money') as Amount,
       N.value('substring(value[3],3)', 'date') as [Date]
from @xml.nodes('item') as T(N)

This example produces a table with each item's invoice, amount and date.