C# & JavaScript Developer
0,0
рейтинг
4 июня 2014 в 10:18

Разработка → Представляем Sencha Ext JS 5 перевод



От имени компании Sencha и всей команды Ext JS я горд объявить, что сегодня мы выпускаем Ext JS 5. Ext JS 5 — это гигантский шаг вперёд и мы хотим воспользоваться случаем и поблагодарить наше сообщество за отзывы и постоянную поддержку. Это было самое крупное бета-тестирование в нашей истории с более чем 100K загрузок. Вместе мы создали самый продвинутый в мире multi-device JavaScript-фреймворк. Вы все сделали неоценимый вклад в создание самого лучшего фреймворка Ext JS.

Что нового


Поддержка touch

Ext JS 5 — это самый обширный апдейт фреймворка. Этот релиз представляет возможность запускать вашие desktop-приложения на touch-устройствах используя единую кодовую базу.

Улучшения архитектуры

Сейчас как никогда стало легко писать приложения, используя архитектуру MVVM и двунаправленный дата-биндинг. В клиентскую часть мы встроили управление сессиями данных для того, чтобы уменьшить число обращений к серверу. Ввод маршрутизации (routing) позволяет создавать глубокие ссылки в ваших приложениях. Со всеми этими улучшениями разработка приложений будет ещё более эффективной.

Отзывчивая разметка

Начиная с сегодняшнего дня благодаря новой системе отзывчивой разметки в ваших приложениях появилась возможность иметь оптимальный вид как среди десктопов, так и планшетов, независимо от изменений ориентации.

Обновления компонентов

Так же как растут ваши приложения, Sencha продолжает улучшать библиотеку компонентов. С Ext JS 5 вы можете добавлять виджеты в ячейку таблицы для визуалазации и аналитики больших данных. Также появился touch-оптимизированный набор компонент для построения графиков с финансовыми возможностями.

Посмотрим в действии!




Глубже в Ext JS 5




Унифицированные события среди десктопов и тачскринов

Ext JS 5 это первая версия, которая позволяет использовать один код на десктопах и устройствах с тачскрином. Используя систему жестов из Sencha Touch мы ввели поддержку таких жестов как pinch, zoom, swipe, tap, длинное нажатие и т.д., так что вы можете использовать ваши десктопные приложения на тачскринах с небольшими доработками или вовсе без них. Мы замапили щелчок мыши на события тач-устройств при помощи нашей делегированной системы событий, которая делает сопоставление автоматически.

MVVM и двунаправленное связвание

В Ext JS 4 мы представили архитектуру MVC. А в Ext JS 5 — MVVM (Model — View — ViewModel), которая предлагает двунаправленное связывание данных и улучшенное разделение ответственности между бизнес-логикой и представлениями. MVVM позволяет автоматически переносить изменения из представления в модель и наоборот. Эта живая и автоматическая синхронизация между представлениями и моделями позволяет сократить время разработки и ошибки. Также мы добавили вычисляемые значения и поля, так что привязка объекта к представлению перед синхронизацией может быть предварительно преобразована. Мы надеемся, что новая архитектура MVVM будет полезной.



В дополнение к MVVM в Ext JS 5 мы также улучшили поддержку MVC введением ViewController'ов. ViewController'ы нацелены именно на определённое представление, снимая лишние затраты по сравнению с традиционным MVC на управление объектами и восстановление состояния приложения. Теперь, избегая обычных контроллеров, которые слушают все события представлений, приложения могут уменьшить использование памяти и улучшить производительность.

Отзывчивая разметка

Ext JS 5 представляет новый плагин отзывчивой разметки, который направлен на улучшение вида приложений и навигации среди десктопов и тачскринов. Когда меняется ориентация (устройство повернулось), приложения, которым нужно изменить позицию или расположение элементов, могут делать это автоматически, используя новую систему конфигурации.

responsiveConfig: {
    landscape: {
        region: 'west'
    },
    portrait: {
        region: 'north'
    }
}

или
responsiveConfig: {
    'width > 800': {
        region: 'west'
    },
    'width <= 800': {
        region: ‘north'
    }
}




Для того, чтобы увидеть его в действии, попробуйте этот пример изменяя размер экна браузера или поворачивая экран тачскрина.

Neptune Touch и Crisp Touch

У нас две новые multi-device темы, которые позволяют нашей богатой коллекции UI-компонентов выглядеть одинаково на десктопах и тачскринах. Тач-версии существующей темы Neptune и новой темы Crisp используют увеличенные элементы для поддержки большего пятна соприкосновения, которое требуется при работе на тачскринах.




Вы можете использовать тач-версии тем на десктопах и тачскринах, но мы рекомендуем использовать Neptune и Crisp для десктопа, и Neptune Touch и Crisp Touch — для тачскринов.

