Navigating the wild seas of es6 modules

50 %
50 %
Information about Navigating the wild seas of es6 modules

Published on August 6, 2015

Author: giltayar

Source: slideshare.net

1. August 2015

2. There be dragons!

3. The Dragon of Syntax The Node Dragon Sonnet 130 The Browser Dragon

4. The Dragon of Syntax

5. Creating a module export function doIt() {} export var meaningOfLife = 42; function doThat() {}

6. Using a module import {doIt, meaningOfLife} from 'a-module'; export function doIt() {} export var meaningOfLife = 42 function doThat() {} a-module.js

7. You Wish!

8. TIMTOWTDI

9. There Is More Than One Way To Do It function doIt() {} var aVar = 42; function doThat() {...} export {doIt, aVar as meaningOfLife};

10. There Is More Than One Way To Do It import * as lib from 'a-module'; lib.doIt(); lib.meaningOfLife;

11. AAAAARRRGGGGGHHH!!!

12. The dreaded default export default 42; import meaningOfLife from 'a-module'; a-module.js

13. Confusion will be my epitaph export default function doIt() {} export default var meaningOfLife = 42;✕ ✓

14. default is just another import import orOther, {something} from 'a-module'; import {something}, orOther from 'a-module'; import {something, default as orOther} from 'a-module';

15. TJTMWTTD!

16. There’s Just Too Many Ways To Do Things!

17. Why Did This Happen?

18. So?

19. Do we abandon ship?

20. No!

21. Prefer default over specific exports export default function factory() {} export default { doIt() {} meaningOfLife: 42 } or...

22. Prefer const var bindings export const meaningOfLife = 42;

23. The Dragon of Syntax The Node Dragon Sonnet 130 The Browser Dragon

24. The Node Dragon

25. How do we use ES6 modules in Node?

26. Why would we do that?

27. Node has a really good module system

28. Node module exports.doIt = function() {} exports.meaningOfLife = 42; const {doIt, meaningOfLife} = require('a-module'); a-module.js

29. Two words: isomorphic code

30. So How?

31. Native ES6 modules: ongoing work

32. Till then...

33. Babel! require("babel/register");

34. Babel! export function doIt() {} exports.doIt = function() {} import {doIt} from 'a-module' var {doIt} = require('a-module')

35. default export default 42; exports['default'] = 42 import mol from 'a-module' var {default: mol} = require('a-module')

36. And this? var aModule = process.arch === 'win32' ? require('a-module-win32') : require('a-module') //...

37. Huh? No dynamic loading of modules?

38. There is! var moduleName = process.arch === 'win32' ? 'a-module-win32' : 'a-module’ System.import(‘a-module-win32’).then( aModule => { /* ... */})

39. But it’s async! the node people and ES6 people are currently discussing how to resolve this

40. So?

41. Do we abandon ship?

42. No!

43. Do this ● Use import/export when you can ● Fall back to require if you must

44. The Dragon of Syntax The Node Dragon Sonnet 130 The Browser Dragon

45. The Browser Dragon

46. The fiercest dragon of them all

47. A whole talk unto itself

48. But maybe a glimpse?

49. This is illegal <script> import {doIt} from 'a-module'; // … </script>

50. You have to do this <script> System.import('a-module').then( ({doIt}) => // ... ); </script>

51. Or... <script type=module> import {doIt} from 'a-module'; // … </script>

52. Or maybe... <module> import {doIt} from 'a-module'; // … </module>

53. Who knows? The spec hasn’t been updated in 10 months!

54. Extra! Extra! Read all about it! Modules have their own scope

55. So forget about this <module> import {doIt} from 'a-module'; // … </module> <div onclick=doit>...</div>

56. Interoperability with AMD ● e.g. RequireJS? ● Maybe. There’s another spec, the Loader spec, which is dealing with this ● Work in progress. Not yet close to ready. ● And has interoperability problems with Node

57. And how would this work efficiently? <module src= ></module>

58. So?

59. Do we abandon ship?

60. No!

61. The One-Two Punch

62. Punch #1

63. We’ve already seen it (Babel) export function doIt() {} exports.doIt = function() {} import {doIt} from 'a-module' var {doIt} = require('a-module')

64. Punch #2

65. Bundling CommonJS modules bundle.js

66. Use... ● Grunt or Gulp or Brocolli or npm scripts ● Babel or Traceur or esnext ● webpack or browserify

67. But if you do all this, you get a very sweet carrot

68. Isomorphic code between Node and the Browser

69. The Dragon of Syntax The Node Dragon Sonnet 130 The Browser Dragon

70. Sonnet 130 My mistress’ eyes are nothing like the sun; Coral is far more red than her lips’ red; If snow be white, why then her breasts are dun; If hairs be wires, black wires grow on her head. I have seen roses damasked, red and white, But no such roses see I in her cheeks; And in some perfumes is there more delight Than in the breath that from my I grant I never saw a goddess go; My mistress when she walks treads on the ground. And yet, by heaven, I think my love as rare As any she belied with false compare.

71. So Go... ...and love ES6 modules like you love your beloved: it’s never perfect, but it’s still wonderful, and it gets better over time

72. Thank You gil@tayar.org, @giltayar

Add a comment

Related pages

Navigating the wild seas of ES6 modules (Hebrew) - YouTube

On 05/08/15, Gil Tayar gave a lecture about ES6 modules during a JavaScript Israel Meetup. Abstract: ES6 modules are an essential part of ES6. I ...
Read more

DevNexus 2016 | Presentations

Navigating the Wild Seas of ES6 Modules ES6 modules are an essential part of ES6. ... DEVNEXUS 2016. Schedule; Speakers; Presentations ¡Sold Out!
Read more

ECMAScript 2015 - Start Using It! - JavaScript Israel (Tel ...

Navigating the wild seas of ES6 modules https://www.youtube.com/watch?v=zyi7AGPSX9M&feature=youtu.be. Again ... All Javascript Israel team, ...
Read more

ES6: Class Inheritance - YouTube

ES6: Class Inheritance ... JavaScript Modules: ES6 Import and Export - Duration: ... Navigating the wild seas of ES6 modules (Hebrew) ...
Read more

What are the best resources to learn ES6? - Quora

... (classes, modules, etc), author also has a book on ES6 ... What are the best resources for learning ... Do wild predators like tigers see it as an ...
Read more

DevNexus 2016 | Schedule

Schedule for DevNexus 2016 ... 5:30-6:45 PM Using Software Modules ... 2:30-3:45 PM Navigating the Wild Seas of ES6 Modules Gil Tayar ...
Read more

Web Platform WG F2F -- 26 Oct 2015

Web Platform WG F2F 26 Oct 2015. See ... ES6 modules and HTML ... The idea than navigating a document in linear order is a good thing collapses when you ...
Read more

The Progressive Web - Pony Foo

The Progressive Web. ... but now there’s a few cases in the wild where it’s being ... This points to a module where the view routes that are used by ...
Read more