Your SlideShare is downloading. ×
0
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Modules and assembling of JavaScript (in russian)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modules and assembling of JavaScript (in russian)

553

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
553
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Михаил Давыдов JavaScript разработчик Модули и сборка JavaScript
  • 2. Моя история. С чего я начинал и к чему пришел…
  • 3. cat **/*.js > build.js!
  • 4. 5 Файлы и cat **/*.js > build.js • Это быстро и просто • Что плохого –  Собирается все без разбора –  Возможны конфликты имен переменных –  Результат плохо сжимается –  Нужно учитывать порядок
  • 5. Так жить нельзя! – Нужны модули.
  • 6. 7 Мне понадобились модули. Зачем? • Разделение логических частей • Управление импортом/экспортом • Явные зависимости и их контроль • Меньше конфликтов переменных
  • 7. Модуль? – нет, не слышал! Learning JavaScript Design Patterns http://clck.ru/8aLgX
  • 8. include('main.js');!
  • 9. 10 (function ($) { var myStuff = {}; window.stuff = myStuff; })(jQuery); IIFE и include()
  • 10. 11 include('common.js'); include('ru.js'); include('main.js'); IIFE и include(): Сборка includify main.js > build.js
  • 11. 12 IIFE и include() • Что хорошего –  Модули в замыканиях –  Можно наследовать сборки • Что плохого –  RegExp –  Дублирование модулей
  • 12. Я встретил её…
  • 13. REQUIRE JS
  • 14. 15 RequireJS • AMD • Асинхронные зависимости • Плагины • Оптимизация – r.js • Большое комьюнити
  • 15. 16 define(['jQuery', 'lodash'], function ($, _) { var myStuff = {}; return myStuff; }); RequireJS & AMD: Модули
  • 16. 17 <script data-main="js/app" src="js/require.js"> </script> RequireJS & AMD: Сборка node r.js -o build.js
  • 17. I REQUIRE JS Я думал, что это навсегда…
  • 18. 19 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 1. Нужно писать обертку
  • 19. 20 define("dojo/_base/html", [ "./kernel", "../dom", "../dom-style", "../dom-attr", "../dom-prop", "../dom-class", "../dom-construct", "../dom-geometry" ], function (dojo, dom, style, attr, prop, cls, ctr, geom) { }); Много церемоний с define() 2. Куча зависимостей – ад http://clck.ru/4b7ew
  • 20. 22 define(function () { var myStuff = {}; return myStuff; }); Много церемоний с define() 3. Артефакты: Приходится табулировать
  • 21. 23 require('module'); // js? require('async!data', cb); // ? require(ComicSans); // font? require() - God Object? 1. Возвращает что угодно, как угодно 2. Не сразу понятен результат
  • 22. AMD и CJS
  • 23. 25 И еще AMD • Приходится поддерживать AMD –  jQuery, underscore, backbone, … –  2 версии с AMD и без • Пытаются заразить Node.js –  node-requirejs –  в node и так есть модульная система http://clck.ru/4b7dE
  • 24. Сейчас мы друзья
  • 25. Другие пути
  • 26. 28 Другие пути •  browserify –  CommonJS – хорошо –  слишком много от Node.js – плохо •  просто загрузчик –  headjs –  yepnopejs
  • 27. 29 Из моего опыта •  Сегодня все собирается. Даже dev •  Читаемость кода очень важна –  Нужно исключить неявные конструкции •  Сборок бывает много –  dev, production, dev-ru, test-en_US •  Нужен контроль результата сборки –  Проверка целостности –  Подробная информация о сборке
  • 28. Я создал новый инструмент
  • 29. LMD – Lazy Module Declaration LMD
  • 30. Модули – CommonJS Остальное делает сборщик
  • 31. 33 var $ = require('$'), myStuff = {}; module.exports = myStuff; Модули – CommonJS/Modules 1.0* http://clck.ru/4b7gO
  • 32. 34 Профит •  Ненавязчивый формат –  Нет лишней писанины –  Единообразие вида модулей •  Обратная совместимость с Node.js –  Без плагинов, регистрации и SMS •  Оберткой модулей занимается сборщик
  • 33. 35 { "root": "../js", "output": "../index.js", "modules": { "main": "main.js", "i18n": "locale/ru.json" }, "css": true, "ie": false, "worker": true } Конфиг сборки http://clck.ru/4b7gq
  • 34. Проблема: Много конфигов
  • 35. 37 { "extends": "index.json", "output": "../index-en.js" "modules": { "i18n": "locale/en.json" } } Операции над конфигами 1. Наследование конфигов http://clck.ru/4b7j2
  • 36. 38 { "modules": { "i18n": "locale/en.json" } } Операции над конфигами 2. Миксины конфигов lmd index+en –output=index-en.js http://clck.ru/4b7pI
  • 37. 39 { "root": "../js", "modules": { "main": "main.js" }, "depends": "*.lmd.json" } Операции над конфигами 3. Зависимости модулей main.lmd.json хранит зависимости main.js http://clck.ru/4b7sw
  • 38. 40 Профит •  Минус – нужно писать конфиг •  JSON можно легко реиспользовать •  Количество конфигов сократилось •  Меньше писать сборочных скриптов •  Легче понять результат сборки
  • 39. Явные плагины
  • 40. Гибкие плагины
  • 41. Очень гибкие плагины
  • 42. 44 { "image": true, "promise": true, "cache": true, "stats": true } Явный способ подключения плагинов http://clck.ru/4b7t6 Сборщик проверит плагины
  • 43. 45 // javascript require('module'); // css require.css('path/to.css', callback); // image+promise require.image('path/img.png') .then(callback); LMD require – не God Object http://clck.ru/4b7tO
  • 44. 46 Профит •  require() делает одну работу •  Результат require() стал предсказуемым •  Код стало проще воспринимать
  • 45. ______ __ __ ! / ___ / / ! ____ ____ ! _____ _____ _ ! /_____/ /_____/ /_/ ! ! http://clck.ru/4dU-0!
  • 46. $ lmd -c cfg.json ✘! -o result.js ✘! ! $ lmd make cfg ✔! $ lmd make cfg+ru ✔! $ lmd info cfg ✔! $ lmd ✔!atch !fg!⇥ ⇥! c!w!
  • 47. LMD GUI
  • 48. Встроенная аналитика http://clck.ru/4b8My
  • 49. Интеграция с Grunt.js https://npmjs.org/package/grunt-lmd
  • 50. 52 Профит LMD •  Максимум автоматизации –  Сборщик LMD –  Аналитика •  Максимум явного кода –  require.*() •  Минимум писанины –  CommonJS –  CLI & GUI •  Минимум копипаста –  Операции над кофигами https://github.com/azproduction/lmd
  • 51. Михаил Давыдов JavaScript разработчик i@azproduction.ru azproduction Спасибо
  • 52. Lazy Module Declaration http://lmdjs.org

×