Can we make es6 the baseline of the “modern web”? - BrazilJS 2105

CAN WE MAKE ES6 THE BASELINE OF THE
“MODERN WEB”?
CHRIS HEILMANN (@CODEPO8), BRAZILJS 2015

IN MOST BANDS, THE
BASS PLAYER IS A VERY
IMPORTANT PART, THAT
NOBODY GIVES
ENOUGH CREDIT.

THE BASS BRINGS THE
DRIVE, IT MOVES THE
SONG FORWARD,
KEEPS IT IN RHYTHM
AND TIGHT…

MANY BANDS I ADMIRE
ARE BASS-DRIVEN…
(MOTORHEAD, FAITH NO MORE, RED
HOT CHILLI PEPPERS, PRONG,
SACRED REICH, CLUTCH, NINE INCH
NAILS, PRIMUS…)

AND YET, WHEN IT
COMES TO ROCKSTARS
AND THE ONES THAT
GET MOST OF THE
CREDIT, IT’S THE
FRONTMEN AND
SINGERS…

THESE ALSO BURN OUT
FAR TOO OFTEN AND
MOVE ON TO LESS
SUCCESSFUL SOLO
CAREERS.

MOST BASS PLAYERS
ARE DEDICATED TO
KEEPING THE BAND
TOGETHER.

THEY ARE ALSO THE
ONES WITH THE BEST
CONNECTIONS TO
OTHER BANDS.

BRUCE CODDINGTON
@BRUCECODDINGTON

Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
trying new frameworks, and using other
people’s good ideas to make his life
easier … He is currently the Chief
Operating Officer for a small finance
company so all of his coding is officially for
fun.
https://nejsconf.com/2015/brucecoddington/

IT SHOULDN’T BE
ABOUT WHO IS
BANGING THE
DRUM THE
LOUDEST…

OR SCREAMS THE
LOUDEST AND IS ANGRY
ABOUT EVERYTHING…

I AM TIRED OF THE FIGHTS AND AGGRESSIVE FANS…

THERE ARE A FEW
THINGS ABOUT THE
WEB THAT CAN’T BE
CHANGED…
'use strict';
const web = 1;

THE WEB IS DESIGNED TO WORK INDEPENDENT
OF HARDWARE, SOFTWARE, ABILITY OR LOCATION.

NATIVE, MORE DEFINED
ENVIRONMENTS CAN
INNOVATE FASTER, AS
THEY CONTROL THE
USER.

THERE’LL ALWAYS BE BROWSER FRAGMENTATION

OUR JOB IS TO
DELIVER CONTENT
AND FUNCTIONALITY
TO END USERS.
WE ARE THERE FOR
THEM. NOT THEY FOR
US.
?

http://www.w3.org/TR/html-design-principles/#priority-of-constituencies
In case of conflict, consider users over authors over
implementors over specifiers over theoretical purity.
In other words costs or difficulties to the user should
be given more weight than costs to authors; which in
turn should be given more weight than costs to
implementors; which should be given more weight
than costs to authors of the spec itself, which should
be given more weight than those proposing changes
for theoretical reasons alone. Of course, it is
preferred to make things better for multiple
constituencies at once.
“
PRIORITIES OF CONSTITUENCIES…

THIS IS A TALL ORDER,
AND WE HAVE TO FIND
A WAY TO DEAL WITH
THIS.

THE MAIN THING THAT
DEMANDED CHANGE
(AND CAUSED A LOT OF DRAMA)
IS THE RISE OF MOBILE.

ON MOBILE, THE
DECK IS STACKED
AGAINST THE WEB…

ON MOBILE, THE
DECK IS STACKED
AGAINST THE WEB…
• Browsers are hard-wired and
update with operating systems
• Hardware creators, service
providers and even third party
vendors fork and release their
own unholy versions of the OS
and the browser.
• The more you control the
experience, the more
competitive you are.

TO COMPETE ON MOBILE,
WE NEED OUR WEB
TECHNOLOGY STACK TO
IMPROVE.

THE NEEDS FOR
JAVASCRIPT HAVE
CHANGED OVER
THE YEARS.
WE NEED TIRES
WITH MORE GRIP
FOR THE
CHANGED WEB.

IT IS IMPOSSIBLE,
OR AT LEAST VERY
DANGEROUS TO
DO SO TO A
MOVING CAR…

