Архитектура одностраничного веб-приложения на JavaScript?

StackOverflow https://stackoverflow.com/questions/3050869

Вопрос

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

Поначалу MVC казался подходящим вариантом.Но поскольку компоненты пользовательского интерфейса вложены на разной глубине (каждый со своим собственным способом воздействия на данные модели и реагирования на них, и каждый генерирует события, которые они сами могут обрабатывать напрямую, а могут и не обрабатывать), не похоже, что MVC может быть применен чисто.(Но, пожалуйста, поправьте меня, если это не так.)

--

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

Это было полезно?

Решение

MVC архитектура Puremvc / js. самый элегантный IMO. Я многому научился от этого. Я также нашел Масштабируемая архитектура приложения JavaScript Nicholas Zakas полезным при исследовании вариантов архитектуры боковой архитектуры клиента.

Две другие советы

  1. Я нашел представление, фокус и управление вводами - это области, которые нужно особое внимание в веб-приложениях одной страницы
  2. Я также обнаружил, что это полезно для абстрагирования в библиотеке JS, оставляя дверь открытой, чтобы изменить разум на то, что вы используете, или Mix & Match должны возникнуть необходимость.

Другие советы

Презентация Николаса Закаса, как разделяемая денами, является очень хорошим местом для начала. Я также изо всех сил пытался ответить на тот же вопрос некоторое время. После того, как пару крупных продуктов JavaScript, мысли о совместном использовании учащихся в качестве справочной архитектуры, если кто-то нуждается в этом. Посмотри на:

http://boilerplatejs.org/

Он обращается к общим проблемам развития 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, оформить заказ Этот генератор

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top