Embed Size (px)
Citation preview
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
GITHUB SHIRT
JS STICKER
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/
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, 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/
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/
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/
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/
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__ProxiesSymbols
Sub7classable built7ins
Scalable Apps
let, const & block7scoped bindings
ClassesPromisesIterators
GeneratorsTyped arrays
Modules
Syntactic Sugar
Arrow functionsEnhanced object literals
Template stringsDestructuring
Rest, Spread, DefaultString, 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…
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-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/
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 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/
