JS digest. January 2018
Download as PPTX, PDF•0 likes•167 views
This document discusses various topics in web development, including GraphQL, deep learning for front-end automation, and the relevance of jQuery. It also covers advancements in HTML 5.2, features of Webpack 4.0.0-alpha, and the implications of Google shutting down the Chrome apps section. Additionally, it highlights the advantages of using Vue over React and provides updates on the state of JavaScript in 2017.
![www.eliftech.com
● Introduction to GraphQL
● Turning Design Mockups Into Code With Deep Learning
● HTML 5.2
● Why one should [not] use async / await
● Is jQuery still relevant?
● 3 reasons to choose Vue over React in 2018
● Microbundle
● Webpack 4.0.0-alpha
● Google shuts down Chrome ‘apps’ section
● State of JS 2017
Agenda](https://image.slidesharecdn.com/jsdigestjanuary20181-180116135518/85/JS-digest-January-2018-2-320.jpg)
![www.eliftech.com
Why one should [not] use async / await
+ Laconic and clean code
+ Checking the conditions
and performing asynchronous actions
+ Intermediate values
+ Errors stack trace
+ Debugging
- Still promises
- Bigger bundle size
- ES8, Node.js 7+
More info here](https://image.slidesharecdn.com/jsdigestjanuary20181-180116135518/85/JS-digest-January-2018-9-320.jpg)
![www.eliftech.com
Webpack 4.0.0-alpha
Big features:
● webpack now supports these module types:
○ javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS,
AMD, ESM
○ javascript/esm: EcmaScript modules, all other module system are not available
○ json: JSON data, JSON data is passed through unchanged and isn't parsed
○ webassembly/experimental: WebAssembly modules (currently experimental)
● javascript/esm handles ESM more strict compared to javascript/auto:
○ Imported names need to exist on imported module
○ Non-ESM can only imported via default import, everything else (including namespace import) emit errors
● In .mjs modules
○ javascript/esm is used
○ imports need to have an extension. No extensions are tried.
● sideEffects: false is now supported in package.json
● Instead of a JSONP function a JSONP array is used -> async support
○ WIP: There is no way to move runtime to another chunk yet
● webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when
using a dynamic expression.
● Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration.
● Sone Plugin options are now validated
○ WIP: Better output, no process exit, stack trace, more plugins](https://image.slidesharecdn.com/jsdigestjanuary20181-180116135518/85/JS-digest-January-2018-14-320.jpg)
JS digest. January 2018
- 1. JS Digest by Oleksii Boiko, Software Developer January 2018
- 2. www.eliftech.com ● Introduction to GraphQL ● Turning Design Mockups Into Code With Deep Learning ● HTML 5.2 ● Why one should [not] use async / await ● Is jQuery still relevant? ● 3 reasons to choose Vue over React in 2018 ● Microbundle ● Webpack 4.0.0-alpha ● Google shuts down Chrome ‘apps’ section ● State of JS 2017 Agenda
- 4. www.eliftech.com Anatomy of GraphQL In a nutshell, GraphQL is a syntax that describes how to ask for data, and is generally used to load data from a server to a client. GraphQL has three main characteristics: ▪ It lets the client specify exactly what data it needs. ▪ It makes it easier to aggregate data from multiple sources. ▪ It uses a type system to describe data. For more details click here
- 5. www.eliftech.com Turning Design Mockups Into Code With Deep Learning Currently, the largest barrier to automating front-end development is computing power. However, we can use current deep learning algorithms, along with synthesized training data, to start exploring artificial front-end automation right now.
- 6. www.eliftech.com In the post, a neural network is teached how to code a basic a HTML and CSS website based on a picture of a design mockup. Here's a quick overview of the process: 1) Give a design image to the trained neural network 2) The neural network converts the image into HTML markup 3) Rendered output For more details click here
- 7. www.eliftech.com HTML 5.2 ▪ Support module JavaScript ▪ <dialog> element ▪ Multiple <main> elements ▪ Styles in the <body> ▪ In HTML 5.2, the only valid children of a <p> element should be phrasing content. This means that the following types of elements should no longer be nested within a paragraph. ▪ More details here
- 8. www.eliftech.com HTML 5.2: <dialog> element
- 9. www.eliftech.com Why one should [not] use async / await + Laconic and clean code + Checking the conditions and performing asynchronous actions + Intermediate values + Errors stack trace + Debugging - Still promises - Bigger bundle size - ES8, Node.js 7+ More info here
- 11. www.eliftech.com Is jQuery still relevant? YES! Was jQuery still in 2017 (and in 2018) relevant and more importantly, is it worth a newcomer learning the library today? The short answer: yes. More info here
- 12. www.eliftech.com 3 reasons to choose Vue over React in 2018 1) You can focus on the HTML and CSS first. 2) Enter the program-mentality when it’s necessary. Add functionality after the HTML and CSS are done. 3) Increase Development Speed. You don’t need the terminal. Full article here.
- 13. www.eliftech.com The zero-configuration bundler for tiny modules, powered by Rollup. Features: ● Bundles your library using nothing but a package.json ● Support for ESnext & async/await (via Bublé & Nodent) ● Supports multiple entry modules (cli.js + index.js, etc) ● Creates multiple output formats for each entry (CJS, UMD & ESM) ● Built-in Uglify compression & gzipped bundle size tracking GitHub link Microbundle
- 14. www.eliftech.com Webpack 4.0.0-alpha Big features: ● webpack now supports these module types: ○ javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM ○ javascript/esm: EcmaScript modules, all other module system are not available ○ json: JSON data, JSON data is passed through unchanged and isn't parsed ○ webassembly/experimental: WebAssembly modules (currently experimental) ● javascript/esm handles ESM more strict compared to javascript/auto: ○ Imported names need to exist on imported module ○ Non-ESM can only imported via default import, everything else (including namespace import) emit errors ● In .mjs modules ○ javascript/esm is used ○ imports need to have an extension. No extensions are tried. ● sideEffects: false is now supported in package.json ● Instead of a JSONP function a JSONP array is used -> async support ○ WIP: There is no way to move runtime to another chunk yet ● webpackInclude and webpackExclude are supported by the magic comment for import(). They allow to filter files when using a dynamic expression. ● Resolving can now be configured with module.rules[].resolve. It's merged with the global configuration. ● Sone Plugin options are now validated ○ WIP: Better output, no process exit, stack trace, more plugins
- 15. www.eliftech.com Webpack 4.0.0-alpha Big Features: ● Multiple performance improvements, especially for faster incremental rebuilds ● allow to import JSON via ESM syntax ● add unused exports elimination for JSON modules ● many config options which support placeholders now also support a function ● entry defaults to ./src ● output.path defaults to ./dist ● add output.globalObject config option to allow to choose the global object reference in runtime exitCode ● timestamps for files are read from watcher when calling Watching.invalidate ● Use production defaults when omiting the mode option ● add this.hot flag to loader context when HMR is enabled ● Add detailed progress reporting to SourceMapDevToolPlugin ● WebAssembly modules can now import other modules (JS and WASM) ● Exports from WebAssembly modules are validated by ESM import ● You'll get a warning/error when trying to import a non-existing export from WASM ● Stats can display modules nested in concatenated modules ● UglifyJs now caches and parallizes by default GitHub issue link.
- 16. www.eliftech.com Google Removes Chrome Apps Section From the Chrome Browser Web Store By early 2018, Chrome Apps already installed in Google's browser will no longer function. Chrome OS users, however, will still be able to access them for the foreseeable future. And folks just using Chrome to surf the web will still be able to download extensions and themes. Full article here.
- 17. www.eliftech.com State of JS 2017
- 18. www.eliftech.com State of JS 2017: Front-End
- 19. www.eliftech.com State of JS 2017: Back-End
- 20. www.eliftech.com State of JS 2017: Testing
- 21. www.eliftech.com State of JS 2017: Mobile frameworks Details here.
- 22. www.eliftech.com Thank you for attention! Find us at eliftech.com Have a question? Contact us: [email protected]