The document discusses various advancements in JavaScript and web development as of February 2017, including new ES7 and ES8 features, the release of NativeScript V.2.5, and the introduction of WebAssembly. It highlights tools like Jimp for image manipulation, the Beaker Browser for peer-to-peer browsing, and Node.js's utility in consolidating development systems within large enterprises. There is also mention of Twitter's shift to a React-based stack and calls for a new standard API for 3D graphics on the web.

1. JS Digest.
February 2017
by Oleksandr Oliynyk, software developer at ElifTech

2. Agenda
Image manipulating in pure JS
ES7 and ES8 Features
Gradient Animations made easy
NativeScript v.2.5 release
Next-generation 3D Graphics on the
Web
Project of the Week: Beaker Browser
V8 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

3. 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

4. ES7 and ES8 Features*
ES7
1. Array.prototype.includes
2. Exponentiation Operator (**)
ES8 (stage 4 and stage 3)
1. Object.values/Object.entries
2. String padding (padStart(), padEnd()
)
3. Object.getOwnPropertyDescriptor
s (allows to create real shallow
copies of objects)
4. Trailing commas in function
parameter lists and calls*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

5. … 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

6. 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

7. 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/

8. 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

9. 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/

10. 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

11. PhoneGap and Cordova

12. Native mobile apps
React Native weekly downloads

13. Native mobile apps (cont.)
NativeScript weekly downloads

14. Native Mobile Apps (cont.)

15. Desktop apps
● main players - NW.js and Github’s Electron

16. Building cli applications (cli) with
node.js*
● new framework
● 19 days at Git and 1,500 stars
#!/usr/bin/env node
const 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

17. 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

18. 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/

19. "[A]ny application that
can be written in
JavaScript, will eventually
be written in JavaScript."
(Jeff Atwood)

20. Thank you for attention!
Find us at eliftech.com
Have a question? Contact us:
info@eliftech.com