FrontTalks #1: Василий Аксёнов – Послушные лэйауты

Ни одна из используемых сейчас технологий реализации раскладки элементов на странице изначально для этого не предназначалась. Какие же технологии для этого предназначены, какие лучше и чем плохи старые?

Transcript

1. Разработчик интерфейсов Послушные лэйауты Василий Аксёнов
2. Лэйаут (от англ. layout) — расположение, разметка, раскладка 2
3. Система позиционирования Тип отображения Влияние на раскладку 3
4. 3 основных системы позиционирования 4
5. 6 основных типов отображения 5
6. И взаимодействие между ними 6
7. Системы позиционирования
8. С высокой степенью самоорганизации С низкой Виды систем позиционирования 8
9. <div style="position: absolute;"> </div> <div style="position: absolute;"> <div style="position: absolute;"></div> </div> С низкой степенью самоорганизации 9
11. Плюсы-минусы • Плюсы – Стабильность™ • Минусы – Всё надо делать самому – Без JS многого не сделать 11
12. Текст перед кодом: <div> <div style="float: right;"></div> <span>...</span> <div> <span>...</span> </div> </div> <div> <span>...</span><span>...</span> </div> С высокой степенью самоорганизации 12
14. Плюсы-минусы • Плюсы – Можно делать магические вещи – Делать их просто • Минусы – Непредсказуемоесть – Сложно поддерживать 14
15. Лэйаут и поток
16. <div class="panel"> <button>Create</button> <button>Edit</button> <button>Delete</button> <input type="checkbox"> <label>Delete forever</label> </div> Панель 16
17. 17 Create Edit Delete Delete forever
18. <div class="mover"> <select> <option>Inbox</option> <option>Outbox</option> ... </select> <button>Move</button> </div> Компонент 18
19. 19 Inbox ▾ Move
20. <div class="panel"> ... <button>Edit</button> <div class="mover"> ... </div> <button>Delete</button> ... </div> Интеграция 20
21. 21 17 Create Edit Delete Delete forever Inbox ▾ Move
22. 22 17 Create Edit Delete Delete forever Inbox ▾ Move
24. Субъекты контекста являются объектами контекста и наоборот 24
25. Боксы в потоке ведут себя в соответствии с контекстом 25
26. Создание контекста Лэйаут и поток
27. ... <body> Text </body> ... Текст 27
28. 28 Text
29. 29 Text
30. ... <body> Text <div>...</div> </body> ... Инлайн + блок 30
31. 31 Text
32. 32 Text
33. 33 Text
34. Решение проблем
35. Явное разделение субъекта и объекта контекста 35
36. <vbox> <box>...</box> ... </vbox> <hbox> <box>...</box> ... </hbox> XUL 36
38. Родитель решает, как должны вестя себя все его дети 38
39. Послушные дети — послушные лэйауты 39
40. CSS3 Flexbox CSS3 Grid CSS Grid-фреймворки Ещё какие-нибудь фреймворки ;) Технологии 40
41. Разработчик интерфейсов outring@yandex-team.ru @outring Спасибо Василий Аксёнов