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

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

http://boilerplatejs.org/

Он решает общие проблемы разработки Javascript, такие как:

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

etc.

Как я создаю приложения:

• ExtJS framework, одностраничное приложение, каждый компонент, определенный в отдельном 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 вы поймете, что вы все еще создаете приложение, в значительной степени так же, как и вы это было сделано ранее с некоторыми изменениями и реорганизациями в подходе к развитию.

Question - What about the use of Frameworks ?

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

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

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

• источник данных : модели / коллекции моделей

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

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

• захват состояния и навигация: маршрутизация

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

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

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

TodoMVC витрины многих спа-структур.

вы можете использовать javascript MVC framework http://javascriptmvc.com/

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

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

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

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

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

Я бы пошел с jQuery MVC

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

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

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

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

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

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

например:

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

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