THIS IS WHY A LOT OF
DISCUSSION ABOUT
WEB INNOVATION
ASSUMES DEFINED
ENVIRONMENTS…
• Many innovative ideas are
experimental in one browser for a
long time
• Some features rely on pre-
processing, post-processing or
compilation
• Some features even rely on
conversion to binary formats
• A lot of great innovation happens on
the server side in node
environments.

THERE IS NOTHING
WRONG WITH THAT.
BUT WE NEED TO
FIND A WAY TO MOVE
THE WHOLE WEB
FORWARD.

TODAY YOU WILL
HEAR A LOT ABOUT
NEW IDEAS, NEW
INNOVATIONS AND
NEW APPROACHES
TO SOLVE OUR
PROBLEMS.

ONE OF THE MOST
PROMISING AND
IMPORTANT TO ME IS
ES6.

• Arrow functions as a short-hand version of an
anonymous function.
• Block-level scope using let instead of var makes
variables scoped to a block (if, for, while, etc.)
• Classes to encapsulate and extend code.
• Constants using the const keyword.
• Default parameters for functions like foo(bar = 3, baz =
2)
• Destructuring to assign values from arrays or objects
into variables.
• Generators that create iterators using function* and
the yield keyword.
• Map, a Dictionary type object that can be used to store
key/value pairs. and Set as a collection object to store
a list of data values.
• Modules as a way of organizing and loading code.
• Promises for async operations avoiding callback hell
• Rest parameters instead of using arguments to access
functions arguments.
• Template Strings to build up string values including
multi-line strings.
ES6 COMES WITH
SO MUCH
GOODNESS,
TECHNICALLY IT
HAS TO BE
FATTENING…

Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
scoped bindings
Classes
Promises
Iterators
Generators
Typed arrays
Modules
Syntactic Sugar
Arrow functions
Enhanced object literals
Template strings
Destructuring
Rest, Spread, Default
String, Math, Number,
Object, RegExp APIs
ALL OF THESE PARTS HAVE DIFFERENT AUDIENCES

SUPPORT IS ENCOURAGING, BUT ALSO PATCHY
http://kangax.github.io/compat-table/es6/

THE PROBLEM: FOR
NON-SUPPORTING
BROWSERS, ES6
FEATURES ARE
SYNTAX ERRORS…

THE SOLUTION:
TRANSPILING INTO
ES5…
https://babeljs.io

✘ It adds an extra step in between
writing code and running it in the
browser - probably the thing that
made the web grow as fast as it
did.
✘ We don’t run or debug the code
we write.
✘ We’re at the mercy of the
transpiler to create efficient code
✘ We create probably much more
code than We need
✘ Browsers that support ES6 will
never get any.
THE PROBLEMS WITH
TRANSPILING:

https://featuretests.io/
WHAT ABOUT FEATURE TESTING?

✘ It is an extra step that might be
costly
✘ We can only do it client-side
✘ We can get false positives -
experimental features might be
implemented in a rudimentary
fashion
✘ We have to keep your feature
tests up-to-date and extend them
as needed - support for one
feature doesn’t mean support for
another.
THE PROBLEMS WITH
FEATURE TESTING:

YOU CAN USE AN
ABSTRACTION,
FRAMEWORK OR
LIBRARY THAT HAS
SIMILAR FEATURES…

✘ They makes us dependent on
that abstraction
✘ We can’t control possible version
clashes in the abstraction layer -
if the creators choose to make a
new version completely different
all our code needs changing
✘ Maintainers need to know the
abstraction instead of the
standard of ES6
PROBLEMS WITH ANY
ABSTRACTION

CONTROVERSIAL
STATEMENT
FOLLOWING!

WE ALL KNOW THE
DOM IS SLOW,
TERRIBLE AND TO
BLAME FOR ALL OUR
PROBLEMS.
https://www.youtube.com/watch?v=Y2Y0U-2qJMs
http://ejohn.org/blog/the-dom-is-a-mess/

WE ALL KNOW THE
DOM IS SLOW,
TERRIBLE AND TO
BLAME FOR ALL OUR
PROBLEMS.
DID WE ALLOW IT TO
STAY THAT WAY AND
STILL BE A PROBLEM
AS WE ABSTRACTED
ITS ISSUES AWAY?

THE ES6
CONUNDRUM:
• We can’t use it safely in the wild
• We can use TypeScript or transpile it
• We can feature test for it, but that
can get complex quickly
• Browsers that support it, will not get
any ES6 that way (but can use it
internally)
• The performance is bad right now
(which is a normal thing). To improve
this, we need ES6 to be used in the
wild…

