Доклад на первом Ярославском форнтэнд-митапе. Рассказ об имеющихся методиках описания модулей в JavaScript а также о грядущем стандарте ES6 и, наконец-то, нативной поддержке модулей языком.

1. JavaScript-модули
“Из прошлого в будущее”
Константин Ершов,
frontend meetup, Ярославль, 10.12.2014

2. Начало...
● легкая модификация DOM
● 50 строк кода

4. Что дает модульная система?
● Ограничение области видимости
● Реиспользование частей приложения
● Структуризация приложения
● Наглядный код

6. Простейшие модули
● Разделение на файлы
● Паттерн с самовызывающейся ф-цией
● Глобальная область видимости

7. //iMath.js
(function(myNameSpace){
function square(x){
return x*x;
}
myNameSpace.iMath = {
square: square
};
}(window.myNamespace = window.myNamespace || {}))
//main.js
(function(){
alert(window.myNamespace.iMath.square(2));
}())

8. Плюсы:
- ограничение области видимости
- это уже почти модули

9. Плюсы:
- ограничение области видимости
- это уже почти модули
Минусы:
- нет поддержки зависимостей
- для асинхронной загрузки модуля нужно
реализовывать обертку
- нужно следить за порядком загрузки модулей

10. Asynchronous Module
Definition (AMD)

11. - подход к организации модулей, который
определяет API, следуя которому можно организовать
асинхронную загрузку модулей и их зависимостей.
Asynchronous Module
Definition (AMD)

12. Краткие характеристики
● работает без eval() или этапа компиляции, за счет
синтаксиса;
● предназначен для асинхронной загрузки;
● преимущественно используется на стороне клиента.

13. define для определения модуля
require для загрузки

14. define - определение модуля
define(
[module_name] /*опционально*/,
[dependencies] /*зависимости -
опционально*/,
definition /*функция инстанцирования
модуля или объект*/
);

15. define('iMath', function(){
function square(x){
return x*x;
}
return {
square: square
};
});
define('anotherModule', ['iMath'], function(iMath){
alert(iMath.square(2));
});

16. require - загрузка модулей
require(
[modules] /*список модулей*/,
callback /*функция вызываемая при
успешной загрузке модулей*/
errback /*функция вызываемая при ошибке
загрузки модулей*/
);

17. require(
['anotherModule', 'yetAnotherModule'],
function(aM, yAM){
//do something with modules
}, function(error){
console.error(error);
}
);

18. Система плагинов
require(['tpl!main'], function(tplFn){
var html = tplFn(data);
});
//плагин 'tpl!'
define('tpl', ['templateEngine'], function(templateEngine){
return {
load: function(name, parentRequire, onload, config){
parentRequire(['text!' + name], function(text){
onload(templateEngine.createTemplate(text));
});
}
};
});

19. Почему AMD - это лучший выбор для написания модульного js на клиенте?
● Имеет четкое представление о том как нужно подходить к определению гибких модулей.
● Значительно чище и безопасней, чем использование глобального нэймспейса
● Определение модуля инкапсулировано, что помогает избежать загрязнения глобальной
области видимости.
● Работает лучше чем альтернативные решения (например CommonJS, который мы
рассмотрим позже)
● Не имеет проблем с кросс-доменностью, отладкой. Не нуждается в инструменте на
стороне сервера. Большенство загрузчиков AMD поддерживают загрузку модулей без
процесса сборки.
● Обеспечивает подход «transport» для включения нескольких модулей в один файл.
● Поддерживает ленивую загрузку, если необходимо.

21. CommonJS

22. CommonJS
- рабочая группа, работающая над разработкой и стандартизацией
JavaScript API. На сегодняшний день они работают над ратификацией
стандарта для модулей и пакетов. Модули предложенные CommonJS
определяют простой API для работы js на стороне сервера.

23. Краткие характеристики:
● компактный синтаксис;
● предназначен для синхронной загрузки;
● преимущественно используется на стороне сервера.

24. require для загрузки импортов
exports для публикации частей
модуля

25. //iMath.js
function square(x){
return x*x;
}
exports.square = square;
//anotherModule.js
var iMath = require('./iMath');
console.log(iMath.square(2));

26. //iMath.js
define('iMath', function(){
function square(x){
return x*x;
}
return {
square: square
};
});
//anotherModule.js
define('anotherModule', ['iMath'], function(iMath){
alert(iMath.square(2));
});

27. Подходит ли CommonJS для
браузера?

28. Общие модули для клиента и сервера
● Загрузчики и фреймворки поддерживащие CommonJS модули в
браузере:
○ curl.js - загрузчик модулей на клиенте
○ cajon - загрузчик разработанный поверх require.js

