The document highlights significant updates in the JavaScript ecosystem for March 2017, including new libraries like Hyperapp and releases such as Angular 4 and Next.js 2.0. It discusses advancements in tools for augmented reality, natural language detection, and various JavaScript libraries aimed at enhancing development. Additionally, it presents statistics on the use of vulnerable libraries and trends in front-end tooling.

1. JS digest
March, 2017
by Oleksandr Oliynyk,
Software Developer at ElifTech

2. www.eliftech.com
Agenda
New libs:
▪ HyperApp: one more functional JS framework for FE
▪ 15 Interesting JavaScript and CSS Libraries for March 2017
▪ Nginx JavaScript is ready for prime time
▪ Node.js Wrapper for YOLO/Darknet recognition framework
▪ Natural language detection
▪ 2D JavaScript Physics Engine
▪ javascript deep learning and reinforcement learning library
▪ Perceptual JPEG encoder
▪ AR.js - Efficient Augmented Reality for the Web using
ARToolKit
New releases:
▪ Angular 4
▪ Next.js 2.0 is out
IDE news:
▪ React JavaScript library gets an IDE
▪ WebStorm 2017.1 released
Browser news:
▪ Safari 10.1 out
▪ Firefox 54 dev edition
▪ Firefox 52
Misc:
▪ The Future of Trust in Node.js Dependencies
▪ Minecraft in WebVR with HTML Using A-Frame
▪ Facebook tool cuts through React Native complexity
Some statistics:
▪ 77% of sites use at least one vulnerable JavaScript library
▪ analysing the use of outdated JavaScript libraries on the
web
▪ Front-End Tooling Trends for 2017
2

3. www.eliftech.com
HyperApp: one more functional JS framework for FE*
3
▪ 1kb JavaScript library for building
frontend applications
▪ Declarative: HyperApp's design is
based on the Elm Architecture
▪ Stateless components: Stateless
components are framework
agnostic, reusable and easier to
debug
▪ Batteries-included: Out of the box,
HyperApp has Elm-like state
management and a virtual DOM
engine
import { h, app } from "hyperapp"
app({
model: 0,
actions: {
click: model => model + 1
},
subscriptions: [
(_, msg) => addEventListener("mousedown", msg.click)
],
view: model =>
<h1
style={{ userSelect: "none" }}
>
{model} clicks
</h1>,
})
* https://github.com/hyperapp/hyperapp

4. www.eliftech.com
15 Interesting JavaScript and CSS Libraries for March 2017
4
▪ 3D web apps framework
▪ web gradients
▪ deep learning lib
▪ animations and more… check:
http://tutorialzine.com/2017/03/15-interesting-javascript-and-css-libraries-for-march-2017/
Nginx JavaScript is ready for prime time
▪ The company debuts Nginx Plus R12, the commercially supported version of its technology.
This release moves NginScript, a JavaScript-based programming tool, to general availability for
production use. More at:
http://www.infoworld.com/article/3180404/javascript/nginx-javascript-is-ready-for-prime-
time.html#tk.rss_javascript

5. www.eliftech.com
Node.js Wrapper for YOLO/Darknet recognition framework
5
▪ Darknet is an open source neural network framework written in C and CUDA. This project
wraps this framework in a Node.js native addon
▪ Currently, the wrapper implements a demo method to run a recognition from the
webcam/video or an image file
▪ Github: https://github.com/moovel/node-yolo

6. www.eliftech.com
Natural language detection (Franc)
6
What’s so cool about franc?
▪ franc can support more languages(†)
than any other library
▪ franc is packaged with support for 81,
186, or 384 languages
▪ franc has a CLI
Github: https://github.com/wooorm/franc
var franc = require('franc');
franc('Alle menslike wesens word vry'); //=> 'afr'
franc('এটি একটি ভাষা একক IBM স্ক্রিপ্ট'); //=> 'ben'
franc('Alle menneske er fødde til fridom'); //=> 'nno'
franc(''); //=> 'und'
franc('the'); //=> 'und'
/* You can change what’s too short (default: 10): */
franc('the', {minLength: 3}); // 'sco

