Как выбрать лучшую технологию для своего сайта

1656531624 kak vybrat luchshuyu tehnologiyu dlya svoego sajta

Ондржея Полесного

FX1BiQN6GtZm9SwAeo5ZiiCLHW1mEr6k6vg8

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

Но с чего начать?

Нужно ли устанавливать какие-нибудь инструменты? Следует ли использовать JavaScript или поддерживать рендеринг на стороне сервера с помощью MVC или CMS «все в одном»? Я объясню, как оживить ваши веб-сайты и подготовить их к будущему.

Итак, вы хотите создать современный веб-сайт. Веб-сайт, который быстро, безопасно, хорошо выглядит и обеспечивает наилучший опыт пользователя. Слово современное здесь является ключевым, поскольку оно также относится к нашему неспокойному времени. Все заняты, наши боссы хотят, чтобы мы проделали 120% своей работы, и почти не хватает получаса на обед каждый день. Поэтому создание всей функциональности сайта с нуля не соответствует нашему сценарию. Цель состоит в том, чтобы поскорее запустить его и поделиться им со всем миром, желательно сегодня.

Универсальное решение на стороне сервера

Использование комплексного решения, такого как система управления содержимым (CMS), обеспечит быструю работу вашего веб-сайта. По крайней мере, его первая версия. Его установка и первый доступ к интерфейсу администрирования могут занять всего несколько минут, если у вас уже готова среда разработки (иначе добавьте несколько часов для установки).

После входа вы можете настроить веб-сайт, определить политику URL, а затем начать создавать шаблоны и макеты на основе выбранного дизайна. Загрузка шаблонов и содержимого в CMS может занять много времени. А именно вам необходимо:

  • узнать концепцию шаблонов каждой конкретной CMS (по документации или электронному обучению)
  • применить концепцию к своему дизайну
  • узнайте лучшие методы хранения содержимого в каждой CMS
  • настройте веб-сайт в соответствии с вашими ожиданиями

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

Когда я использовал CMS-системы в прошлом, рано или поздно я всегда создавал пользовательские элементы управления (т.е. пользовательский код), поскольку исходный HTML стандартных элементов управления был недостаточным или прямо противоречил новым отраслевым стандартам, например Accelerated Mobile Pages. Я считаю это самой большой оговоркой систем CMS, они ограничивают вас разными способами, поскольку позиционируют себя как главный двигатель вашего веб-сайта. Я всегда решал мелкие задачи 80% времени.

Еще одна проблема, с которой я сталкивался почти каждый раз, была во время развертывания. Первое развертывание просто, вы просто перемещаете все на удаленный FTP и восстанавливаете базу данных на сервере вашего хостинг-провайдера. Дальнейшие развертывания усложняют ситуацию. Хотя эти системы обычно имеют способ внести ваши разработные (или только локальные) изменения на живой сайт, они, как правило, являются частью более высоких ценовых уровней, и нужно некоторое время, чтобы изучить и настроить его.

Безголовый подход

Я объяснил преимущества архитектуры микросервисов в другой статье. Сегодня все называют этот подход безглавным, поскольку ключевой частью архитектуры микросервисов является безголовая CMS (например, Kentico Cloud). Он действует как место, где вы храните все содержимое и обеспечивает доставку. Главное преимущество в том, что это просто еще одна услуга. Вы новый руководитель вашего сайта. Вы говорите, как службы будут работать друг с другом и какие из них вы будете использовать. Headless CMS – это просто еще один сервис во всем наборе. Но как это сделать?

Позвольте мне показать вам это на моем личном сайте. Когда приходит посетитель, он ожидает увидеть нечто подобное:

lNhIQF0NgiekbYntIVZj8gAdJ-ca1Kq1ePeN

Домашняя страница моего сайта – это простой HTML-код с содержимым. Теперь существует два способа создания этого HTML-кода. Или мы придерживаемся стандартного подхода к созданию всего этого на сервере:

Y3QJf9uDimVupmPa1FDr2nKf9mnJZ-Mefoq0

Или мы сокращаем наш веб-сервер и создаем HTML-код на клиенте:

HgaJ5JgDKX262v43hpGFUN5wLQ0luIZo5p1k

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

Современный JavaScript

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

Использование JavaScript для создания сайта еще никогда не было проще. Существует много фреймворков, которые помогут вам добиться своей цели даже с минимальными знаниями простого JavaScript. А лучше всего то, что для некоторых из них не нужно ничего устанавливать. Достаточно только вашего браузера и любимого текстового редактора. Но давайте начнем с основ и выберем самый лучший фреймворк для наших новых веб-сайтов.

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

