Мой доклад о создании yeoman генератора своими руками на митапе 4front. Рассказ о том, как yeoman.io упрощает жизнь, спасает от рутины и экономит время. Обзор технологии и типичных граблей.

1. Yeoman Generator своими руками
• Yeoman-генератор: что же это
такое?
• Зачем нужны yeoman-генераторы и
не лучше ли по старинке?
• Как написать свой генератор, с чего
начать, экскурс по граблям
• Демо моего лунапарка.

2. Мои фанаты часто
спрашивают меня:
«С чего ты взял, что мы
твои фанаты?»
«Кто ты вообще такой?»

3. Борис Мосунов
Фрилансер,
Веб-разработчик.
Чаще всего разрабатываю
кастомные сайты на WordPress.
Разработал свой фреймворк,
позволяющий писать темы и
плагины для WordPress в парадигме
MVC/OOP
А что бы делать это было проще я
разработал свой yeoman generator

4. Проблема #1
Нудная работа

5. Из чего состоит труд
программиста?
Из бесконечной
череды принятия
решений

6. Из чего состоит труд
программиста?
Из бесконечной
череды принятия
решений

7. Какие решения мы принимаем?

8. Какие решения мы принимаем?
Гениальный код
для решения
нетривиальной
задачи

9. Какие решения мы принимаем?
Гениальный код
для решения
нетривиальной
задачи
Я уже делал такое,
ща поищем,
ctrl+c, ctrl+v,
осталось кое-что
переименовать

10. Как мы себя при этом чувствуем?

11. Я - повелитель кода…

12. ctrl + c ctrl + c
ctrl + v ctrl + v

13. Как в реальности?
Гениальный код
для решения
нетривиальной
задачи
Я уже делал такое,
ща поищем,
ctrl+c, ctrl+v,
осталось кое-что
переименовать
Хорошо если хотя бы так

14. Рутина утомляет и демотивирует

15. Проблема #2
Слишком много няшек
и все надо сконфигурировать

17. Корневая папка моего
среднестатистического
проекта

18. Проблема #3
Конкурентоспособность

23. 15 ноября 2014 - oDesk: больше не будет демпинга по $1/час!!!

28. Вывод: чтобы конкурировать,
надо успевать больше за меньшее время

29. Спасение - yeoman.io

30. A yeoman was a social
class in late medieval to
early modern England. In
early recorded uses, a
yeoman was an attendant
in a noble household.
Wikipedia

31. THE WEB'S
SCAFFOLDING TOOL
FOR MODERN
WEBAPPS
yeoman.io

32. scaffolding - строительные леса

33. yeoman - утилита для генерации пустого проекта
по заданному сценарию
yeoman generator - программная реализация
такого сценария генерации пустого проекта
Запуск: yo <generator>
yo - сокращение от yeoman,
название исполняемого файла
yeoman subgenerator - вспомогательный сценарий
по генерации модулей, блоков, моделей и т.д.
Запуск: yo <generator>:<subgenerator> <name>

34. scaffolding
tool
build
system
package
manager
YO stack

35. Workflow

36. Demo
npm install -g yo bower grunt-cli gulp
npm install -g generator-webapp
mkdir my-yo-project
cd my-yo-project
yo webapp
http://yeoman.io/learning/index.html

38. Готовых генераторов много!

39. Demo
npm install -g yo bower grunt-cli gulp
npm install -g generator-webapp
mkdir my-yo-project
cd my-yo-project
yo webapp
http://yeoman.io/learning/index.html

40. webapp
npm install -g yo bower grunt-cli gulp
npm install -g generator-webapp
mkdir my-yo-project
cd my-yo-project
yo webapp
http://yeoman.io/learning/index.html

41. Angular.js
npm install -g yo bower grunt-cli gulp
npm install -g generator-angular
mkdir my-yo-project
cd my-yo-project
yo angular
http://yeoman.io/learning/index.html

42. Backbone.js
npm install -g yo bower grunt-cli gulp
npm install -g generator-backbone
mkdir my-yo-project
cd my-yo-project
yo backbone
http://yeoman.io/learning/index.html

43. MEAN.js
npm install -g yo bower grunt-cli gulp
npm install -g generator-meanjs
mkdir my-yo-project
cd my-yo-project
yo meanjs
http://yeoman.io/learning/index.html

