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

99

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

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

-

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

Сообщество
источник
Вы можете попробовать angularJS или backboneJS
Ромен
2
Можете ли вы поделиться своим мнением по этому вопросу? Вы давно не задавали этот вопрос, и мне интересно узнать, какие наиболее важные аспекты вы узнали из собственного опыта работы с Javascript SPA.
Адриан Мойса

Ответы:

35

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

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

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

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

http://boilerplatejs.org/

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

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

и т.п.

Хасит
источник
10

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

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

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

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

Йери Себрехтс
источник
10
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 будут:

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

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

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

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

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

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

Пракаш Тивари
источник
1
Это добавляет отличную перспективу (что обычно бывает редко). Спасибо!
Коди,
4

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

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

Адам Гент
источник
1

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

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

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

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

орел
источник
jQuery может быть написан (как и любой JS) в пространстве имен с использованием прототипов. Я не уверен, что это достаточно большая или непонятная функция, чтобы оправдать абстрагирование за фреймворком - я предпочитаю узнать, что на самом деле делает JS. stackoverflow.com/questions/881515/…
SimplGy
4
JQuery не предназначен для использования в качестве платформы приложения на стороне клиента. Он нацелен на «более низкий уровень», чем этот. JQuery разработан для упрощения обхода HTML-документа, обработки событий, анимации и операций Ajax, а также для абстрагирования различий между браузерами. Для более крупных приложений вы должны использовать платформу приложений на стороне клиента, такую ​​как нокаут или магистраль В СВЯЗИ С JQuery.
Сэм Шайлз
Итак, моя точка зрения остается в силе, если нокаут или магистраль не включают, обход документа, обработку событий и т.д., тогда это не имеет большого значения. YUI3 App Framework делает это, и если вы его используете, нет необходимости в JQuery.
eaglestorm
1
jquery сохраняет все свои методы в переменной jQuery и переменной $. Если вы используете опцию без конфликта, в глобальном пространстве имен создается только имя jQuery. jQuery - это не фреймворк, а просто библиотека, он не говорит вам, как что-то делать, просто дает несколько ярлыков для выполнения некоторых обычных вещей. Сравнивать jQuery с Dojo / YUI и т. Д. Неправильно.
Hoffmann
1
@eaglestorm Ваш оператор if оценивает false.
Джон Леманн
1

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

НикоГранелли
источник
0

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

Патрик Макгроу
источник
0

Альтернатива: взгляните на ItsNat

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

Jmarranz
источник
0

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

Алексей Ивасюв
источник
0

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

Например:

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

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

Даниэль Перес Рада
источник