js digest. february 2017
TRANSCRIPT
JS Digest.February 2017
by Oleksandr Oliynyk, software developer at ElifTech
Agenda
Image manipulating in pure JSES7 and ES8 FeaturesGradient Animations made easyNativeScript v.2.5 releaseNext-generation 3D Graphics on the
WebProject of the Week: Beaker
BrowserV8 Release 5.7
● Twitter's React-Based Mobile Web Stack Rivals Native Performance
● JavaScript in 2017 – Beyond the Browser
● framework for building command line applications (cli) with node.js
● Microsoft Makes it Easy to Create JavaScript Web Apps with New Tool
● Fresh Resources for Web Developers
● MVP for webAssembly is completed
Image manipulating in pure JS*
JIMP - The "JavaScript Image Manipulation Program" :-)
image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
available to use in web browsers and Electron applications
Jimp.read("lenna.png").then(function (lenna) { lenna.resize(256, 256) // resize .quality(60) // set JPEG quality .greyscale() // set greyscale .write("lena-small-bw.jpg"); // save}).catch(function (err) { console.error(err);});
*https://github.com/oliver-moran/jimp?utm_source=nodeweekly&utm_medium=email
ES7 and ES8 Features*
ES71. Array.prototype.includes
2. Exponentiation Operator (**)
ES8 (stage 4 and stage 3)1. Object.values/Object.entries
2. String padding (padStart(), padEnd() )
3. Object.getOwnPropertyDescriptors (allows to create real shallow copies of objects)
4. Trailing commas in function parameter lists and calls
5. Async Functions
*https://node.university/blog/498412/es7-es8?utm_source=nodeweekly&utm_medium=email active ES proposals - https://github.com/tc39/proposals/blob/master/README.md#active-proposals finished ES proposals - https://github.com/tc39/proposals/blob/master/finished-proposals.md
… more about descriptors
1.Data descriptor
2.Accessor descriptor
let azatsBooks = {
books: ['React Quickly'],
get latest () { /* some function */ }
}
console.log(Object.getOwnPropertyDescriptors(azatsBooks)
)
Object
books: Object
configurable: true
enumerable: true
value: Array[1]
writable: true
__proto__: Object
latest: Object
configurable: true
enumerable: true
get: latest()
set: undefined
__proto__: Object
__proto__: Object
Gradient Animations made easy*
<!-- Create a <canvas> element --><canvas id="granim-canvas"></canvas>
<!-- Call the script --><script src="granim.min.js"></script>
<!-- Create a Granim instance --><script>var granimInstance = new Granim({ element: '#granim-canvas', name: 'granim', opacity: [1, 1], states : { "default-state": { gradients: [ ['#834D9B', '#D04ED6'], ['#1CD8D2', '#93EDC7'] ] } }});</script>
*https://sarcadass.github.io/granim.js/examples.html
NativeScript v.2.5 release*
that’s cool, no?! (:
Next-generation 3D Graphics on the Web**
new community group proposed by Apple
can we make new standard API for Direct3D 12 from Microsoft, Metal from Apple, and Vulkan from the Khronos Group)
WebGL -> WebGL2 -> ...WebGPU?* https://www.nativescript.org/blog/nativescript-25-is-now-available ** https://webkit.org/blog/7380/next-generation-3d-graphics-on-the-web/
Electron, project of the Week: Beaker Browser*
peer-to-peer web browser (No servers required!)
uses the Dat (Decentralized Archive Transport) protocol to host sites from users’ devices V8 Release 5.7**
Native async functions as fast as promises (in Node since v.7.6)
ES2015 improvements
RegExp 15 % faster
New library features (padStart() and padEnd())
WebAssembly enabled
* https://electron.atom.io/blog/2017/02/07/beaker-browser ** https://v8project.blogspot.com/2017/02/v8-release-57.html
Twitter goes Node.js*!
switched all of their mobile web front-end users to a modern, JavaScript-based web stack
built atop React with Node.js and Express handling the server side (PWA)
JavaScript in 2017 – Beyond the Browser**● let’s review some data...
* https://goo.gl/6D2Xt1 ** http://developer.telerik.com/topics/web-development/javascript-2017-beyond-browser/
Node.js & npm
Overall, large enterprises do not like maintaining multiple development systems and language, and Node allows these companies to consolidate on a single language for all of their development
PhoneGap and Cordova
Native mobile apps
React Native weekly downloads
Native mobile apps (cont.)
NativeScript weekly downloads
Native Mobile Apps (cont.)
Desktop apps
● main players - NW.js and Github’s Electron
Building cli applications (cli) with node.js*● new framework
● 19 days at Git and 1,500 stars
#!/usr/bin/env nodeconst prog = require('caporal');prog .version('1.0.0') .command('concat') // concat files .option('-f <file>', 'File to concat', prog.REPEATABLE) .action(function(args, options) {
});
prog.parse(process.argv);
// Usage:// ./myprog concat -f file1.txt -f file2.txt -f file3.txt
* https://github.com/mattallty/Caporal.js
JS surprise from MicroSoft*
●It is called ‘dotnet new’
●part of the .NET Core Tools and is used to spin up a new project using a simple command line syntax
●E.g.: “dotnet new reactredux”
●All of these project types use Webpack 2 (except aurelia)
●still using Node.js via the use of SpaServices :)
* https://goo.gl/XO3Eot
WebAssembly API MVP is complete
●On February 28, the four major browsers announced their consensus that the MVP of WebAssembly is complete
●This provides a stable initial version that browsers can start shipping
JavaScript
WebAssembly
* https://hacks.mozilla.org/2017/02/where-is-webassembly-now-and-whats-next/
"[A]ny application that can be written in JavaScript, will eventually be written in JavaScript." (Jeff Atwood)
