В онлайн-трансляции нашей конференции 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 — устаревший фреймворк. Он современный и очень даже крутой!
Комментарии (47)
evnuh
15.01.2018 18:00+1В теории:
Есть отдельный механизм тем — это такой специальный пакет, в котором есть S CSS, переменные, ресурсы. Вы наследуетесь от базовой темы, меняете базовые переменные (их там штук 10-15) и получаете практически совсем другую тему.
На деле:
Был один случай: наша основная тема — тёмная, а заказчик захотел светлую, и мы за две недели, меняя фон, бэкграунды и цвета кнопок, сделали светлую тему
Надеюсь, всё не так плачевно, просто формулировка такая?) А то ведь две недели нескольких человек на «поменять тему» – это много.
dopusteam
15.01.2018 18:14Возможно, сюда включено общение с заказчиком: поменяли — показали — поменяли…
wispoz
15.01.2018 18:15Для небольшой кастомизации давно есть SenchaThemer, с основными компонентами справляется в реальном режиме.
gritsev
15.01.2018 22:59У нас достаточно сложный продукт с кучей “страниц”, графиков, взаимосвязей и тд. Если честно, только дизайнер потратил около месяца чтобы отрисовать базовые вещи и согласовать их со всеми стейхолдерами. Так что две недели с тестированием и вылавливанием всех мелочей — это очень быстро.
yokotoka
16.01.2018 10:00Смотря что означает «поменять тему». Если сменить цвета — достаточно и SCSS.
У меня был недавно случай, когда заказчик захотел полностью нестандартный вид, отрисованный дизайнером с любовью к шрифтам, типографике, большим пустым пространствам и вообще красивее, чем стандартная тема. И со стандартной темой почти ничего общего этот вид не имел. Вот там пришлось повозиться. Но результат того стоил.
ExtJS очень хорош там, где нужны сложные табличные виды и в целом приложение напоминает скорее 1С, чем сайт (обычно это всякий энтерпрайз) и на любых других фреймворках просто задолбаешься делать все эти сложные гриды (не говоря о поддержке). Гриды там лучшие из всех, что видел. А для типичного веба я его крайне не рекомендовал бы — есть инструменты полегче вроде тех же Vue, Angular, React.
justboris
15.01.2018 20:14+1Столько воды в статье налили, а кода так и не показали.
Продать новый фреймворк просто: показываем код, чтобы было видно, что раньше приходилось писать много некрасивого кода, а теперь будет мало и аккуратно. С возможностью расширения и настройки под себя, разумеется.
wispoz
15.01.2018 21:41А какой вы код хотите увидеть? У sencha довольно обширные примеры, если конкретику скиньте пожелания.
justboris
15.01.2018 22:17Код, с которым станет понятно, чем Ext выгодно отличается от любой библиотеки из этого списка: https://habrahabr.ru/company/ruvds/blog/346090/
Возьмем даже ExtReact, чтобы не было попаболи от незнакомого синтаксиса — все равно я вижу только еще один набор виджетов, только очень громоздкий и дорогой.
wispoz
16.01.2018 01:04Накидал маленький примерчик:
fiddle.sencha.com/#view/editor&fiddle/2bupjustboris
16.01.2018 01:14У меня панель Preview показывает белый экран: https://habrastorage.org/webt/q9/vr/tl/q9vrtlar0-52pes0g6-ucfw5_bg.png
Если развернуть панель, то появится страница с табличкой, занимающей четверть экрана: https://habrastorage.org/webt/ov/si/qd/ovsiqdobeo0shw8pvxv3u41ha-y.png
Кажется, вы только что показали пример, почему НЕ надо выбирать ExtJS
Evgenyx82
16.01.2018 12:56Есть опыт участия в проектах на ExtJs 3-4 (>1года) — ну да, набор с выбором, от этого много проблем… кастомизация нулевая, читать упоротый вложенный по сто раз css, чтобы в колонку влезало все кол-во символов… если эта колонка editable, автоматом кастует \n\r, в обычный текст… открыл колонку на edit, ввел мультилайн текст, accept. Видим все одну строку. И так буквально на каждом шагу… После первого знакомства с ReactJs, стало понятно, это именно тот инструмент, который мне нужен… никакой vue, angular с их ng, binding… доп.атрибутами в разметке — полный бред… только реакт, только хардкор)))
mrbig66
16.01.2018 12:56Для просмотра кода есть ресурс с поиском
Пример на fiddle.sencha.comjustboris
16.01.2018 13:40Аналогично комментатору выше, ваш пример показывает мне серый экран:
https://habrastorage.org/webt/us/cc/zt/usccztgxspoohthgj8drpwnkrp0.png
Браузер Хром, ошибок в консоли нет.
NoRegrets
16.01.2018 00:22Сталкивался с ExtJS как пользователь, глянул на семплы еще раз и возник вот такой вопрос. Насколько правильно перекладывать расчет лейаута на JS, полностью игнорируя CSS? Размеры всех элементов рассчитываются фреймворком и задаются в абсолютных значениях при каждом изменении размера окна. Почему бы не дать это сделать браузеру?
Особенно доставляют гриды, с модельными данными выглядят приятно, а с реальными начинаются проблемы. И все благодаря фиксированной, прибитой гвоздями ширине столбца. Например таблица, скажем, 3 столбца, с шириной 60/20/20, первый столбец почти пустой, во втором — цена. И вот эта цена не вмещается и получается «100...». Выглядит это как привет из девяностых.wispoz
16.01.2018 01:16fiddle.sencha.com/#view/editor&fiddle/2bup — все нормально работает если ширину задавать через flex.
NoRegrets
16.01.2018 08:39В вашем же примере, данные «test1,test2,test3» выглядят замечательно, но попробуйте засунуть в name строку в 150 символов и столько же в description. А теперь представьте, что есть у вас грид в котором часть полей отображаются «вот та..» и разобраться что именно там за строки — тот еще гемор. Я видел таблицы, в которых было два десятка столбцов, некоторые из которых отображали только первую букву «а..». Я говорю о том, что лучше видеть данные, чем иметь таблицу шириной точно в 932 пикселя.
wispoz
16.01.2018 09:38fiddle.sencha.com/#view/editor&fiddle/2bup
Решается все CSS. Для своих задач ExtJS вполне нормален.
xakepmega
16.01.2018 04:37Хотелось бы увидеть сравнение с react/vue/angular на каких-то конкретных ваших кейсах.
gritsev
16.01.2018 17:59К сожалению, у нас такого сравнения нет. В то время, когда мы начали заниматься текущей версии Solar Dozor, ничего из react/vue/angular еще не было – по-крайней мере, в промышленном качестве.
moooV
16.01.2018 17:11+1Лет 5 назад имел дело по работе с ехтжс4, это адище было просто.
Настолько кривейшей и труднопонятной либы найти было трудно — чего только стоило то, что заставить это работать в связке с jQuery было нереально трудно.wispoz
16.01.2018 17:32Стесняюсь спросить, а зачем его заставлять работать с jQuery? Там какой то плагин был особенный?
impwx
16.01.2018 18:02Поддерживается ли разработка на Typescript / Flow? Если да, в каком виде? Для фреймворка, который позиционируется для enterprise-сегмента, это особенно важно.
wispoz
16.01.2018 18:06Насколько я знаю официальных TypeScript биндингов нету. Если интересно то можно почитать тут: www.sencha.com/forum/showthread.php?244718-TypeScript
muhaa
16.01.2018 18:18+1Как-то пришлось написать корпоративное приложение на angular (самом первом) + TypeScript, а через пару лет другое на ExtJS 6. Вообще, я не веб-программист и изначально понятия не имел ни о первом ни о втором фреймворках. Мои впечатления: если для angular есть полная библиотека готовых UI компонентов, то ну его этот ExtJS. Изучая angular изучаешь концепции, которые в него вложены и учишься не наступать на ряд заложенных базовых граблей. По мере понимания концепций работа идет все веселее. Изучая ExtJS изучаешь множество сложных фишек для решения множества конкретных проблем и учишься не наступать на множество граблей, заложенных в каждом решении. Это очень утомляет. Особенно, когда осознаешь, что пихаешь в голову информацию и навыки, которые не в тренде и больше нигде не пригодятся.
YemSalat
16.01.2018 20:34+1Если вам нужно создать новое приложение, вы можете за минуту-две сгенерить его костяк
Create React app, Vue cli, Angular cli? Не, не слышали…
Есть отдельный механизм тем — это такой специальный пакет, в котором есть S CSS, переменные, ресурсы. Вы наследуетесь от базовой темы, меняете базовые переменные (их там штук 10-15) и получаете практически совсем другую тему.
По-моему у любого набора компонентов для всех современных фрэймворков есть подобное.
Был один случай: наша основная тема — тёмная, а заказчик захотел светлую, и мы за две недели, меняя фон, бэкграунды и цвета кнопок, сделали светлую тему
Целые ДВЕ НЕДЕЛИ убить на изменение темы со светлой на темную (т.е. по сути только цвета меняем) — это на мой взгляд провал, а не достижение…
От статьи складывается впечатление что автор провел последние лет 6-7 в полной изоляции от мира фронтэнд разработки.
Мне приходилось поддерживать пару приложений на ExtJS, по сравнению с современными фрэймворками — это разрыв мозга.
maxzh83
Для полноты картины не хватает только ценника и правил лицензирования )
bjornd
А еще отчета о результатах поисков разработчиков в команду, даже просто готовых писать на нем, не говоря про наличие опыта именно с ExtJS. Источник: 4 года в проекте на ExtJS.
wispoz
Опыт 3 года в проекте, писать на нем довольно приятно, особенно с 6 версии. Для нашего проекта очень подкупают такие компоненты как Bryntum.Gantt, очень удобный компонент.
Один большой косяк в нем раздражает, если в каком то компоненте появилась ошибка, падает все приложение.
RomanPokrovskij
Интерес к extJs не нулевой. Программисты обычно интересуются на чем сделана та или иная понравившаяся им веб аппликация, и с extJs таким образом встречаются. У моего synology NAS веб-морда на extJs — просто дух захватывает. Если делать виртуальный веб десктоп — то extJs наверное без альтренатив. Кстати, почему-то об этом не упомянуто.
gritsev
Есть мнение, что “виртуальный веб-десктоп” (если мы, конечно, говорим об одном и том же) не очень актуальная штука. По-крайней, мере наши ux-специалисты его очень не любят и считают, что все можно сделать в более привычном всем web-стиле.
RomanPokrovskij
Если цель передать пользователю мессидж «наш NAS/router/утюг самый мощный», то метафора «настоящего компьютера внутри с настоящим десктопом» — попадает точно в цель.
gritsev
За последние полгода мы взяли 4 разработчиков с опытом от 3 лет и остановились только потому, что пока нам хватило :) При этом мы еще и выбирали. На конференции HolyJs к нам подошли около 20 “практикующих” ExtJs разработчика. Думаю, в ближайшее время с некоторыми из них мы будем общаться.
gritsev
На всякий случай, мы не продаем ExtJs :)
Если по существу, то у них есть GPL версия, хотя, конечно, не сама свежая. Плюс, надо понимать, что этот фреймворк предназначен для Enterprise-решений и, с этой точки зрения, его ценник вполне гуманный
maxzh83
Вот и предлагаю сразу написать ценник, чтобы случайные люди сразу понимали с чем имеют дело.