Emmet как платформадля инструментовСергей Чикуёнок | http://emmet.io
Что такое Emmet?• Инструмент для ускорения работы с HTML и CSS• Плагин для множества популярных редакторов кода• Написан н...
Что такое Emmet?
Развитие инструментов дляфронт-энд разработчиков
1990-е: Microsoft FrontPage
2000-е: Ъ-кодеры пишут в «Блокноте»
2010-е: Sublime Text,WebIDE
Sublime Text WebIDE• быстрый• красивый• классный API• удобный автокомплит• кроссплатформенный• богатый функционал• много х...
С точки зрения фронт-эндразработчика:Sublime Text WebIDE• только раскрашивает HTML и CSS• API работает с обычным текстом• ...
Код по-прежнему долго писатьи тяжело редактировать
Выход?
Препроцессоры!
Преимущества:• Короткая нотация, быстрее писать• Читабельность• Синтаксический сахар• Шаблонизация, связь с внешними данными
Недостатки:• Сложная отладка кода• Не решают проблему редактирования существующегокода• Не всегда можно использовать на кл...
Чего хочется:• писать меньше кода• работать в любимом редакторе• разрабатывать инструменты на JavaScript• работать с HTML ...
Emmet – платформа дляинструментоввеб-разработчика
Emmet как платформа• модульная архитектура• написан на JavaScript• поддержка большого количества редакторов•поддержка расш...
Расширения Emmet• Обычные .js и .json-файлы в специальной папке• Загружаются автоматически• Могут дополнять или переопреде...
Основные модули• разбор и преобразование аббревиатур• поиск пар тэгов в коде• работа с HTML-тэгами и CSS-правилами через D...
Как из аббревиатурполучается HTML-кодРазбор аббревиатуры в деревоНормализация дереваФормирование текстового результатаГото...
Как из аббревиатурполучается HTML-кодРазбор аббревиатуры в деревоНормализация дереваФормирование текстового результатаГото...
emmet.exec(function(require, _) {require(filters).add(my_filter, function process(tree, profile) {_.each(tree.children, fu...
var tag = emmet.require(htmlMatcher).tag(hello <em>world</em>, // текст, где искать тэг12 // позиция, с которой начать пои...
emmet.exec(function(require, _) {require(actions).add(rename_tag, function(editor) {var tag = require(htmlMatcher).tag(edi...
Интерфейс для редактированияHTML и CSS(EditTree)• Интерфейс для высокоуровнего редактирования HTML-тэгов и CSS-правил• Пох...
var tree = emmet.require(xmlEditTree).parse(<tag attr1="val1" attr2="val2">);tree.value(attr1); // val1tree.get(attr1).ran...
var tree = emmet.require(cssEditTree).parse(div {color: red});// можно использовать метод parseFromPosition(content, pos)/...
Только вы сами можетесоздавать лучшиеинструменты
Вопросы?serge.che@gmail.comhttp://emmet.io@emmetio
Upcoming SlideShare
Loading in …5
×

Emmet - инструмент для веб-разработчика

788
-1

Published on

by Sergej Chikuyonok on Frontend DEV Conf'13
http://bit.ly/Sergey_Chikuyonok

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
788
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Emmet - инструмент для веб-разработчика

  1. 1. Emmet как платформадля инструментовСергей Чикуёнок | http://emmet.io
  2. 2. Что такое Emmet?• Инструмент для ускорения работы с HTML и CSS• Плагин для множества популярных редакторов кода• Написан на чистом JavaScript, легко встраивается
  3. 3. Что такое Emmet?
  4. 4. Развитие инструментов дляфронт-энд разработчиков
  5. 5. 1990-е: Microsoft FrontPage
  6. 6. 2000-е: Ъ-кодеры пишут в «Блокноте»
  7. 7. 2010-е: Sublime Text,WebIDE
  8. 8. Sublime Text WebIDE• быстрый• красивый• классный API• удобный автокомплит• кроссплатформенный• богатый функционал• много хорошо интегрированныхинструментов• удобная отладка
  9. 9. С точки зрения фронт-эндразработчика:Sublime Text WebIDE• только раскрашивает HTML и CSS• API работает с обычным текстом• Java• медленная• API позволяет работать с AST, ноэто очень сложно• разработчики акцентируютвнимание на других вещах
  10. 10. Код по-прежнему долго писатьи тяжело редактировать
  11. 11. Выход?
  12. 12. Препроцессоры!
  13. 13. Преимущества:• Короткая нотация, быстрее писать• Читабельность• Синтаксический сахар• Шаблонизация, связь с внешними данными
  14. 14. Недостатки:• Сложная отладка кода• Не решают проблему редактирования существующегокода• Не всегда можно использовать на клиенте
  15. 15. Чего хочется:• писать меньше кода• работать в любимом редакторе• разрабатывать инструменты на JavaScript• работать с HTML и CSS как с DOM
  16. 16. Emmet – платформа дляинструментоввеб-разработчика
  17. 17. Emmet как платформа• модульная архитектура• написан на JavaScript• поддержка большого количества редакторов•поддержка расширений
  18. 18. Расширения Emmet• Обычные .js и .json-файлы в специальной папке• Загружаются автоматически• Могут дополнять или переопределять основнойфункционал• Одинаково работают в разных редакторах
  19. 19. Основные модули• разбор и преобразование аббревиатур• поиск пар тэгов в коде• работа с HTML-тэгами и CSS-правилами через DOM-подобный интерфейс
  20. 20. Как из аббревиатурполучается HTML-кодРазбор аббревиатуры в деревоНормализация дереваФормирование текстового результатаГотовый код
  21. 21. Как из аббревиатурполучается HTML-кодРазбор аббревиатуры в деревоНормализация дереваФормирование текстового результатаГотовый кодпрепроцессорыпостпроцессорыфильтры
  22. 22. emmet.exec(function(require, _) {require(filters).add(my_filter, function process(tree, profile) {_.each(tree.children, function(item) {// пример для HTMLitem.start = < + item.name() + >;item.end = </ + item.name() + >;// пример для Jadeitem.start = item.name() + n;item.padding = t;// преобразуем уже существующий результатitem.start = item.start.replace(/</g, &lt;).replace(/>/g, &gt;);// рекурсивное преобразование всего дереваprocess(item, profile);});});});Пример фильтраdiv>em|my_filter
  23. 23. var tag = emmet.require(htmlMatcher).tag(hello <em>world</em>, // текст, где искать тэг12 // позиция, с которой начать поиск);tag.open = { // открывающий тэгname: em,selfClose: false, // является ли тэг самозакрывающимсяrange: new Range() // {start: 6, end: 10}};tag.close = {...}; // закрывающий тэгtag.innerRange = new Range(); // {start: 10, end: 15}tag.innerContent = function(){}; // worldtag.outerRange = new Range(); // {start: 6, end: 20}tag.outerContent = function(){}; // <em>world</em>tag.range = innerRange || outerRange;tag.content = innerContent || outerContent;Получение HTML-тэга
  24. 24. emmet.exec(function(require, _) {require(actions).add(rename_tag, function(editor) {var tag = require(htmlMatcher).tag(editor.getContent(), editor.getCaretPos());if (tag) {var newName = editor.prompt(Введите новое имя тэга);if (tag.close) {editor.replaceContent(</ + newName + >,tag.close.range.start,tag.close.range.end);}editor.replaceContent(< + newName,tag.open.range.start,tag.open.range.start + tag.open.name.length + 1);}});});Пример: переименование тэга
  25. 25. Интерфейс для редактированияHTML и CSS(EditTree)• Интерфейс для высокоуровнего редактирования HTML-тэгов и CSS-правил• Похож на DOM• Предоставляет доступ ко всем атрибутам/свойствамконтейнера, а также их диапазонам•Учитывает форматирование кода
  26. 26. var tree = emmet.require(xmlEditTree).parse(<tag attr1="val1" attr2="val2">);tree.value(attr1); // val1tree.get(attr1).range(); // {start: 5, end: 17}tree.value(attr1, Hello world);tree.remove(attr2);tree.add(a, b, 0);tree.source; // <tag a="b" attr1="Hello world">Редактирование HTML(xmlEditTree)
  27. 27. var tree = emmet.require(cssEditTree).parse(div {color: red});// можно использовать метод parseFromPosition(content, pos)// для получения правила из документаtree.value(color, black);tree.value(position, relative);tree.source; // div {color: black;position: relative;}Редактирование CSS(cssEditTree)
  28. 28. Только вы сами можетесоздавать лучшиеинструменты
  29. 29. Вопросы?serge.che@gmail.comhttp://emmet.io@emmetio
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×