Архитектура одностраничного веб-приложения на JavaScript?
-
27-09-2019 - |
Вопрос
Как должно быть структурировано сложное одностраничное веб-приложение JS на стороне клиента?В частности, мне любопытно, как четко структурировать приложение с точки зрения его объектов модели, компонентов пользовательского интерфейса, любых контроллеров и объектов, обрабатывающих сохраняемость сервера.
Поначалу MVC казался подходящим вариантом.Но поскольку компоненты пользовательского интерфейса вложены на разной глубине (каждый со своим собственным способом воздействия на данные модели и реагирования на них, и каждый генерирует события, которые они сами могут обрабатывать напрямую, а могут и не обрабатывать), не похоже, что MVC может быть применен чисто.(Но, пожалуйста, поправьте меня, если это не так.)
--
(Этот вопрос в результате появилось два предложения по использованию ajax, который, очевидно, необходим для чего угодно, кроме самого тривиального одностраничного приложения.)
Решение
MVC архитектура Puremvc / js. самый элегантный IMO. Я многому научился от этого. Я также нашел Масштабируемая архитектура приложения JavaScript Nicholas Zakas полезным при исследовании вариантов архитектуры боковой архитектуры клиента.
Две другие советы
- Я нашел представление, фокус и управление вводами - это области, которые нужно особое внимание в веб-приложениях одной страницы
- Я также обнаружил, что это полезно для абстрагирования в библиотеке JS, оставляя дверь открытой, чтобы изменить разум на то, что вы используете, или Mix & Match должны возникнуть необходимость.
Другие советы
Презентация Николаса Закаса, как разделяемая денами, является очень хорошим местом для начала. Я также изо всех сил пытался ответить на тот же вопрос некоторое время. После того, как пару крупных продуктов JavaScript, мысли о совместном использовании учащихся в качестве справочной архитектуры, если кто-то нуждается в этом. Посмотри на:
Он обращается к общим проблемам развития JavaScript, такая как:
- Структурирование решений
- Создание сложной иерархии модуля
- Самостоятельные пользователи UI
- Мероприятие на основе межмодуля связи
- Маршрутизация, История, Закладки
- Установка тестирования
- Локализация
- Генерация документа
и т. д.
То, как я строю приложения:
- EXTJS Framework, приложение для одного страницы, каждый компонент, определенный в отдельном файле JS, загружен по требованию
- Каждый компонент связывается со своим собственным выделенным веб-сервисом (иногда более одной), получает данные в магазины ExtJS или структуры данных специального назначения.
- Рендеринг использует стандартные компоненты EXTJS, поэтому я могу связать магазины к сеткам, нагрузки формы из записей, ...
Просто выберите JavaScript Framework и следуйте за его лучшими практиками. Мои фавориты 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 вы поймете, что все еще создаете приложение, практически так же, как делали это раньше, с некоторыми изменениями и перестановками в подходе к разработке.
Question - What about the use of Frameworks ?
Ответ - Фреймворки представляют собой базовый код / решение для некоторых обычно идентифицируемых и универсальных шаблонов, следовательно, они могут снизить нагрузку на x% (переменную, основанную на приложении) при разработке приложений, но тогда от них не следует ожидать многого, особенно для тяжелых и растущих приложений.Всегда полезно иметь полный контроль над структурой и потоком работы вашего приложения, но самое главное - над кодом для него.В коде приложения не должно быть серых или черных областей.
Question - Can you suggest one of the many approaches to SPA architecture ?
Ответ - Подумайте о своем собственном фреймворке, основанном на характере вашего приложения.Классифицируйте компоненты приложения.Поищите существующий фреймворк, близкий к вашему производному фреймворку, если вы его найдете, то используйте его, если вы его не найдете, тогда я предлагаю использовать ваш собственный.Создание фреймворка требует значительных усилий на начальном этапе, но в долгосрочной перспективе дает лучшие результаты.Некоторыми базовыми компонентами моего фреймворка SPA будут:
Источник данных :Модели / Коллекции моделей
Разметка для представления данных :Шаблоны
Взаимодействие с приложением :Мероприятия
Захват состояния и навигация :Маршрутизация
Утилиты, виджеты и плагины :библиотеки
Дайте мне знать, если это как - то помогло, и желаю удачи с вашей архитектурой СПА - центра!!
Лучшее, что нужно сделать, это посмотреть на примере использования других рамках:
TOMEVC. Витрины много многих спа-каркасов.
Вы можете использовать JavaScript MVC Framework http://javascriptmvc.com/
Веб-приложение, которое я в настоящее время работаю над используемым jQuery, и я не рекомендую его для любого большого веб-приложения для одной страницы. Большинство рамки, т.е. Dojo, Yahoo, Google и другие используют пространства имен в своих библиотеках, но jQuery нет, и это значительный недостаток.
Если ваш веб-сайт должен быть маленьким, то jQuery будет в порядке, но если вы намереваетесь построить большой сайт, то я бы порекомендовал смотреть на все имеющиеся имеющиеся javascript Frameworks, доступные и приняли внимание, какой из них наиболее соответствует вашим потребностям.
И я бы порекомендовал применить шаблон MVC на ваш JavaScript / HTML и, вероятно, большая часть вашей объектной модели для JavaScript может быть сделана в качестве JSON, которую вы фактически возвращаете с сервера через Ajax, и Javascirpt использует JSON для рендеринга HTML.
Я бы порекомендовал прочитать книгу Ajax в действии, поскольку он охватывает большую часть того, что вам нужно будет знать.
я использую Samm.js. В нескольких страницах приложений с большим успехом
Я бы пошел с jquery mvc.
Проверить http://bennadel.com/projects/cormvc-jquery-framework.htm. Бен довольно острый, и если вы копаете в своем блоге, у него есть несколько хороших постов о том, как Cormvc собран вместе и почему.
Альтернатива: посмотрите на Находчивый
Думайте в JavaScript, но код то же самое в Java на сервере с тем же API на DOM, на сервере просто проще управлять вашим приложением без пользовательского клиента / мостов, поскольку UI и Data являются вместе.
Или посмотрите на https://github.com/flosse/scaleapp.
Nikaframework Позволяет создать одностранное приложение. Также позволяет писать HTML, CSS. (Сасс), JavaScript в отдельные файлы и свяжите их только в один выходной файл в конце.
Я бы порекомендовал исследовать Йоман. Отказ Это позволяет вам использовать существующую «лучшую практику» для вашего нового проекта.
Например:
Если вы решили использовать Angular.js, есть Yeoman Generator, Это дает вам структуру для маршрутизации, представлений, услуг и т. Д. Также разрешать тестировать, минижировать свой код и т. Д.
Если вы решили использовать Backbone, оформить заказ Этот генератор