TOOLS, TRENDS & TECHNIQUES 2017

JS 2017 - APIS & ES7

The tools, techniques and changes that you

should keep an eye on for the year ahead

PROGRESS TOWARDS ES2017 More than just a standard

Much of 2016 was spent getting browsers to support
the large syntax changes ES6 more formally
ES2015 brought to the table. Now were at the
point where the latest browsers all but fully support
it, whats next for the specification?
Changes to the specification now occur yearly
and as a result are much smaller. ES2016 included
just two new features: an ** operator for
exponentials and the ability to search arrays using

an includes method. ES2017 will be finalised in

June, but looks set to include async functions
alongside some smaller Object methods.
Features are included in a specification when they
reach Stage 4. A requirement for Stage 4 is
successful implementation in two compilers, so
future updates are likely to arrive when ready, not
when the spec is finalised. Rapid browser releases
mean devs will be able to utilise new syntax quicker.

4Groundbreaking
KEY FUNCTIONS
TO USE
new features to keep an eye on

The JavaScript ecosystem will

continue to evolve in 2017,
accommodating the different
ways people interact with it,
and as a community, pushing it
to do more and more.
You can learn the basics of
JS and follow the same core
language and concepts all
the way to building robust
applications. Thats what makes
it so popular and important
today.

Ashley Firth

WEB PAYMENTS API

ASYNC FUNCTIONS

Taking payments on the web has been

notoriously tricky. With many different
methods of payment available, lots of
information needs to be captured at once,
which can end up being frustrating for users.
The Web Payments API allows visitors to use
a simple, native user experience to quickly fill
out their details for a variety of payment
methods and send them to your site in a
standardised format.

ES2015 brought with it generator functions

that could be exited and re-entered later
without losing the context. ES2017 brings with
it async functions, which uses Promises in a
similar manner. They allow you to write
asynchronous code in a more synchronous
way. Any value an async function awaits will
need to be settled before moving on,
removing the need for most callbacks
altogether.

PROGRESSIVE WEB APPS

CUSTOM ELEMENTS

The web in 2017 will reach more people than

ever. They wont necessarily have fast devices
or a steady internet connection. Progressive
web apps focus on snappy, reliable user
experiences that rival a native application.
Users can add them to their home screens,
receive push notifications and more. With
improvements happening all the time, now is
the time to see what they can bring to your
projects.

Frameworks such as Angular and React have

pushed web development to a more
component-based architecture. Code
becomes reusable across projects in many
different situations. Web Components
replicate this behaviour by defining a custom
element in JavaScript for use on the page. It
can then be used like a regular element,
which consumes data and abstracts complex
behaviour away from those using it.

Front-end developer at Octopus Energy

10 MORE TOOLS TO TRY OUT

Check out these APIs and frameworks

WEB ANIMATIONS API

SHAPE DETECTION API

GENERIC SENSOR API

WEB BLUETOOTH API

WEB MIDI

mzl.la/2h7nVLD
Compose and display element
animations with the flexibility
of JavaScript.

http://bit.ly/2hOp3r1
Detect faces, barcodes and more
in image and video content
natively using device hardware.

w3c.github.io/sensors
A future-friendly standardised
interface for accessing the
sensors available on a device.

http://bit.ly/2gG0dp7
Communicate with user-selected
Bluetooth devices locally with
browser technologies.

webaudio.github.io/web-midi-api
An interface for the MIDI protocol,
to allow browsers to send and
receive musical data.

WEB SHARE API

POLYMER 2.0

ELECTRON

IONIC

PREACT

http://bit.ly/2hrGzQT
Have web apps communicate
with other applications on a
device with a standardised syntax.

www.polymer-project.org
A small library designed to make
custom element creation more
approachable and accessible.

electron.atom.io
Build cross-platform desktop
applications using the web
technologies you already know.

ionicframework.com
Develop native mobile and PWAs
while using familiar frameworks
like Angular and TypeScript.

preactjs.com
A lightweight, 3kB alternative
to React featuring almost
identical functionality.

56 ______________________________________________________ feature