JS digest. Decemebr 2017
Download as PPTX, PDF1 like350 views
The December 2017 JavaScript digest covers several significant updates in the web development landscape, including the deprecation of Internet Explorer, the release of Google Chrome 63, and the rise of new tools like Parcel and Turbo for faster web application development. It highlights the prevalence of vulnerable JavaScript libraries used across websites, provides insights on average page load times, and mentions the introduction of a new theming API in Firefox. Additionally, it discusses the release of React v16.2.0 and the end of support for Bower as a dependency manager.
JS digest. Decemebr 2017
- 1. JS Digest December 2017 By Dmytro Mysak, Software Developer
- 2. www.eliftech.com ▪ Kill Internet Explorer ▪ Google Chrome 63 Released ▪ How to Cancel Your Promise ▪ Parcel ▪ Turbo ▪ Average Page Load Times for 2018 ▪ Vulnerable JavaScript Libraries ▪ New theming API in Firefox ▪ Bower is dead ▪ Extension Tree Style Tab: Reborn ▪ React v16.2.0 ▪ WebStorm 2017.3.1 ▪ The Best JavaScript and CSS Libraries for 2017 In December 2017 edition:
- 3. www.eliftech.com Kill Internet Explorer Once and For All Web developers have had enough! Internet Explorer has very little compatibility, yet we are still required to write code to accommodate this archaic browser. We want to use ES6 :( For more details click here.
- 4. www.eliftech.com Google Chrome 63 Released ▪ Google has redesigned ▪ the chrome://flags section. ▪ Chrome now lets you mute sites forever. ▪ FTP links are now marked as insecure. ▪ Chrome now shows warnings against ▪ MitM attacks. ▪ Chrome now uses better site isolation. ▪ Chrome now comes with a Device Memory API that lets developers better understand how Chrome and websites use a PC's memory. ▪ Chrome can now load JavaScript modules based on runtime conditions. It previously supported only static JavaScript module loading. And a lot of more here
- 5. www.eliftech.com How to Cancel Your Promise ? You need to build a workaround. To see code realization click here. On that site, we have examples for: ▪ Bluebird ▪ Pure Promises ▪ generators
- 6. www.eliftech.com Parcel Parcel - blazing fast, zero configuration web application bundler. Based on a reasonably sized app, containing 1726 modules, 6.5M uncompressed. Built on a 2016 MacBook Pro with 4 physical CPUs.
- 7. www.eliftech.com Parcel ▪ Blazing fast bundle times - Parcel uses worker processes to enable multicore compilation, and has a filesystem cache for fast rebuilds even after a restart. ▪ Bundle all your assets - Parcel has out of the box support for JS, CSS, HTML, file assets, and more - no plugins needed. ▪ Automatic transforms - Code is automatically transformed using Babel, PostCSS, and PostHTML when needed - even node_modules. ▪ Zero config code splitting - Using the dynamic import() syntax, Parcel splits your output bundles so you only load what is needed on initial load. ▪ Hot module replacement - Parcel automatically updates modules in the browser as you make changes during development, no configuration needed. ▪ Friendly error logging - Parcel prints syntax highlighted code frames when it encounters errors to help you pinpoint the problem. More information here.
- 8. www.eliftech.com Turbo: 5x faster than Yarn & NPM, and runs natively in- browser Turbo is a blazing fast NPM client originally built for StackBlitz that: ● Installs packages ≥5x faster than Yarn & NPM 🔥 ● Reduces the size of node_modules up to two orders of magnitude 😮 ● Has multiple layers of redundancy for production grade reliability 💪 ● Works entirely within your web browser, enabling lightning fast dev environments ⚡️
- 9. www.eliftech.com Why? Instead of downloading entire tarballs, Turbo is smart and only retrieves the files that are directly required from the main, typings and other relevant fields. For more details click here.
- 10. www.eliftech.com
- 11. www.eliftech.com Average Page Load Times for 2018 ▪ What are the new average page load times? ▪ What’s the typical size of a webpage you should aim to be under? ▪ How many resources does the standard page load? ▪ What’s the average server delay, measure in time to first byte?
- 12. www.eliftech.com What is the average load time?
- 13. www.eliftech.com What is the average webpage size?
- 14. www.eliftech.com What is the average number of resources?
- 15. www.eliftech.com What is the average server delay?
- 16. www.eliftech.com How to compare with your site load time/size/resources? There are a few great simple site speed tools out there: 1. WebPageTest: The industry standard for measuring site performance – results are collected from real browsers running common operating systems. 2. Pingdom: a simple tool which makes makes the same measurements, yet method of testing is undocumented. 3. GTmetrix: gives you actionable insights about the best way to optimize your webpage speed. For more information click here.
- 17. www.eliftech.com 77% of 433,000 Sites Use Vulnerable JavaScript Libraries State of Open Source Security discoveries the report mentions is that an analysis of around 433,000 sites found that 77% of them use at least one front-end JavaScript library with a known security vulnerability. More information here.
- 18. www.eliftech.com The Top LIBRARY NUMBER OF TIMES FOUND VULNERABLE % OF ALL INSTANCES OF THIS LIB DETECTED jQuery 318,786 92.5% jQuery UI 74,486 89.7% Moment.js 10,245 73.0% AngularJS 7,609 84.8% Handlebars 3,129 60.7% Mustache 1,925 51.0% YUI 3 559 40.3% jQuery Mobile 413 3.7% Knockout 407 19.6% React 181 10.2%
- 19. www.eliftech.com The Top LIBRARY OLDEST VERSION WITH NO KNOWN VULNERABILITIES RELEASE DATE jQuery 3.0.0 June, 2016 jQuery UI 1.10.0 January, 2013 Moment.js 2.15.2 October, 2016 AngularJS 1.6.1 December, 2016 Handlebars 4.0.0 September, 2015 Mustache 2.2.1 December, 2015 YUI 3 3.10.3 June, 2016 jQuery Mobile 1.2.0 October, 2012 Knockout 3.0.0 October, 2013 React 0.14.0 October, 2015
- 20. www.eliftech.com Using the new theming API in Firefox From powerful extensions like Stratiform or FT Deep Dark to simple lightweight themes, theming has been quite popular within Firefox. Now that Firefox Quantum (57) has launched with many performance improvements and a sparkling new interface, we want to bridge the gap with a new theming API that allows you to go beyond basic lightweight themes.
- 22. www.eliftech.com Bower is dead Bower is no longer the dependency manager of choice for front-end projects. While the open source project is still maintained, its creators decided to deprecate it, and advise how to migrate to other solutions—namely Yarn and webpack. Six reasons to stop using Bower and switch to a new workflow: 1. Bower has been deprecated by its creators 2. Bower offered a flat dependency graph, which you can now get with NPM and Yarn 3. Bower adds complexity and is redundant because it requires NPM 4. Bower has a separate package ecosystem 5. Bower put the burden of dependency management on the user 6. Bower doesn’t support different versions of the same package on the same page For more info click here.
- 23. www.eliftech.com A Classic Extension Reborn: Tree Style Tab For more information click here.
- 24. www.eliftech.com React v16.2.0 React 16.2 is now available! The biggest addition is improved support for returning multiple children from a component’s render method. this feature call fragments:
- 25. www.eliftech.com React v16.2.0 For more info click here. Prior to version 16HTML text React 16.0 Fragment component JSX Fragment Syntax
- 26. www.eliftech.com WebStorm 2017.3.1 is now available ▪ Support for Fragments in React 16.2; ▪ Configurable code completion for JSX attributes (WebStorm automatically adds ={} or ="" after the attribute name);
- 27. www.eliftech.com WebStorm 2017.3.1 ▪ Adding interpolation inside template strings; For more details press here.
- 28. www.eliftech.com The Best JavaScript and CSS Libraries for 2017 For top 20 libraries for JSand CSS click here.
- 29. www.eliftech.com Thank you for reading! Find us at eliftech.com Have a question? Contact us: info@eliftech.com