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

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

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

--

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


person Community    schedule 16.06.2010    source источник
comment
Вы можете попробовать angularJS или backboneJS   -  person Romain    schedule 03.02.2011
comment
Можете ли вы поделиться своим мнением по этому вопросу? Прошло много времени с тех пор, как вы задавали этот вопрос, и мне интересно узнать, какие наиболее важные аспекты вы узнали из собственного опыта работы с Javascript SPA.   -  person Adrian Moisa    schedule 15.01.2016


Ответы (14)


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

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

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

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

http://boilerplatejs.org/

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

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

и т.п.

person Hasith    schedule 15.08.2012
comment
Он изменился на github.com/99x/boilerplatejs. Но он обновлялся 9 лет, поэтому я сомневаюсь, что он до сих пор в силе. - person Qiulang; 08.07.2021

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

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

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

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

person Joeri Sebrechts    schedule 16.06.2010

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 будут:

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

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

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

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

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

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

person Prakash Tiwari    schedule 28.08.2013
comment
Это добавляет отличную перспективу (что обычно бывает редко). Спасибо! - person Cody; 13.12.2013

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

TodoMVC демонстрирует множество фреймворков SPA.

person Adam Gent    schedule 18.09.2012

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

person bjornd    schedule 16.06.2010

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

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

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

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

person eaglestorm    schedule 17.06.2010
comment
jQuery может быть написан (как и любой JS) в пространстве имен с использованием прототипов. Я не уверен, что это достаточно большая или непонятная функция, чтобы оправдать абстрагирование за фреймворком - я предпочитаю знать, что на самом деле делает JS. stackoverflow.com/questions/881515/ - person SimplGy; 12.04.2011
comment
JQuery не предназначен для использования в качестве платформы приложения на стороне клиента. Он нацелен на более низкий уровень, чем этот. JQuery разработан для упрощения перемещения по HTML-документу, обработки событий, анимации и операций Ajax, а также для абстрагирования различий между браузерами. Для более крупных приложений вы должны использовать платформу приложений на стороне клиента, такую ​​как нокаут или магистраль В СВЯЗИ С JQuery. - person Sam Shiles; 09.05.2012
comment
Так что моя точка зрения все еще остается в силе, если нокаут или магистраль не включают, обход документа, обработку событий и т. Д., Тогда это не имеет большого значения. YUI3 App Framework делает это, и вам не нужно использовать JQuery, если вы его используете. - person eaglestorm; 10.05.2012
comment
jquery сохраняет все свои методы в переменной jQuery и переменной $. Если вы используете параметр без конфликта, в глобальном пространстве имен создается только имя jQuery. jQuery - это не фреймворк, а просто библиотека, он не говорит вам, как что-то делать, просто дает несколько ярлыков, чтобы делать некоторые общие вещи. Сравнивать jQuery с Dojo / YUI и т. Д. Неправильно. - person Hoffmann; 17.10.2012
comment
@eaglestorm Ваш оператор if оценивает false. - person John Lehmann; 17.03.2013
comment
Я не сомневаюсь, что jQuery когда-то навсегда изменил Интернет, но я согласен с @eaglestorm. В jQuery есть все, начиная с пространства имен $ или jQuery, включая манипуляции с DOM, сетевое взаимодействие, обрезку строк и сторонние расширения, что является плохим дизайном. API запутан. Но что действительно важно для объектно-ориентированного приложения, так это управление контекстом. this обработчика событий jQuery - это цель события, а не сам объект. Нет третьего аргумента, как в Array.prototype.map, для указания контекста. Таким образом, каждый обработчик событий заканчивается Function.prototype.bind или $.proxy. Таким образом, он ограничен для специальных сценариев. - person saaj; 14.12.2014

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

person NicoGranelli    schedule 18.06.2011

Я бы выбрал jQuery MVC

person Reigel    schedule 16.06.2010

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

person patrickmcgraw    schedule 16.06.2010

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

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

person jmarranz    schedule 06.01.2011

Или взгляните на https://github.com/flosse/scaleApp.

person cody    schedule 13.02.2011

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

person Alex Ivasyuv    schedule 05.01.2013

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

Например:

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

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

person Daniel Pérez Rada    schedule 08.04.2015