Улучшения таблиц

Grid — точно самый популярный компонент в Ext JS, а в версии 5 мы сделали его ещё более мощным. С введением грид-виджетов (Grid Widgets), которые могут быть совмещены с новой функцией — Buffered Updates, мы сделали возможной визуализацию rich data и обновления в реальном времени для поддержки аналитики больших данных.



Управление сессиями

Одна из самых восхитительных функций в ExtJS 5 — это управление сессиями (Session Management): мы добавили транзакционные сессии. Когда вы сохраняли записи на сервер с Ext JS 4, вам приходилось быть внимательными к тому, в каком порядке вы это делали. Вам приходилось удостовериваться в том, что вы вызвали метод сохранения для каждой из изменённых записей и хранилищ. Всё это «счётоводство» делало согласование данных склонным к ошибкам.

В Ext JS 5 появился новый класс для работы с этими действиями — [Ext.data.Session]. Сессия отслеживает записи, которым необходимо измениться, создаться или удалиться на сервере. Она даже может отсортировать эти операции для того, чтобы новые записи правильно ссылались на другие записи в этой транзакции. Используя сессии, стало проще редактировать записи и их ассоциации, собирать все изменения и отправлять на сервер. И т.к. сессия хранит все ваши изменения, вы можете получить их сразу, либо ни одной — в зависимости от того, завершилась ли транзакция успешно или нет.

Маршрутизация (Routing)

Ext JS 5 делает возможным создание в приложениях глубоких ссылок (deep linking), когда маршрут URL преобразуется в методы контроллера. Маршрутизация позволяет настроить приложения принимать такие URL, которые не обязательно ссылаются на физический файл на сервере. Часть URL, начинающаяся с # (используется как идентификатор фрагмента) открывает дорогу к стеку истории браузера без перезагрузки страницы. Когда изменяется hash, браузер создаёт событие 'hashchange', которое может быть использовано клиенским приложением самостоятельно.

Тач-оптимизированные графики

Ext JS 4 предоставлял систему графиков без плагинов, основанных на SVG и VML. Тем не менее, мы обнаружили, что эта система не была оптимальной на мобильных устройствах, более ограниченных в памяти, в которых был быстрый Canvas, но медленный SVG. С Ext JS 5 мы перестроили её на основе аналогичной системы из Sencha Touch, которые лучше оптимизированы для работы пальцами на устройствах с небольшим объемом памяти. Новая система графиков получила больше функций, таких как финансовые графики, многомерные и 3D-графики, включая поддержку зумирования. У них лучше производительность, они более расширяемы и имеют отличные возможности на тачскринах.



Мы даже сделали примеры приложений для работы с разными типами графиков наподобие Kitchen Sink. Обратите внимание, что существующие графики из Ext JS 4 до сих пор доступны отдельно, так что вы тоже можете их использовать. Но, если вы нацелены на планшеты, вам стоит сделать апгрейд на новую систему графиков. Детальная инструкция по миграции на Ext JS 5 представлена в нашей документации.

Sencha Core Package

Одна из сверхзадач Ext JS 5 была свести ядра Ext JS и Sencha Touch как можно ближе. Мы последовательно сводили код системы классов, пакета работы с данными и обнаружения функций/среды, так что этот код можно использовать как в Ext JS, так и в Sencha Touch. Эта общая платформа позволит воздавать приложения с общими ресурсами независимо от фреймворка, на десктопах, планшетах и других тачскринах. Теперь мы работаем над релизом Sencha Touch, основанного на этом общем ядре. Следите за обновлениями.

Инструкции и документация

С Ext JS 5 мы не только добавили массу новых инструкций для появившихся функций и улучшений, но также обновили саму систему инструкций, чтобы ей было легче пользоваться. Эти инструкции охватывают всё об апгрейде на новый фреймворк: Sencha Cmd, графики, архитектура приложения и многое другое.

Мы упомянули только некоторые важные функции Ext JS 5, но есть ещё много о чём поговорить. Мы дадим вам изучить остальные новые функции и улучшения в инструкции What's New in Ext JS 5.

Поддерживаемые браузеры и платформы


Возможно, одна из глафных вещей, которая не изменилась в Ext JS 5 — это то, что мы продолжаем работать с IE8 как с VIP-клиентом (as a first-class citizen, — прим. перев.). Ext JS 5 поддерживает Safari 6+, Firefox, IE8+, Chrome и Opera 12+. На мобильной платформе поддерживаются Safari на iOS 6 и 7, Chrome на Android 4.1+, и на тачскринах под Windows 8 (таких как Surface и других тачскрин-лаптопах) — IE10+.



Обучение по Ext JS 5


