В течение многих лет ExtJS был ведущей средой разработки JavaScript-интерфейса для веб-приложений и гибридных приложений. Эта новая версия очищает ряд унаследованных функций и добавляет множество современных улучшений. К ним относится переход на HTML5, перенос корпоративных приложений на более крупные сенсорные устройства и добавление новых виджетов в уже впечатляющую коллекцию виджетов.
Не заблуждайтесь, это массивный релиз от Sencha, в котором почти слишком много новых функций и улучшений, чтобы поместиться в одной статье. Мы затронем ключевые отличия в версии 4 и поговорим о некоторых больших изменениях в следующей статье.
Эта последняя версия является движением к сближению с Sencha Touch, и я предсказываю, что они будут объединены на SenchaCon в апреле следующего года.
Sencha сделал процесс обновления до ExtJS 5.x с ExtJS4.x довольно тривиальным, со встроенным слоем совместимости, предоставляя разработчикам шайбу только для разработки, которая предоставляет консольные сообщения во время разработки, предупреждая их о тех областях, на которых им необходимо сосредоточиться при переходе. на новые рамки.
Когда дело доходит до обновлений, реализация диаграмм является единственной важной областью, где обновление вашего приложения может привести к поломке при обновлении на месте, так как вся библиотека была заменена. Однако вы можете применить предыдущие унаследованные диаграммы, включив их в свой пакет. Простая конфигурация в вашем app.json включает этот уровень совместимости во время разработки.
Новая базовая общая библиотека
ExtJS5 и следующая основная версия Sencha Touch теперь будут использовать один и тот же код ядра, включая пакет данных. Эта функция часто запрашивалась и ожидалась разработчиками, создающими приложения для настольных компьютеров и мобильных устройств. Это также означает, что ваши настольные и мобильные проекты смогут использовать одно и то же рабочее пространство Sencha, упрощая создание приложений для нескольких целей.
Базовый пакет содержит систему классов, данные, события, элементы, утилиты и классы обнаружения объектов / сред.
Библиотека диаграмм является общей для сенсорной и мышиной сред, при этом библиотека диаграмм Sencha Touch включена и обновлена, обеспечивая быстрое построение диаграмм и взаимодействие с вашими визуализациями.
MVVM & MVC
ExtJS5 позволяет разработчикам использовать архитектуры MVVM или MVC для создания своих приложений. Эта новая версия движется в сторону MVVM и представляет ViewModels и ViewControllers . ViewModels ViewControllers всеми преимуществами привязки данных, а ViewControllers упрощают соединения с представлениями и могут снизить сложность ваших контроллеров, сосредоточившись на одном представлении. Эти изменения приносят много преимуществ проектам с группами разработчиков, где разделение дает большую гибкость.
Сенсорное устройство и поддержка мобильных устройств
Sencha вложила много усилий в свою новую сенсорную поддержку для планшетов и устройств с большим экраном. Это достигается благодаря появлению новых базовых тем с поддержкой касания (Neptune Touch и Crisp Touch), в которых все компоненты теперь имеют поддержку касаний и жестов.
В ExtJS5 представлены компоненты Responsive (теперь вы можете выбрать адаптивный и адаптивный дизайн в одном приложении) и полную поддержку событий касания. Создание содержимого компонента так же просто, как добавление адаптивного плагина к конфигурации плагинов вашего компонента, а затем добавление правил в ваш компонент пользовательского интерфейса.
Приложения для планшетов ExtJS 5 теперь можно упаковывать как приложения PhoneGap / Cordova от Sencha Cmd. Таким образом, с помощью одной команды вы можете удалить неиспользуемые классы Sencha, создать тему SASS, минимизировать код и обернуть свое приложение в PhoneGap (или отправить его в сборку PhoneGap), готовое к развертыванию.
Дизайн и Тематика
Sencha снова поставляет темы, используя набор тем SASS, и вводит новую тему «Crisp» в ExtJS5. Crisp разработан для устройств с высоким разрешением и, как вы можете себе представить, имеет четкий внешний вид iOS7.
Дополнительные миксины SASS были созданы для Menu , Lableable , Lableable , FieldSet и таких полей, как Text , Spinner , Display и Checkbox .
Современные и мобильные браузеры
ExtJS5 прекращает поддержку IE6 и IE7 и перемещает библиотеку на территорию современного браузера. Это большой шаг, и он приносит целый ряд преимуществ кода и производительности. Приложения ExtJS5 будут использовать HTML5 Doctype. ExtJS 5.0 поддерживает IE8 +, Firefox, Safari 6+, Chrome и Opera, а также поддержку планшетов для Android, Safari mobile и IE для Windows Phone.
Виджеты, новый пользовательский интерфейс и обновления компонентов
Legendary Grid от Sencha теперь позволяет добавлять виджеты в ячейку сетки для визуализации, что значительно увеличивает производительность при отображении данных в реальном времени. Сетки претерпели капитальный ремонт и теперь работают на уровне строк за строкой, обеспечивая еще больше обновлений производительности. Функциональность расширения фильтрации сетки теперь напрямую реализована в классе сетки.
Панели вкладок теперь позволяют вращать вкладки в любом направлении и располагать их с любой стороны компонента. Поле Trigger было удалено и заменено новой конфигурацией Trigger пределах класса textfield поля, так что вы можете добавить столько триггеров, сколько захотите. В этом выпуске реализованы метки автоматического поля на формах.
Еще одно большое обновление с демо Dashboard. Это было разбито на три новых класса, позволяющих создавать панели мониторинга с изменяемыми размерами столбцов, очистку пустых столбцов, создание столбцов с помощью перетаскивания и сохранения элементов.
Новые компоненты включают в себя панель «хлебные крошки», позволяющую получать иерархические данные, поле тега, горизонтальные и вертикальные сегментированные кнопки и новый компонент «Multi-select grid», который предоставляет новый вид выбора.
Система классов
Как и многие современные фреймворки, Sencha использует концепцию «классов», что позволяет разработчикам разделять свой код на несколько файлов для разработки. Затем их можно объединить с помощью инструмента сборки Sencha Cmd для доставки.
ExtJS5 сочетает в себе лучшее из системы конфигурации ExtJS и Sencha Touch и предоставляет более упрощенный способ настройки компонентов и классов. Производные классы больше не должны использовать объект config для настройки свойств. Добавление приватных методов также добавляет отличный способ запретить другим разработчикам переопределять функциональность классов.
Поддержка событий и жестов
Большое изменение в ExtJS5 переходит к модели делегированных событий, что означает, что события теперь всплывают с использованием цели, а не присоединены непосредственно к компонентам DOM. Те, кто обновляет свои приложения с 4.x, захотят помнить об этом.
Новые улучшения в системе событий означают, что вам не нужно по-разному кодировать для мобильных устройств и компьютеров. В том редком случае, когда вы хотите реализовать такие события, как mouseover , mousenter , mousenter и mouseleave вам необходимо предоставить собственную реализацию или реализацию на уровне сообщества.
Наряду с улучшениями сенсорных событий поставляется поддержка жестов как для сенсорных систем, так и для систем на основе мыши, которые обеспечивают одинаковые возможности для всех устройств и механизмов ввода. Это дает такие функции, как встроенная прокрутка и импульсная прокрутка Sencha на устройствах, где это еще не реализовано.
Улучшения доступности
ExtJS4 представил поддержку ARIA через пакет. Эта функциональность теперь является частью ядра платформы, включая клавиатуру и другие улучшения. Это значительно улучшенная реализация, которая необходима для любого правительственного или корпоративного веб-сайта в 2015 году.
Маршрутизация
Пакет маршрутизатора от Sencha Touch был портирован и улучшен, чтобы добавить поддержку маршрутизации наряду с существующим классом History . Это дает больше контроля над тем, как один, несколько маршрутов выполняются, приостанавливаются и задерживаются.
Улучшения пакета данных
Удаление большого количества шаблонного кода было одним из основных направлений этой новой версии. Определения полей теперь являются необязательными, и валидаторы моделей могут быть настроены из общих типов и применены как валидаторы с произвольным именем.
Сеансы данных и схемы были добавлены и могут быть дополнительно настроены. Сеансы данных работают вместе с привязкой данных, чтобы синхронизировать данные по всему интерфейсу, а схемы представляют собой наборы сущностей, которые связаны друг с другом.
Associations давно раздражают многих, и в этом выпуске Sencha добавил ассоциации «многие ко многим» и больше не требует, чтобы с обеих сторон определялась ассоциация, чтобы отношения работали в обоих направлениях.
Имена ассоциаций теперь используют схему, так что существующие модели могут использоваться при создании связанных хранилищ ассоциаций.
Добавление цепочек хранилищ теперь позволяет вам использовать связанные поднаборы загруженного хранилища. Это позволяет нескольким компонентам подключаться к одному хранилищу и отображать разные представления одних и тех же данных без необходимости дополнительных копий данных для внедрения и управления вторичными хранилищами.
Sencha Cmd пакеты
Далее идет переход к пакетам с новым «базовым» пакетом. Старые диаграммы, локали и темы были перенесены в пакеты.
Сенча Архитектор 3.1
Sencha Architect использует Sencha Cmd за кулисами, чтобы сделать его тяжелую работу. Поэтому, если вы разрабатываете свои приложения с использованием среды разработки Sencha, то это должен быть простой процесс.
Вы заметите некоторые обновления интерфейса между 3.0 и 3.1, и вместо интуитивного и ожидаемого древовидного элемента управления (который также обеспечил бы наличие функции папок, которую разработчики запрашивали для двух версий), Сенча пошел с Mac-подобным файловым браузером для реализация функций MVVM. Я не уверен в этом, но он есть, и я уверен, что Сенча получит отзыв об этом от сообщества.
Повышение квалификации
Sencha и некоторые сторонние учебные компании предлагают ускоренный курс, а также курс обновления с 4.x до 5.x в рамках своих учебных курсов. Эти курсы доступны по всему миру от Амстердама до Мельбурна, от Окленда до Гонконга и по всей территории США. Посетите страницу обучения Sencha или нажмите поисковую систему, чтобы найти обучение в вашем регионе.