Javascript Frameworks

Why JS frameworks?

MV, MVC, MVVM popularity (good structure)
Operate on client/browser side and can provide some great functionalities like instant data validations where no trip to the server is needed
A lot happening on client side without page reloads
They operate on client/browser side and can provide some great functionalities like instant data validations etc. for which there are no server trips needed.
JavaScript frameworks are helping older web apps which use heavy server-side rendering, transition to a more fluid modern UX, where a lot of action happens on the client-side without constant page reloads.
ReactJS.NET is a .NET specific JavaScript version of React.JS and can be used with ASP.NET MVC 4 or 5 and even ASP.NET Core MVC

Library = a toolbox

Framework = workshop

Angular

A framework used for building complex UI applications

Built and used in typescript

Angular 2 and 4 basically the same

Written in Typescript (easy for Java and c# developers to understand)

Angular 2 & 4 are more ‘compenant” based while AngularJS was controller driven

Has mobile app form factor in mind (AngularJS didn’t)

Weather.com, upwork.com, freelancer.com, netflix.com = All built using AngularJS

React

From Facebook & Focuses mainly on “V” (view) part of MVC

Used in conjunction with angular sometimes

ReactJS.NET Used with ASP.NET MVC 4 or 5 or even core mvc

React JS can be a good choice when you are going to develop a dynamic consumer-facing, UI-centric application that rerenders frequently

Key Features:

It uses virtual DOM for all UI components. Essentially it creates another DOM in memory on the server-side. When user interacts with the web application, it tracks the changes in virtual DOM. Then, it does a “diff” of both DOMs and patches the browser DOM with the changes. This ensures that there is no re-rendering of DOM required.
React can run on the server (using Node js) and on the client. So you can build your MVC application using React instead of Razor to render a component on the server. The same piece of code can double as a client-rendering code too.
Nested views and loops are used often in React.JS for handling complex UI.
React can also work with any front-end framework you are working on. So if need be, you can smoothly replace any feature with React. For eg: switch ng-repeat with React code to gain its fast view rendering power.
In addition to Facebook and Instagram, Airbnb, Khan Academy, New York Times, WhatsApp web & Netflix are some of the companies that are using React.

Vue.js

Simple yet powerful library to build interactive web interfaces

Works in tandem with ASP.NET MVC and allows to keep web app untouched while at same time adding flaires of Vue into your views

Easy to migrate from AngularJS to vue

Allows you to bind data models with your presentation layer

Ember.js

Combines server-side rendering of DOM (react) and two way data binding (Angular JS)

Lot of features out of the box (shouldn’t consider if you want flexibilitity)

Objects can bind properties to each other ( so changing propert of one object will update the other object)

Nested views (like react)

Groupon, vine, and apple music desktop applicatoin

Backbone.js

Easy to learn and lightweight

Best for single page applications

MVP pattern

Controllers Optional

Have Views and Models and then event-driven communication happening between those 2
Built on top of regular DOM
Models easily tied to restful APIs

If most of UI remaining same, but only certain UI elements change with user interactions…use backbone.js

In conjuction with ASP.NET Web API... HTTP features:

Caching
Versioning
Streaming

Pinterest, foursquare, Walmart use Backbone.js

General Framework Knowledge

SPAS (single page applications)

Node.js: This is a server-side JavaScript framework that you can use in conjunction with other client-side (read UI-specific) frameworks. This is a key component of MEAN stack that is gaining a lot of popularity when building entire apps on JavaScript-based stack.

D3.js: fully focused on chart related visualizations. This library comes with quite a lot of components that help you create cool charts.

Babylon.js: If you want to build some cool 3D games on browser, then you should use Babylon.JS.

MEAN Stack

MongoDB
Express.js
Angular.js
Node.js

Why not to SPA

If you want to deliver your website contents as fast as possible to your users, independently from the devices they will use to reach your page, you should avoid rendering them on the client. Rendering the whole HTML of your websites via Javascript in the browser means that you will use a technology that was never meant to be used in that way ignoring what was explicitly invented for doing that well and fast: Servers
Doing a SPA website you will be forced at some point to re implement all the features our browsers give us for free.
Social network platforms require meta attributes in your pages in order to get info about your contents. AFAIK Facebook and Twitter crawlers can’t run Javascript so they just read the HTML statically generated by your application routes. If your app meta tags are not properly rendered your site (when shared) will always have the same title/description/share-image for all of its pages.
The 90% of SPA websites I have worked on could have been made with a simple static site generator like hugo or jekyll, having Javascript components here and there when needed, to make their contents a bit more interactive and fun.
Many “smooth” SPA websites require quite much memory in order to be able to manage all the website contents + markup + transitions + videos + canvas + webgl…
future of the web that people working in this industry will focus more on reusable web components that can only enhance the user experience leaving the rendering of the important contents of the pages to the server available also for users that have for example javascript disabled.
other issues like bad SEO, bad interoperability with CMSs, inconsistencies in the use of the HTTP status codes..

State Management

As Frontend developers, we usually face only two significant challenges — to display data and to store data. The later being far harder to maintain over time, as it is so convenient to ignore it — that is until your project becomes virtually unmaintainable several months later.

React state management

Redux for Flux architecture
Mobx for observable-based one

Angular, Ember, and VueJS serve their own build-in state management solutions — based on the idea of Observables. While not necessary, there are also additional libraries⁵ like ngRx, Akita and Vuex.

For any other framework or Vanilla JavaScript, you can use Redux, Mobx, or your own state management solution. The main goal is to ensure that whole application has the same source of truth — this can be a service, a library, or a simple state Observable.

blazor.Net

Web Components

Web Component Links

Each JS framework has its own API for reusable components. A react-video-player won’t work in Ember, and a ember-preload won’t work in Vue. For example, Matrix.org’s JavaScript SDK is tied to React. Other JS SDK’s use an iframe (Facebook Like Button and other ad-tech SDK’s usually go this route) or abstain from providing any UI functionality at all (like WebTorrent).

Web Components, since they act exactly like built-in HTML elements, should work within any framework. If your framework can render arbitrary HTML elements, then it can render a custom HTML element. If you’re just building an app, it doesn’t matter; just render the HTML that you want in your template language.

the browser global window object has a property called customElements — we call the define method on the property to create our custom HTML element. It takes three arguments, the last one is optional.

WebComponentButton class has lifecycles out of the box. If you come from the React, Vue, Angular, etc., this might be familiar to you already. Lifecycle methods let us control what happens when certain actions happen. For example, when the browser renders the button, we want to attach styles to it.

customElements.define(name, constructor, options);

Webpack

Webpack Links

Webpack is a tool that lets you compile JavaScript modules. It’s also known as a module bundler. Given a large number of files, it generates a single file (or a few files) that run your app.

Webpack is not limited to being used on the front-end, but is useful in backend Node.js development as well.

There are many predecessors of Webpack and lots of similarities in what those tools and Webpack do. The main difference is that those tools are known as task runners, while Webpack was born as a module bundler.

Webpack is a more focused tool. You just need to specify an entry point to your app (it could even be an HTML file with script tags) and webpack analyzes the files and bundles them in a single JavaScript output file that includes everything you need to run the app.

Webpack possible operations:

helps you bundle your resources.
watches for changes and re-runs the tasks.
can run Babel transpilation to ES5, allowing you to use the latest JavaScript features without worrying about browser support.
can transpile CoffeeScript to JavaScript
can convert inline images to data URIs.
allows you to use require() for CSS files.
can run a development webserver.
can handle hot module replacement.
can split the output files into multiple files to avoid having a huge JS file to load in the first page hit.
can perform tree shaking.

One nice feature of the watch mode is that the bundle is only changed if the build has no errors. If there are errors, watch will keep listening for changes, and try to rebuild the bundle, but the current, working bundle is not affected by those problematic builds.