Разработка интерфейса

Wasaby — это модульный JavaScript-фреймворк для создания web-приложений. Его цель — обеспечить продуктивную разработку интерфейса из готовых визуальных компонентов-контролов, которые созданы с учетом нашего многолетнего опыта проектирования UX/UI-дизайна.

Wasaby появился в результате разработки одного из крупнейших в России веб-приложений электронного документооборота и отчетности online.sbis.ru и до сих пор активно развивается.

Помимо библиотеки готовых контролов, в состав фреймворка входят следующие основные модули:

  • Инфраструктура представления. Библиотека, позволяющая собрать "каркас" веб-приложения; содержит набор правил, техник и решений, допустимых при разработке прикладных решений. Определяет понятие контрола, как слоя ViewModel в парадигме MVVM, а также и правила logicless-шаблонизации в рамках слоя View.
  • Типы, структуры данных и коллекции. Набор различных типов данных и операций над ними. Определяет понятие модели данных. Данная концепция позволяет выделить вычисления логики в отдельный слой Model, оставляя код шаблонов интерфейса чистым.
  • Источники данных. Набор интерфейсов и базовых реализаций, позволяющий осуществлять клиент-серверное взаимодействие различных сервисов приложения по протоколу обмена. Предоставляет абстракции для работы с типовыми операциям CRUD.
  • Маршрутизация. Библиотека, позволяющая описать routing в декларативном виде.

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

Например, аспекты поведения контролов в целях переиспользования группируются в самостоятельные сущности, которые обеспечивают строго ограниченный набор интерфейсов:

Таким образом, базовые классы компонентов собираются из аспектов, как из кубиков. При этом визуально они могут быть не похожи друг на друга.

Важнейшими аспектами поведения являются работа с источниками и моделями данных.

Во-первых, контроллеры компонентов Wasaby умеют самостоятельно выполнять синхронизацию с источником на запись и чтение данных. Это позволяет минимизировать затраты на настройку и конфигурацию компонента: списки, таблицы, деревья и прочие контролы работают независимо от контекста исполнения.

Во-вторых, концепция работы с источником позволяет отвязать компоненты интерфейса от конкретной реализации backend’а, что позволяет повысить гибкость приложения. Например, в то время пока настоящий backend еще не готов, можно определить статический источник данных для разработки прототипа, а потом переключится на один из доступных.

Встроенные механизмы взаимодействия с источниками данных позволяют также в автоматическом режиме решать такие проблемы как:

  • индикация загрузки
  • вывод помощи при пустых наборах данных
  • централизованная обработка ошибок

Важно отметить, что Wasaby также имеет встроенные средства для темизации и интернационализации.

Контролы базовой библиотеки с точки зрения внешнего вида являются абстрактными единицами, на которые можно «натянуть» различные темы оформления (скины). Гибкость настройки тем обеспечивается требованиями линейки продуктов СБИС, которые используются в различных средах при различных обстоятельствах: от официантов с планшетами в темном помещении ресторана или кассира за кассовым терминалом до директора предприятия с большим монитором в светлом уютном офисе. При этом допускается одновременное применение нескольких тем оформления на странице.

Готовы попробовать?

Попробуйте создать пример приложения на Wasaby.