Создаем почтовый клиент на Ext JS с нуля. Часть 7: Deep Linking и Router

За шесть частей мы построили полноценный почтовый клиент Ext Mail: от фундамента и моделей данных до мобильной версии и интеграции с REST API. Однако до сих пор наше приложение существовало под одним URL, который никогда не менялся. Это означало, что: при обновлении страницы приложение сбрасывалось в исходное состояние; нельзя было поделиться ссылкой на конкретное письмо … Читать далее

Создаем почтовый клиент на Ext JS с нуля. Часть 6: Интеграция с REST API

В первых пяти частях мы построили полноценный почтовый клиент Ext Mail: создали Universal-приложение, модели и хранилища, Grid и Reader, дерево меток, динамический тулбар, форму создания письма и работу с черновиками. Приложение работало и на десктопе (Classic Toolkit), и на мобильных устройствах (Modern Toolkit). Однако у нашего приложения был один существенный недостаток: данные загружались из статических … Читать далее

Создаем почтовый клиент на Ext JS с нуля. Часть 5: Выдвижное меню и Compose в Modern Toolkit

В четвёртой части мы создали базовый мобильный интерфейс Ext Mail на Modern Toolkit: NavigationView, MessagesGrid с аватарами, тулбар действий и row actions. Но для полноценной работы не хватало двух ключевых элементов: навигации по меткам и возможности создавать письма. В пятой части мы добавим: дерево меток (LabelsTree) для Modern Toolkit; выдвижное меню (slide-out menu) в стиле … Читать далее

Создаем почтовый клиент на Ext JS с нуля. Часть 4: Мобильная версия на Modern Toolkit

В первых трёх частях мы построили полноценный почтовый клиент Ext Mail для десктопа на Classic Toolkit: создали Universal-приложение, модели и хранилища, Grid и Reader, дерево меток, динамический тулбар, форму создания письма и работу с черновиками. Однако современное корпоративное приложение должно одинаково хорошо работать и на мобильных устройствах. В четвёртой части мы интегрируем Modern Toolkit и … Читать далее

Создаем почтовый клиент на Ext JS с нуля. Часть 3: Создание писем и работа с черновиками

В первых двух частях мы построили фундамент почтового клиента Ext Mail: создали Universal-приложение, описали модели и хранилища, построили Grid для списка писем, Reader для просмотра, дерево меток и динамический тулбар. Во третьей части мы научим приложение создавать новые письма: добавим кнопку Compose над деревом меток; создадим форму для написания письма с полями получателя, темы и … Читать далее

Создаем почтовый клиент на Ext JS с нуля. Часть 2: Метки, дерево и динамические действия

В первой части мы заложили фундамент почтового клиента Ext Mail: создали Universal-приложение, описали модели и хранилища, построили Grid для списка писем и Reader для просмотра. Во второй части мы расширим функциональность: добавим возможность помечать письма звёздочкой (Star/Unstar); добавим дополнительные действия в тулбар (удалить, архивировать, пометить как непрочитанное); выведем счётчик сообщений в тулбаре; создадим дерево меток … Читать далее

Design в Ext JS: инструменты для дизайнеров, которые не пишут код

Одна из главных проблем в веб-разработке — разрыв между дизайнерами и разработчиками. Дизайнер рисует макет в Figma или Sketch, разработчик получает его и начинает «переводить» в код. В этом процессе теряются детали, появляются расхождения, а время на согласование может растянуться на недели. Ext JS решает эту проблему на уровне инструментов. Вместо того чтобы заставлять дизайнеров … Читать далее

Adaptive в Ext JS: как создавать интерфейсы, которые работают на любом устройстве

Современный пользователь ожидает, что корпоративное приложение будет работать одинаково хорошо везде: на широком мониторе трейдера в офисе, на планшете менеджера на встрече, на смартфоне сотрудника в командировке. Задача адаптации интерфейса под все эти сценарии может показаться сложной, но Ext JS предоставляет для её решения полноценный набор инструментов — от гибкой системы макетов до декларативного управления … Читать далее

Data Package в Ext JS: как устроен слой данных, который отделяет UI от бэкенда

В большинстве современных фронтенд-фреймворков работа с данными — это всегда «сборка» из нескольких библиотек. Вы выбираете отдельный инструмент для управления состоянием (Redux, Pinia), отдельный HTTP-клиент (Axios, Fetch), отдельную библиотеку для кэширования и синхронизации. Каждый инструмент нужно настроить, интегрировать с остальными и поддерживать. Ext JS решает эту задачу иначе. В состав фреймворка входит Data Package — … Читать далее

Test в Ext JS: как тестировать корпоративные приложения без «склейки» инструментов

Когда приложение растёт — добавляются новые модули, усложняются формы, расширяются таблицы, — ручное тестирование становится узким местом. Каждый новый релиз требует проверки десятков сценариев: загрузка данных, фильтрация, редактирование ячеек, валидация форм, работа с деревьями. Чем больше функциональности, тем выше риск, что где-то что-то сломалось. Большинство команд решают эту проблему, собирая стек из разрозненных инструментов: Jest … Читать далее