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

Question

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

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

-

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

Answer 1

Архитектура

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

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

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

Answer 2

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

http://boilerplatejs.org/

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

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

и т. Д.

Answer 3

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

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

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

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

Answer 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 ?

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

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

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

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

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

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

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

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

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

Answer 5

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

TodoMVC демонстрирует множество платформ SPA.

Answer 6

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

Answer 7

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

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

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

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

Answer 8

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

Answer 9

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

Например:

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

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

Answer 10

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