Techniques of building layered interfaces · 2019-04-26 · технологии: HTML, CSS, JS...

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: sergeymorkovkin@gmail.com

Portfolio: http://morkovkin.info

Skype: sergeymorkovkin

Viber: +38 (050) 445-01-45

Сергей Морковкин