7. www.eliftech.com
2D JavaScript Physics Engine
7
Key motivations for the development of this project are:
▪ Taking advantage of Box2D's efforts and achievements
▪ Developing readable and maintainable JavaScript code
▪ Optimizing the library for web and mobile platforms
▪ Providing a JavaScript-friendly API
Check out: https://github.com/shakiba/planck.js
Perceptual JPEG encoder
▪ Guetzli is a JPEG encoder that aims for excellent compression density at high visual quality
▪ Guetzli-generated images are typically 20-30% smaller than images of equivalent quality
generated by libjpeg
▪ Guetzli generates only sequential (nonprogressive) JPEGs due to faster decompression
speeds they offer
Github: https://github.com/google/guetzli

8. www.eliftech.com
2D JavaScript Physics Engine
8
Key motivations for the development of this project are:
▪ Taking advantage of Box2D's efforts and achievements
▪ Developing readable and maintainable JavaScript code
▪ Optimizing the library for web and mobile platforms
▪ Providing a JavaScript-friendly API
Check out: https://github.com/shakiba/planck.js

9. www.eliftech.com
AR.js - Efficient Augmented Reality for the Web using ARToolKit
9
▪ Very Fast : it runs efficiently even on phones. 60 fps on my 2 year-old phone!
▪ Web-based : It is a pure web solution, so no installation required. Full javascript based on
three.js + jsartoolkit5
▪ Open Source : It is completely open source and free of charge!
▪ Standards : It works on any phone with webgl and webrtc
Github: https://github.com/jeromeetienne/AR.js

10. www.eliftech.com
Angular 4.0.0 Now Available
1
0
▪ Smaller & Faster
▪ New features (Improved *ngIf and *ngFor, Angular Universal, TypeScript 2.1 and 2.2
compatibility etc)
Link: http://angularjs.blogspot.com.cy/2017/03/angular-400-now-available.html
Next.js 2.0 is out
▪ next release of universal apps framework
▪ New features
▪ Smaller builds
▪ Better Hot Modules Reloading and more
Link: https://zeit.co/blog/next2

11. www.eliftech.com
React JavaScript library gets an IDE
1
1
▪ first dedicated IDE for React web application development
▪ custom simulator, making build-tool and server configuration unnecessary
▪ in active development
Follow: https://github.com/reactide/reactide
WebStorm 2017.1 released
▪ added support for such exciting technologies as Vue.js and Jest, brought more flexibility to
code styles, improved React and Angular support and more
Check: https://blog.jetbrains.com/webstorm/2017/03/webstorm-2017-1/

12. www.eliftech.com
Browsers news
1
2
▪ Safari 10.1 out
https://webkit.org/blog/7477/new-web-features-in-safari-10-1/
▪ Firefox 54 dev edition
https://hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/
▪ Firefox 52
https://hacks.mozilla.org/2017/03/firefox-52-introducing-web-assembly-css-grid-and-the-grid-
inspector/

13. www.eliftech.com
Miscellaneous
1
3
▪ The Future of Trust in Node.js Dependencies
https://nodesource.com/blog/hello-certified-modules-the-future-of-trust-in-node-js-
dependencies
▪ Minecraft in WebVR with HTML Using A-Frame
https://css-tricks.com/minecraft-webvr-html-using-frame/
▪ Facebook tool cuts through React Native complexity
http://www.infoworld.com/article/3180446/mobile-development/facebook-tool-cuts-through-
react-complexity.html#tk.rss_javascript

14. www.eliftech.com
Interesting statistics
1
4
▪ Analysing the use of outdated JavaScript libraries on the web
https://blog.acolyer.org/2017/03/07/thou-shalt-not-depend-on-me-analysing-the-use-of-
outdated-javascript-libraries-on-the-web
▪ 77% of sites use at least one vulnerable JavaScript library
https://snyk.io/blog/77-percent-of-sites-use-vulnerable-js-libraries/
▪ Front-End Tooling Trends for 2017
https://www.sitepoint.com/front-end-tooling-trends-2017/

15. www.eliftech.com
1
5

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