Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JS digest. February 2017

JavaScript news, February '17 edition: Image manipulating in pure JS, ES7 and ES8 Features, Gradient Animations made easy, NativeScript v.2.5 release, Electron, project of the Week: Beaker Browser, V8 Release 5.7, Twitter goes Node.js, JavaScript in 2017 – Beyond the Browser, Building cli applications (cli) with node.js, JS surprise from MicroSoft, WebAssembly API MVP is complete

  • Be the first to comment

JS digest. February 2017

  1. 1. JS Digest. February 2017 by Oleksandr Oliynyk, software developer at ElifTech
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. PhoneGap and Cordova
  12. 12. Native mobile apps React Native weekly downloads
  13. 13. Native mobile apps (cont.) NativeScript weekly downloads
  14. 14. Native Mobile Apps (cont.)
  15. 15. Desktop apps ● main players - NW.js and Github’s Electron
  16. 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. 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. 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. 19. "[A]ny application that can be written in JavaScript, will eventually be written in JavaScript." (Jeff Atwood)
  20. 20. Thank you for attention! Find us at eliftech.com Have a question? Contact us: info@eliftech.com

×