Архитектура одностраничного веб-приложения JavaScript?
Как следует структурировать сложное одностраничное веб-приложение JS на стороне клиента? В частности, мне интересно, как правильно структурировать приложение с точки зрения объектов модели, компонентов пользовательского интерфейса, любых контроллеров и объектов, обрабатывающих постоянство сервера.
Поначалу MVC показался мне приподнятым. Но с компонентами пользовательского интерфейса, вложенными на разной глубине (каждый со своим собственным способом воздействия на данные модели / реагирования на них, и каждое генерирующее события, которые они сами могут обрабатывать или не обрабатывать напрямую), не кажется, что MVC может применяться корректно. (Но, пожалуйста, поправьте меня, если это не так.)
-
( Этот вопрос привел к двум предложениям об использовании ajax, который, очевидно, необходим для всего, кроме самого тривиального одностраничного приложения.)
14 ответов
Архитектура MVC PureMVC/JS - самая элегантная IMO. Я многому научился от этого. Я также нашел Scalable JavaScript Application Architecture Николаса Закаса полезным в исследовании вариантов архитектуры на стороне клиента.
Два других совета
- Я обнаружил, что представление, фокусировка и управление вводом - это области, которые требуют особого внимания в одностраничных веб-приложениях.
- Я также нашел полезным абстрагировать библиотеку JS, оставив открытой дверь, чтобы передумать о том, что вы используете, или смешать и сопоставить, если возникнет такая необходимость.
Презентация Николаса Закаса, которую разделяет Дин, - это очень хорошее место для начала. Я также пытался ответить на тот же вопрос некоторое время. Сделав пару крупномасштабных продуктов Javascript, подумайте о том, чтобы поделиться знаниями в качестве эталонной архитектуры на тот случай, если это кому-то понадобится. Посмотри на:
В нем рассматриваются общие проблемы разработки Javascript, такие как:
- Структурирование решения
- Создание сложной иерархии модулей
- Автономные компоненты пользовательского интерфейса
- Событийная межмодульная связь
- Маршрутизация, История, Закладки
- Модульное тестирование
- локализация
- Генерация документов
и т.п.
Как я создаю приложения:
- Платформа ExtJS, одностраничное приложение, каждый компонент, определенный в отдельном файле JS, загружается по требованию
- Каждый компонент связывается со своим собственным выделенным веб-сервисом (иногда с несколькими), извлекая данные в хранилища ExtJS или структуры данных специального назначения.
- В рендеринге используются стандартные компоненты ExtJS, поэтому я могу связывать хранилища с сетками, загружать формы из записей,...
Просто выберите фреймворк javascript и следуйте его рекомендациям. Мои любимые - ExtJS и GWT, но YMMV.
НЕ катите свое собственное решение для этого. Усилия, необходимые для дублирования того, что делают современные фреймворки javascript, слишком велики. Всегда быстрее адаптировать что-то существующее, чем создавать все с нуля.
Question - What makes an application complex ?
Ответ - Использование слова "сложный" в самом вопросе. Следовательно, общая тенденция будет искать комплексное решение с самого начала.
Question - What does the word complex means ?
Ответ - Все, что неизвестно или частично понято. Пример: теория гравитации даже сегодня сложна для меня, но не для сэра Исаака Ньютона, который открыл ее в 1655 году.
Question - What tools can I use to deal with complexity ?
Ответ - Понимание и простота.
Question - But I understand my application . Its still complex ?
Ответ. Подумайте дважды, потому что понимание и сложность не сосуществуют. Если вы понимаете огромное огромное приложение, я уверен, вы согласитесь, что это не что иное, как интеграция маленьких и простых модулей.
Question - Why all of the above philosophical discussion for a question on
Single Page Application (SAP)?
Ответ - потому что
-> SPA - это не какая-то базовая технология, которая была недавно изобретена, для которой нам нужно заново изобретать колесо для многих вещей, которые мы делаем в разработке приложений.
-> Это концепция, обусловленная необходимостью повышения производительности, доступности, масштабируемости и удобства обслуживания веб-приложений.
-> Это довольно недавно идентифицированный шаблон проектирования, поэтому понимание SPA как шаблона проектирования имеет большое значение при принятии обоснованных решений об архитектуре SPA.
-> На корневом уровне никакой SPA не является сложным, потому что после понимания потребностей приложения и шаблона SPA вы поймете, что вы все еще создаете приложение, почти так же, как вы делали это раньше с некоторыми изменениями и перестановками. в подходе развития.
Question - What about the use of Frameworks ?
Ответ. Каркасы - это код / решение для некоторых распространенных и общих шаблонов, поэтому они могут снизить нагрузку на x% (переменную, в зависимости от приложения) от разработки приложения, но тогда от них не следует ожидать много, особенно для тяжелых и растущие приложения. Всегда полезно иметь полный контроль над структурой и потоком вашего приложения, но самое главное - код для него. В коде приложения не должно быть серых или черных областей.
Question - Can you suggest one of the many approaches to SPA architecture ?
Ответ. Подумайте о своей собственной структуре, основанной на характере вашего приложения. Категоризировать компоненты приложения. Ищите существующую платформу, которая близка к вашей производной платформе, если вы найдете ее, то используйте ее, если вы ее не найдете, я предлагаю продолжить работу со своей собственной. Создание фреймворка требует больших усилий, но в долгосрочной перспективе дает лучшие результаты. Некоторые основные компоненты в моей структуре SPA будут:
Источник данных: Модели / Коллекции Моделей
Разметка для представления данных: шаблоны
Взаимодействие с приложением: События
Захват состояния и навигация: Маршрутизация
Утилиты, виджеты и плагины: библиотеки
Дайте мне знать, если это помогло, и удачи в вашей архитектуре SPA!
Лучше всего посмотреть на примеры использования других фреймворков:
TodoMVC демонстрирует множество SPA-фреймворков.
Веб-приложение, над которым я сейчас работаю, использует JQuery, и я не рекомендовал бы его для любого большого одностраничного веб-приложения. Большинство фреймворков, таких как Dojo, Yahoo, Google и другие, используют пространства имен в своих библиотеках, но JQuery нет, и это является существенным недостатком.
Если ваш веб-сайт предназначен для небольшого размера, то с JQuery все будет в порядке, но если вы намереваетесь создать большой сайт, я бы порекомендовал изучить все доступные Javascript-фреймворки и решить, какая из них наиболее соответствует вашим потребностям.
И я бы порекомендовал применить шаблон MVC к вашему javascript/html, и, вероятно, большая часть вашей объектной модели для javascript может быть выполнена в виде json, который вы на самом деле возвращаете с сервера через ajax, а javascirpt использует json для рендеринга html.
Я бы порекомендовал прочитать книгу Ajax в действии, так как она охватывает большинство вещей, которые вам нужно знать.
Вы можете использовать JavaScript MVC Framework http://javascriptmvc.com/
Я использую Samm.js в нескольких одностраничных приложениях с большим успехом
Проверьте http://bennadel.com/projects/cormvc-jquery-framework.htm Бен довольно резок, и если вы покопаетесь в его блоге, у него есть несколько хороших постов о том, как CorMVC собрал вместе и почему.
Альтернатива: взгляните на ItsNat
Думайте на JavaScript, но кодируйте то же на Java на сервере с теми же API-интерфейсами DOM, на сервере проще управлять вашим приложением без пользовательских клиентов / мостов, потому что пользовательский интерфейс и данные находятся вместе.
NikaFramework позволяет создавать одностраничные приложения. Также позволяет записывать HTML, CSS (SASS), JavaScript в отдельные файлы и в конце объединять их в один выходной файл.
Я бы порекомендовал исследовать Йомен. Это позволит вам использовать существующую "лучшую практику" для вашего нового проекта.
Например:
если вы решите использовать Angular.js, есть генератор Yeoman, который даст вам структуру для маршрутизации, представлений, сервисов и т. д. Также позволит вам тестировать, минимизировать ваш код и т. д.
Если вы решили использовать Backbone, проверьте этот генератор