Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Интерфейсы сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑кодом, визуализация и оформление — содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.

Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly. Специалист, который занимается разработкой на этих технологиях, называется фронтендером (frontend-developer), а разработчики, использующие только HTML и CSS (возможно, с минимумом готовых JS‑скриптов), — просто верстальщиками.

HTML и CSS

HTML и CSS — это основа любого сайта. От их корректности зависит качество отображения сайта в различных браузерах (Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera) и на различных устройствах (ПК, планшеты, смартфоны). Валидность и семантичность HTML‑кода также определяют качество сайта с точки зрения поисковых систем.

Говоря про HTML и CSS, нельзя не упомянуть фреймворки, которые упрощают верстку — Twitter Bootstrap, Bulma, Material-UI, ZURB Foundation и Blueprint. Эти фреймворки включают сетку для макетов, хорошую типографику, готовые контролы (кнопки, элементы формы) и многое другое.

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

JavaScript

Клиентский язык программирования JavaScript используется при разработке интерфейсов сайтов, делая их более отзывчивыми и динамичными. На JavaScript реализуется большая часть тех красивых эффектов, которые мы видим на современных сайтах (фотогалереи, слайдшоу, интерфейсы на вкладках и т. д.). Еще одним из популярных типов использования JS является AJAX — технология, позволяющая без перезагрузки страницы отправлять на сервер команды и/или получать оттуда данные и встраивать их в страницу.

Говоря про JavaScript, нельзя не упомянуть популярную библиотеку, написанную на нём, — это jQuery. Её использование в проектах позволяет создавать интерактивные сценарии поведения интерфейса достаточно быстро и просто. Также на базе jQuery написано много готовых компонентов, позволяющих встроить нужную функциональность, скопировав и вставив несколько строк кода. Но при этом сложные интерфейсы на jQuery обычно очень тяжело сопровождать.

JS‑разработка сложных интерфейсов обычно строится вокруг более продвинутых библиотек и фреймворков — React, Vue, Angular, MobX и Redux. Они позволяют создавать очень интерактивные интерфейсы так, что кодовая база остаётся сопровождаемой.

Браузеры работают с JavaScript и WebAssembly, который позволяет запускать код на других языках. Среди языков, которые переводят в JS, наиболее популярны TypeScript, Dart и Kotlin.

Adobe Flash

Позволяет создавать эффектную анимацию и сложные интерактивные сервисы, но не всегда у пользователей установлен нужный плагин, на части устройств (iOS, например) Flash не поддерживается вовсе, поисковые системы также не понимают Flash. Именно поэтому на сегодняшний день Flash практически полностью вытеснен более современными решениями на JavaScript и HTML5.