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

презентация Николаса Закаса, разделяемая Дином, - очень хорошее место для начала. Какое-то время я пытался ответить на тот же вопрос. Сделав пару крупномасштабных продуктов 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)?

Ответ - Потому Что

-> СПА-это не какая-то основная технология, которая недавно изобретена, для которой нам нужно изобрести колесо для многих вещей, которые мы делаем в разработке приложений.

- > своя концепция управляемая потребностью для лучшего производительность, доступность, масштабируемость и ремонтопригодность веб-приложений.

- > его довольно недавно идентифицированный шаблон дизайна, поэтому понимание СПА как Шаблона дизайна проходит долгий путь в принятии обоснованных решений об архитектуре СПА.

- > на корневом уровне СПА не является сложным, потому что после понимания потребностей приложения и шаблона СПА, вы поймете, что вы все еще создаете приложение, почти так же, как вы это было сделано ранее с некоторыми изменениями и изменениями в подходе к развитию.

Question - What about the use of Frameworks ?

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

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

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

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

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

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

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

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

Дайте мне знать, если это помогло в любом случае и удачи с вашего стиля !!

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

TodoMVC витрины много много рамок СПА.

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

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

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

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

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

Я использую Samm.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 в отдельные файлы и объединить их в один выходной файл в конце.

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

например:

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

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