JS digest. May 2017
2 likes9,507 views
The document summarizes updates from April and May regarding browsers, libraries, and developer tools. It mentions that React 15.5.0 introduced new packages and deprecations, PhantomJS is being replaced by headless Chrome, and new versions of Edge, Firefox, and Chrome were released. It also discusses emerging standards like native ES modules and popular libraries like HR.js, React VR, and stylelint.
JS digest. May 2017
- 1. JS digest May 2017 by Oleksandr Oliynyk, Software Developer at ElifTech
- 2. www.eliftech.com Agenda Things to mention from April: ▪ new React (v15.5.0) ▪ bye-bye Phantom.js and hello headless Chrome ▪ new MS Edge ▪ new Firefox (v53) ▪ new Chrome (v58 and v59b) ▪ Browser’s market share ▪ Facebook F8 takeaways May: ▪ Native ES modules at browsers ▪ Cool libs (HR.js, React VR, AcrossTabs, stylelint, sizzy, k6) ▪ Glimpse, new debugging tool ▪ Polymer 2.0 landed ▪ Google I/O takeaways ▪ The Modern Mobile Web: State of the Union ▪ npm 5.0 ▪ Node.js 8.0
- 3. www.eliftech.com React (v15.5.0)* ▪ New Deprecation Warnings ▪ React.PropTypes and React.createClass ▪ New packages ▪ prop-type and create-react-class ▪ Discontinuing support for React Addons. The add-ons have now all either been deprecated or moved to separate modules ▪ Separating modules and reorganizing them ▪ Who will have 0 warnings with 15.5, won’t have them with 16 *More about it here
- 4. www.eliftech.com bye-bye Phantom.js?* ▪ Vitaly Slobodin, main maintainer droped the project ▪ greet headless Chrome (from v59) ▪ Chrome asked maintainer to use Chromium as runtime target ▪ PhantomJS creator Ariya Hidayat seems to have hopes for PhantomJS on Chromium ▪ big challenge. As of this writing, PhantomJS has 1,801 open issues :) ▪ and main maintainer started Phantomium (PhantomJS API with Chrome) *More about it here
- 5. www.eliftech.com new MS Edge* ▪ Web developers can start testing EdgeHTML 15 today by downloading a free virtual machine from Microsoft Edge Dev ▪ New tabs management, reading experience… ▪ Microsoft Edge on the Creators Update uses 31% less power than Google Chrome 57, and 44% less power than Mozilla Firefox 52 ▪ For developers: Payment Request API, CSS Custom Properties, WebVR Developer Preview, WebRTC, async-await, TCP Fast Open, Intersection Observer, experimental support for WebAssembly… *More about it here
- 6. www.eliftech.com new Firefox (v53)* ▪ Quantum Compositor Process on Windows ▪ Light and Dark Compact Themes ▪ New WebExtension Features ▪ New CSS Features: Positioned Masks and Flow-Root ▪ A Better Default Media Experience ▪ 64-bit Everywhere *More about it here
- 7. www.eliftech.com new Chrome (v58 and v59b)* ▪ IndexedDB 2.0 standard is now fully supported in Chrome ▪ Progressive Web Apps become more immersive with display: fullscreen ▪ goodbye to the clearfix, with display: flow-root ▪ Headless Chromium ▪ Native notifications on macOS *More about v58 here, v59b here
- 8. www.eliftech.com Browser’s market share* All platforms *More about it here
- 9. www.eliftech.com Browser’s market share(cont.) ▪ Mobile ▪ in 2016 Opera shared that Opera Mini was Africa’s favourite browser, with an impressive 58% market share. *More about it here
- 11. www.eliftech.com Facebook F8 takeaways* ▪ Facebook Messenger 2.0 (with Smart Replies) ▪ Facebook Camera Becomes an AR Platform ▪ Live Video and GIPHY ▪ Facebook Spaces, the New VR Platform ▪ Ultra-Connectivity (Terragraph and Aquila) ▪ 360 Degree Camera ▪ Silent Speech Recognition ▪ ‘skin-hearing’ project and thoughts to text *More about it here
- 12. www.eliftech.com
- 13. www.eliftech.com Native ES modules at browsers* ES modules are starting to land in browsers! They're in… ▪ Safari 10.1. ▪ Chrome Canary 60 – behind the Experimental Web Platform flag in chrome:flags. ▪ Firefox 54 – behind the dom.moduleScripts.enabled setting in about:config. ▪ Edge 15 – behind the Experimental JavaScript Features setting in about:flags *More about it here
- 14. www.eliftech.com Native ES modules at browsers(cont.)
- 15. www.eliftech.com Native ES modules at browsers(cont.) Need to know: ▪ "Bare" import specifiers aren't currently supported ▪ nomodule for backwards compatibility ▪ Defer by default ▪ Inline scripts are also deferred ▪ Async works on external & inline modules ▪ Modules only execute once ▪ Always CORS ▪ No credentials *More about it here
- 16. www.eliftech.com Cool libs m/ HR.js* ▪ plugin for highlighting and replacing text in the DOM ▪ Zero-dependency *More about it here new HR("#replace_highlight_examp le", { highlight:"elit", replaceWith: "boo", backgroundColor:"#B4FFEB" }).hr();
- 17. www.eliftech.com Cool libs m/ (cont.) React VR* ▪ React VR is a framework for the creation of VR applications ▪ pairs modern APIs like WebGL and WebVR ▪ learn once, write anywhere *More about it here
- 18. www.eliftech.com Cool libs m/ (cont.) AcrossTabs* ▪ cross-origin communication among different browser tabs ▪ Fully fledged API to get information regarding the tabs ▪ Only ~4 KB gzipped ▪ Parent → Child communication *More about it here
- 19. www.eliftech.com Cool libs m/ (cont.) stylelint* ▪ modern CSS linter ▪ Understands CSS-like syntaxes ▪ Automatically fix some stylistic warnings ▪ Used by Facebook, Github, Wikimedia, GSA, and WordPress among others *More about it here
- 20. www.eliftech.com Cool libs m/ (cont.) sizzy* ▪ test responsiveness easily ▪ has chrome extension *More about it here
- 21. www.eliftech.com Cool libs m/ (cont.) k6* ▪ Like unit testing, for performance (load testing) ▪ built with Go and JavaScript *More about it here import { check } from "k6"; import http from "k6/http"; export default function() { let res = http.get("https://httpbin.org/"); check(res, { "is status 200": (r) => r.status === 200 }); }; $docker run -i loadimpact/k6 run --vus 10 --duration 30s -
- 22. www.eliftech.com Glimpse, new debugging tool* ▪ Full-stack Node.js web diagnostics ▪ Information about both client and server-side requests ▪ experiment by Microsoft *More about it here Magic happens here: 1. In your app`s root directory, use npm to install Glimpse. npm install @glimpse/glimpse --save-dev 2. Initialize Glimpse before any other require() or application logic (typically at the top of index.js or app.js). if (process.env.NODE_ENV !== 'production') { require('@glimpse/glimpse').init(); } 3. Open your app in a browser. The Glimpse HUD should now be at the bottom right of your app.
- 23. www.eliftech.com
- 24. www.eliftech.com Google I/O* ▪ Active monthly Android users surpass 2 billion ▪ Google Assistant is now available on iOS ▪ Android Go aims to connect the “next billion” users online ▪ uses neural networks to train other neural networks ▪ shift from mobile-first to AI-first *More about it here
- 25. www.eliftech.com Polymer 2.0 landed* ▪ support for ES6 class-based syntax ▪ lightweight core at just 11k ▪ new Polymer Analyzer - a static analyzer for the web *More about it here
- 26. www.eliftech.com The Modern Mobile Web: State of the Union* ▪ Posted by Rahul Roy-chowdhury, VP Product Management, Chrome ▪ 2,000,000,000 AMP pages have been created ▪ Success stories: ● Average page load time decreased from 12 seconds to less than one second, and conversion rates increased by 95% (Wego’s website) ● engagement rates have more than doubled since launch (Forbes) ● 20% of users who book using their PWA had previously uninstalled their app (Ola) *More about it here
- 27. www.eliftech.com Wowowowowow npm@5!* ▪ A new, standardised lockfile ▪ --save is no longer necessary ▪ npm no longer blasts your screen with the whole installed tree *More about it here
- 28. www.eliftech.com Carbon node.js v8.0* ▪ will become the current LTS version from October 2017 and will be maintained till December 31st, 2019 ▪ Say hello to the WHATWG URL parser ▪ util.promisify() ▪ started the process of assigning static error codes to all errors ▪ have dropped the "v" in Node.js 8 *More about it here
- 29. www.eliftech.com