Check out the latest JavaScript libraries updates, news, and releases

Introduction to 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.
GraphQL vs Rest

Anatomy of GraphQL

GraphQL autocomplete in action
GraphQL autocomplete in action
Anatomy of GraphQL

For more details click here and here.

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.

Hello World generation

In the post, a neural network is taught 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

Image to notebook file

2) The neural network converts the image into HTML markup

generate html markup

3) Rendered output

render example

For more details click here.

HTML 5.2

  • Support module JavaScript

      <script type="module">
        import {app} from './app';
        app.run();
      </script>
      
  • <dialog> element

      <dialog open>
        <p>Greetings, one and all!</p>
      </dialog>
  • Multiple <main> elements

      <main>...</main>
      <main hidden>...</main>  
      <main hidden>...</main>  
  • Styles in the <body>

      <body>  
         <p>I’m cornflowerblue!</p>
         <style>
             p { color: cornflowerblue; }
         </style>    
      <p>I’m cornflowerblue!</p>
      </body>  
  • In HTML 5.2, the only valid children of a <p> element should be phrasing content. This means that the followingtypes of elements should no longer be nested within a paragraph.

<dialog> element

HTML 5.2 <dialog> element
HTML 5.2 <dialog> element

More details here.

Why one should [not] use async / await

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+

Error handling

async / await error handling

Promises


      waitForABit(1000)
      .then(result => console.log(result));
      waitForABit(1000, true)
      .then(result => console.log(result));
      .catch(error => console.error(error));
      

                            VS

async/await


      const asyncFnFail = async () => {
      try {
      const result = await waitForABit(1000, true);
      console.log(result)
      } catch (error) {
      console.error(error)
      }
      };
      

More info here.

Is jQuery still relevant?

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.

jQuery. Library distribution 2017
jQuery popular website verticals

More info here.

3 reasons to choose Vue over React in 2018

Vue.js logo

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.

Microbundle

Microbundle

The zero-configuration bundler for tiny modules, powered by Rollup.

Microbundle gif

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.

Webpack 4.0.0-alpha

Big features:

  • webpack now supports these module types:
  1. javascript/auto: (The default one in webpack 3) Javascript module with all module systems enabled: CommonJS, AMD, ESM
  2. javascript/esm: EcmaScript modules, all other module system are not available
  3. json: JSON data, JSON data is passed through unchanged and isn't parsed
  4. webassembly/experimental: WebAssembly modules (currently experimental)
  • javascript/esm handles ESM more strict compared to javascript/auto:
  1. Imported names need to exist on imported module
  2. 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

  • 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.

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.

Google Removes Chrome Apps Section

Full article here.

State of JS 2017

State of JS 2017

Front-End

State of JS 2017: Front-End

Back-End

State of JS 2017: Back-End

Testing

State of JS 2017: Testing

Mobile frameworks

State of JS 2017: Mobile frameworks

Details here.

That’s it for now. Stay tuned for the next edition of JS digest!