44. Chrome Extension
npm install -g yo bower grunt-cli gulp
npm install -g generator-chrome-extension
mkdir my-yo-project
cd my-yo-project
yo chrome-extension
http://yeoman.io/learning/index.html

45. …но, допустим, хочется свой… YO генератор…

46. Как хороший 3D-принтер должен уметь
распечатать другой 3D принтер…
…так должен быть и YO-генератор,
который генерирует YO-генератор

47. npm install -g generator-generator
yo generator

48. Генератор с нуля подробно здесь:
http://yeoman.io/authoring/

49. npm install -g generator-generator
yo generator
yo generator:subgenerator <name>
npm link
yo my-generator
npm -g unlink generator-my-generator
Демо: YO-генератор с нуля

50. Структура папок
генератор = сценарий + шаблоны кода и конфигов
директория генератора
шаблоны кода и конфигов
сценарий генератора

51. Сценарий генератора
инициализация
чего изволите?
генерация кода,
разрешение
конфликтов,
запись на диск
установка:
npm install
bower install

52. require(‘inquirer’)
require(‘mem-fs’)
require(‘underscore.string’)

53. inquirer - библиотека для создания консольного «опросника»

54. inquirer.js - типы инпутов:
Confirm - { type: "confirm" }
Input - { type: "input" }
Password - { type: "password" }

55. inquirer.js - типы инпутов:
List - { type: "list" }
Raw List - { type: "rawlist" }

56. inquirer.js - типы инпутов:
Expand - { type: "expand" }

57. inquirer.js - типы инпутов:
Checkbox - { type: "checkbox" }

58. inquirer.js - структура вопроса:

59. mem-fs - файловая система «in memory»
во время работы сценария, все изменения
файловой системы пишутся в память.
по окончании работы сценария
идет сравнение файлов на диске и в памяти
и срабатывает механизм разрешения конфликтов
файловая система у YO - синхронная
Работает с двумя папками:
generator.templatePath()
generator.destinationPath()

60. underscore.string
capitalize("foo Bar") => "Foo Bar"
decapitalize("Foo Bar") => "foo Bar"
camelize("moz-transform") => "mozTransform"
classify("some_class_name") => "SomeClassName"
underscored("MozTransform") => "moz_transform"
dasherize("MozTransform") => "-moz-transform"
humanize(" capitalize dash-CamelCase_underscore trim ")
=> "Capitalize dash camel case underscore trim"
slugify("Un éléphant à l'orée du bois")
=> "un-elephant-a-l-oree-du-bois"

61. Gruntfile API
gruntfile.insertConfig( name, config )
gruntfile.registerTask( name, tasks )
npm & bower API
generator.npmInstall()
generator.bowerInstall()
generator.installDependencies()

62. chalk + yosay

63. Генераторы,
сабгенераторы и
другие генераторы

64. http://yeoman.io/authoring/composability.html
this.composeWith('backbone:route', {
options: {
rjs: true
}
});
Генератор может использовать
другой генератор или сабгенератор
А стоит ли?
свои сабгенераторы - да
чужие генераторы - нет

65. Демо: Мой лунапарк

66. Грабли

67. Грабли
mem-fs:
Если использовать composeWith(),
учтите, что у каждого генератора своя
файловая система в памяти.

68. Грабли
mem-fs:
На данный момент yeoman использует
параллельно два api:
• новое (this.fs.)
• и legacy (this.).
Это порождает путаницу.
Лучше сделать обертку, как я :)

69. Грабли
Каждой отдельной фиче - свой сабгенератор,
иначе конструкции inquirer.js начинают
напоминать многотомные текстовые квесты.
Как у меня :(

70. Выводы
1. Готовыми генераторами стоит пользоваться, это экономит
время, силы и нервы.
2. Изучение новых фреймворков стоит начинать с поиска
генераторов
3. Написание своего генератора отнимает много сил и времени -
программирование в квадрате. Поэтому писать его стоит только
если вы точно знаете что впереди у вас очень много
повторяющейся работы.
4. Если вы написали свой фреймворк, продвинуть его получится
значительно быстрее, если сделать для него yeoman-generator
5. Наличие генератора помогает поддерживать единообразие кода
и следование стайлгайдам.

71. Задавайте свои вопросы!
Борис Мосунов
borix@tut.by
skype: boris.mossounov
fb: mossounov
tw: @chaykaborya
anotherguru.me
Мой сайт,
сделанный на моем фреймворке
с помощью моего yeoman генератора