What’s new in Chromium 63 and Opera 50

Opera 50 (based on Chromium 63) for Mac, Windows, Linux is out! To find out what’s new for users, see our Desktop blog post. Here’s what it means for web developers.

Dynamic module imports

New JavaScript module import syntax allows developers to dynamically load code into modules and scripts at runtime. This makes it possible to load parts of an application lazily, which can be used to improve application start-up time or to avoid loading seldom used parts until they are actually needed.

button.addEventListener('click', event => {
    import('./dialogBox.js')
    .then(dialogBox => {
        dialogBox.open();
    })
    .catch(error => {
        /* Error handling */
    });
});

The code example above shows how to use the import(specifier) function to import JavaScript after an event.

Async iterators and generators

Asynchronous iteration is made more convenient with the addition of asynchronous generator functions

async function* generateAsync() {
  while(condition) {
    const an_object = await produceAnObject();
    yield an_object.some_property;
  }
}

and the asynchronous iteration protocol

for await (const item of generateAsync()) {
  console.log({ item });
}

Read more about this syntax and its possibilites on Jake Archibald’s blog or in this summary of the “Asynchronous Iteration” proposal.

Device Memory API

Using the new Device Memory API developers can estimate the total amount of RAM on the device. This information could be used to deliver a suitably scaled version of the site to lower-end devices, or help put collected performance data into context to better understand the behavior of a web application.

Other web platform features in this release

Blink > CSS

Blink > Fonts

Blink > HTML

  • To improve interoperability, Opera will fire beforeprint and afterprint events as part of the printing standard, allowing developers to annotate the printed copy and edit the annotation after the printing command is done executing.

Blink > JavaScript

  • Using Promise.prototype.finally(), a callback can now be registered to be invoked after a Promise has been either fulfilled or rejected.
  • The Intl.PluralRules API allows developers to build applications that understand pluralization of a given language by indicating which plural form applies for a given number and language.

Blink > MediaStream

Blink > Network

Blink > Storage

  • The localStorage and sessionStorage APIs now use getItem() rather than an anonymous getter, so attempting to access a key using getItem() will now return null rather than undefined. Thanks to Intel for the contribution!
  • To improve developer experience, the methods on sessionStorage and localStorage such as getItem(), removeItem(), and clear() are now enumerable. Thanks to Intel for making this happen!

Deprecations and interoperability improvements

Blink > Bindings

  • To improve interoperability, a TypeError is now thrown by EventTarget.addEventListener() and EventTarget.removeEventListener() when the callback argument is not an EventListener, null, or undefined.
  • Also to improve interoperability, instance properties with a Promise type now return a rejected promise instead of throwing an exception when the property access fails.

Blink > CSS

Blink > DOM

What’s next?

If you’re interested in experimenting with features that are in the pipeline for future versions of Opera, we recommend following our Opera Developer stream.