1

Десктоп-подобные веб-приложения

Владимир Колесников

Веб-приложения

ПриложенияСтраницы

Веб-приложения

ПриложенияСтраницы

Веб-приложения

ПриложенияСтраницы

Веб-приложения

ПриложенияСтраницы

Веб-приложения

ПриложенияСтраницы

Паттерны

Ctrl+A ↑ ↓

Паттерны

Drag & Drop, copy & paste

Паттерны

Паттерны

Паттерны

Анатомия (идеал)

HTML

CSS

JavaScriptДанные

Представление

Управление

Анатомия+AJAX

HTML

CSS

JavaScriptДанные

Представление

УправлениеПредставлениеДанные

Анатомия+AJAX (реальный мир)

HTML

CSS

JavaScriptДанныеПредставлениеУправление

ПредставлениеУправление

УправлениеПредставлениеДанные

Убираем HTML

JavaScript

JavaScript

JavaScriptДанные

Представление

Управление

Views

+ CSS, CSS, CSS

Views

SplitView, Toolbar, Slider, Table, Radio, Label….

LayoutНачальное положение и якоря (anchors)

Left = 100px, top = 200px, width = 300px, height = 24 px

Anchors = left, right, bottom

20

Layout

21

22

Темы• Набор ресурсов– Бэкграунды– Цвета– Картинки– Стили

Темы23 px

6 px 12 px

12 px

Средства• Управление зависимостями + cборка• Тестирование• Разработческий сервер• Генераторы, расширения редакторов• Дизайнер интерфейсов*

Мифы• Не работает в старых браузерах• Слишком много кода, долго грузится• Похоже на мак

Мифы• Не работает в старых браузерах• Слишком много кода, долго грузится• Похоже на мак

31

Владимир Колесников• http://ukijs.org• voloko@gmail.com• twitter.com/voloko• github.com/voloko