JavaScript головного мозга. История одного фреймворка презентация

Содержание

СБИС – сеть деловых коммуникаций более миллиона клиентов 10 центров разработки более 1000 программистов

Слайд 1JavaScript головного мозга.
История одного фреймворка
Зуев Дмитрий / Ведущий инженер-программист


Слайд 2СБИС – сеть деловых коммуникаций


более миллиона клиентов
10 центров разработки
более 1000 программистов



Слайд 3online.sbis.ru


Слайд 4online.sbis.ru


Слайд 5online.sbis.ru


Слайд 6online.sbis.ru


Слайд 7online.sbis.ru


Слайд 8online.sbis.ru


Слайд 9online.sbis.ru



Слайд 10Разделение ответственности


Слайд 11Глобальная компонентизация


Слайд 12Макет карточки аккаунта
в биллинге (2012 год)




Слайд 13Макет. Апрель 2017




Слайд 14Макет. Наши дни






Слайд 15Спецификация




Слайд 16Разделяй и властвуй


Слайд 17Как 2 капли




Слайд 18Но такие разные




Слайд 19Мы строим интерфейс из
кубиков




Слайд 20Нужны контракты






Слайд 21Модно? Молодежно? Хайпово?







Слайд 22Модно? Молодежно? Хайпово?








Слайд 23Модно? Молодежно? Хайпово?








Слайд 24Модно? Молодежно? Хайпово?









Слайд 25Никто не знает
как собирать приложения









Слайд 26Как сделать веб-приложение
из 5000 окон и 1000 программистов?




Слайд 27No comment…










Слайд 28Первые контролы




Слайд 2910 отличий?




Слайд 30Последствия




Слайд 31Последствия




Слайд 32Последствия




Слайд 33Server render





Слайд 34Корень зла!






Слайд 35Светлое сегодня






Слайд 36Все гениальное – просто (с)






Слайд 37Аспекты




Слайд 3810 отличий?




Слайд 39Аспекты




Слайд 40Аспекты






Слайд 41Время интерфейсов и абстракций








Слайд 42Время интерфейсов и абстракций







Слайд 43TreeGrid







Слайд 44TreeGrid







HTML


Слайд 45TreeGrid







HTML
User data


Слайд 46TreeGrid







HTML
User data
???


Слайд 47Controller








работа с источником данных
Удаление, добавление, редактирование записей по месту


Слайд 48Controller








настройка порядка колонок

работа с источником данных: Удаление, добавление, редактирование записей по

месту


Слайд 49Controller








раскрытие узлов иерархии

работа с источником данных: удаление, добавление, редактирование записей по

месту; настройка порядка колонок


Слайд 50Controller








бесконечная загрузка по скроллу

работа с источником данных: удаление, добавление, редактирование записей

по месту; настройка порядка колонок; раскрытие узлов иерархии;


Слайд 51Controller








работа с выделением

работа с источником данных: удаление, добавление, редактирование записей по

месту; настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу;


Слайд 52Controller








drag&drop

работа с источником данных: удаление, добавление, редактирование записей по месту; настройка

порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу; работа с выделением


Слайд 53Controller








поддержка swipe

работа с источником данных: удаление, добавление, редактирование записей по месту;

настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу; работа с выделением; drag&drop;


Слайд 54Controller








группировка

работа с источником данных: удаление, добавление, редактирование записей по месту; настройка

порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу; работа с выделением; drag&drop; поддержка swipe;


Слайд 55Controller








выгрузка, печать

работа с источником данных: удаление, добавление, редактирование записей по месту;

настройка порядка колонок; раскрытие узлов иерархии; бесконечная загрузка по скроллу; работа с выделением; drag&drop; поддержка swipe; группировка;


Слайд 56Это контроллер?!


Слайд 57Делай солидно!



Слайд 58Автотесты


Слайд 59Оно всегда работает!


Слайд 60Агрегация+композиция


Слайд 61Пример разметки




Слайд 62Базовые раскладки



Слайд 63Сотни реестров



Слайд 64Сотни документов



Слайд 65Посмотрим в код Master.Detail




Слайд 66А теперь код того, кто использует




Слайд 67А теперь код того, кто использует




Слайд 68Single Page Application




Слайд 69Render на клиенте





Render на сервере
Изоморфный код


Слайд 70И получили мы







изоморфность
интерфейсоориентированность
SOLIDность


Слайд 72Спасибо за внимание!
Зуев Дмитрий e-mail: dv.zuev@tensor.ru
sbis.ru


Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика