В настоящее время существуют разные подходы к созданию веб-сайта с точки зрения разработчика. Хотелось бы вкратце описать наиболее распространенные способы и сравнение между ними.

Сгенерировано на стороне сервера

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

Вы можете использовать различные технологии на стороне сервера, такие как PHP, Python, Ruby, Node.js и так далее. Если вы не хотите создавать новый код с нуля, вы можете использовать решения на основе CMS / CMF / Framework из огромного списка ниже:

CMS / CMF:

  • Shopify (PHP)
  • WordPress ≥ 4.7 (PHP)
  • WebAsyst ≥7.0 (PHP)
  • Django CMS ≥3.4 (Python)
  • Камалеон ≥2.0 (Рубин)

Платформы:

  • Symfony ≥3.4 (PHP)
  • Laravel ≥5.4 (PHP)
  • Django ≥1.8 (Python)
  • Рельсы ≥2,3 (Рубин)

Что касается клиентской стороны, вы можете просто использовать базовые технологии, такие как HTML, собственный Javascript и, возможно, jQuery, чтобы упростить некоторые рутинные операции JS.

Плюсы:

  • Быстрая генерация на стороне сервера
  • Возможно сложная логика приложения
  • Базовый стек технологий внешнего интерфейса (HTML, JS, вероятно, jQuery)
  • Простая индексация поисковыми роботами

Минусы:

  • Низкая интерактивность
  • От средних до высоких требований к серверной инфраструктуре
  • Высокая связанность клиентского и серверного кода

Одностраничное приложение (SPA)

Современный подход заключается в создании SPA - одностраничного приложения с использованием Frontend Framework. В этом случае вся логика приложения находится на уровне клиента, все запросы на стороне сервера являются асинхронными. Интерфейс является очень ответственным из-за своей природы - серверного HTML не генерирует. В этом случае веб-приложение не тратит время на сетевое взаимодействие для отображения новой страницы или формы, все страницы не требуют перезагрузки страницы. Вот почему он называется Application.

Бэкэнд для SPA обычно представляет собой REST API, и он может быть отделен от внешнего интерфейса, что позволяет вам развертывать их в разных доменах. Один из очень популярных подходов - использование микросервисов в качестве бэкэнда.

Фреймворки и библиотеки Javascript:

  • React.js ≥ 16.0
  • Угловой ≥ 4,0
  • Vue.js ≥ 2,5

Плюсы:

  • Высокая интерактивность
  • От средних до низких требований к серверной инфраструктуре
  • Разделение кода (на стороне клиента и на стороне сервера)
  • Низкое сцепление клиентского и серверного кода

Минусы:

  • Возможно сложная клиентская логика
  • Расширенный стек технологий внешнего интерфейса (см. Выше)
  • Жесткое индексирование поисковыми роботами

Гибриды

Просто скомбинируйте что-нибудь из подхода генерации на стороне сервера со способами SPA, и вы создадите гибридный веб-сайт.

Как и в электромобилях, существуют разные типы гибридных подходов. Давайте обсудим два из них.

Например, у вас может быть веб-сайт HTML, созданный на стороне сервера, в сочетании с SPA, работающим только для одной страницы. Это может быть полезно, если на вашем веб-сайте есть страницы с действительно интерактивной и сложной логикой внешнего интерфейса. Это похоже на гибридный автомобиль, такой как Toyota Prius.

Плюсы:

  • Быстрая генерация на стороне сервера
  • Возможно сложная логика приложения
  • Простая индексация поисковыми роботами

Нейтральный:

  • Средний интерактивный
  • Требования к средней серверной инфраструктуре

Минусы:

  • По-прежнему высокая степень взаимосвязи клиентского и серверного кода

Другой способ создать гибрид - использовать SPA с предварительно отрисованным кодом для загрузки первой страницы на основе URL-адреса. Основная идея состоит в том, чтобы использовать одну и ту же кодовую базу и один и тот же язык - просто используйте Node.js с соответствующим плагином. Это похоже на электромобиль с увеличенным запасом хода (REEV), такой как BMW i3 с опцией REEV.

Плюсы:

  • Высокая интерактивность
  • От средних до низких требований к серверной инфраструктуре
  • Разделение кода (на стороне клиента и на стороне сервера)
  • Низкое сцепление клиентского и серверного кода
  • Быстрая предварительная отрисовка страницы на стороне сервера
  • Простая индексация поисковыми роботами
  • Повторное использование той же кодовой базы

Минусы:

  • Возможно сложная клиентская логика
  • Расширенный стек технологий внешнего интерфейса

Общий

На основании предоставленной информации вы можете выбрать способ создания веб-сайта в соответствии с вашими потребностями. Например, если вам нужен веб-сайт с мультимедийным контентом, вам, вероятно, потребуется использовать подход SPA. Однако, если вам нужно создать стандартный веб-сайт корзины покупок, проще использовать готовое решение, такое как Shopify или Magento. Если вы все еще хотите иметь больше интерактивных страниц в своем интернет-магазине, вы все равно можете использовать гибридный подход с HTML-кодом, созданным на стороне сервера, плюс SPA для некоторых страниц.

Что касается меня, я создаю небольшой информативный веб-сайт как побочный проект с некоторой логикой, и я использую гибридный подход SPA, включая React для внешнего интерфейса, Slim Framework (PHP) для API и собираюсь добавить Node. js предварительная отрисовка.

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