Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 ...
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
GITHUB SHIRT
JS STICKER
Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
tryin...
THIS ROCKS!
IT SHOULDN’T BE
ABOUT WHO IS
BANGING THE
DRUM THE
LOUDEST…
OR SCREAMS THE
LOUDEST AND IS ANGRY
ABOUT EVERYTHING…
Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
tryin...
Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
tryin...
Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
tryin...
Bruce is an ex-rockstar wannabe that
stumbled across web development over a
decade ago. He loves writing JavaScript,
tryin...
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 o...
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 cre...
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
experimenta...
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
var...
Library Builders
map, set & weakmap
__proto__
Proxies
Symbols
Sub7classable built7ins
Scalable Apps
let, const & block7
sc...
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 ...
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 fea...
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 th...
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:...
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 P...
THE ES6
CONUNDRUM:
• We can’t use it safely in the wild
• We can use TypeScript or transpile it
• We can feature test for ...
BUT THERE’S ALSO
GOOD NEWS!
THINGS YOU LEARN WHEN YOU WRITE A NEW JS
ENGINE
https://channel9.msdn.com/events/WebPlatformSummit/2015/Chakra-The-
JavaSc...
THINGS YOU LEARN
WHEN YOU WRITE A
NEW JS ENGINE
✘ Only a third of the top 3000 sites
can benefit from JS inlining.
Reason ...
THINGS I LEARNED
WORKING FOR
BROWSER MAKERS
✓ It is a constant race not to break the
web - every mistake web developers
ma...
ONE PROBLEM ES6
DOESN’T HAVE THAT
A LOT OF OTHER
INNOVATION HAS IS
THAT SAFARI IOS IS
ON BOARD…
http://nolanlawson.com/201...
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
...
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 - promi...
IN DEFINED
ENVIRONMENTS GO CRAZY
AND TEST AS MUCH AS
YOU CAN.
• Node solutions, browser extensions,
in-browser functionali...
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...
THANK YOU!
CHRIS HEILMANN
@CODEPO8
Stick and Carrot: Alan O’Rourke
https://www.flickr.com/photos/33524159@N00/17233999165
S...
Upcoming SlideShare
Loading in …5
×

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

4,810 views

Published on

My keynote for BrazilJS discussing the issues with ES6 and the need for developer participation and use.

