Рамки HTML5 для влюбленного разработчика Flex

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

Что мне нравится в фреймворке Flex - это последовательный, согласованный, полный стек для создания RIA. Мне нравится, что он имеет широкий набор компонентов из коробки, а также рамки для расширения и создания действительно сложных, сильно настраиваемых и облегающих компонентов.

Существуют ли аналогичные рамки в пространстве HTML5?

Из поиска, который я сделал, я вижу там тонны полезных сценариев .js, которые обеспечивают отличные компоненты, эффекты и т.д. Однако мне не удалось найти сплошную js-структуру со зрелыми и архивированной библиотеки компонентов.

Это меня беспокоит, что при создании сложного приложения я могу написать много сантехнического кода, чтобы объединить разрозненные компоненты.

Я знаю, что HTML5 по-прежнему находится в зачаточном состоянии, поэтому, если есть перспективные рамки, на которые я должен следить, я хотел бы узнать о них.

Мой список оптимальных требований к корзине будет следующим:

Архитектура твердого компонента (включая события жизненного цикла)
Extensible
Менеджеры макетов
Абонентский интерфейс браузера
Поддержка привязки данных
Поддержка сложных скинов
Абстракция уровней услуг и протоколов (т.е. SOAP/JSON/XML-сервисы являются типом IRemoteService)

Наряду с самим интерфейсом пользовательского интерфейса какие рамки существуют в пространстве Javascript для

Архитектуры MVC. (Аналогично Parsley или Maté в мире Flex)
Инъекция зависимостей
Тестирование модулей

Ответ 1

Если вы разработчик Flex, возможно, вам будет интересно проверить как настольные, так и мобильные версии Sencha Frameworks (моей компании): Ext JS для настольных приложений и Sencha Touch для мобильных/планшетных приложений.

Ext JS ориентирован на настольные веб-приложения, которые могут работать вплоть до IE6, поэтому там не так много места, чтобы быть "HTML5", хотя, где мы можем (наш новый материал для диаграмм использует Canvas, SVG или VML в зависимости от в браузере он включен).

Sencha Touch ориентирована на мобильные браузеры Android, iOS, Blackberry и IE9 (?), поэтому мы можем использовать все CSS3, localStorage и т.д. и т.д., которые вы можете встряхнуть. Если вы ищете тестовый пример того, что вы можете сделать, когда начинаете с предположения о современном браузере, то это он.

Ext JS и Sencha Touch - это компоненты до конца. Лучший обзор компонентов и макетов - эта статья, написанная для Ext JS 2, хотя модель компонента и макета не сильно изменилась для Ext JS 3. Макеты получают переписку для Ext JS 4, которая будет иметь свою первую бета-версию в этом месяце, чтобы сделать их более похожими на макетную систему CSS3 flexbox.

Расширяемость - это результат наличия правильной модели компонента. Ext JS имеет кучу компонентов пользовательского расширения, которые можно смешивать и сопоставлять. Хорошим примером профессионального компонента после рынка является Ext Scheduler. Там также хороший учебник о том, как создавать компоненты.

Связывание данных: компоненты пользовательского интерфейса привязаны к хранилищам, поэтому несколько элементов пользовательского интерфейса обновляются с новыми данными по мере их изменения. Вы можете прочитать ссылку на хранилище API, чтобы понять, как она работает.

Комплекс скининга - Sencha Touch имеет отличную систему тематики, которая портируется на Ext JS 4, но Ext JS 3 и 2 немного больше связано с темой из-за требований совместимости IE6 (вы должны генерировать изображения)

Уровни услуг абстрагируются с помощью прокси данных, который расширяется для JSON, Http, XML и т.д..

Sencha Touch и Ext JS 4 имеют (простую) архитектуру MVC. Ext JS 3 и ниже нет.

Здесь хорошая запись при инъекции зависимостей в Ext JS (но она должна обобщаться на Touch)

Для модульного тестирования мы рекомендуем Jasmine - который вышел из Pivotal Labs.

Ext JS и Sencha Touch довольно широко используются - Ext JS в основном для корпоративных приложений, но есть много крупных компаний, использующих его как Salesforce, Marketo и многое другое для пользователей, ориентированных на внешнюю среду. Sencha Touch имеет отличную галерею приложений из нашего последнего конкурса разработчиков, вы должны это проверить.

Если вы заботитесь о инструментах, у нас также есть графический интерфейс для перетаскивания мышью и инструмент анимации CSS3 (последний в предварительном просмотре разработчика)

Ответ 2

HTML5 Boilerplate может быть вам интересен. http://html5boilerplate.com/

Я не уверен в JS-инфраструктурах для MVC или Dependency, но для модульного тестирования Dojo Harness (из-за новых пользовательских ограничений я не могу опубликовать вторую ссылку, но ее легко найти) довольно мощная, Я бы посмотрел на другие материалы Dojo, так как они довольно неплохо работают с JS

Ответ 3

Sproutcore - это инфраструктура приложения javascript. Это полностью MVC с богатой инфраструктурой наблюдения/привязки к ключевым значениям, которая уменьшает количество сантехнического кода, который вам нужно написать, если вы используете его правильно. Он поддерживает большинство ваших требований:

"Архитектура твердого компонента (включая события жизненного цикла)" - каждое представление имеет кучу событий жизненного цикла.

"Расширяемый" - Sproutcore поддерживает mixins и имеет свое "преобразование прототипального наследования" в классический материал наследования, поэтому вы чувствуете, что создаете классы в JS.

"Менеджеры макетов" - вы сами составляете свои собственные взгляды, насколько они велики. Есть SplitViews, которые вы можете изменить размер и гнездо, но это может быть одна область, где SC не соответствует вашим требованиям (хотя вы можете легко реализовать изменение размера изображения с помощью наблюдения)

"Агент агрегирования обозревателя" - он довольно агностик для браузера, как и любая другая структура JS.

"Поддержка привязки данных" - очень обширная инфраструктура привязки. Если вы привяжете поле вида к полю модели, оно будет обновляться при изменении модели.

"Поддержка сложных скиннинга" - скин через css, как и любое другое веб-приложение, если вам не нравится тема по умолчанию.

"Тестирование модуля" - SC поставляется с жгутом для тестирования qunit. Когда вы используете инструмент командной строки SC для создания класса (будь то M, V или C), инструмент создает тестовый заглушку для вас.

'HTML5' - вид туманной концепции для начала. SC определенно поддерживает создание манифеста приложения html5 в инструментах построения. Имеются рамки для записи в локальное хранилище браузера. Я думаю, что больше возможностей html5 появится в ближайшем будущем.

Приложение NPR для магазина приложений Chrome и это sudoku приложение являются приложениями SC.

Ответ 4

Я думаю, вам может понравиться Sencha Framework, который соответствует некоторым вещам, которые вы ищете.

Ответ 5

Я в той же лодке, что и ты. Все js-фреймворки, которые я нашел, требуют много CSS, чтобы сделать их в два раза меньше, чем собственный flex. Большинство новых js-фреймворков отказываются от старых браузеров.

Финансирование и классные демоверсии могут сделать метеор долгосрочным победителем js framework.

Мне нравится простота угловых Js

здесь хорошее сравнение некоторых популярных

http://blog.stevensanderson.com/2012/08/01/rich-javascript-applications-the-seven-frameworks-throne-of-js-2012/