Статьи

Основы фронтенда

Frontend-разработка — это процесс создания пользовательских интерфейсов (UI) для веб-приложений или веб-сайтов. Она включает в себя все технологии и инструменты, необходимые для достижения пользовательского взаимодействия с приложением в браузере. Поэтому каждая веб-страница в интернете и все, к чему вы можете на ней прикоснуться, — результат работы фронтенд-разработчика (фронтендера).

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

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

  • HTML (HyperText Markup Language) — это язык разметки, который используется для создания структуры веб-страниц. Он позволяет создавать элементы, такие как заголовки, абзацы, изображения, ссылки и многое другое. HTML — это основа, и без него невозможно создать «каркас» веб-страницы.
  • CSS (Cascading Style Sheets) — еще один язык разметки, который используется для оформления стилей веб-страниц. Он позволяет определять стиль и внешний вид элементов, создавать различные эффекты и анимации. CSS делает веб-страницы более привлекательными и понятными для пользователей.
  • JavaScript — наконец уже язык программирования, который используется для создания интерактивных элементов на веб-страницах. Он позволяет создавать различные функции, обрабатывать события и взаимодействовать с пользователем. JavaScript — это ключевой инструмент для создания интерактивных элементов на веб-страницах, при этом он не занимается обработкой основной логики работы сервиса, поэтому не заменяет собой бэкенд.

Последние версии HTML, CSS и JavaScript на текущий момент:

HTML5 — это последняя версия HTML, которая была выпущена в 2014 году. Она добавила много новых элементов и атрибутов, таких как мультимедийные элементы и элементы формы.

CSS3 — это последняя версия CSS, которая была выпущена в 2011 году. Она добавила много новых функций, таких как анимации, градиенты и медиа-запросы.

ECMAScript 2023 — это последняя версия JavaScript, которая была выпущена в 2023 году. Она добавила несколько новых функций для работы с массивами, WeakMap и унифицированный механизм удаления шебангов. Последнее большое обновление было выпущено в 2019 году.

Также, помимо использования вышеупомянутых языков «в чистом виде», разработчики давно прибегают к использованию фреймворков (и библиотек), которые легко интегрируются с HTML/CSS/JS, либо же основаны на них. Они облегчают и ускоряют процесс разработки, а также предоставляют дополнительные функции и возможности. Примеры:

  • React (библиотека) и Vue. js (фреймворк) — это два самых популярных решения для создания пользовательских интерфейсов (UI). Они используются для создания динамических и интерактивных веб-приложений.

  • Angular — это JavaScript-фреймворк, который используется для создания мощных и сложных веб-приложений. Он предоставляет множество инструментов для разработки, таких как инструменты для тестирования и управления зависимостями.

  • SASS и LESS — это препроцессоры для создания каскадных таблиц стилей (CSS). Они предоставляют дополнительные функции, такие как переменные, миксины и вложенные правила, которые помогают упростить и структурировать код CSS.

  • JSS (JavaScript Style Sheets) — также препроцессор, который позволяет писать CSS-стили, но уже в виде JavaScript-объектов, что обеспечивает более гибкую и динамичную работу с оформлением компонентов в React-приложениях.

  • Styled-components, в свою очередь, представляют собой библиотеку, основанную на идее JSS, но предоставляющую более высокоуровневый и интуитивно понятный способ описания стилей, что существенно упрощает разработку и поддержку UI в проектах React.

  • TypeScript — это язык программирования, который расширяет язык JavaScript и добавляет статическую типизацию. Он предоставляет дополнительные возможности для разработки, такие как поддержка классов и интерфейсов.

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

Ckend-разработка — это процесс создания и поддержки серверной части веб-приложений и программного обеспечения. Она отвечает за процессы и логику работы с данными, взаимодействие с хранилищами, обработку запросов от клиентских приложений и многое другое. По сути backend — внутренняя кухня приложения, невидимая и недосягаемая для обычного пользователя, без которой в принципе была бы невозможна работа сервиса.

Для тех, кто не читал предыдущую статью по фронтенду, напомним:

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

Самыми популярными языками для backend-разработки веб приложений являются: Python, PHP, Java, C#, Ruby и даже JavaScript (!), но обо всем по порядку. Как правило, порядок языков в топах и их набор несколько рознится от рейтинга к рейтингу, и от года к году, но это малоинтересно. Главное, что нужно понимать — топ бэкенд языков программирования глобально не менялся уже много лет, поэтому его лидеров можно выбирать смело, ориентируясь на специфику языка и личные предпочтения.

Python — удобный, высокоуровневый язык программирования с простым синтаксисом, который широко используется для разработки backend-части веб приложений. Его сильная сторона — возможность быстрого прототипирования и разработки, что делает его популярным выбором для стартапов и проектов с ограниченными сроками. Для него существует множество веб фреймворков, таких как Django, Flask, FastAPI, и других.

PHP — скриптовый язык, созданный исключительно для веб-разработки. Он используется для создания динамических веб-страниц и интегрируется непосредственно в HTML. PHP часто применяется для разработки блогов, социальных сетей, CMS и других веб-приложений. Его встроенные инструменты для работы с базами данных и обработки форм делают его удобным выбором для создания интерактивных веб-сайтов. Однако, хейтеров у языка и его эко-системы предостаточно.

Java — универсальный объектно-ориентированный язык программирования, который позволяет создавать приложения для самых разных платформ. В backend-разработке Java часто используется в связке с фреймворком Spring для создания надежных и масштабируемых приложений. Его главные особенности: высокая скорость и безопасность сделали язык популярным выбором для крупных корпоративных проектов и банковских сервисов.

C# — тоже объектно-ориентированный язык программирования, разработанный компанией Microsoft. Он часто используется для создания Windows-приложений и игр, но также нашел применение в веб-разработке, в особенности с использованием платформы ASP.NET. C# в целом тесно связан с платформой .NET и имеет полную поддержку инструментов и библиотек, разработанных Microsoft.

Ruby — динамический, объектно-ориентированный язык с простым синтаксисом. Он прославился благодаря фреймворку Ruby on Rails, который был разработан для создания веб-приложений с минимальными усилиями. Язык выделяется своей философией «Convention over Configuration», что способствует быстрому прототипированию и уменьшению необходимости в дополнительной настройке. Кроме того, фреймворк Ruby on Rails предлагает готовые решения для многих задач.

И в заключение:

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

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

Специфика работы может сильно отличаться в зависимости от выбранного вами языка и направления в вебе, но основная концепция остается неизменной backend — логическое ядро любого сервиса.
Старт в IT и фишки