Published in: Education

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

  1. 1. CAN WE MAKE ES6 THE BASELINE OF THE “MODERN WEB”? CHRIS HEILMANN (@CODEPO8), BRAZILJS 2015
  2. 2. IN MOST BANDS, THE BASS PLAYER IS A VERY IMPORTANT PART, THAT NOBODY GIVES ENOUGH CREDIT.
  3. 3. THE BASS BRINGS THE DRIVE, IT MOVES THE SONG FORWARD, KEEPS IT IN RHYTHM AND TIGHT…
  4. 4. MANY BANDS I ADMIRE ARE BASS-DRIVEN… (MOTORHEAD, FAITH NO MORE, RED HOT CHILLI PEPPERS, PRONG, SACRED REICH, CLUTCH, NINE INCH NAILS, PRIMUS…)
  5. 5. AND YET, WHEN IT COMES TO ROCKSTARS AND THE ONES THAT GET MOST OF THE CREDIT, IT’S THE FRONTMEN AND SINGERS…
  6. 6. THESE ALSO BURN OUT FAR TOO OFTEN AND MOVE ON TO LESS SUCCESSFUL SOLO CAREERS.
  7. 7. MOST BASS PLAYERS ARE DEDICATED TO KEEPING THE BAND TOGETHER.
  8. 8. THEY ARE ALSO THE ONES WITH THE BEST CONNECTIONS TO OTHER BANDS.
  9. 9. BRUCE CODDINGTON @BRUCECODDINGTON
  10. 10. GITHUB SHIRT JS STICKER
  11. 11. 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/
  12. 12. THIS ROCKS!
  13. 13. IT SHOULDN’T BE ABOUT WHO IS BANGING THE DRUM THE LOUDEST…
  14. 14. OR SCREAMS THE LOUDEST AND IS ANGRY ABOUT EVERYTHING…
  15. 15. 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/
  16. 16. 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/
  17. 17. 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/
  18. 18. 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/
  19. 19. I AM TIRED OF THE FIGHTS AND AGGRESSIVE FANS…
  20. 20. THERE ARE A FEW THINGS ABOUT THE WEB THAT CAN’T BE CHANGED… 'use strict'; const web = 1;
  21. 21. THE WEB IS DESIGNED TO WORK INDEPENDENT OF HARDWARE, SOFTWARE, ABILITY OR LOCATION.
  22. 22. NATIVE, MORE DEFINED ENVIRONMENTS CAN INNOVATE FASTER, AS THEY CONTROL THE USER.
  23. 23. THERE’LL ALWAYS BE BROWSER FRAGMENTATION
  24. 24. OUR JOB IS TO DELIVER CONTENT AND FUNCTIONALITY TO END USERS. WE ARE THERE FOR THEM. NOT THEY FOR US. ?
  25. 25. 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…
  26. 26. THIS IS A TALL ORDER, AND WE HAVE TO FIND A WAY TO DEAL WITH THIS.
  27. 27. THE MAIN THING THAT DEMANDED CHANGE (AND CAUSED A LOT OF DRAMA) IS THE RISE OF MOBILE.
  28. 28. ON MOBILE, THE DECK IS STACKED AGAINST THE WEB…
  29. 29. 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.
  30. 30. TO COMPETE ON MOBILE, WE NEED OUR WEB TECHNOLOGY STACK TO IMPROVE.
  31. 31. THE NEEDS FOR JAVASCRIPT HAVE CHANGED OVER THE YEARS. WE NEED TIRES WITH MORE GRIP FOR THE CHANGED WEB.
  32. 32. IT IS IMPOSSIBLE, OR AT LEAST VERY DANGEROUS TO DO SO TO A MOVING CAR…
  33. 33. 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.
  34. 34. THERE IS NOTHING WRONG WITH THAT. BUT WE NEED TO FIND A WAY TO MOVE THE WHOLE WEB FORWARD.
  35. 35. TODAY YOU WILL HEAR A LOT ABOUT NEW IDEAS, NEW INNOVATIONS AND NEW APPROACHES TO SOLVE OUR PROBLEMS.
  36. 36. ONE OF THE MOST PROMISING AND IMPORTANT TO ME IS ES6.
  37. 37. • 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…
  38. 38. 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
  39. 39. SUPPORT IS ENCOURAGING, BUT ALSO PATCHY http://kangax.github.io/compat-table/es6/
  40. 40. THE PROBLEM: FOR NON-SUPPORTING BROWSERS, ES6 FEATURES ARE SYNTAX ERRORS…
  41. 41. THE SOLUTION: TRANSPILING INTO ES5… https://babeljs.io
  42. 42. ✘ 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:
  43. 43. https://featuretests.io/ WHAT ABOUT FEATURE TESTING?
  44. 44. ✘ 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:
  45. 45. YOU CAN USE AN ABSTRACTION, FRAMEWORK OR LIBRARY THAT HAS SIMILAR FEATURES…
  46. 46. ✘ 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
  47. 47. CONTROVERSIAL STATEMENT FOLLOWING!
  48. 48. 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/
  49. 49. 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?
  50. 50. 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…
  51. 51. BUT THERE’S ALSO GOOD NEWS!
  52. 52. 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
  53. 53. 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
  54. 54. 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.
  55. 55. 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/
  56. 56. WE NEED YOU TO HELP US FIX THIS ISSUE. LET’S MAKE A BASELINE A REALITY.
  57. 57. HELP ES6 BY LOOKING AT ITS UNIT TESTS… https://github.com/tc39/test262 http://test262.ecmascript.org/
  58. 58. YOU CAN LEARN AND FIX ISSUES. http://es6katas.org
  59. 59. CHECK BACK PERIODICALLY ON SUPPORT http://kangax.github.io/compat-table/es6/
  60. 60. TEST ES6 PERFORMANCE http://kpdecker.github.io/six-speed/
  61. 61. THE GREAT THING ABOUT JAVASCRIPT IS THAT IT IS A VERY FLEXIBLE LANGUAGE USED IN MANY ENVIRONMENTS…
  62. 62. 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.
  63. 63. 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.
  64. 64. 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.
  65. 65. ABOVE ALL, FIND SOME LOVE FOR INNOVATION
  66. 66. 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.
  67. 67. 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 https://www.flickr.com/photos/51035768826@N01/1172892 Speeding Car: amira_a https://www.flickr.com/photos/46646401@N06/6778014952 Rocks: Tambako the Jaguar https://www.flickr.com/photos/8070463@N03/5143889969/ Drummers: abbilder https://www.flickr.com/photos/21617436@N00/8770084959/ Screaming singer: Photohunny https://www.flickr.com/photos/43122725@N07/5981736281/ Screaming at fight: martingarri https://www.flickr.com/photos/38001453@N00/6191907945 Raygun: miss_rogue https://www.flickr.com/photos/92544710@N00/190255724 Tired Dog: Mini D https://www.flickr.com/photos/24963327@N00/14934721105 Fix: Deborah Fitchett https://www.flickr.com/photos/31320962@N05/4374565545 Card Deck: waitscm https://www.flickr.com/photos/78341140@N00/6245359243/

×