Сборка фронтенда с помощью Gulp и Browerify.

1. Browserifyдоставка JS
М.В. Бакулин 1/17
быстро, дёшево, надёжно

2. Традиционный способ добавления JS 2/17
© http://www.technology-ebay.de/the-teams/mobile-de/blog/packing-the-web-like-a-boss.html
Недостаток #1: порядок имеет значение

3. Зависимости 3/17
Недостаток #2: зависимости плагинов
vlager.edu.ru:

4. Область видимости 4/17
Недостаток #3: область видимости (scope)
Немедленно вызываемые функции (Immediately-Invoked Function Expression) — IIFE
Передача параметров в немедленно вызываемую функцию
“Поднятие” (hoisting)
Совет эксперта:

5. Шаг вперёд: шаблон модуль 5/17
Суть этого паттерна заключается с создании локальной
области видимости, в которой определяются локальные,
«приватные» переменные и функции. Сама же
немедленно вызываемая функция возращает объект с
методами, использующими приватные переменные и
функции.

6. Способ получше - AMD модули 6/17
Самая распространённая реализация — RequireJS
Асинхронная загрузка

7. Как бы сделал Node.js - Browserify 7/17
— пакетный менеджер node.js
● Модули имеют своё пространство имён (namespace)
— быстро растущее собрание стандартов JS для разработки в областях, выходящих за рамки
традиционного использования внутри браузера
● Согласно CommonJS модули определяются присваиванием
объекта к module.exports

8. Доставка JS при помощи Browserify 8/17
https://nodejs.org/api/modules.html#modules_file_modules

9. Browserify и Watchify 9/17
Кто поможет автоматизировать всё на свете?
Это команда считывает ваш main.js и
пишет его содержимое в bundle.js
(разумеется, включая пакетные
зависимости).
Но! Каждый раз жать комманду в консоли?
Watchify поможет!

10. Gulp <3 Browserify 10/17
Простой вариант
Добавим “мяска”
Запуск

11. Browserify vs RequireJS
11/17
Недостатки:
● Визуально более громоздкий синтаксис
● Не лучшее решение для бекэнда
● Плохо разрешает циклические ссылки
● Lazy load делать сложнее
● Нужен nodeJS
● Не все фронтенд библиотеки есть в npm

12. Bower - пакентный менеджер фронтэнда
12/17
Установка
Поиск
Проверка актуальных версий пакетов

13. Мы освоили новый модный
инструмент для фронтэнда!
13/17
но...

14. Это уже устарело
14/17

15. 15/17

16. Передовая: webpack и модули ES6
Смесь CommonJs и AMD (webpack)
ES6 модуль
Вызов ES6 модуля
16/17

17. Спасибо
17/17