Discussion About Webpack.Js?

What is WebPack.Js?

Webpack is a module bundler for modern JavaScript applications. It is incredibly configurable, but to get started you only need to understand Four Core Concepts: entry, output, loaders, and plugins.

Webpack constructs two separate dependency graphs and emits two bundle files, one called app.js containing only the application code and another called vendor.js with all the vendor dependencies.

Webpack is fed via a configuration object. It is passed in one of two ways depending on how you are using webpack: through the terminal or via Node.js.

Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.js.

It allows you to split your codebase into multiple chunks. Chunks are loaded asynchronously at runtime. This reduces the initial loading time

NPM Module for install

npm install webpack -g

Video for Webpack.Js

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

Discussion About Webpack.Js?

References

Your comment on this post:

Related Articles