1. AngularJS

Angular имеет самую большую историю из этих трех. Он был основан почти десять лет назад в 2009 году! Его разрабатывает и поддерживает Google. По сравнению с другими фреймворками он имеет более сложный синтаксис на основе TypeScript и требует от вас настроить процесс сборки. Однако он поддерживает модульность и модель MVVM, которая позволяет приложениям, созданным на основе Angular, быть очень надежными.

Я помню, как впервые использовал его в 2013 году для полугосударственного проекта, где он позволил нам создать быстрый интерфейс для управления всеми видами объектов. Было так просто создавать расширенные списки с функциями страниц, фильтрации и сортировки.

2. ReactJS

React был первоначально основан и открыт компанией Facebook в 2013 году. Он основан на компонентах, что облегчает обучение. Его компоненты реализованы с помощью синтаксиса JSX, находящегося между JavaScript и HTML. Также легко узнать начальную архитектуру, поскольку каждый компонент похож на модуль, способствующий выводу HTML. Если вам нравится Legos, вам понравится React!

Его можно включить в веб-сайт как библиотеку JS или настроить процесс сборки и использовать TypeScript. React также имеет наибольшее сообщество и имеет родного брата под названием React Native, позволяющего создавать собственные мобильные приложения.

3. VueJS

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

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

Если вы хотите подробно ознакомиться с сравнением, обратитесь к замечательной статье TechMagic или сравнению Йенса Наухауса на Medium.

Выбор правильной рамки

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

  • Кривая быстрого обучения – мне нужно как можно скорее создать веб-сайт
  • Облегченная реализация – сайт будет достаточно малым, поэтому хочется минимизировать время загрузки
  • Простая интеграция – я не хочу настраивать процессы сборки, но немедленно начать работу над веб-сайтом
  • Хорошая документация – когда я новичок в чем-то, я все время просматриваю документацию для конкретных случаев использования
  • Простая маршрутизация – на моем веб-сайте несколько страниц, поэтому мне нужен маршрутизатор для обработки различных URL-адресов
  • Простая доставка содержимого – я буду использовать систему Content-as-a-Service, поэтому мне нужен простой способ получить содержимое в JavaScript

Итак, вы видите, что в моем случае Vue.js подходит лучше всего. Он прост в использовании и интеграции для начинающих и имеет отличную документацию с простыми учебниками. Запишите свои ожидания и посмотрите, соответствует ли им Vue.js.

Последний пункт по доставке контента очень важен. Все эти фреймворки JavaScript позволяют получать содержимое через REST API, но внедрение необработанных вызовов API займет очень много времени и совсем не доставляет удовольствия. Некоторые безголовые системы CMS, такие как Kentico Cloud, предоставляют SDK для JavaScript, который является оболочкой REST-коммуникации со многими дополнительными функциями. Это значительно облегчит сбор содержимого.

Окончательная архитектура нового сайта может выглядеть так:

5Vpup0NRAEU90P2YVdBUe0VL7i03o-6MGD6c

Первый запрос на веб-сайт разрешается путем возвращения главного шаблона HTML с файлами JavaScript. Когда браузер начнет обрабатывать JavaScript, Vue.js будет инициализирован, и это оживит наши компоненты. Затем каждый из этих компонентов действует независимо – отображает HTML, извлекает данные из безголовой CMS или публикует данные о подаче форм в веб-сервис форм.

Эта архитектура позволяет нам быстро создавать наши веб-сайты, на самом деле наслаждаясь этим. Это как строить машину из конструктора Legos. Веб-сайт будет легким, быстрым и в целом гораздо более рентабельным. Но оставим экономику для другой статьи. Каков твой опыт? Вы уже пробовали микросервис?

  1. Как начать создавать впечатляющий сайт впервые
  2. Как выбрать лучшую технологию своего сайта (эта статья)?
  3. Как улучшить свой веб-сайт с помощью Vue.js и минимальных усилий
  4. Как объединить Headless CMS с веб-сайтом Vue.js и Pay Zero
  5. Как сделать подачу форм безопасной на веб-сайте API
  6. Создание супербыстрого и безопасного веб-сайта с помощью CMS не составляет большого труда. Или это?
  7. Как быстро создать статический веб-сайт с помощью Vue.js
  8. Как быстро настроить процесс составления статического сайта

Добавить комментарий

Ваш адрес email не будет опубликован.