29. Общие модули для клиента и сервера
● Загрузчики и фреймворки поддерживащие CommonJS модули в
браузере:
○ curl.js - загрузчик модулей на клиенте
○ cajon - загрузчик разработанный поверх require.js
● Использование Browserify, утилиты которая позволяет запускать любые
node.js модули в браузере

30. Общие модули для клиента и сервера
● Загрузчики и фреймворки поддерживащие CommonJS модули в
браузере:
○ curl.js - загрузчик модулей на клиенте
○ cajon - загрузчик разработанный поверх require.js
● Использование Browserify, утилиты которая позволяет запускать дюбые
node.js модули в браузере
● Использование на сервере node-require (AMD на клиенте и на сервере)

31. Общие модули для клиента и сервера
● Загрузчики и фреймворки поддерживащие CommonJS модули в
браузере:
○ curl.js - загрузчик модулей на клиенте
○ cajon - загрузчик разработанный поверх require.js
● Использование Browserify, утилиты которая позволяет запускать дюбые
node.js модули в браузере
● Использование на сервере node-require (AMD на клиенте и на сервере)
● Использование оберток для модулей

32. ES6

33. Стандарт ES6 module состоит из двух частей:
● декларативный синтаксис (для импорта и экспорта);
● программной загрузки (чтобы задать конфигурацию
загрузки модулей и для условной загрузки
модулей).

34. Экспорт
let notExported = 'abc';
export function square(x) {
return x * x;
}
export const MY_CONSTANT = 123;

35. Импорт
import { square } from './iMath';
console.log(square(3));

36. Импорт
import { square } from './iMath';
console.log(square(3));
import { square, MY_CONSTANT } from './iMath';

37. Импорт
import { square } from './iMath';
console.log(square(3));
import { square, MY_CONSTANT } from './iMath';
import './iMath' as c;
console.log(c.square(3));

38. Импорт
import { square } from './iMath';
console.log(square(3));
import { square, MY_CONSTANT } from './iMath';
import './iMath' as c;
console.log(c.square(3));
import { square as squ } from './iMath';
console.log(squ(3));

39. Экспорт по умолчанию
// myapp/models/Customer.js
export default class { // анонимный класс
constructor(id, name) {
this.id = id;
this.name = name;
}
};

40. Экспорт по умолчанию
// myapp/models/Customer.js
export default class { // анонимный класс
constructor(id, name) {
this.id = id;
this.name = name;
}
};
// myapp/myapp.js
import Customer from 'models/Customer';
let c = new Customer(0, 'Jane');

41. API программной загрузки
Позволяет делать две вещи:
● настраивать загрузку модулей
● программно работать с модулями и скриптами

42. Цепь загрузки и компиляции модуля

43. normalize
System.normalize = function(moduleName, options){
//преобразуем 'core!superLib' --> 'core/lib/superLib.coffee'
return moduleName
};

44. resolve
System.resolve = function(moduleName, options){
// преобразуем 'core/lib/superLib.coffee' -->
// '/var/www/myProject/resources/core/lib/superLib.coffee'
return moduleName
};

45. fetch
System.fetch = function(url, options){
//читаем с диска или грузим через сеть
};

46. translate
System.translate = function(source, options){
return CoffeeScript.translate(source);
};

47. link
System.link = function(jsSource, options){
//можем вернуть объект, с зависимостями и колбэком
//можем вернуть модуль
//можем вернуть undefined тогда система решит, что мы загрузили
// настоящий ES6 модуль и предоставит наружу все что он экспортирует
};

48. Используем модули ECMAScript 6
● ES6 Module Transpiler: позволяет писать свои модули, используя
некую часть стандарта ECMAScript 6 (грубо говоря, ECMAScript 5 +
экспорт + импорт), и компилирует их в модули AMD или CommonJS.
Статья Райана Флоренца (Ryan Florence) детально объясняет этот
подход.
● ES6 Module Loader: позволяет использовать API загрузки модулей
ECMAScript 6 в современных браузерах.

49. Ещё:
● require-hm: плагин для RequireJS, позволяющий загружать модули ECMAScript 6 (только
ECMAScript 5 + экспорт + импорт). Статья Каолана Макмахона (Caolan McMahon) объясняет,
как он работает. Предупреждение: плагин использует более старый синтаксис.
● Traceur (компилятор ECMAScript 6 в ECMAScript 5): частично поддерживает модули,
возможно, в конечном счете будет поддерживать их полностью.
● TypeScript TypeScript (грубо говоря, ECMAScript 6 и поддержка статической типизации):
компилирует модули из внешних файлов (которые могут использовать большую часть
ECMAScript 6) в AMD или CommonJS.

51. Вопросы?

52. Материалы
● Статья про es6 модули на frontender.info
● Варианты использования es6 модулей - Иегуда Кац(Yehuda Katz)
● Блог Эдди Османи(Addy Osmani)
● Статья “Путь js модуля” - Михаил Давыдов (Mikhail Davydov)