About PlayCanvas.Js

What is PlayCanvas.Js?

PlayCanvas is an enterprise grade open source JavaScript based WebGL game Engine that has got tons of developer tools to help you build 3D games within no time. PlayCanvas.js is built by a professional community and was not an open source initially but now you can fork it on GitHub and start using it for your next 3D game project, free of cost.

It also comes with cloud based editor that runs in your browser, so getting started with PlayCanvas is as easy as navigating to the Editor URL. Editor supports collaboration among teams which essentially means many people can work on the same project in parallel.

PlayCanvas.js is backed by the giants like Mozilla, Activision and ARM.

PlayCanvas is an open-source game engine. It uses HTML5 and WebGL to run games and other interactive 3D content in all modern browsers without the need for a plugin.

Features:

Graphics

WebGL-based 3D renderer
Physically based rendering (PBR)
Directional, point and spot lights (all of which can cast shadows)
Runtime Lightmap baking
Static and skinned meshes
GPU Particle engine with editor
PostFX library: bloom, edge detect, FXAA, vignette, etc
Seamless default material support from Maya, 3DS Max, Blender, etc.
Full model export pipeline from Maya, 3DS Max, Blender, etc via Assets User Manual

Collision & Physics

Full integration with 3D rigid-body physics engine ammo.js

Audio

3D Positional audio via Web Audio API
Resource Loading
Simple and powerful resource loading
Streaming of individual assets
Asset Variants - loads compressed textures (DXT, PVR, ETC1) based on platform support

Video for PlayCanvas

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

Small Overview About DevExterme.Js?

What is DevExterme.Js?

A Feature-Complete HTML5 JavaScript Data Grid Widget. The blazing-fast DevExtreme HTML5 Data Grid is a feature-rich data shaping and editing client-side widget which allows your end users to easily manage information and display it on-screen as business requirements dictate.

DevExtreme can be used with different technologies and supports deep integration with client-side libraries.

They are

JQuery
Angular
React
Asp.Net MVC
Knockout
Angular.Js

Getting Started
After installation, you can add a widget to your app. Here's a simple button example:

<div id="buttonContainer"></div>
var element = document.getElementById('buttonContainer');
var button = new DevExpress.ui.dxButton(element, { text: 'Hello World!' });

Video for DevExterme.JS?

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

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 Introduction About Preact.Js?

What is Preact ?

Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety.

Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.

It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling via Linked State.

Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.

Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.

Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:

props, state and context are passed to render()
Use standard HTML attributes like class and for
Works with React DevTools right out of the box

Video for Preact

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

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 Overview about amCharts.js?

What is AmCharts?

amCharts is a company based in Vilnius, Lithuania. The beginning of amCharts and amMap was in 2004, when the first version of amMap was made. Antanas Marcelionis worked as a manager in a web development company and, being a fan of maps and traveling, wanted to have a tool which would work like a pin-map for him.

Easily add charting capabilities to your websites and applications. Compatible with all modern and most legacy browsers (yes even IE7), JavaScript Charts allows creating flexible Pie, Column, Line, and number of other chart types.

Features

Advanced serial charts
Superior time-based scales
Micro-charts and sparklines
Responsive
Mobile Friendly
Accessible

Video for amCharts

https://www.youtube.com/watch?v=7RmwtoiEWkw

Small Overview about Koa.js?

What is Koa.Js?

Koa.js is a JavaScript web application framework that's brought some pretty important changes to the development of middleware—a key layer of software in web applications that keeps everything in a network linked and running smoothly.

Koa.js is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It is an open source framework developed and maintained by the creaters of Express.js, the most popular node web framework.

npm install koa

Koa provides a Request object as the request property of the Context.
Koa's Request object provides helpful methods for working with http requests which delegate to an IncomingMessage from the node http module.

Video for Koa.JS

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

About PlayCanvas.Js

References

Your comment on this post:

Related Articles