Front–end веб–разработка
Летом 2019 года я заинтересовался веб–разработкой, а именно направлением Front–end. Front–end – это та часть веб–сайта, с которой пользователь
взаимодействует напрямую (интерфейс). Также эту часть называют клиентской стороной
приложения. Она включает в себя все, с чем напрямую
сталкиваются пользователи: цвета и стили текста, изображения, таблицы, кнопки, меню навигации и пр. [1]
Языками для Front–end разработки являются HTML, CSS и JavaScript. При помощи них создаются структура, поведение и содержимое всего, что отображается на экране браузера при открытии веб–сайтов. Я уже был знаком на базовом уровне с HTML, CSS и JavaScript, поэтому решил заняться Front–end разработкой, используя один из фреймворков (библиотек). На данный момент самыми актуальными являются Angular, React и Vue.js. Мой выбор пал на библиотеку React, так как мне понравилось, что она предоставляет определенную базу для создания приложения и не имеет дополнительных встроенных возможностей, которые, однако, можно легко добавлять к проекту.
HTML
HTML (HyperText Markup Language — язык гипертекстовой разметки
) — самый базовый строительный блок Веба. Он определяет содержание и
структуру веб–контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (CSS) или функциональности/
поведения (JavaScript) веб–страницы. HTML использует разметку (markup
) для отображения текста, изображений и другого контента в веб–браузере.
HTML–разметка состоит из специальных элементов
. HTML–элемент выделяется из прочего текста в документе с помощью тегов
, которые
состоят из имени элемента окруженного символами <
и >
. Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть
написано в верхнем или нижнем регистре, или смешано. [2]
При помощи HTML, по сути, создаётся каркас
веб–страницы, описывается её структура. Каждая веб–страница состоит из блоков, которые
строятся при помощи HTML–элементов, каждый браузер знает как отображать эти элементы. HTML содержит специальные элементы для разных типов
выводимой информации: списков, таблиц, текста, изображений, форм ввода данных и просто блоков для обёртывания
других элементов.
CSS
CSS (Cascading Style Sheets, или каскадные таблицы стилей) – это декларативный язык, который отвечает за то, как страницы выглядят в веб браузере. CSS стили содержат свойства и их значения, которые и определяют, как будет выглядеть сайт. Как правило CSS используется для определения стилей HTML элементов. CSS правило состоит из селектора и набора свойств с их значениями. [3]. Селектор отвечает за то, к какому элементу (или нескольким) будут применены заданные свойства. Свойства же отвечают за внешний вид HTML–элементов на странице. При помощи свойств можно задавать положение, отступы, цвет, фон, размер, границы, анимацию и множество других свойств.
Помимо стандартного CSS, существуют также различные препроцессоры. Их смысл заключается в упрощении и ускорении работы разработчика веб–сайта. Обычно препроцессоры упрощают синтаксис CSS и добавляют множество полезных возможностей, например, модульность (выделение более общих стилей в отдельные файлы), использование переменных и математических функций, более удобную работу с селекторами и прочее. После написания стилей в формате препроцессора, весь код преобразовывается в обычные CSS файлы со стандартными правилами, так как браузер может понимать стили только в таком формате. Поэтому, даже если просмотреть код страницы в браузере, то там будет отображаться обычный CSS.
JavaScript
JavaScript (JS) это язык программирования, который в основном используется для создания динамических скриптов на веб–страницах, но он так же часто применяется на стороне сервера, используя пакеты, такие как Node.JS. JavaScript в основном используется в браузере, что позволяет разработчикам манипулировать содержимым веб–страницы с помощью DOM, данными с помощью AJAX и IndexedDB, рисовать графику с помощью canvas, взаимодействовать с устройством под управлением браузера через различные APIs и т.д. JavaScript является одним из наиболее часто используемых языков в мире благодаря недавнему росту и повышению производительности доступных в браузерах APIs. [4]
JavaScript используется для разработки интерактивных сайтов, при помощи него можно разрабатывать улучшенное взаимодействие с формами ввода, работу с данными, давать HTML–элементам специфическое поведение, создавать более продвинутые анимации и т.д. Также на JavaScript создаются различные библиотеки с уже готовой функциональностью, которые можно подключать к разработке. JavaScript достаточно активно развивается, например, в последних версиях была добавлена поддержка классов и асинхронности.
Для разработки сайта можно также использовать другой язык программирования – TypeScript. Это язык программирования, разработанный Microsoft, и основной идеей которого является поддержка строгой типизации, которой нет в JavaScript. Но из–за того, что браузеры понимают только JavaScript, то код TypeScript преобразовывается в код JavaScript.
Мои проекты
В свободное время я разрабатывал различные проекты, используя библиотеку React. React – это библиотека JavaScript, предназначенная для разработки пользовательских интерфейсов. React позволяет создавать простые представления для каждого состояния в приложении, при этом быстро и эффективно обновлять и отображать только нужные компоненты при изменении данных. Основными строительными блоками в React являются компоненты, которые управляют своим состоянием и вместе составляют сложные пользовательские интерфейсы. [5]
На данный момент я разрабатывал различные проекты, например, просто небольшие приложения, чтобы познакомиться с каким–либо аспектом библиотеки React, но также и более цельные и законченные приложения. Одним из таких приложений является страница для поиска прогноза погоды в заданном городе. Приложение использует специальное API, после ввода данных посылается запрос на сервер и возвращается файл с информацией о погоде, которая отображается пользователю на странице. Приложение можно посмотреть по данной ссылке.
Рисунок 1 – Приложение Weather Finder
Также я разработал приложение бронирования комнат в отеле курорта. Пользователь может просмотреть доступные на данный момент комнаты, а также на странице всех комнат, при помощи специальной формы с различными фильтрами отсортировать комнаты по интересующим его параметрам. Приложение работает с искусственно сгенерированными данными и не работает с каким–либо API. Данные просто загружены на сервер специального сервиса, чтобы можно было реализовать обращение как к настоящему API. Приложение можно посмотреть по данной ссылке.
Рисунок 2 – Приложение Beach Resort
В дальнейшем я и дальше планирую продолжать заниматься Front–end разработкой, мне нравится работать с различными библиотеками, улучшать свои знания в веб–разработке, создавать качественные веб–приложения, изучать возможности React, а также знакомиться с другими популярными и востребованными фреймворками.
Список источников
- Frontend vs Backend [Электронный ресурс]. – https://www.geeksforgeeks.org/...
- HTML: HyperText Markup Language [Электронный ресурс]. – Режим доступа: https://developer.mozilla.org/...
- CSS [Электронный ресурс]. – Режим доступа: https://developer.mozilla.org/...
- JavaScript [Электронный ресурс]. – Режим доступа: https://developer.mozilla.org/...
- React – A JavaScript library for building user interfaces [Электронный ресурс]. – https://reactjs.org/
Ссылки магистров ДонНТУ, занимающихся веб–разработкой
- Жигарев Михаил Юрьевич – Проектирование и разработка современных веб–приложений
- Ковалев Данил Вадимович – Frontend разработка
- Кубашевский Денис Вадимович – Создание шаблона современного веб–приложения на React
- Озеров Аркадий Олегович – JavaScript vs TypeScript В Web–разработке
- Рубан Денис Александрович – JavaScript в web–разработке