«Представление, что этот фреймворк устарел, ошибочно»: Андрей Грицевич (Solar Security) про Ext JS
- вторник, 16 января 2018 г. в 03:15:09
javascript
https://habrahabr.ru/company/jugru/blog/346692/
В онлайн-трансляции нашей конференции HolyJS мы подходили к стендам спонсоров и расспрашивали их о JavaScript-разработке. На стенде Solar Security Андрей gritsev Грицевич (руководитель разработки решения Solar Dozor) рассказал нам про используемый фреймворк Ext JS — и мы подумали, что его слова могут быть интересны не только зрителям трансляции, но и читателям Хабра, не работавшим с этим фреймворком. Поэтому расшифровали этот диалог и, немного отредактировав, публикуем здесь.
— Не все знают Solar Security, поэтому вступительный вопрос: чем занимается компания, и в каких продуктах вы используете JavaScript?
— Наша компания — это российский вендор-разработчик программного обеспечения и сервис-провайдер в сфере информационной безопасности. Из всего спектра наших продуктов для JavaScript-разработчиков, наверное, интересны два: IGA-платформа Solar inRights и DLP-система Solar Dozor.
— А чем именно они интересны с точки зрения JavaScript, что там внутри?
— Интерфейс этих продуктов построен на JS-фреймворке Ext JS. Наверное, молодое поколение сейчас немного скривилось, поскольку в сообществе есть представление, что этот фреймворк устарел. Но на самом деле это не так. Он очень активно развивается, и для сложного интерфейса, который нужен энтерпрайз-заказчикам, на мой взгляд, подходит идеально.
Его преимущество в том, что он предлагает большую компонентную базу, которая практически снимает необходимость в написании компонентов своими силами. Мы берём гриды и таблицы в уже готовом виде, а затем частично кастомизируем их. Это существенно ускоряет разработку.
То же самое касается очень удобной темизации — заказчики часто хотят кастомизировать визуальное решение интерфейса, и Ext JS позволяет быстро и без проблем модифицировать существующие продукты под их требования.
— Хочется подробностей: а есть, например, какие-то встроенные графики?
— Конечно. По-моему, несколько лет назад Sencha (владельцы кода Ext JS) купили библиотеку Raphaёl, и теперь графики в Ext JS — одни из самых навороченных в индустрии. Есть возможность генерить их и в Canvas, и в SVG; есть трёхмерные графики, есть бары, линейные графики, аппроксимация — то есть практически всё, что может потребоваться. Хотя наши дизайнеры умудряются придумать вещи, которых даже там нет. Но есть система классов. Вы наследуетесь, меняете те вещи, которые нужны именно вам: рендереры кривых и точек, цвета, градиенты, тултипы. Если вам и этого не хватает, можно присоединить D3.js.
— По поводу «устаревшего» Ext JS: а сколько времени вы его уже используете, и насколько сильно он изменился за это время?
— Используем уже 6-7 лет, примерно с 2010 года. Начинали с третьей версии Ext JS, сейчас уже шестая. Поменялось всё очень сильно, третья версия фактически была системой классов Java-подобного стиля, затем в четвёртой версии появилась модель MVC. Пятая и шестая версии — это уже полноценная MVVM и объединение фреймворков для мобильного приложения и для десктопных браузеров.
В последней версии появились двунаправленные биндинги, View-модели, нативная поддержка ECMAScript 6, своя система сборки, которая одной командой позволяет вам собрать приложение — все CSS, ресурсы, S CCS и так далее.
Если вам нужно создать новое приложение, вы можете за минуту-две сгенерить его костяк, начать с базовой темы и за день накидать прототип или даже работающую систему, состоящую из какого-то количества гридов, панелей, таблиц. За день-два-три можно прототипировать достаточно сложную систему, быстро написать бэкенд, например, на Node, и пойти с этим прототипом к заказчику или инвестору.
— Из того, что появилось за последнее время — было ли что-то
наиболее критичное для вас, после чего вы поняли, что вам становится удобнее
жить?
— Я бы назвал биндинги. В Ext JS каждый компонент является отдельным классом, отдельным файлом. И двунаправленные биндинги позволяют писать эти компоненты, как правило, в декларативном стиле. Не нужно писать функции-обработчики данных, вы просто создаёте связи в шаблонном виде — очень наглядно и очень коротко. Выстраивание связей между компонентами стало настолько удобным, что уже перешло из разряда программирования в разряд конструирования.
Вы просто рисуете в своей голове систему компонентов из связей, layouting. Все эти взаимосвязи занимают в коде очень мало места. И потом смотреть на этот код и привлекать других разработчиков к поддержке становится заметно легче. Если речь идёт о какой-то базовой функциональности, класс занимает буквально 15 строчек кода — и это уже полноценный компонент, например, таблица.
К нам на этой конференции подходили участники, имевшие опыт работы с Ext JS, и их оказалось не так мало — человек 20-30. Из них процентов 80% работали с Ext JS полноценно, то есть год-полтора, и они очень довольны этим фреймворком. Для своих задач, для построения энтерпрайз-систем, это очень крутая штука.
посмотреть в полном размере
— Насколько понимаем, вы делаете приложения для «крупного энтерпрайза». Вы уже упоминали кастомизацию, а у больших заказчиков обычно повышенные требования к ней. Как именно Ext JS помогает с этим справляться?
— Это очень хороший вопрос, я надеюсь, рано или поздно это станет темой отдельного доклада. У нас несколько примеров использования такого вида вещей. Например, у Solar inRights есть ядро, которое является совершенно полноценным, отдельно работающим продуктом. И есть крупный заказчик, для которого нужно не только кастомизировать цвета и логотипы, но и поменять функциональность, где-то добавить или убрать колонку, создать какое-то новое окошко, систему логина изменить.
В Ext JS есть такая система пакетов — это связка кода и класса, CSS-ресурсов, такое полноценное мини-приложение, и есть наследование этих пакетов. Вы просто берёте базовый пакет ядра, берёте специальное приложение, отдельный пакет для этого нового продукта, наследуете базу и локально, точечно меняете функции, цвета — всё, что хотите. Поскольку Solar inRights разбит на много маленьких компонентов, маленьких классов, можно менять только те из них, которые нужны заказчику. Во время сборки Sencha Cmd (специальная утилита командной строки, которая всё это дело собирает) проходит эти зависимости и собирает нужное для конкретного заказчика решение.
Плюсы этой модели очевидны: можно развивать ядро и автоматически обновлять его у заказчика, не теряя кастомизации.
— А что, если нужно не «сделать одному приложению несколько версий для разных клиентов», а «сделать нескольким приложениям одни и те же особенности»?
— Есть отдельный механизм тем — это такой специальный пакет, в котором есть S CSS, переменные, ресурсы. Вы наследуетесь от базовой темы, меняете базовые переменные (их там штук 10-15) и получаете практически совсем другую тему. Естественно, вы потом это всё усложняете, меняете отступы и бэкграунды, прозрачность и так далее — всё зависит от вашей фантазии. И эту тему можно присоединять к любому Ext-приложению, что очень удобно.
Был один случай: наша основная тема — тёмная, а заказчик захотел светлую, и мы за две недели, меняя фон, бэкграунды и цвета кнопок, сделали светлую тему, заказчик остался доволен.
— Как вообще происходит продакшн приложения, которое написано на Ext JS? У вас это начинается с каких-то дизайн-макетов?
— Нашему DLP-продукту Solar Dozor в целом лет 17, и его ранние версии тоже были написаны на Ext JS, но на более старом. Тогда в разработке интерфейса этого продукта не участвовал ни один дизайнер и ни один аналитик. Я, может, крамольную вещь говорю, но это очень плохо. У нас, разработчиков, всё-таки мозг немного по-другому повёрнут, мы думаем не как обычные люди. Нам кажется очевидным, что тут нужно сделать чекбокс, а тут — кнопку. Но, к несчастью или к счастью, пользователи думают по-другому, и поэтому обязательно нужно нанимать в команду дизайнеров, юзабилити-специалистов.
Поэтому, когда пришло осознание, что даже для энтерпрайзного продукта нужен хороший и продуманный интерфейс, была набрана команда очень серьёзных аналитиков, команда дизайнеров, и они вместе с разработчиками где-то год создавали продукт заново, рисовали варианты дизайна, продумывали юзабилити.
Сейчас мы приезжаем на конференции в арабские страны, показываем интерфейс нашего продукта, и люди в восхищении говорят «как такое может быть», спрашивают, приехали ли мы из Америки, из Калифорнии, и на чём мы это всё писали. Даже жена, когда я работаю дома, проходя мимо, невольно останавливается, смотрит на интерфейс и говорит: «Какие вы молодцы».
А процесс такой: у нас есть бизнес-требования, наши системные аналитики их
анализируют и общаются с дизайнером, тот рисует макеты, используя сформированный Style Guide, а потом уже мы, разработчики, просто берём
это в работу и реализуем. У нас есть обратная связь от дизайнера — он
проверяет, что мы сделали. Конечно, не всегда бывает с первого раза всё хорошо,
но это стандартный рабочий процесс. Со временем мы научились быстро делать то,
чего хочет дизайнер, т.е. так, чтобы в продукте всё было удобно и понятно.
— Спасибо, Андрей!
— Вам спасибо! Мы начнём менять предубеждения разработчиков о том, что Ext JS — устаревший фреймворк. Он современный и очень даже крутой!
- JavaScript
- Блог компании JUG.ru Group
В онлайн-трансляции нашей конференции HolyJS мы подходили к стендам спонсоров и расспрашивали их о JavaScript-разработке. На стенде Solar Security Андрей gritsev Грицевич (руководитель разработки решения Solar Dozor) рассказал нам про используемый фреймворк Ext JS — и мы подумали, что его слова могут быть интересны не только зрителям трансляции, но и читателям Хабра, не работавшим с этим фреймворком. Поэтому расшифровали этот диалог и, немного отредактировав, публикуем здесь.
— Не все знают Solar Security, поэтому вступительный вопрос: чем занимается компания, и в каких продуктах вы используете JavaScript?— Наша компания — это российский вендор-разработчик программного обеспечения и сервис-провайдер в сфере информационной безопасности. Из всего спектра наших продуктов для JavaScript-разработчиков, наверное, интересны два: IGA-платформа Solar inRights и DLP-система Solar Dozor.
— А чем именно они интересны с точки зрения JavaScript, что там внутри?
— Интерфейс этих продуктов построен на JS-фреймворке Ext JS. Наверное, молодое поколение сейчас немного скривилось, поскольку в сообществе есть представление, что этот фреймворк устарел. Но на самом деле это не так. Он очень активно развивается, и для сложного интерфейса, который нужен энтерпрайз-заказчикам, на мой взгляд, подходит идеально.
Его преимущество в том, что он предлагает большую компонентную базу, которая практически снимает необходимость в написании компонентов своими силами. Мы берём гриды и таблицы в уже готовом виде, а затем частично кастомизируем их. Это существенно ускоряет разработку.
То же самое касается очень удобной темизации — заказчики часто хотят кастомизировать визуальное решение интерфейса, и Ext JS позволяет быстро и без проблем модифицировать существующие продукты под их требования.
— Хочется подробностей: а есть, например, какие-то встроенные графики?
— Конечно. По-моему, несколько лет назад Sencha (владельцы кода Ext JS) купили библиотеку Raphaёl, и теперь графики в Ext JS — одни из самых навороченных в индустрии. Есть возможность генерить их и в Canvas, и в SVG; есть трёхмерные графики, есть бары, линейные графики, аппроксимация — то есть практически всё, что может потребоваться. Хотя наши дизайнеры умудряются придумать вещи, которых даже там нет. Но есть система классов. Вы наследуетесь, меняете те вещи, которые нужны именно вам: рендереры кривых и точек, цвета, градиенты, тултипы. Если вам и этого не хватает, можно присоединить D3.js.
— По поводу «устаревшего» Ext JS: а сколько времени вы его уже используете, и насколько сильно он изменился за это время?
— Используем уже 6-7 лет, примерно с 2010 года. Начинали с третьей версии Ext JS, сейчас уже шестая. Поменялось всё очень сильно, третья версия фактически была системой классов Java-подобного стиля, затем в четвёртой версии появилась модель MVC. Пятая и шестая версии — это уже полноценная MVVM и объединение фреймворков для мобильного приложения и для десктопных браузеров.
В последней версии появились двунаправленные биндинги, View-модели, нативная поддержка ECMAScript 6, своя система сборки, которая одной командой позволяет вам собрать приложение — все CSS, ресурсы, S CCS и так далее.
Если вам нужно создать новое приложение, вы можете за минуту-две сгенерить его костяк, начать с базовой темы и за день накидать прототип или даже работающую систему, состоящую из какого-то количества гридов, панелей, таблиц. За день-два-три можно прототипировать достаточно сложную систему, быстро написать бэкенд, например, на Node, и пойти с этим прототипом к заказчику или инвестору.
— Из того, что появилось за последнее время — было ли что-то
наиболее критичное для вас, после чего вы поняли, что вам становится удобнее
жить?
— Я бы назвал биндинги. В Ext JS каждый компонент является отдельным классом, отдельным файлом. И двунаправленные биндинги позволяют писать эти компоненты, как правило, в декларативном стиле. Не нужно писать функции-обработчики данных, вы просто создаёте связи в шаблонном виде — очень наглядно и очень коротко. Выстраивание связей между компонентами стало настолько удобным, что уже перешло из разряда программирования в разряд конструирования.
Вы просто рисуете в своей голове систему компонентов из связей, layouting. Все эти взаимосвязи занимают в коде очень мало места. И потом смотреть на этот код и привлекать других разработчиков к поддержке становится заметно легче. Если речь идёт о какой-то базовой функциональности, класс занимает буквально 15 строчек кода — и это уже полноценный компонент, например, таблица.
К нам на этой конференции подходили участники, имевшие опыт работы с Ext JS, и их оказалось не так мало — человек 20-30. Из них процентов 80% работали с Ext JS полноценно, то есть год-полтора, и они очень довольны этим фреймворком. Для своих задач, для построения энтерпрайз-систем, это очень крутая штука.
посмотреть в полном размере
— Насколько понимаем, вы делаете приложения для «крупного энтерпрайза». Вы уже упоминали кастомизацию, а у больших заказчиков обычно повышенные требования к ней. Как именно Ext JS помогает с этим справляться?
— Это очень хороший вопрос, я надеюсь, рано или поздно это станет темой отдельного доклада. У нас несколько примеров использования такого вида вещей. Например, у Solar inRights есть ядро, которое является совершенно полноценным, отдельно работающим продуктом. И есть крупный заказчик, для которого нужно не только кастомизировать цвета и логотипы, но и поменять функциональность, где-то добавить или убрать колонку, создать какое-то новое окошко, систему логина изменить.
В Ext JS есть такая система пакетов — это связка кода и класса, CSS-ресурсов, такое полноценное мини-приложение, и есть наследование этих пакетов. Вы просто берёте базовый пакет ядра, берёте специальное приложение, отдельный пакет для этого нового продукта, наследуете базу и локально, точечно меняете функции, цвета — всё, что хотите. Поскольку Solar inRights разбит на много маленьких компонентов, маленьких классов, можно менять только те из них, которые нужны заказчику. Во время сборки Sencha Cmd (специальная утилита командной строки, которая всё это дело собирает) проходит эти зависимости и собирает нужное для конкретного заказчика решение.
Плюсы этой модели очевидны: можно развивать ядро и автоматически обновлять его у заказчика, не теряя кастомизации.
— А что, если нужно не «сделать одному приложению несколько версий для разных клиентов», а «сделать нескольким приложениям одни и те же особенности»?
— Есть отдельный механизм тем — это такой специальный пакет, в котором есть S CSS, переменные, ресурсы. Вы наследуетесь от базовой темы, меняете базовые переменные (их там штук 10-15) и получаете практически совсем другую тему. Естественно, вы потом это всё усложняете, меняете отступы и бэкграунды, прозрачность и так далее — всё зависит от вашей фантазии. И эту тему можно присоединять к любому Ext-приложению, что очень удобно.
Был один случай: наша основная тема — тёмная, а заказчик захотел светлую, и мы за две недели, меняя фон, бэкграунды и цвета кнопок, сделали светлую тему, заказчик остался доволен.
— Как вообще происходит продакшн приложения, которое написано на Ext JS? У вас это начинается с каких-то дизайн-макетов?
— Нашему DLP-продукту Solar Dozor в целом лет 17, и его ранние версии тоже были написаны на Ext JS, но на более старом. Тогда в разработке интерфейса этого продукта не участвовал ни один дизайнер и ни один аналитик. Я, может, крамольную вещь говорю, но это очень плохо. У нас, разработчиков, всё-таки мозг немного по-другому повёрнут, мы думаем не как обычные люди. Нам кажется очевидным, что тут нужно сделать чекбокс, а тут — кнопку. Но, к несчастью или к счастью, пользователи думают по-другому, и поэтому обязательно нужно нанимать в команду дизайнеров, юзабилити-специалистов.
Поэтому, когда пришло осознание, что даже для энтерпрайзного продукта нужен хороший и продуманный интерфейс, была набрана команда очень серьёзных аналитиков, команда дизайнеров, и они вместе с разработчиками где-то год создавали продукт заново, рисовали варианты дизайна, продумывали юзабилити.
Сейчас мы приезжаем на конференции в арабские страны, показываем интерфейс нашего продукта, и люди в восхищении говорят «как такое может быть», спрашивают, приехали ли мы из Америки, из Калифорнии, и на чём мы это всё писали. Даже жена, когда я работаю дома, проходя мимо, невольно останавливается, смотрит на интерфейс и говорит: «Какие вы молодцы».
А процесс такой: у нас есть бизнес-требования, наши системные аналитики их
анализируют и общаются с дизайнером, тот рисует макеты, используя сформированный Style Guide, а потом уже мы, разработчики, просто берём
это в работу и реализуем. У нас есть обратная связь от дизайнера — он
проверяет, что мы сделали. Конечно, не всегда бывает с первого раза всё хорошо,
но это стандартный рабочий процесс. Со временем мы научились быстро делать то,
чего хочет дизайнер, т.е. так, чтобы в продукте всё было удобно и понятно.
— Спасибо, Андрей!
— Вам спасибо! Мы начнём менять предубеждения разработчиков о том, что Ext JS — устаревший фреймворк. Он современный и очень даже крутой!