Modern Javascript Round Up

Together we will review how you can write ES2015 / ES6 syntax in your Drupal application. We will learn how to run a "transpiler" in order to build backwards-compatible javascript while utilizing modern syntax. We will compare old techniques to modern techniques so you can start refactoring immediately.

Transcript

1. MODERN JAVASCRIPT ROUND UP ES6, ES2015, ES7
2. ES6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. ES6
3. Destructuring Arrow Functions Blocked Scope Declarations Import / Export Modules String Interpolation FEATURES
4. The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables. DESTRUCTURING
5. ES5 ES6
6. NO MORE FALSY
7. NESTED DESTRUCTURING
8. DESTRUCTURING REASSIGNMENT
9. DESTRUCTURING IN LOOPS
10. ES5 FUNCTION ARGUMENT ES6 FUNCTION ARGUMENT
11. DESTRUCTURING DEFAULT VALUES
12. DESTRUCTURING DEFAULT FUNCTION ARGUMENTS
13. DEFAULT FUNCTION ARGUMENTS, WHAT?!
14. DESTRUCTURING WITH DEFAULT FUNCTION ARGUMENTS AND REASSIGNMENT
15. ARROW FUNCTIONS An arrow function expression has a shorter syntax compared to function expressions and lexically binds the this value.
16. ES5 STANDARD FUNCTION ES6 ARROW FUNCTION
17. ES6 ARROW FUNCTION ES5 STANDARD FUNCTION
18. ES6 IMPLIED "RETURN" SELF INVOKING FUNCTION
19. WON’T WORK WILL WORK
20. BLOCK SCOPE DECLARATIONS `let` allows you to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.
21. BLOCK SCOPE WITH THE LET KEYWORD THE LET KEYWORD INSIDE A LOOP
22. IMPORT The import statement is used to import functions, objects or primitives that have been exported from an external module, another script, etc. The export statement is used to export functions, objects or primitives from a given file (or module). EXPORT
23. ES6 IMPORT ES6 IMPORT AND DESTRUCTURING ES6 IMPORT ALIASING
24. WHY DO I NEED ALIASING? A file can export multiple items. Using the * will import all the exported pieces to single variable It also helps to avoid conflicts between similarly named libraries. For example two libraries which both use the symbol $ as their constructor.
25. ES6 EXPORT ES6 EXPORTING DEFAULT
26. ES6 EXPORT ALTERNATIVE
27. ES6 EXPORT SCOPE
28. STRING INTERPOLATION AKA TEMPLATE LITERALS Template literals are string literals allowing embedded expressions.
29. ES5 STRING BUILDING ES6 TEMPLATE LITERALS
30. ES6 TEMPLATE LITERALS MULTIPLE LINES
31. SO MUCH MORE! Class, yes, very much like php, with extends, getters / setters, a constructor function. Native Promises to help with async calls to the server. yield keyword to stop the process thread. and on… and on… and on…
32. COOL STORY BRO, BUT HOW DO I GET IT TO WITH WORK IE9?
34. ES2015 AND BEYOND Babel has support for the latest version of JavaScript through syntax transformers. These plugins allow you to use new syntax, right now without waiting for browser support.
35. WHAT? It rewrites your code to work with older browsers, bro. For example it will rename all your let variables to avoid out of scope conflicts.
36. BABEL CAN BE USED WITH: Gulp Grunt Webpack Rollup
37. WEBPACK Install the Babel package via npm then add it your loaders:
38. GRUNT Install the Babel package via npm then add it your config object:
39. GULP Install the Babel package via npm then add a new task.
40. THANK YOU! Adam Smith acodesmith.com @acodesmith