Модули.Революция

Выступление на ES6 Meetup by Codehipsters. Рассмотрение подходов CJS, AMD и ES6 Modules. Описание плюсов и минусов каждого.

Transcript

1. Модули.Революция
2. Тихон
4. JS разработчик
5. Дизайнер
6. Заведующий отделом мобильной разработки
7. UI/UX инженер
8. CSS программист
9. Cпециалист по модулям в ES6 Со вчерашнего дня
10. Итак, модули.
11. Темные времена
12. Никак
13. var  Say  =  (function()  {      //  Приватные  методы      var            hi    =  'Hi!',          bye  =  'Bye!'      //  Публичные  методы      return  {          sayHi:  function()  {              console.log(hi);          },          sayBye:  function()  {              console.log(bye);          }      }   }());
14. Common JS
16. //  say.js   exports.sayHi  =  function()  {      console.log('Hi!');   }   exports.sayBye  =  function()  {      console.log('Bye!')   }
17. <!-­‐-­‐  index.html  -­‐-­‐>   <script>      var          Say      =  require('say'),          sayHi  =  require('say').sayHi;      Say.sayHi();      sayHi();   </script>
18. (function(/*!  Brunch  !*/)  {      'use  strict';      var  globals  =  typeof  window  !==  'undefined'  ?  window  :  global;      var  modules  =  {};      var  cache  =  {};      var  has                      =  function(object,  name)  {  ...  };      var  expand                =  function(root,  name)  {  ...  };      var  dirname              =  function(path)  {  ...  };      var  localRequire    =  function(path)  {  ...  };      var  initModule        =  function(name,  definition)  {  ...  };      var  require  =  function(name,  loaderPath)  {  ...  };      var  define  =  function(bundle,  fn)  {  ...  };      var  list  =  function()  {  ...  };      globals.require  =  require;      globals.require.define  =  define;      globals.require.register  =  define;      globals.require.list  =  list;      globals.require.brunch  =  true;   })();   require.register("say",  function(exports,  require,  module)  {      exports.sayHi  =  function()  {          console.log('Hi!');      }      exports.sayBye  =  function()  {          console.log(‘Bye!');      }   }); Бранче-магия Наши методы
19. Common JS • Синхронный require() • Ориентирован на сервер-сайд • Нет обертки над модулем
20. Require JS
21. <!-­‐-­‐  index.html  -­‐-­‐>   <script            src="bower_components/requirejs/require.js"            data-­‐main="main">   </script>
22. //  main.js   requirejs.config({          baseUrl:  'lib'   });   require(['Say'],  function  (Say)  {      Say.sayHi();      Say.sayBye();   });
23. //  lib/say.js   define('Say',  [],  function()  {      var  sayPrivate  =  function  ()  {          console.log('Private!');      }      return  {          sayHi:  function  ()  {              console.log('Hi!');          },          sayBye:  function  ()  {              console.log('Bye!');          }      }   });
25. //  so_dependecies_much_require.js   require([      'underscore',      'jquery',      'numeral',      'd3',      'components/Table',      'components/Header',      'components/RowGroup',      'components/Row',      'components/Cell',      'components/BarChart',      'components/Toggle',      'components/Dropdown',      'components/YourMomma'   ],  function(_,  $,  numeral,  d3,     Table,  RowGroup,  Row,  Cell,     Header,  Toggle,  Dropdown,  SoFat)  {            //  Код   }
26. Require JS • Асинхронный require() • Ориентирован на фронтенд • Есть define()
27. Модули ES6
28. export  function  square(x)  {          return  x  *  x;   } Экспорт
29. import  'lib/calc'  as  c;   import  {  square  as  squ  }  from  'lib/calc';   import  {  square,  MY_CONSTANT  }  from  'lib/calc';   import  *  from  'lib/calc'; Импорт
30. Динамический импорт System.import('main').then(function(Main)  {      Main.main();   });  
31. Динамический импорт Promise.all(                  ['module1',  'module2',  'module3']                  .map(x  =>  System.import(x)))          .then(function  ([module1,  module2,  module3])  {                    }); Мапим строки в импорты
32. Как все работает? 1. Подгрузка всех импортов заблаговременно. Браузер должен знать все пути до начала выполнения скриптов. 2. Асинхронная подгрузка System.import.
33. Today
34. >>  bower  install  es6-­‐module-­‐loader Подключение
35. <!-­‐-­‐  index.html  -­‐-­‐>
 
 <script  src="bower_components/traceur/traceur.js"></script>   <script  src="bower_components/es6-­‐module-­‐loader/dist/es6-­‐module-­‐ loader.js"></script> Подключение
36. <!-­‐-­‐  index.html  -­‐-­‐>   <script>      System.baseURL  =  '/lib/';      System.import('main').then(function(Main)  {          Main.main();      });   </script>
37. //  lib/main.js   import  {sayHi,  sayBye}  from  'say'   export  function  main()  {      sayHi();      sayBye();   }
38. //  lib/say.js   export  function  sayHi()  {      console.log('Hi!');   }   export  function  sayBye()  {      console.log('Bye!');   }
39. <!-­‐-­‐  index.html  -­‐-­‐>   <script  type="module">      import  {sayHi,  sayBye}  from  'lib/say';      sayHi();   </script>
41. Предкомпиляция >>  traceur  -­‐-­‐out  app-­‐build.js  lib/main  -­‐-­‐modules=instantiate Скомпилированный JS Основной JS М агия System .js
42. Предкомпиляция <script  src="node_modules/traceur/bin/traceur-­‐runtime.js"></script>   <script  src="bower_components/es6-­‐module-­‐loader/dist/es6-­‐module-­‐loader.js"></script>   <script  src="bower_components/system.js/dist/system.js"></script>   <script  src="app-­‐build.js"></script>   <script>      System.import('lib/main').then(function(Main)  {          Main.main();      });   </script>
43. Модули ES6 • Асинхронный require() • Не нужны обертки на модулями • Использование 6to5 или traceur