Discussion About Babel.js?

What is Babel?

Babel is a JavaScript transpiler.Essentially Babel takes the ES2015 JavaScript code and compiles it into ES5 code. This opens up all the ECMAScript 6 features to us when we code our projects.

The compiler can be broken down into 3 parts:

The parser: babylon (moved to a separate repo and versioned independently)
The transformer[s]: All the plugins/presets.These all use babel-traverse to traverse through the AST
The generator: babel-generator

Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.

Node NPM InstalInstallation:

npm install --save-dev babel-preset-env

Video About Babel?

Small Discussion about Polymer.Js?

What is Polymer.Js?

Polymer.js is a JavaScript library created by Google that allows reusing the HTML elements for building applications with components. Polymer is an open-source JavaScript library developed by Google developers

Polymer provides a number of features over vanilla Web Components:

Simplified way of creating custom elements
Both One-way and Two-way data binding
Computed properties
Conditional and repeat templates
Gesture events

Polymer.js places a hefty set of requirements on the browser, relying on a number of technologies that are in still in the process of standardization (by W3C) and are not yet present in today’s browsers.

Examples include the shadow dom, template elements, custom elements, HTML imports, mutation observers, model-driven views, pointer events, and web animations. These are marvelous technologies, but at least as of now, that are yet-to-come to modern browsers.

The Polymer strategy is to have front-end developers leverage these leading-edge, still-to-come, browser-based technologies, which are currently in the process of standardization (by W3C), as they become available.

The recommended polyfills are designed in such a way that (at least theoretically) will be seamless to replace once the native browser versions of these capabilities become available.

Video for Polymer.Js
https://www.youtube.com/watch?v=tvafAyxkuVk

Discussion About Svelte.Js?

What is Svelte?

Svelte is a different take on the idea of building UIs. Rather than being a library that runs in the browser to create your UI, it's a compiler that turns your component into simple JavaScript, with no need for virtual DOM diffing or any of the other techniques that UI libraries use

The web's JavaScript bloat crisis, solved.

Svelte turns your templates into tiny, framework-less vanilla JavaScript.
Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates markup, styles and behaviours that belong together.

Like Ractive and Vue, Svelte promotes the concept of single-file components: a component is just an .html file. Here's a simple example:

<h1>Hello {{name}}!</h1>
Svelte turns this into a JavaScript module that you can import into your app:
// main.js
import App from './App.html';
const app = new App({
target: document.querySelector( 'main' ),
data: { name: 'world' }
});
// change the data associated with the template
app.set({ name: 'everybody' });
// detach the component and clean everything up
app.destroy();

Video for Svelte

https://www.youtube.com/watch?v=wtL3SP7bu5Q

Small Discussion About Axios.Js?

What is Axios?

Axios is a promise-based HTTP client that works both in the browser and in a node.js environment. It basically provides a single API for dealing with XMLHttpRequest s and node's http interface. Besides that, it wraps the requests using a polyfill for ES6 new's promise syntax

Node Command

npm install axios

Bower Command

bower install axios

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client-side support for protecting against XSRF

The user interface is split up into three sections:

GET Request
GET Request with Parameters
POST Request

With each of these three sections the user is able to try out a specific use case for Axios.

Video for Axios

https://www.youtube.com/watch?v=1vbpBDWu1AQ

Small Discussion About Keystone.Js?

What is KeyStone.Js?
KeystoneJS is a powerful Node.js content management system and web app framework built on express and mongoose. Keystone makes it easy to create sophisticated web sites and apps, and comes with a beautiful auto-generated Admin UI.

KeystoneJS is the easiest way to build database-driven websites, applications and APIs in Node.js.

Features:

Express.js and MongoDB
Dynamic Routes
Database Fields
Auto-generated Admin UI
Simpler Code
Form Processing
Session Management
Email Sending

Keystone uses Mongoose, the leading ODM for node.js and MongoDB, and gives you a single place for your schema, validation rules and logic.

Keystone can configure Express for you, or you can take over and treat Keystone like any other Express middleware.

You can also easily integrate it into an existing Express app.

NPM Command
npm install -g generator-keystone

YO Generator
$ yo keystone

Video for KeyStone.JS

https://www.youtube.com/watch?v=DPXDFeUEk3g

Small discussion about Synaptic.Js?

What is Synaptic ?

Synaptic is a javascript neural network library for node.js and the browser, its generalized algorithm is architecture-free, so you can build and train basically any type of first order or even second order neural network architectures.

This library includes a few built-in architectures like multilayer perceptrons, multilayer long-short term memory networks (LSTM), liquid state machines or Hopfield networks, and a trainer capable of training any given network, which includes built-in training tasks/tests like solving an XOR, completing a Distracted Sequence Recall task or an Embedded Reber Grammar test, so you can easily test and compare the performance of different architectures.

Npm Command

npm install synaptic --save

Bower Command

bower install synaptic

Sample Layer created using Synaptic:

Video for Synaptic

https://www.youtube.com/watch?v=tUIEeCO_pZg

Small Discussion about Casper.Js?

What is Casper.Js?
CasperJS is a navigation scripting & testing utility for the PhantomJS (WebKit) and SlimerJS (Gecko) headless browsers, written in Javascript.

CasperJS allows you to build full navigation scenarios using high-level functions and a straight forward interface to accomplish all sizes of tasks.

CasperJS comes with a basic testing suite that allows you to run full featured tests without the overhead of a full browser. Output the tests to xunit for long term code health as well.

Capture data from web pages simply that don't contain APIs. Validate your production environment on a regular basis. Alternatively, use this to load your application with data.

Example Code:

var casper = require('casper').create();
casper.start('http://casperjs.org/', function() {
this.echo(this.getTitle());
});
casper.thenOpen('http://phantomjs.org', function() {
this.echo(this.getTitle());
});

Video for Casper.Js
https://www.youtube.com/watch?v=eOuUg6uFUqk

Small Discussion About Mercury.Js?

What is Mercury.Js?

Mercury is the creation of Raynos and available as open source under MIT license. It is fast growing in popularity and is getting lot of attention from the community of JavaScript Developers.

Mercury appears to be inspired by react and runs on the concept of virtual DOM rendering. It is modern JavaScript framework, fully modular and can be used to the extent you need.

Looking at the underlying concepts, compact size, modular approach, performance and popularity, Mercury makes its place in list of best 10 JavaScript frameworks of modern times

Benefits

Mercury leverages virtual-dom which uses an immutable vdom structure
Mercury comes with observ-struct which uses immutable data for your state atom
Mercury is truly modular, you can trivially swap out subsets of it for other modules
Mercury source code itself is maintainable, the modules it uses are all small, well tested and well documented. you should not be afraid to use mercury in production as it's easy to maintain & fix.
Mercury encourages zero dom manipulation in your application code. As far as your application is concerned elements do not exist. This means you don't need to reference DOM elements when rendering or when handling events

Mercury is a small glue layer that composes a set of modules that solves a subset of the frontend problem.

NPM Command

npm install mercury

Discussion About Babel.js?

References

Your comment on this post:

Related Articles