This month in JavaScript digest:
+ 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
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
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.