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

Question

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

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

-

(This question в результате двух предложений с использованием Ajax, которое, очевидно, необходимых для чего-нибудь другого, чем самое тривиальное приложение на одной странице.)

Answer 1

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

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

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

Answer 2

Я бы с jQuery MVC

Answer 3

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

Answer 4

Вы можете использовать JavaScript фреймворка http://javascriptmvc.com/

Answer 5

То, как я строю приложения:

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

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

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

Answer 6

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

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

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

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

Answer 7

Альтернатива: посмотрите на ItsNat

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

Answer 8

Или посмотреть на https://github.com/flosse/scaleApp

Answer 9

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

Answer 10

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

http://boilerplatejs.org/

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

• структурирование Решение
• Создание сложного модуля иерархии
• самодостаточными компонентов пользовательского интерфейса
• основе событий межмодульная связь
• Rou тин, история, закладки
• Unit Testing
• Локализация
• Генерация документов

т.д.

Answer 11

Самое лучшее, что нужно сделать, это посмотреть на примере использует других структур:

TodoMVC витрины многих многоразовых каркасов.

Answer 12

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

Answer 13

Question - What makes an application complex ? 

Ответ - Использование слова «комплекс» в самом вопросе.Следовательно, общая тенденция будет заключаться в том, чтобы искать комплексное решение с самого начала.

Question - What does the word complex means ? 

Ответ - Все, что неизвестно или частично понято. Пример: Теория гравитации даже сегодня COMPLEX для меня, но не сэра Исаака Ньютона, который открыл его в 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 ? 

Ответ - Каркасы являются котел кода плиты/решением для некоторых широко определенных и общих шаблонов, следовательно, они могут взлетать х% (переменные, основанные на применении) нагрузки от разработки приложений, но затем не много должен быть ожидаемый из них специально для тяжелых и растущих приложений. Его всегда хороший случай, чтобы полностью контролировать структуру вашего приложения и поток, но, самое главное, код для него. В коде приложения не должно быть серых или черных областей.

Question - Can you suggest one of the many approaches to SPA architecture ? 

Ответ - Подумайте о своих собственных рамках, основанных на характере вашего приложения. Классифицировать компоненты приложения. Посмотрите на существующую структуру, близкую к вашей производной структуре, если вы ее найдете, то используйте ее, если вы ее не найдёте, я предлагаю идти вперед с вашей собственной. Создание фреймворка представляет собой довольно сложную задачу, но в долгосрочной перспективе дает лучшие результаты.Некоторые основные компоненты в моей SPA рамках будут: Источник

• данных: Модели/Коллекция моделей

• размечать для представления данных: Шаблоны

• Взаимодействия с приложением: События

• Съемка и навигация по городу: Маршрутизация

• Утилиты, виджеты и плагины: библиотеки

Позвольте мне знать, если это помогло в любом случае и удачи с вашей SPA архитектуры !!

Answer 14

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

Например:

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

Если вы решили использовать Backbone, Checkout this generator