HYWCT: Код

Из серии "Собираем вебсайт по кусочкам"

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

Так же благодаря этому существует явная диференциация между навыками кодирования в зависимости от специализации программиста. У вас есть фронтэнд-разработчики, которые работают над созданием удобного интерфейса для пользователей, бэкэнд-разработчики, которые обрабатывают все данные и фул-стэк разработчики, которые совмешают в себе обе должности и способны выполнять и то и другое. Большинство людей знакомы с терминами front-end и back-end, но я хочу показать, как отражаются эти направления в разработке реального веб сайта.

Фронтэнд

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

В фронтэнде вы используете такие технологии как HTML, CSS и JavaScript, чтобы моментально отвечать на все действия пользователя. HTML - является каркасом визуальных элементов на экране. Это основа всех веб-сайтов и, возможно, самая легкая для понимая и изучения часть веб-разработки. CSS нужен только для стилизации HTML. С помощью правильно подобранных таблиц стилей вы можете улучшить пользовательский интерфейс (UI) на 1000%.

Что касается JavaScript, то это уже более серьезная часть фронт-энда. С его помощью вы добавляете логику в HTML и CSS и, к тому же, можете здорово улучшить (UX). Вы можете ограничить доступ к ресурсам на сайте через форму или показывать информационные сообщения пользователям, чтобы они сразу могли понять, что и почему пошло не так. JavaScript - самый ценный язык для разработки интерфейса, который вы можете выучить, потому что он дает вам доступ к огромному количеству инструментов, таких как фреймворки и библиотеки.

Вы можете использовать библиотеки JavaScript для обработки данных и макетов сайта. Существует множество JavaScript-фреймворков с помощью которых горадо проще писать HTML код и CSS. Большая часть работы в качестве фронтэнд разработчика заключается в напсании JavaScript кода. Если вам хочется, вы даже сможете написать на JavaScript вещи, которые обычно представлены HTML и CSS 😉.

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

Бэкэнд

Back-end считается более сложной частью, чем front-end, потому что несет больше обязанностей 🤷‍♀️. Бэк-энд - это место, где решаются основные проблемы безопасности вашего сайта. Можно получить информацию от пользователя и поместить ее непосредственно в базу данных, но, пожалуйста, не делайте этого. НИКОГДА не обрабатывайте пользовательский ввод таким образом.

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

Вы общаетесь как с интерфейсом, так и с базой данных, и вам необходимо разделить эти обязанности (залинковать). Существует множество лучших практик и структур, которые вы можете выбрать, задаваясь вопросом какой язык начать учить. К примеру, есть C#, PHP, Java, Python и Ruby. Каждый из них имеет свои собственные соответствующие структуры и экосистемы.

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

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

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

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

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

Перевод статьи: HYWCT: Code