The Future of JavaScript: ES6 and Beyond

What is coming in ECMAScript 6 and how can I use it now?

Transcript

1. THE FUTURE OF JAVASCRIPT ES6 Harmony - What, Why, Where, When?
2. WHO IS THIS GUY? !   Micah Wedemeyer !   Full-stack developer (Rails, Node, JS, etc.) !   CoffeeScript lover !   Co-Founder, The Agile League ! @micahwedemeyer ! Design vs Dev podcast ( http://designvsdev.com )
3. AGENDA !   Brief history of JavaScript / ECMAScript !   Who should care about ES6? !   10,000ft overview !   The best new features !   When can I use it natively? (Browsers and Node) !   I can’t wait that long! What else can I do?
4. ECMASCRIPT ECMAScript was always an unwanted trade name that sounds like a skin disease. - Brendan Eich - Creator of JavaScript
5. ECMASCRIPT TIMELINE !   1996-1999: ES1-ES2 !   1999-2009: ES3 !   2009-Today: ES5 !   Tomorrow: ES6 Harmony !   Waaaay future: ES7
6. WHO SHOULD CARE?
7. LOVE RAW JAVASCRIPT Don’t want to use underscore, CoffeeScript, grunt, or anything else between you and the browser.
8. PLATFORM/LIBRARY DEVELOPER Complex classes, lots of them, don’t want to have to depend on jQuery and underscore and …
9. STACK OVERFLOW TROLLS “There’s no need to use jQuery for this. ES6 Harmony includes all these features. Why do you people always insist on using jQuery instead of just plain JavaScript?”
10. YOUR AVERAGE WEB DEVELOPER? No, not really. Just go about your business.
11. 10,000FT OVERVIEW
12. SYNTAX SUGAR !   destructuring: {x,y} = pt; !   function parameter default values !   rest/spread: easier working with variable length args and “splatting” arrays into functions !   templated strings: “My name is ${name}” !   fat arrow functions: sqr = (x) => x * x
13. OBJECT ENHANCEMENTS !   String - startsWith, endsWith, contains, some Unicode stuff !   Math - lots of new trig functions !   Number - platform specific info (MAX_SAFE_INTEGER kind of stuff) !   Array - find, findIndex, keys, values !   Set/Map/WeakSet/WeakMap - higher level data structures
14. THE BIG STUFF !   Classical inheritance - class, extends, constructor, super, static !   Modules - Declare something here, use it elsewhere !   Promises - Sanely deal with asynchronous events !   Generators - Jump in/out of functions, pause/resume
15. MY FAVORITES Or “The Best” if I were more arrogant
16. DESTRUCTURING // Array destructuring employeeRecord = ["1234", "Gibbons", "Peter", "Initech", “555-123-4567"]; var [ , lastName, firstName, , ,] = employeeRecord; alert("Hello " + firstName + " " + lastname); // Hello Peter Gibbons // Object destructuring var pt = {x: 10, y: 20}; var {x,y} = pt; alert("X coordinate: " + x); // X coordinate: 10 // Object destructuring - name change var {x: xCoord, y: yCoord} = pt; alert("Y coordinate: " + yCoord); // Y coordinate: 20
17. FAT ARROW FUNCTIONS this.val = 99; $('.my-button').click( function(event) { alert(this.val); // Uh oh...what is 'this' here? }); $('.my-button').click( (event) => { alert(this.val); // Yay! });
18. PROMISES // Common in async server communication $.ajax("/save.php").then( function() { analyticsPackage.send("Document Saved"); }).then( function() { console.log("Document saved and event logged."); }); // Animate X, then animate Y animateX(100).then( function() { animateY(100); }).then( function() { console.log("Moved right then down. Now I'm at (100,100)."); }); // Animate simultaneously var p1 = animateX(100); var p2 = animateY(100); // Use Promise.all to track the progress Promise.all([p1,p2]).then( function() { console.log("Moved in a diagonal! Now I'm at (100,100)."); });
19. CLASSICAL INHERITANCE !   Explicitly declare classes !   Classes have constructors, static variables/ functions !   Extend existing classes, use super() and super.method() to access ancestor classes
20. GENERATORS (YIELD) function *fib() { var f1 = 0; var f2 = 1; yield f1; yield f2; while (true) { [f1, f2] = [f2, f1 + f2]; yield f2; } } // Instantiate the generator var f = fib(); for (var i = 0; i < 4; i++) { console.log(f.next()); } // { value: 0, done: false} -- Object returned // Using the new for..of syntax for (var j of fib()) { console.log(j); } // 0 -- Just the .value, for loop uses .done for control
21. MODULES !   Define it there, use it here !   Encapsulation of local variables, avoid polluting the global namespace !   Declare dependencies, ordering of imports !   An absolute must for large scale projects, or projects with a lot of dependencies !   import $ from jQuery; // <= How cool is that?
22. WHEN? This all sounds good, but when can I use it?
23. THE BROWSERS !   Firefox leads by a large margin !   Chrome !   IE brings up the rear w/ iOS
24. BROWSER BY FEATURE !   http://kangax.github.io/compat-table/es6/ !   New Math and Number features !   Promises !   Generators (yield) !   Fat arrow !   Destructuring
25. BOTTOM LINE Flying cars and hoverboards before IE support arrives
26. NODE !   v 0.10 is the latest stable version, very little ES6 support there !   v 0.11(unstable) with the —harmony flag !   v 0.12 will be the stable version of 0.11, but no ETA. Been “almost there” for a year.
27. KILLER FEATURE FOR NODE
28. PYRAMID OF DOOM db.selectBlogPost("my-post", function(post) { db.selectAcceptedComments(post.commentIds, function(comments) { comments.forEach( function(comment) { db.selectUser(comment.user, function(user) { mailServer.sendmail(user, "Your comment is accepted.", function() { db.updateComment(comment, "usernotified = true", function() { console.log("Wow, finally done! Look how far right we've moved!"); }); }); }); }); }); });
29. PROMISED LAND Q.spawn(function *() { post = yield db.selectBlogPost("my-post"); comments = yield db.selectAcceptedComments(post.commentIds); comments.forEach( function(comment) { user = yield db.selectUser(comment.user); yield mailServer.sendmail(user, "Your comment is accepted."); yield db.updateComment(comment, "usernotified = true"); console.log("Finally done! Look how far left we've stayed!"); }); });
31. PROMISES PROMISES !   jQuery !   EmberJS !   Angular !   Q
32. COFFEESCRIPT !   Fat arrow (and skinny arrow!) !   Destructuring !   Classical inheritance !   Lots of loop/array structures
33. ES6 MODULE TRANSPILER Is “transpiler” even a word?
34. GOOGLE TRACEUR COMPILER Everything and the kitchen sink!
35. IS IT SAFE? Most likely bad outcome is a syntax rewrite, not a semantic re-architecting.
36. GET IN THE WATER Tiptoe or jump, the choice is yours
37. @micahwedemeyer http://www.agileleague.com/blog http://designvsdev.com
39. IMAGE CREDITS Skin disease - Cesar Harada Tardis - Rooners Toy Photography Lineup - Boston Bill Raw Tuna - Leon Brocard Stockholm Library- Samantha Marx Trollface - Paul VanDerWerf Laptop Stickers - Liz Henry High Altitude - lacomj Knitted Heart - Mararie Kneeling Vassal - Internet Archive Book Images
40. IMAGE CREDITS Classical music - Carl Guderian Space station - NASA’s Marshall Space Flight Center Generator - Dennis Jarvis Calendar - Dafne Cholet Browser Pizza Boxes - Marie Guillaumet Hoverboard - Matt DeTurck Shuttle Concept Art - James Vaughan Coffee Cups - Paul Stevenson Shark - Travelbag Ltd
41. IMAGE CREDITS Beach wading - Sue Salisbury Phrase book - Janet Lindenmuth Google Campus - Denis Cappellin Question Mark Cats - Elizabeth Herndon Agenda Notebook - Raymond Gilford