THINGS YOU LEARN WHEN YOU WRITE A NEW JS
ENGINE
https://channel9.msdn.com/events/WebPlatformSummit/2015/Chakra-The-
JavaScript-Engine-that-powers-Microsoft-Edge
@BTERLSON
@GAURAVSETH

THINGS YOU LEARN
WHEN YOU WRITE A
NEW JS ENGINE
✘ Only a third of the top 3000 sites
can benefit from JS inlining.
Reason is lots of scripts instead
of concatenation.
✘ You need to optimise a lot of JS in
the engine (length reading on
every iteration of for loops!)
✘ Outdated libraries are still very
much in use and clash with new
JS features (mootools breaking
with array.contains(), zepto
disliking array constructors)
✓ Minification is used a lot on the
web and optimising for uglify.js
code is a big win

THINGS I LEARNED
WORKING FOR
BROWSER MAKERS
✓ It is a constant race not to break the
web - every mistake web developers
make needs to get catered for.
✓ The pressure is immense. Instead of
pushing for an interoperable web,
browsers are constantly compared
and expected to be different.
✓ When implementing standards, we
find a lot of problems and feed them
back. That’s why a score of 100% in
feature tests makes no sense.
✓ Most speed increases are based on
analysing and fixing developer
mistakes/sloppiness.

ONE PROBLEM ES6
DOESN’T HAVE THAT
A LOT OF OTHER
INNOVATION HAS IS
THAT SAFARI IOS IS
ON BOARD…
http://nolanlawson.com/2015/06/30/safari-is-the-new-ie/

WE NEED YOU TO HELP
US FIX THIS ISSUE.
LET’S MAKE A
BASELINE A REALITY.

HELP ES6 BY
LOOKING AT ITS
UNIT TESTS…
https://github.com/tc39/test262
http://test262.ecmascript.org/

YOU CAN LEARN
AND FIX ISSUES.
http://es6katas.org

CHECK BACK PERIODICALLY ON SUPPORT
http://kangax.github.io/compat-table/es6/

TEST ES6 PERFORMANCE http://kpdecker.github.io/six-speed/

THE GREAT THING
ABOUT JAVASCRIPT IS
THAT IT IS A VERY
FLEXIBLE LANGUAGE
USED IN MANY
ENVIRONMENTS…

ES6 SHOULD NOT BE A FUTURE
PROMISE BY BROWSER VENDORS,
PLATFORM OWNERS, OR LIBRARY
CREATORS.
IT IS UP TO US TO CATCH THAT
CARROT AND EAT IT.

TRY TO USE AS MUCH ES6
AS YOU CAN - EVEN IN THE
CLIENT
• Feature test for a few things that do make
a lot of sense - promises for example.
• Get to play with template strings inside
<template> elements - you are already in a
non-poly-fillable world then.
• Run tests, feed back what works and what
doesn’t
• This kind of research is never a waste, and
it means you learn by doing.

IN DEFINED
ENVIRONMENTS GO CRAZY
AND TEST AS MUCH AS
YOU CAN.
• Node solutions, browser extensions,
in-browser functionality are all great
opportunities to knock out kinks of
the standard.
• You control the environment and no
browser support isn’t a problem for
you.
• Any issue found here can speed up
adaptation on the client - better to
find it now than when it is too late.

ABOVE ALL, FIND SOME LOVE FOR INNOVATION

YOU ARE A CREATOR OF THE NEXT WEB!
• The web became the success it is because
people like you cared for it - there was not one
company to tell the world how to use it.
• This is important and should be cherished by all
involved.
• Help it stay that way, by supporting those
pushing it forward and using what is on offer
• Features get prioritised when they are in use by
developers - so, see what you can do to give
back real data using new and innovative
technology in real products.

THANK YOU!
CHRIS HEILMANN
@CODEPO8
Stick and Carrot: Alan O’Rourke
https://www.flickr.com/photos/33524159@N00/17233999165
Stick, Carrot and heart: opensourceway
https://www.flickr.com/photos/47691521@N07/5537457133/
Changing tire: Afroswede
Speeding Car: amira_a
Rocks: Tambako the Jaguar
Drummers: abbilder
Screaming singer: Photohunny
Screaming at fight: martingarri
Raygun: miss_rogue
Tired Dog: Mini D
Fix: Deborah Fitchett
Card Deck: waitscm

Can we make es6 the baseline of the “modern web”? - BrazilJS 2105

More Related Content

Can we make es6 the baseline of the “modern web”? - BrazilJS 2105