Реми Каттио, август 2014 г.

Недавно у меня была возможность участвовать в проекте с одним из клиентов Nuxeo из списка Fortune 500. Они настроили пользовательский интерфейс на основе JSF, чтобы создать простой файловый браузер для платформы Nuxeo, но они не были полностью довольны этим.

Они хотели, чтобы приложение меньше зависело от сервера, и хотели интегрировать некоторые современные виджеты HTML5/JS. Была собрана команда, в которую вошли как клиент, так и Nuxeo, чтобы переработать приложение File Browser для использования среды HTML5.

Это история о том, как и почему мы выбрали AngularJS и каким получилось приложение.

Фреймворки пользовательского интерфейса на платформе Nuxeo

Чтобы дать вам некоторое представление, платформа Nuxeo в настоящее время использует две платформы пользовательского интерфейса. Пользовательский интерфейс бэк-офиса в настоящее время построен на платформе пользовательского интерфейса JSF и RichFaces. Пользовательский интерфейс инструмента настройки основан на Google Web Toolkit (GWT).

Это не единственные фреймворки пользовательского интерфейса, которые вы можете использовать с платформой Nuxeo. Коннекторы созданы для Flex, Open Social и Eclipse RCP. Кроме того, некоторые проекты клиентов также основаны на фреймворках JavaScript, таких как Ext.js, Vaadin и AngularJS.

Со стороны сервера на сторону клиента, альтернатива JSF

JSF по своей сути не плохой фреймворк, он очень настраиваемый, стабильный и хорошо структурированный. Но это более старая структура пользовательского интерфейса, и у нее есть свои ограничения. Самая большая проблема с фреймворком JSF заключается в том, что это фреймворк на стороне сервера.

Это означает, что все для создания пользовательского интерфейса выполняется на сервере и передается обратно в приложение, что создает гораздо более высокую нагрузку на сеть. Это также означает, что состояние управляется и на сервере, что требует много памяти сервера и затрудняет масштабирование приложения.

В дополнение к этим проблемам на стороне сервера, сочетание подходов без сохранения состояния и с отслеживанием состояния для интеграции новых технологий пользовательского интерфейса, таких как компоненты HTML5 и JS, немного сложно.

Новые требования к пользовательскому интерфейсу

Клиент хотел уйти от JSF и связанных с ним проблем на стороне сервера. Им нужна была современная структура пользовательского интерфейса, в которой использовались бы некоторые новые технологии, доступные сегодня.

В частности, они искали инфраструктуру пользовательского интерфейса, которая представляла собой одностраничное приложение — подобное Facebook и другим современным веб-приложениям. Они также хотели выполнять логику и обработку на стороне клиента, передавая с сервера только данные модели. Им нужна была архитектура на основе REST без сохранения состояния, что-то, что могло бы легко интегрировать новые виджеты HTML5 и JS в их приложение.

В процессе выбора новой структуры пользовательского интерфейса наша команда рассматривала два варианта:

  1. Google Web ToolKit. Мы уже знали об этом, поэтому имело смысл рассмотреть возможность его использования в будущем. Однако GWT ориентирован не на REST, а на RPC. Его также сложнее интегрировать, потому что он скрывает объектную модель документа (DOM). Наконец, интеграция новых виджетов HTML5/JS не будет легкой.
  2. Фреймворк на чистом HTML5/Javascript. Следующим вариантом был фреймворк на чистом HTML5/Javascript, которых существует множество — Backbone.js, Ember.js, React.js, Angular.js, возможно, Polymer. .

Варианты были широко открыты, но решение казалось простым — это будет AngularJS.

Из любви к AngularJS

Так почему же мы выбрали AngularJS для его нового UI-фреймворка?

AngularJS — это среда приложений с открытым исходным кодом, также созданная Google. Он основан на модели одностраничного приложения с использованием HTML, CSS и JavaScript на стороне клиента.

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

Исходное представление файлового браузера на основе JSF было довольно простым. Чтобы перестроить его с помощью AngularJS, мы использовали следующие компоненты:

  • Модуль Nuxeo (REST API и клиент JS)
  • angular-touch: механика адаптивного дизайна для мобильных устройств.
  • angular-ya-treeview: заменил существующий компонент дерева на динамический. В него было внесено несколько модификаций, но в основном он использовался как есть.
  • angular-ui: это включало интеграцию начальной загрузки внутри angular, чтобы упростить создание интерфейса презентации.

Переход на AngularJS был не только солнечным светом и розами

Хотя решение перейти на AngularJS было правильным, оно не обошлось без некоторых осложнений.

Большая часть нашей команды пришла из мира Java, поэтому переход на разработку JavaScript потребовал некоторых корректировок. Одна из проблем заключалась в том, что непрерывная интеграция в Javascript осуществляется не так, как в Java (в Java мы используем Maven и Jenkins, а в JavaScript — Bower и Grunt). Непрерывная интеграция, которая является одним из основных преимуществ платформы Nuxeo, представляет собой практику объединения рабочих копий разработчиков в основную ветку (или ствол) несколько раз в день. Это делается для того, чтобы как можно быстрее находить проблемы с интеграцией. В данном случае нам нужна была система для Java и AngularJS, которую можно было бы вызывать из Java.

Управление модульностью также было немного сложным, как и ремонтопригодность JavaScript. С нашим опытом работы с Java мы привыкли иметь компилятор и другие инструменты (такие как checkstyle) для обеспечения соблюдения правил, но у Javascript больше свободы. Проблема управления модульностью также связана с тем, что мы используем Maven в Java и Bower в JavaScript.

С AngularJS мы могли бы сделать несколько обращений к серверу, чтобы получить правильные данные. Чтобы упростить разработку для этого проекта, мы минимизировали количество вызовов REST (на основе «страницы»).

Преимущества AngularJS

Команда справилась с трудностями и получила отличный современный отзывчивый пользовательский интерфейс. Он намного лучше реагирует на действия пользователя и автоматически адаптируется к различным устройствам, что значительно упрощает разработку для разных устройств и каналов.

Благодаря гораздо меньшей нагрузке на ЦП и привязке REST приложение стало гораздо более гибким и масштабируемым, что позволяет быстро добавлять новые узлы для обработки возросших нагрузок.

Это история о том, как один клиент перешел с UI-фреймворка JSF на AngularJS. Вы также можете использовать AngularJS для создания собственных приложений уже сегодня, так что скачайте платформу и попробуйте.

Первоначально опубликовано на https://doc.nuxeo.com.