Презентация библиотеки Marrow (https://github.com/a-ignatov-parc/Marrow) для быстрого ознакомления, что же она из себя представляет и как ее разработка дошла до текущей версии.

1. Marrow
Что это такое и с чем готовят?

2. Так что же это такое?

3. Marrow - это...
• Механизм создания “песочницы” + загрузчик предоставлюящий
возможность загружать файлы как в песочницу, так и в основную
страницу.
• Шаблон файловой структуры для хранения необходимого количества
приложений + автоматическая сборка и тестирование на основе grunt.js.
• Набор рецептов позволяющий подготавливать окружение песочницы
под конкретное приложение – загрузка зависимостей, отложенная
загрузка компонентов.
• Механизм транзитов предназначенный для прозрачного линкования api
библиотек с песочницы на основную страницу.

4. А теперь немного истории

5. Первый прототип
Создание приложения, которое должно было
работать, как по отдельной ссылке так и
встраиваться в сайт в качестве виджета.
Как это было реализовано:
• Был реализован простой загрузчик на основе библиотеки yepnope.js,
который загружал в страницу все скрипты и стили.
• В iframe загружались все шаблоны для js шаблонизации и потом
переносились в основную страницу, чтоб они стали доступны
приложению.

6. Проблемы
• Первой же проблемой стал конфликт разных
версий библиотек, так как они все загружались в
основную страницу.
• Конфликт некоторых библиотек, которые
перезаписывали друг друга.
• В тот момент столкнулись с проблемой, когда
верстка приложения была не модульной и
многие стили пересекались со стилями сайта,
что в результате ломало верстку.

8. Второй прототип
Самостоятельные эксперементы по запуску
несколько приложений с разным набором библиотек
на одной странице.
Как это было реализовано:
• Первоначальный загрузчик и структура были улучшены для возможности
хранения нескольких приложений и загрузки их в индивидуальную
песочницу.
• Общие библиотеки все так же загружались в основную страницу
инициализируясь в песочницу.
• Добавлена сборка с помощью grunt.js для создания минифицированных
версий приложений.

9. Проблемы
• Возникли проблемы с библиотеками, которые
должны были работать с DOM так как находясь
в iframe они с ним и пытались работать.
• Небыло возможности загружать разные версии
библиотек работающие с DOM.
• Приходилось делать много патчей в самих
приложениях, чтоб они работали с основной
страницей, а не с iframe.

11. Третий прототип
Был реализован в качестве демо виджета, который
должен был встраиваться в стороние сайты через js
инъекцию загрузчика и запускать внутри себя веб-
приложение.
Как это было реализовано:
• Из-за невозможности yepnope.js делать кроссдоменную загрузку ресурсов
он был заменен на curl.js + сделаны специальные переменные для
конфигов для более просто загрузки ресурсов приложения.
• Были созданы рецепты для описания зависимостей и создания окружения
в песочнице (переменные, функции и т.д.).
• Были созданы транзиты – патчи для библиотек работающих с DOM, чтоб
сделать верхнеуровневое прокидывание селекторов на основную страницу

12. Проблемы
• Большая проблема реализовать
кроссбраузерный транзит для window.location.
Возможно он и не нужен...
• Для каждой библиотеки работающей с DOM
(jQuery, Prototype, MooTools) нужно писать свой
транзит.

14. Время демок!
https://github.com/a-ignatov-parc/Marrow#demos