Создайте все HTML с JavaScript

Question

Я делаю веб-приложение, и мне интересно, как далеко я должен использовать JavaScript.

Это простое приложение, которое может быть сделано на одной странице и, таким образом, отображается как «приложение» и быстро реагирует (используя прямую манипуляцию DOM в сочетании с AJAX).

Я вижу три основных пути я могу принять это:

• A) Сформировать все HTML на сервере, сделать мелкие манипуляции DOM в JavaScript, с помощью AJAX, чтобы получить возможность отправлять меньшие изменения на сервер, и перезагрузите страницы для больших изменений.

• B) Создайте все HTML-файлы на сервере, но перезагрузите страницу меньше, и вместо этого используйте больше AJAX, чтобы сервер возвращал готовый HTML-код для вставки в различные.

• C) Сгенерировать весь HTML-код в JavaScript и не возвращать сервер, кроме объектов JSON, с данными для вставки в HTML.

Причина, по которой мне интересна опция C, заключается в том, что она придаст интересное ощущение MVC. Сервер выполняет модель, а клиент выполняет представление.

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

У кого-нибудь есть положительный опыт с этим, что сглаживает процесс разработки? Возможно, это установленный метод, который имеет определенное имя?

Answer 1

Веб-клиент нашего продукта выполнен полностью по варианту C. Однако я не могу сказать много о преимуществах, поскольку в нашем случае это началось как необходимость: а) он был запущен в те дни, когда даже самые старые JS рамки делали свои детские шаги; б) в проекте было много программистов, имеющих опыт работы с Java/ООП в целом, но которые чувствовали себя неловко с декларабельностью html.

Итак, что было сделано тогда - это «OO-JS» framework, в котором использовались все OO-хаки, доступные для Javascript (например, хакерство наследования, поддельная инкапсуляция и т. Д.), Чтобы создать API, «в основном, как Java-кодирование - у вас была иерархия объектов, вы могли бы написать код функционального стиля, который изменил бы html страницы. Все это, даже не касаясь самого html. В тот день было довольно круто, теперь это довольно нормально.

И поэтому мы используем этот домашний вал и по сей день (стоимость перехода на сторонние фреймворки сейчас слишком высока), и он по-прежнему функционирует почти так же, как и предполагалось. Наши страницы - это не что иное, как куча импорта JS (также сообщения i18n, различные текстовые константы и т. Д.) Плюс функция, которая запускает весь процесс по событию DOMContentLoaded. После этого - это просто Javascript, чтобы выполнить всю работу.

Теперь наш продукт использует очень богатый пользовательский интерфейс, приводимый большим количеством Ajax вызовов, и я не могу честно рекомендую использовать подход C в любом другом случае - более простые интерфейсы могут быть реализованы далеко легче, принимая либо A, либо B. Но я уверен, что вы это хорошо понимаете.

Answer 2

Некоторые системы шаблонов поддерживают как серверную, так и клиентскую сторону. После написания страницы с шаблоном можно использовать с обеих сторон.

Определив, является ли HTTP-запрос AJAX или старым стилем, серверная сторона может отправлять строку JSON (как карту данных шаблона) обратно вместо отображаемого содержимого HTML. Они позволяют вам переключаться между тремя планами плавно.

Одним из таких сравнений системы шаблонов можно найти на http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

Answer 3

В течение нескольких лет мы используем подход C практически во всех наших веб-приложений. Это имеет некоторые преимущества, особенно когда ваша система находится под большой нагрузкой. В нашей архитектуре имеется кластер веб-серверов, предоставляющий файлы статического содержимого (.html, .js, .css, .png и т. Д.), В то время как динамические запросы перенаправляются на другой кластер серверов приложений (запросы REST на основе шаблонов URL-адресов). Как правило, эти серверы приложений являются узким местом со всей бизнес-логикой и связью с базами данных или другими бэкэнд-системами. Таким образом, создание HTML на многих клиентах требует загрузки страницы сервера с нескольких серверов приложений. Кроме того, вы уменьшаете трафик, поскольку объекты JSON обычно намного меньше, чем вся разметка HTML, перевешивая дополнительный код JavaScript, который нужно перенести один раз (он может быть кэширован браузером в любом случае).

Теперь у вас есть возможность делать статическую разметку с помощью тегов или начинать с пустого <body/> и создавать все дерево DOM в JavaScript, что является моим любимым способом, поскольку мне не нравится смешивать два подхода.

Еще одно соображение заключается в том, хотите ли вы найти поисковые системы или нет. Они не будут индексировать ваш динамически созданный HTML, поэтому в этом случае страница сервера может иметь смысл.