Путешествие в мирмодульных загрузчиковКирилл КайсаровКирилл Кайсаров

2Кратко обо мнеКратко обо мне

Javascript разработчик в команде 2gis.ruJavascript разработчик в команде 2gis.ru

3Что такое модуль?Что такое модуль?

Модуль — функционально законченный фрагмент ,оформленный в виде отдельного с илипоименованной непрерывной её части, предназначенный дляиспользования в других программах. Модули позволяют разбиватьсложные задачи на более мелкие в соответствии с

. Обычно проектируются таким образом, чтобыпредоставлять удобную для многократногоиспользования функциональность ( ) в виденабора , , .Источник: Wikipedia

программыфайла исходным кодом

принципоммодульности

программистаминтерфейс

функций классов констант

4Плюсы использования модулейПлюсы использования модулей

— Независимость блоков кода

— Упрощает Unit тестирование и поиск ошибок

— Явные зависимости

5В реальном миреВ реальном мире

РодоначальникиРодоначальники

Node.JSСтандарт: CommonJSПервый релиз: 2009 год

RequireJSСтандарт: AMDПервый релиз: Фев. 2010 года

var http = require('http');

function callback (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n');};

http.createServer(callback).listen(1337, '127.0.0.1');console.log('Server running at http://127.0.0.1:1337/');

require(["helper/util"], function(util) { // Эта функция не вызовется до тех пор пока // не загрузиться helper/util.js // Если внутри util.js есть define, // то эта функция не вызовется пока не загрузятся // зависимости указанные в define. // Аргумент util вернет интерфейс util.js});

— Синхронная загрузка— Работает только на сервере

— Асинхронная загрузка— Работает только в браузере

6Единый стандарт Единый стандарт

Мы хотим писать код который выполняется в разныхМы хотим писать код который выполняется в разныхокружениях без лишних сложностейокружениях без лишних сложностей

22 сентября 2010 года 22 сентября 2010 года James HallidayJames Halliday, также известный как, также известный какsubstacksubstack, выложил 37 строчный кусок кода который, выложил 37 строчный кусок кода которыйтрансформировал трансформировал node.jsnode.js модули в browser-compability код. модули в browser-compability код.

https://github.com/substack/node-browserify/commit/b0363a

Появление browserify дало толчек развитию изморфных приложений.Также появление этого решения позволило активно развиватьсяпакетному менеджеру npm который сейчасявляется самым популярным хранилищемpre-written кода как для серверных так и для клиентских приложений.

7Новые испытанияНовые испытания

С развитием С развитием HTML5HTML5 и появлением новых стандартов, таких как и появлением новых стандартов, таких как Web ComponentsWeb Components, стало понятно что модульному принципу должны, стало понятно что модульному принципу должныследовать не только Javascript блоки кода, но и остальныеследовать не только Javascript блоки кода, но и остальныеэлементы, такие как элементы, такие как CSSCSS таблицы, шрифты и графика. таблицы, шрифты и графика.

Загрузчики

// module.jsrequire('some.less');

// console> browserify -t lessify module.js > build.js

Пример:

Webpack и Require.JS реализовывает этот функционалWebpack и Require.JS реализовывает этот функционалчерез loaders, Browserify через transform'ычерез loaders, Browserify через transform'ы

8Попытка стандартизацииПопытка стандартизации

Известный Open-Source разработчик Известный Open-Source разработчик TJ HolowaychukTJ Holowaychuk, также, такжеизвестный как известный как visionmediavisionmedia и и tjtj, предложил коммьюнити компоненты, предложил коммьюнити компонентыкак стандарт клиентских библиотек. Для описания которыхкак стандарт клиентских библиотек. Для описания которыхиспользовался, отличный от привычного package.json,использовался, отличный от привычного package.json,component.json. В нем содержались ссылки на все зависимостиcomponent.json. В нем содержались ссылки на все зависимостимодуля, в том числе и стилевые таблицы, изображения и так далее...модуля, в том числе и стилевые таблицы, изображения и так далее...

Репозиторий проекта

https://github.com/componentjs/component

Хранилище компонентовhttps://github.com/component

9Попытка стандартизацииПопытка стандартизации

{ "name": "dialog", "description": "Dialog component", "version": "0.4.0", "keywords": [ "dialog", "ui", "modal" ], "dependencies": { "component/emitter": "1.1.3", "component/overlay": "0.3.1", "component/domify": "1.3.1", "component/event": "0.1.4", "component/classes": "1.2.1", "component/query": "0.0.3" }, "development": { "visionmedia/mocha": "*", "dominicbarnes/expect.js": "*" }, "scripts": [ "index.js" ], "styles": [ "dialog.css" ], "templates": [ "template.html" ], "demo": "http://component.github.io/dialog/"}

Component.jsonComponent.json

К сожалению широкогораспространения component неполучил, но стандарт описанияактивно используется такимпакетным менеджером как Bower

Также мир компонентов пыталсяпокорить такой пакетный менеджеркак Duo (http://duojs.org/).Основной идеей которого былавозможность подтягивать пакетыпрямо из github репозиториев. @import 'necolas/normalize.css';var tip = require('component/tip');

10Следующие шаги развитияСледующие шаги развития

Chunk-loading on-demandChunk-loading on-demand

С развитием Javascript приложений, появилась проблема доставкипользователю "большой" браузерной сборки кода. Особенно трудно перенеслиэто мобильные устройства, часть из которых плохо кешируют любые файлыбольше 80-100кб. Для решения этой проблемы сборки отдают по частям.

WebpackWebpack

Встроенная функциональность базирующаяся наэкспериментальном стандарте require.ensure

BrowserifyBrowserify

Возможность разделения сборок с помощью плагинаfactor-bundle. Больше ориентирован на многократныеточки входа и частоиспользуемые модули

11Новая эра Javascript и ES6Новая эра Javascript и ES6

Разработчики стандарта EcmaScript 6, не пропустили мимо себя возможностьдобавить в язык модули, и начали активную работу в 2013 году над написаниемстандарта.

В июле 2014 года TC39 финализировала синтаксис модулей:

// lib.jsexport const sqrt = Math.sqrt;export function square(x) { return x * x;}export function diag(x, y) { return sqrt(square(x) + square(y));}

// main.jsimport { square, diag } from 'lib';console.log(square(11)); // 121console.log(diag(4, 3)); // 5

https://people.mozilla.org/~jorendorff/es6-draft.html#sec-importshttps://people.mozilla.org/~jorendorff/es6-draft.html#sec-exports

12Новая эра Javascript и ES6Новая эра Javascript и ES6

Также не маловажным пунктом стал и механизм загрузки модулей. В раннихстандартах можно было увидеть глобальный объект System. Цель которогобыла загрузка модулей в разных окружениях.

System.import('mymodule').then(function(m) { new m.q(); });

Пример:

К большому сожалению группа разработки отказала в разработке этогоформата и перешла к новым обсуждениям этого вопроса.

https://whatwg.github.io/loader/Status: This document is a work in progress and dreams of becoming a living standard.

13ES6 прямо сейчас!ES6 прямо сейчас!С активным развитием нового стандарта, появилисьреализации экспериментального стандарта ES6 Loader

https://github.com/ModuleLoader/es6-module-loader

Polyfill для старого стандарта с объектом System, и активнымразвитием в сторону нового стандарта с объектом Reflect

https://github.com/systemjs/systemjs

Универсальный загрузчик модулей для разных стандартов. AMD,CommonJS, ES6 Modules, Node.JS, Global

http://jspm.io/Package менеджер для system.js

Спасибо!!!Спасибо!!!Приятных путешествий!!!Приятных путешествий!!!