Подтвердить что ты не робот

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

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

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

-

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

4b9b3361

ОТВЕТЫ

Ответ 1

Архитектура MVC PureMVC/JS - самая элегантная ИМО. Я многому научился у него. Я также нашел Масштабируемая архитектура приложений JavaScript Николая Закаса, помогающего исследовать варианты архитектуры клиентской стороны.

Два других совета

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

Ответ 2

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

http://boilerplatejs.org/

В нем рассматриваются общие проблемы разработки Javascript, такие как:

  • Структурирование решений
  • Создание сложной иерархии модулей
  • Отдельные компоненты пользовательского интерфейса
  • Связь между модулями на основе событий
  • Маршрутизация, история, закладки
  • Тестирование устройств
  • Локализация
  • Создание документа

и др.

Ответ 3

Способ создания приложений:

  • Рамка ExtJS, одностраничное приложение, каждый компонент, определенный в отдельном JS файле, загружаемый по запросу
  • Каждый компонент связывается со своей собственной специализированной веб-службой (иногда более одного), извлекает данные в магазины ExtJS или структуры данных специального назначения.
  • В рендеринге используются стандартные компоненты ExtJS, поэтому я могу привязывать магазины к сеткам, загружать формы из записей,...

Просто выберите javascript framework и следуйте его лучшим практикам. Мои фавориты - ExtJS и GWT, но YMMV.

НЕ катите свое собственное решение. Усилия, необходимые для дублирования того, что делают современные фреймворки javascript, слишком велики. Всегда быстрее адаптировать что-то существующее, чем строить все с нуля.

Ответ 4

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!

Ответ 5

Лучше всего посмотреть на примеры использования других фреймворков:

TodoMVC демонстрирует много различных инфраструктур SPA.

Ответ 7

Веб-приложение, в котором я сейчас работаю, использует JQuery, и я бы не рекомендовал его для какого-либо крупного одностраничного веб-приложения. Большинство фреймворков, т.е. Dojo, yahoo, google и другие используют пространства имен в своих библиотеках, но JQuery этого не делает, и это существенный недостаток.

Если ваш веб-сайт предназначен быть небольшим, тогда JQuery будет в порядке, но если вы намереваетесь создать большой сайт, я бы рекомендовал посмотреть все доступные фреймворки Javascript и решить, какой из них наиболее соответствует вашим потребностям.

И я бы рекомендовал применить шаблон MVC к вашему javascript/html и, возможно, большую часть вашей объектной модели, поскольку javascript может быть выполнен как json, который вы фактически возвращаете с сервера через ajax, а javascirpt использует json для рендеринга html.

Я бы рекомендовал прочитать книгу Ajax в действии, поскольку она охватывает большинство вещей, которые вам понадобятся.

Ответ 8

Я использую Samm.js в нескольких приложениях с одной страницы с большим успехом

Ответ 10

Отъезд http://bennadel.com/projects/cormvc-jquery-framework.htm Бен довольно острый, и если вы копаетесь в своем блоге, у него есть хорошие сообщения о том, как CorMVC ставится вместе и почему.

Ответ 11

Альтернатива: взгляните на ItsNat

Подумайте о JavaScript, но код тот же самый в Java на сервере с теми же API DOM, на сервере проще управлять своим приложением без пользовательских клиентов/мостов, потому что пользовательский интерфейс и данные вместе.

Ответ 13

NikaFramework позволяет создавать одностраничное приложение. Также позволяет писать HTML, CSS (SASS), JavaScript в отдельные файлы и объединять их только в один выходной файл.

Ответ 14

Я бы рекомендовал изучить Yeoman. Это позволяет использовать существующую "лучшую практику" для вашего нового проекта.

Например:

если вы решите использовать Angular.js, существует генератор Yeoman, который дает вам структуру для маршрутизации, просмотров, сервисов, и т.д. Также позволяют тестировать, минимизировать код и т.д.

Если вы решите использовать Backbone, проверьте этот генератор