Что такое сайт с CMS и без

В своих статьях и на страницах с описанием услуг веб-студии рассказывают потенциальным клиентам, с какими языками программирования, фреймворками, библиотеками, базами данных и, конечно же, CMS (content management systems), они работают и чем одни технологии лучше на фоне других. Но что если мы скажем, что вашему сайту не нужна CMS. «Разве это возможно? Как же на сайт загружаются текст, картинки, вот это всё?» — может спросить кто-то из вас. Что ж, когда-то разработчики сайтов обходились без CMS, и могут обходиться до сих пор — это зависит от сайта и поставленных перед ним задач.

Как начинался веб

Сначала немного истории. Вебсайты и сам веб как система связанных между собой компьютеров, на которых хранится нужная посетителям сайтов информация, стоят на трёх слонах: языках HTML, CSS и JavaScript. Всё перечисленное появилось примерно в одно и то же время. В 1989 году специалист по информационным технологиям Тим Бернес-Ли, будучи сотрудником Европейского совета по ядерным исследованиям (CERN), предложил новую концепцию публикации и доступа к данным в компьютерной сети: World Wide Web.

На этом он не остановился. Бернес-Ли стал Томасом Эдисоном своего времени, потому что дал людям новые способы жить и общаться, придумав язык HTML, веб-браузер, HTTP, гиперссылку и прочие решения. 1991 год ознаменован публикацией спецификации языка гипертекстовой разметки HTML и первого сайта.

Разработчики ранних сайтов открывали текстовые редакторы и писали на HTML веб-страницы с текстом, заголовками и ссылками на медиафайлы. Визуально страницы выглядели скупо, но с появлением в 1996 году языка CSS программисты смогли менять у текста цвет и шрифт и располагать контент в желаемых местах. Этот процесс похож на то, как в печатном деле из разных частей собираются газеты, журналы, плакаты и т. п. Язык JavaScript, в свою очередь — даже не вишенка на торте, а платформа, на которой этот торт вращается. Он добавил сайтам анимацию, движение, интерактивность и дал пользователям сайта полноценный интерфейс.

Когда фронтенд важнее бэкенда

Шло время. Интернет усложнялся, но в то же время переставал быть обителью учёных и военных, как было когда-то, и шёл навстречу миллиардам. Эта нарастающая на рубеже веков тенденция открытости массам и их привлечения для развития интернета привела к появлению и популяризации таких CMS, как WordPress, Joomla, OpenCart. Мы, например, работаем с CMS Drupal. Для администраторов сегодняшних сайтов работа с CMS ограничивается функциями загрузки, удаления и редактирования контента, на изучение которых нужно несколько часов. Это как посчитать на калькуляторе вместо того, чтобы вспоминать алгебру.

Всё в вебе (или, по крайней мере, многое) делается ради таких людей. Следовательно, сайт не может существовать без видимой части, интерфейса, фронтенда — называйте как хотите, эти понятия почти синонимичны. Если бы не фронтенд, пользователи отправляли бы запросы к серверу через какую-нибудь консоль или терминал и в ответ получали бы сырой JSON-файл, а это не самый удобочитаемый формат на свете.

Зато без бэкенда, а следовательно и без CMS, сайт может существовать вполне благополучно. Бэкенд — это одно из возможных, но не единственных мест, из которых данные приходят на клиентскую сторону. Например, данными может быть лежащий на сервере JSON-файл с текстами и ссылками на картинки, видео и прочий контент. Контент может быть попросту захардкожен, то есть вписан в сам программный код. Для конечного пользователя различий вообще не будет — лишь бы им в руки дали хороший UI и UX.

Нужен ли вашему сайту бэкенд и CMS

Зависит от назначения сайта.

Для создания лендинга или сайта-визитки вам хватит пары фронтенд-разработчиков, знающих HTML, CSS и JS. В таких сайтах нет сложных процессов на уровне клиент-серверного взаимодействия — они просто не нужны, если перед сайтом стоит цель рассказать о компании, бренде, товаре, услуге или мероприятии. Базовых языков веб-разработки хватит и для создания временных технических страниц maintenance page и status page, сообщающей пользователям и клиентам о том, что в данную минуту с сайтом работают специалисты, поэтому сайт или его отдельная функциональности будут доступны позднее. Контент на таких сайтах обновляется редко, если вообще обновляется, поэтому они называются статическими.

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

Задачи фронтенд-разработчика и инструменты для их решения

HTML, CSS и JS должны знать как фронтенд-разработчик, так и веб-разработчик. Но фронтенд-разработчику эти языки нужны в первую очередь для наведения порядка в интерфейсе сайта, структурирования контента и создания различных красивостей. Тогда как веб-разработчик использует эти и многие другие инструменты для разработки логики работы сайта, настройки окружения, клиент-серверного взаимодействия. К фронтенд-разработчику такие требования предъявляются реже, хотя границы размываются и здесь.

Вот какими знаниями и навыками должны обладать фронтенд-разработчики:

1. HTML, CSS и JavaScript;
2. текстовые (Brackets, Sublime Text, Notepad++, Espresso и др.) и визуальные (Adobe Dreamweaver CC, RapidWeaver и др.) редакторами;
3. графические редакторы (Adobe Photoshop, Figma, Sketch);
4. умение читать дизайн-макеты и держать в порядке графический контент (картинки, иконки и т. п.);
5. владение библиотекой React;
6. владение шаблонизаторами (Pug, JSX);
7. пре- и пост-процессоры (PostCSS);
8. менеджеры пакетов (npm, Yarn);
9. исполнители задач (Grunt, Gulp);
10. загрузчики и сборщики модулей (Browserify, Webpack);
11. программы для тестирования вёрстки (CrossBrowserTesting, Markup Validator, IETester, Validator.w3, Dr Watson, CSS Validator);
12. валидация вёрстки, то есть проверка на соответствие стандартам (W3C).

Заключение

Вам с высокой долей вероятности хватит разработчика со знаниями HTML и CSS, если вам нужен:

1. лендинг,
2. сайт-визитка,
3. личный блог,
4. страницы с документацией. Пример: страница Skype Support;
5. maintenance page. Вот статья с примерами в блоге Atlassian;
6. status page. Ещё статья с примерами в блоге Geekflare.