Мы также обновили программы тренингов по Sencha. Тренинги по Ext JS 5 начинаются в июне, и это включают следующие классы: Ext JS 5 Update, Upgrading to Ext JS 5, и Fast Track to Ext JS 5.

Цены на Ext JS 5


Начиная с этого релиза до 30 июня 2014 лицензии на Ext JS 5 будут доступны по ценам на текущий Ext JS 4.x. Это отличная возможность купить Ext JS 5 по нынешней стоимости. Начиная с 1 июля войдут в силу новые цены. Для подробной информации, пожалуйста, посетите страницу с продуктами Ext JS 5 или свяжитесь с нами.

Большое спасибо


Мы бы хотели ещё раз выразить искреннюю благодарность нашему сообществу. Ваши запросы на новые функции, предложения, отзывы и багрепорты позволили достичь всех целей этого релиза. Мы очень активно работали над тем, чтобы свести к минимуму изменения кода при переходе с Ext JS 4 на Ext JS 5. Надеемся, вам понравится писать новые приложения с Ext JS 5 так же, как нам понравилось писать эту версию.
Перевод: Gautam Agrawal
Алексей Солонец @alexstz
карма
11,0
рейтинг 0,0
C# & JavaScript Developer
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

Комментарии (33)

  • 0
    Ext JS сложный, как в плане использования так и в его разработке и поддержке. Когда я его первый раз увидел, подумал что он долго не проживет, но со временем понял обратное. Работа просто колоссальная по объему, и ребята продолжают развивать проект. Единственно, не очень много информации на русском. Обновления радуют, будем изучать и применять :)
    • 0
      если его хорошо изучить, то никакой он не сложный, учитывая то, что у них всегда отлично документированные исходники
      • +4
        Отличная документация у них была до недавних пор. Пока они не убрали возможность комментировать. Половину возможностей узнал именно из комментариев и примеры кода там были как раз кстати. А в оф. описании про них ни слова не было.
        • 0
          А это да, вообще с круглыми глазами обнаружил, что комментов больше нет, было архиполезно
      • +2
        Ну, так можно по любой теме сказать: если хорошо изучить, то не сложно… ;) Вообще, порог вхождения есть как и в любом другом фреймворке. В нашей команде новые разработчики влились быстро благодаря готовым проектам на Ext JS и при помощи тех, кто уже в теме. По примерам, конечно, обучение идёт гораздо быстрее.
        • 0
          Я тоже вливался на основе готовой кодовой базы. Но лучше бы я это делал с нуля. Такому говну от коллег научился. Потом пришлось долго на новый уклад переучиваться.

          Екст мне чем то С++ напоминает. В нем одно действие можно сделать множеством способов: хороших и не очень. При этом в разных частях документации оно делается оп разному. Это путает.
    • 0
      А dojo пробовали?
      • 0
        Смотрел, но не пробовал. Если есть опыт для сравнения обоих, поделитесь, будет полезно.
        • 0
          Я вот с этой же целью спрашиваю :)

          На dojo опыт есть.
          Сейчас смотрю на документацию по extjs и он мне кажется сделанным на порядок грамотнее и профессиональнее.
          Хотя немного удручает исключительно програмное создание интерфейса.

          В народе говорят — dojo мощнее.
          Возможно, это из-за гигабайтовой свалки плагинов в dojox (с недосовместимыми интерфейсами и недописаной документацией)
  • +3
    Полезный и довольно удобный фреймворк. Ему тяжело найти альтернативу для построения rich приложений.
    Хорошо подходит для разных crm-ок.

    Но сенча следует общей моде испытывать сырой продукт на своих пользователях. Я два года пишу на ексте и два года приходится время от вермени бороться с багами самого фреймворка. А это довольно сложно, учитывая объемы его кодовой базы.
    Большой плюс команед за то, что реагируют на багрепорты и исправляют найденые баги. Но скорость оставляет желать лучшего.
    • +3
      Писал на эксте в период актуальности версий 3 и 4. Ощущения те же самые: только-только стабилизировали, наконец, ветку 3 — выпустили сырую четверку.
      Очень хочется надеяться, что с пятой версией история не повторится.
  • 0
    Может глупый вопрос, но на сайте не нашел. У них лицензирование осталось как раньше? Т.е. для некоммерческих продуктов бесплатно?
    • 0
      Да вот непонятно, в факе написано:
      What Sencha products are available under the GPL v3?
      Public releases of Sencha Touch, Sencha Touch Charts, Sencha Ext JS and Sencha GXT are all available under GPL v3.

      А при попытке скачать предлагает 45-дневную версию. Скорее всего, они ещё не обновили информацию о лицензировании.

      UPD. Хотя нет, вот же оно (линк):
      Sencha offers two licensing options for Ext JS 5, a Commercial Software License, and Commercial OEM License.

      Видимо, только коммерческое использование ;(
  • +2
    После года работы поняли что не то, перешли на angular.js, имхо, это лучшее что сейчас есть
    * главный минус этого (extjs) фреймворка конечно же то что он здоровенный, негибкий и неповоротливый
    • +1
      Не холивара ради, а истины для: в чём именно негибкость и неповоротливость?
      • +1
        Могу я сказать (тоже ушли с extjs на angularjs):
        — начинающему человеку начать что-то делать из тектового редактора сложно, потому что надо знать очень много и многих важных моментов, которых в документации нет, приходиться гуглить или лазить в исходник (в extjs лазил часто, а вот в ангуляр пока только один раз)
        — сложно и непонятно работают layout, то есть в первый раз что-то отцентровать по горизонтали и вертикали очень проблематично
        — их предлагаемый подход event-driven контроллеров в чужом проекте приводит к долгим и упорным лазиньям что же и откуда вызывается, причём разбираться сложнее чем в лапше jQuery
        — sencha architect для новичков неудобен (я вообще на extjs ещё на второй версии пользовался, потому особо не испытываю дискомфорта, но я учил своего коллегу — это Боль, тупо динамическое хранилище создать — это целое приключение для человека который ни разу это не дала)
        — сделать свои элементы управления сложнее, в ангуляре достаточно базовых знаний JS + верстки и какое-то говнокодерское решение уже работает, на extjs сложнее
        — переделать дизайн ОЧЕНЬ проблематично (у нас директор — дизайнер, потому один из гвоздей в крышку гроба extjs был в том, что он любит разные красивые админки придумывать, тут extjs вообще плох)
        — взаимодействие между элементами форм намного сложнее чем в ангуляре (значения комбобокса зависящие от другого комбобокса, например)
        • +1
          это целое приключение для человека который ни разу это не дала
          это целое приключение для человека который ни разу этого не делал
        • +3
          Большую часть того, что вы написали, можно было заенить фразой «высокий порог вхождения» :)
          На самом деле, это не плохо и не хорошо. Просто сам фреймворк сложный. Для очень большого набора задач его использование просто не оправдано. Но есть ряд задач, когда без него (или его аналога) никак. Каждой задаче свой инструмент.
          • 0
            Там действительно много «негибких» моментов, когда стандартные компоненты нельзя параметризировать без копипасты всего кода в свой класс или залезания в приватные свойства и методы.
    • 0
      Ого. Работал и с тем и другим. Очень интересно, что у вас за проект где можно так легко менять одно на другое. Ведь эти фреймоврки решают сильно разные задачи.
  • +1
    Использовали давно в одном большом проекте, когда проект был почти готов поняли что он слишком сложен(очевидно можно было сделать просто), медлителен короче мы ошиблись с выбором. Пришлось все переделывать.
    Есть интерес к данному фремворку но использовать уже наврятли…
  • 0
    А киньте пример с MVVM?
    • 0
      • 0
        Что-то я не въеду, чем это от MVC отличается…
        • 0
          Тем, что нигде в коде нет строчек form.loadRecord() или form.updateRecord(). В общих чертах MVVM описан здесь: Ext JS 5: MVC, MVVM и др
          • 0
            Чтото я не улавливаю разницы между
            var detailView = Ext.ComponentQuery.query('form')[0];
            //set the form record manually
            detailView.loadRecord(record);

            и

            var detailView = Ext.ComponentQuery.query('mvvm-DetailView')[0];

            //set the form's ViewModel binding
            detailView.getViewModel().setData({ rec: record });

            или не туда смотрю?
            • 0
              Мм, почему же?.. Вот даже приложение начинается с

              Ext.application({
                  name : 'MVVM',
                  ...
              

              И далее есть файл вьюмодели /app/view/DetailViewModel.js, а в /app/view/Detail.js — биндинги. Вообще, пример простоват и разница со старым подходом не слишком заметна. В этих примерах (англ.) тема раскрыта глубже.
            • 0
              Повторюсь: в таком простом примере особой разницы нет, согласен. Ну только разве что обратно данные с формы записываются автоматически. Видимо, смысл раскрывается в использовании сложных биндингов, как в примере по ссылке выше.
  • 0
    Ай яй яй, 2014-й на дворе, а все иконки картинками в стандартных темах!
  • 0
    А у extjs 5 есть совместимость с 4 версией? Могу я подменить библиотеку и продолжить работу?
    • 0
      По идее, да. Но лично из моего опыта, есть нюансы. Если переходить с 4.2, то, думаю, проблем быть не должно. А если с более ранних, то какие-то вещи могли измениться. Например, при переходе, кажется, на 4.2, removeAll() у Store начал не очищать хранилище, а удалять все записи.
      • 0
        Спасибо, надо будет провести эксперимент.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.