Techniques of building
layered interfacesON THE EXAMPLE OF A WEB-BASED CODE EDITOR
О спикере
• Мне 33 года, из которых 16 лет работаю в IT
• Двукратный победитель UA Web Challenge
• Впоследствии - судья чемпионата UA Web Challenge
• Работал с десятками заказчиков, среди которых - Microsoft Skype
• В настоящем – Team Lead в компании Lohika (Киев)
Ace editor Google Maps
LAYER #3
LAYER #2
LAYER #1
Коротко об истории проекта…3 работающих
прототипа
Использование
design mode
Релиз Ace Editor
в 2012…
Постановка задачи
Создать редактор кода,
поддерживающий W3C + IE
Учесть все проблемы,
выявленные в прототипах
Использовать только базовые
технологии: HTML, CSS, JS
Максимально оптимизировать
скорость и память (DOM)
Реализовать поддержку
multiple cursors / selections
Реализовать smart indent
(select + tab, shift + tab)
• Поддерживается всего 1 курсор (сразу не подходит)
• Selection API различается в браузерах (W3C vs IE)
• Невозможно управлять видом курсора и миганием
• Сложно получать события мыши за пределами IFRAME
Придется написать и отладить
много кода…
Задача №1: Рендеринг выделения
+ оптимизация работы с DOM-элементами
Задача №2: Рендеринг текста
Задача №3: Полосы прокрутки
Задача №4: Выделение мышью
Задача №5: Целостность иллюзии
Задача №6: Объединение курсоров
Задача №7: Авто-прокрутка View Frame
Задача №8: Обработка кликов
Демонстрация проекта
в текущем состоянии:
http://morkovkin.info/edit
o Нет других зависимостей кроме HTML5, CSS3, JavaScript
o Чистый, объектно-ориентированный код, продуманный API
o Весь код редактора помещается в 5.6 Kb (min + gzip)
o Работает в последних версиях браузеров (tested FF, Chrome)
o Оптимизирован по скорости и использованию памяти
o Содержит в себе фреймворк выделения, написанный «с нуля»
o Потенциально может загружать очень больше файлы (not tested)
o Поддерживает множественные курсоры и smart indent
https://github.com/sergeymorkovkin/firecode
• Интегрировать browserify + livereload
• Переписать проект на EcmaScript 6
• Сделать cut / copy / paste
• Сделать undo / redo
• Подсветка синтаксиса
• Сворачивание кода
• Подсветка парных скобок
• Автозаполнение
Задавайте
вопросы
Мои контакты
Facebook: https://www.facebook.com/sergey.morkovkin.5
LinkedIn: https://ua.linkedin.com/in/sergeymorkovkin
Email: [email protected]
Portfolio: http://morkovkin.info
Skype: sergeymorkovkin
Viber: +38 (050) 445-01-45
Сергей Морковкин