Какие технологии используются во фронтенде

Современные технологии верстки и front-end

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

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

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

HTML

Наиболее старой, однако, по сей день широко используемой технологией «написания» сайтов является html-верстка — универсальная и гибкая. Преимуществом использования технологии HTML является простота освоения данного языка и широкие возможности выбора редакторов для написания кода.

Сверстать простую веб-страничку можно в обычном блокноте. Для создания более сложных сайтов часто применяются различные визуальные редакторы, такие как Notepad++, MS FrontPage и другие, позволяющие воплощать задуманный дизайн с помощью готовых блоков, шаблонов и форм.

CSS

HTML прекрасно справляется с разметкой страницы, созданием различных элементов, однако совершенно не подходит для придания сайту привлекательного и уникального внешнего вида. С целью расширения возможностей сайтостроения и дизайна для использования совместно с HTML была разработана технология CSS (Cascading Style Sheets — каскадные таблицы стилей).

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

JavaScript

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

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

Использование технологии JS при верстке сайта позволяет создавать различные формы обратной связи, регистрационные анкеты, подсказки и предупреждения, вносить изменения в стили элементов страниц, удалять или добавлять теги, манипулировать элементами html-кода, записывать данные о посетителях и многое другое.

JS поддерживается всеми браузерами и интегрируется с ними. Однако возможности сценариев JavaScript небезграничны. Так, например, JS не выполняет кроссдоменные запросы, ему недоступны файлы, кроме cookie, расположенные не на компьютере пользователя, не защищает страницу от копирования текста и пр.

Bootstrap

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

Bootstrap совмещает в себе html, css и javascript, а потому с его помощью можно создать любую сетку сайта и элементы интерфейса.

Преимуществами использования данной технологии в сайтостроении являются:

• высокая скорость создания макетов благодаря огромной библиотеке готовых решений;
• обеспечение адаптивности сайта и кроссбраузерности;
• простота освоения и применения.

Ember.js

Ember.js — фреймворк, заточенный специально под создание нетрадиционных сложных одностраничников и настольных приложений. В общем понимании это JS-каркас, работающий по MVC-шаблону распределения кода. При этом Ember.js легко интегрируется и может работать с библиотеками Handlebars и jQuery.

AngularJS

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

AngularJS прост и функционален — поддерживает Ajax, анимации, управление DOM‑ом, маршрутизацию и т.д., что обеспечило ему огромную популярность.

React

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

Node.js

Node.js представляет собой программную платформу на основе движка V8, транслирующую вызовы на языке JS в машинный код. Node.js удобна для создания серверных JS-приложений, хотя возможно применение для программирования микроконтроллеров и написания десктопных приложений.

jQuery

Эффективно и удобно работать с любым из элементов DOM, событиями, использовать технологию Ajax, создавать всевозможные сложные визуальные эффекты и всегда иметь под рукой огромное количество JS-плагинов для создания пользовательских интерфейсов позволяет JavaScript-библиотека jQuery. С помощью данного фреймворка веб-разработчика м удается придать сайту динамичность.

Разработка со стороны Front end — что это такое и чем отличается от Back end?

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

Что такое фронтенд?

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

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

Frontend-разработка — это работа по созданию публичной части web-приложения, с которой непосредственно контактирует пользователь, и функционала, который обычно выполняется на стороне клиента. То есть, фронтенд разработчик работает над тем, чтобы на сайте каждая кнопочка, иконка, текст и окно не только стояли на своем месте, не перекрывали друг друга и выглядели целостно (это веб-верстка), но и чтобы они выполняли свое прямое предназначение — производили какие-то действие (например, чтобы кнопка “купить” открывала корзину, а “play” — запускала воспроизведение фильма или музыки).

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

Компоненты фронтенд разработки:

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

Главная задача Frontend-разработчика

Если вы имеете творческий подход к работе, жаждете разрабатывать и создавать динамические пользовательские интерфейсы, вам однозначно дорога во фронтенд.

Вся фронтенд разработка выполняется на стороне пользователя, она не менее важна чем бекенд разработка (о ней мы также упомянем чуть ниже), так как это то, что пользователь видит и с чем взаимодействует. Основная задача фронтенд специалиста — это связать представленные дизайнером графические макеты Web-приложения (страницы сайта) с бэкендом и при необходимости реализовать вычислительный функционал на стороне пользователя. Основные технологии в арсенале фронтендера это HTML, CSS и JavaScript. Конечно, при работе в команде нужно знать и разбираться во многих процессах, смежных с работой фронтенд-разработки. Будучи уже опытным фронтенд-разработчиком нужно быть знакомым с бэкенд-технологиями и понимать принципы взаимодействия пользователя и с приложениями (UX).

Что должен знать опытный фронтенд-разработчик?

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

Некоторые работодатели совершенно не различают фронтенд-разработчика от верстальщика, предъявляя к соискателю вакансии на должность фронтенд-разработчика знание навыков совершенно не относящихся к его профилю. Работодатели часто сами не знают, что верстальщик — это фактически узкопрофильный специалист. Его задача заключается в верстке макета, полученного от дизайнера, используя при этом только HTML+CSS, и это всего треть от того, что должен знать junior frontend разработчик.

Что же касается опытного фронтенд девелопера, он не просто “верстает макеты”, он отлично знает JavaScript, ориентируется в фреймворках и библиотеках, имеет представление и понимание того, что размещается на серверной стороне, и нередко знает дополнительные языки, например PHP или C#.

Фронтенд-разработчик смыслит в препроцессорах и сборщиках GULP, LESS, SASS, GRUNT, работает с SVG-объектами, DOM, API, AJAX и CORS и так далее. Кроме всего прочего присутствует понимание принципов адаптивной и отзывчивой верстки, UI/UX-проектирования, кросс-браузерности и кросс-платформенности, базового тестирования, возможно, также, и знание навыков мобильной разработки. Продвинутый фронтенд девелопер также умеет использовать графические редакторы, работает с контролем версий Git, GitHub, CVS, с шаблонами различных CMS. Стоит отметить, что очень важно, также, и знание английского языка на уровне свободного общения с заказчиками и чтения документации.

Чтобы стать востребованным и опытным специалистом в области Фронтенд разработки, необходимо освоить следующие технологии:

• HTML и CSS (в том числе сетки и CSS-фреймворки, спецификации W3C и WHATWG, HTML5/CSS3 Polyfills);
• свободно работать с JavaScript;
• Понимать логику работы клиент-серверной архитектуры в контексте написания реальных приложений;
• Знать популярные библиотеки и феймворки: React.js, jQuery, Angular.JS, Redux, js, понимать принципы построения современных одностраничных приложений (Single Page Application);
• Препроцессоры CSS (Sass, Less, Stylus и т. д.);
• Популярные CMS (WordPress, Drupal, Joomla и т.д.);
• OOCSS / BEM / SMACSS;
• ECMAScript 6;
• HTML5 API;
• SVG;
• DOM;
• Понимать принципы построения backend (Node.js, PHP, Ruby, .NET и т. д.);
• JavaScript транспайлеры (Babel);
• Инструменты дебаггинга (Chrome Dev Tools, Firebug и так далее);
• Графические редакторы (Photoshop, Illustrator и прочее);
• Инструменты контроля версий (Git, GitHub, CVS и так далее);
• Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и так далее).

Также, фронтендер должен разбираться и уметь разрабатывать веб-интерфейсы и веб-приложения, тестировать и масштабировать веб-приложения, читать чужой код с пониманием того, как он работает, владеть навыками soft-skills и быть подготовленным к прохождению собеседования, уметь презентовать себя и свой продукт, иметь качественное и “живое” портфолио.

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

На кусах фронтенд разработки в Dan.It вы сможете приобрести знания и освоить все навыки, необходимые востребованному frontend-разработчику.

Frontend и Backend разработка — отличия и взаимодействие между собой

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

К примеру, вы оплачиваете покупку в интернете: вводите данные карты, кликаете “оплатить” и видите надпись “ваш платеж принят в обработку” — это был фронтенд. То, как двигаются ваши деньги внутри сети и то, как ваш заказ поступает в магазин — это бекенд. Соответственно, когда магазин видит уведомление о том, что поступил заказ, а деньги зачислились на счет — это снова работа фронтенда.

Бекенд-разработчики имеют дело с серверными языками программирования, такими как Java, Python, PHP, Ruby и другие. Также бэкендеры должны знать базы данных, архитектуру, ко всему прочему им пригодятся знания аппаратной части бэкенда, то есть сервера, его возможности и характеристики. Бекенд-разработчики, как правило, не имеют дела ни с чем, что напрямую взаимодействует с пользователем они не разбираются в пользовательских интерфейсах UI и не углубляются в пользовательский опыт взаимодействия UX или в верстку страницы, хотя общее понимание всего этого имеют. Они работают, в основном, с точным анализом и вычислениями, где почти нет творческой, гуманитарной составляющей. При этом, им нужно уметь вычислять все возможные исходы операций и понимать причины ошибок, появившихся на пути клиент-сервер-клиент.

Рассмотрим процесс взаимодействия frontend и backend:

• фронтенд отправляет пользовательскую информацию в бэкенд;
• информация обрабатывается;
• информация возвращается обратно, приняв целостную форму и выполнив обработанный запрос.

Все эти задачи выполняет несколько специалистов одновременно, это всегда взаимодополняющая командная работа.

Варианты взаимодействия frontend и backend:

• HTTP-запрос отправляется на сервер, сервер в процессе поиска информации, встраивает ее в шаблон и возвращает обратно в виде HTML-страницы.
• Случай с применением инструментария AJAX (Asynchronous JavaScript and XML). В данном случае запрос отправляет JavaScript, который загружен в браузер, ответ же приходит в формате XML или JSON.
• Одностраничные приложения, которые загружают данные без обновления страниц. Это делается с помощью AJAX или фреймворков Angular и Ember.
• Ember или библиотека React оказывают помощь в использовании приложения и в клиентской части и на сервере. Frontend и backend взаимодействуют через AJAX и HTML-код, который обрабатывается на сервере.

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

Карьера и зарплата фронтенд-разработчика

Чаще всего карьера frontend-разработчика начинается с верстальщика и тестировщика. В процессе работы изучается HTML+CSS, далее по нарастающей приобретаются знания JavaScript, библиотек и фреймворков. Затем изучаются основные понятия построения серверной части, параллельно добавляя инструменты, согласно выбранной специализации. Дополнительно нарабатываются навыки работы с графическими редакторами и пониманием принципов UI/UX дизайна и, конечно же, софт-скилы.

В целом, возможны такие основные пути развития фронтенд девелопера:

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

Что касается повышения уровня квалификации с позиции junior до senior — в первых двух случаях шансы стать синьором и/или тим лидом практически одинаковы, все зависит от вашего стремления расти и учиться. В третьем случае вам может понадобится немного больше времени, ведь сменив направление, вы можете спрыгнуть с позиции senior frontend на junior backend.

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

Как стать фронтенд-разработчиком — курсы, которые научат

Если вы новичок в ІТ-индустрии и хотите изучить фронтенд с нуля, то курсы по направлению frontend будут правильным решением. Если у вас есть желание работать с клиентской и визуальной частью сайтов и посадочных страниц, имеете представление, что такое компьютерная верстка и хотите развиваться в этом направлении, специализированные курсы помогут получить полные и структурированные знания. Для новичков курсы послужат твердой базой на пути к продвинутому уровню, а менторы в DAN.IT education помогут освоить её учитывая ваши имеющиеся знания и пожелания.

На курсах DAN.IT в Киеве вас обучат веб-вёрстке, распространенному в среде программистов язык JavaScript, фреймворки типа React. js, работа с Git, плюс даются основы BackEnd. Курс Front End оснащен примерами и кейсами, получил одобрение израильских и украинских разработчиков, студенты проходят обучение по последним стандартам ІТ-рынка.

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

Чему мы обучаем на курсах

После успешного прохождения тестирования наши студенты зачисляются в программу и начинают обучение. Каждый студент получает подготовительные теоретические материалы по вёрстке и Javascript. Каждому предстоит пройти первую теоретическую задачу, для перехода к практике на конкретных примерах.

• Основы HTML, CSS. Селекторы CSS; оформление элементов; управление размером и положением блоков на странице; поля и отступы; порядок верстки блока; тестирование результатов верстки; адаптивная веб верстка; нюансы кроссбраузерной вёрстки; базовая анимация; стандарт CSS3; основные инструменты разработчика.
• Основы JavaScript. Базовые и объектные типы данных; преобразование типов; переменные и правила их именования; условия, операторы, массивы, циклы, функции; области видимости, замыкания; контекст вызова; управляющие конструкции; обработка ошибок; введение в браузерные события; Localstorage/Sessionstorage.
• Advanced HTML/CSS. CSS методологии на примере BEM; верстка с пиксельной точностью; верстка с поддержкой Retina экранов; кросс-браузерная верстка; Web accessibility; Mobile first
• Advanced JavaScript. Глубокое погружение в возможности языка; изучение основ объектно-ориентированного программирования (ООП), базовых шаблонов проектирования, основ функционального программирования, возможностей стандарта ES6\ ES7 (ECMAScript); конструкторы; прототипное наследование (prototype); рекурсия; модули; strict mode; cookies; Async/Await. Знакомство со стандартами WebSocket, JSONP, AJAX, XMLHttpRequest, Promise, Single Page Application, общая информация про RESTful API, тестирование кода с помощью фреймворков.
• Основы работы с библиотекой React.js. Верстка JSX; виртуальный DOM; components; работа с Props/State компонента; React Router; Redux; работа с ImmutableJS в React/Redux приложении; работа с middleware, Redux-thunk; Redux-forms; Тестирование приложения с помощью Jest и Enzyme; Использование хуков в React.
• Воркшоп: Серверный JavaScript (Backend). Знакомство с технологией Node.js; инфраструктура и использование пакетного менеджера NPM (package manager); фреймворк Express.js; работа с базами данных на примере MongoDB.
• Дополнительные навыки. Работа с Git Bash; workflow от создания репозитория до его отправки на удаленный сервер; работа с ветками; работа с конфигурационными файлами.

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

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

Также студентам предоставляется возможность работы в команде над финальным проектом по методике scrum. Стартом такого проекта послужит реализация идеи клиента. После окончания финального проекта студентов ожидает его презентация перед членами Наблюдательного совета.

Заключение

В этом материале мы рассказали, что такое “фронтенд”, чем он отличается “бэкенда”, какими навыками необходимо обладать, чтобы стать востребованным фронтенд-разработчиком и какая заработная плата может быть у новичка.

Технологии фронтенд-разработки, на которые вы, возможно, не обратили внимания

«Хочешь жить — умей вертеться». Это — про работу фронтенд-программиста. Для того чтобы успешно справляться со своими обязанностями, такому специалисту приходится решать массу задач и необходимо обладать множеством способностей. Очень важно, кроме того, не забывать о главной цели, ради которой разрабатывают сайты. А именно, о том, что сайты должны помогать людям упрощать решение их повседневных задач.

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

Пользовательский интерфейс

▍Макет страницы

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

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

В настоящий момент вышел альфа-релиз 5 версии Bootstrap.

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

CSS Grid использует другой подход к организации материалов веб-страниц, размещая их в сетке.

▍Отзывчивый дизайн

Отзывчивостью называют возможность сайта адаптировать своё содержимое к устройству, на котором его просматривают. Например, на смартфоне и на ноутбуке эта статья будет выглядеть по-разному.

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

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

CSS-медиазапросы — это мощное средство поддержки отзывчивого дизайна.

Их можно использовать вместе с уже упомянутыми CSS Flexbox или CSS Grid. Если вы предпочитаете пользоваться CSS-фреймворками, то эти фреймворки обычно уже реализуют соответствующие возможности. При таком подходе для создания отзывчивых страниц достаточно добавить к элементам соответствующие классы.

Если говорить о концепции отзывчивости в применении к изображениям, то тут можно вспомнить об атрибуте srcset . Использование этого атрибута позволяет выводить изображения разного размера в зависимости от характеристик экрана устройства, что способствует уменьшению объёмов данных, передаваемых от сервера браузеру.

▍Однородные компоненты и элементы управления

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

Если вы хотите использовать для разработки своих проектов существующие фреймворки и библиотеки, Angular, React или Vue, то вот несколько примеров библиотек стилей, реализующих принципы Material Design, рассчитанных на эти инструменты:

• Angular. Библиотека Angular Material, в которой можно найти мощные компоненты и полный CDK.
• React. Принципы Material Design реализованы в веб-компонентах библиотеки Material UI.
• Vue. Здесь к нашим услугам Vuetify — реализация Material Design, предназначенная для Vue-проектов.

▍Проверка форм и обработка ошибок

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

• Angular. Так как Angular — это полноценный фреймворк, он даёт в наше распоряжение специальный API, направленный на валидацию форм.
• React. Вероятно, в React-проектах для проверки форм чаще всего используется библиотека React Hook Form.
• Vue. Название соответствующей библиотеки для Vue, vuelidate, построено на интересной игре слов.

Пользовательский опыт

▍Использование асинхронных механизмов

Загрузка данных в приложение или сохранение данных могут занимать миллисекунды, секунды или даже минуты. Именно поэтому важно сообщать пользователю о подобных операциях с помощью соответствующих индикаторов и не блокировать при этом работу пользователя с проектом.

В решении этих задач нам помогут JavaScript-механизмы, вроде промисов, и браузерные API наподобие Fetch.

▍Поддержка устаревших браузеров (полифиллы)

Мир фронтенд-разработки развивается очень быстро. То же самое можно сказать и о браузерах. Но разные люди пользуются различными браузерами и разными их версиями. Поэтому, чтобы обеспечить правильную работу своего кода на всех применяемых платформах, разработчику нужно заботиться о совместимости. Например, старая версия IE не поддерживает те же возможности JS и CSS, которые поддерживает последняя версия Google Chrome.

Для обеспечения правильной работы проекта в старых браузерах применяются полифиллы. Они достаточно хорошо описаны в этом материале: «Полифилл (polyfill, polyfiller) — это фрагмент кода (или подключаемый модуль), который предоставляет реализацию технологии, которую вы, разработчик, ожидаете найти в числе стандартных возможностей браузера».

Для того чтобы узнать, поддерживается ли некое CSS-правило, или некая JS-функция в конкретной версии браузера, загляните на сайт Can I Use.

Если говорить о решении вопросов браузерной поддержки в Angular, React и Vue, то дело обстоит так:

• Angular. В документации к Angular есть особый раздел, посвящённый браузерной поддержке.
• React. Проекты, создаваемые с помощью Create React App, поддерживают, как и ReactDOM, браузеры, начиная с IE 9. Эта поддержка основана на использовании полифиллов.
• Vue. Здесь особенности поддержки устаревших браузеров описаны в документации к CLI.

▍Локализация и интернационализация

У вашего сайта могут быть пользователи со всего мира. Учёт этого факта при создании проекта повысит удобство работы с сайтом для всех, кто решит на него заглянуть.

Локализация (l10n, localization) — это, по определению W3C, адаптация содержания продукта, программы или документа к языковым соответствиям, культурным и другим требованиям определённого целевого рынка.

Интернационализация (i18n, internationalization) — это, если опираться на материалы W3C, создание и развитие содержания продукта, программы или документации, позволяющее производить лёгкую локализацию для целевых рынков, различающихся по культуре, региону или языку.

Обе эти концепции взаимосвязаны, они могут быть реализованы разными способами. Сюда относятся, например, следующие технические приёмы:

• Использование на сайте выпадающего списка с перечнем языков, поддерживаемых проектом.
• Доступ к сведениям о географическом местоположении пользователя (с помощью браузерного API Geolocation) и адаптация веб-сайта в соответствии с полученными данными.
• Указание сведений о языке в URL. Например, это может выглядеть так: example.com?lang=en , или так: example.com/en , или даже так: en.example.com .

• Angular. Angular, повторюсь, это полноценный фреймворк, он даёт разработчику готовое решение.
• React. Задачи интернационализации проектов можно решать с помощью популярной в React-среде библиотеки react-i18next.
• Vue. В решении рассматриваемых нами задач очень хорошо показывает себя библиотека vue-i18n.

▍Доступность контента

Доступность (a11y, accessibility), это возможность сайта адаптироваться к нуждам пользователей с ограниченными возможностями.

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

В деле обеспечения доступности веб-проектов применимы различные технические приёмы. В их число входит следующее:

• Использование атрибута изображений alt .
• Применение ARIA-атрибутов для оформления описаний содержимого страниц сайта.
• Поддержка возможности изменения размеров текста.
• Наличие высококонтрастного режима.
• Поддержка навигации по сайту с использованием клавиатуры, в частности, клавиши TAB и клавиш-стрелок.

• Angular. В документации к этому фреймворку есть особый раздел. Разработка доступных проектов поддерживается и на уровне Angular CDK.
• React. Речь о доступности ведётся и в документации к библиотеке React. Существует и специальная библиотека — react-a11y. Но эта библиотека больше не поддерживается, поэтому пользуйтесь ей с осторожностью и учитывайте то, что её планируется заменить на библиотеку react-axe.
• Vue. Разрабатывать доступные проекты на Vue поможет плагин vue-a11y. При создании библиотеки vuetify тоже учтены соображения доступности.

▍Уведомления

Для того чтобы держать связь с посетителями вашего сайта, можно использовать браузерное API Notifications. С его помощью можно сообщать пользователям о том, что на сайте появилось что-то новое.

Загрузка и обработка данных

▍Единый источник достоверных данных

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

NgRx-реализация паттерна Flux (источник — ngrx.io )

В этих средствах используются разные названия для одних и тех же сущностей. Например, то, что в NgRx называется selectors, в Vuex называется getters. То, что в Angular получило имя reducers, в Vue называется mutations.

Вот средства для управления состоянием приложений, используемые в Angular, React и Vue:

• Angular. «Реактивная система управления состоянием для Angular»: NgRx.
• React. Тут, конечно, применяется Redux.
• Vue. Для управления состоянием Vue-приложений используется Vuex.

▍Загрузка данных

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

• Angular. В документации к Angular рекомендуется использовать rxjs и подход, основанный на паттерне Observer (тут применяются наблюдаемые объекты или объекты класса Subject).
• React. Документация React рекомендует для загрузки данных использовать API Fetch.
• Vue. Сообщество Vue предпочитает использовать библиотеку Axios. Эта реализация механизма загрузки данных основана на промисах.

Вот реализации GraphQL для интересующих нас фронтенд-инструментов:

• Angular. apollo-angular
• React. react-apollo
• Vue.js. vue-apollo

▍Локальное хранение данных

Локальное хранение данных — это хранение данных на компьютере пользователя. Данные можно хранить с использованием куки-файлов, а так же с применением механизмов localStorage и sessionStorage .

▍Веб-воркеры

Веб-воркеры — это технология, представленная новым браузерным API. Она даёт возможность фонового выполнения JavaScript-кода, снимая нагрузку с главного потока и не влияя на производительность кода веб-страницы.

Веб-воркеры применимы в Angular, React и Vue:

• Angular. В документации к Angular есть особый раздел, посвящённый этому вопросу.
• React. Существует особый React-хук, сведения о котором можно найти здесь.
• Vue. Во Vue-приложениях веб-воркерами удобно пользоваться с применением библиотеки vue-worker.

Сеть и производительность

▍Размер бандла приложения

Рост рынка смартфонов стал причиной революции в мире веб-разработки. Теперь при создании веб-сайтов нам нужно, в первую очередь, учитывать нужды мобильных пользователей. Чем меньший объём данных придётся загружать мобильным устройствам при работе с веб-проектами — тем лучше. В соответствии с графиком, показанным ниже, мобильное использование интернета обогнало настольное ещё в 2016 году.

Использование интернета в мире (источник — broadbandsearch.net )

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

• Angular. Бандлы Angular-приложений легко и удобно исследовать с помощью webpack-bundle-analyzer. Более того, CLI Angular даёт в наше распоряжение опцию stats-json , которая позволяет сформировать отчёт после сборки бандла.
• React. В документации к Create React App есть страница, посвящённая анализу размеров бандлов.
• Vue. Во Vue, как и в Angular, есть опция report , которая позволяет формировать отчёты по бандлам.

▍Сервис-воркеры и прогрессивные веб-приложения

Сервис-воркер — это скрипт, который работает в веб-браузере и управляет кэшированием данных приложения. Это — один из механизмов, используемых при превращении обычного веб-сайта в прогрессивное веб-приложение (PWA, Progressive Web Application). С PWA можно работать как с обычным сайтом, пользуясь HTTPS, но прогрессивные веб-приложения обладают некоторыми особыми возможностями. Среди таких возможностей, например, установка таких приложений на мобильные устройства без необходимости публикации их в специализированных магазинах приложений и поддержка работы приложений без доступа к интернету.

Пользоваться сервис-воркерами можно в Angular, React и Vue:

• Angular. В Angular предусмотрены механизмы для использования сервис-воркеров.
• React. Вот руководство по разработке PWA с помощью Create React App.
• Vue. Возможность создания PWA во Vue поддерживается на уровне CLI.

▍Серверный рендеринг

Серверный рендеринг (SSR, Server-Side Rendering) — это набор технологий, который кардинальным образом меняет ситуацию в сфере разработки приложений, основанных на Angular, React и Vue. При использовании SSR HTML-код формируется на сервере и отправляется в браузер. После этого осуществляется приведение статической HTML-разметки в рабочее состояние и на клиенте оказывается полностью готовое к использованию веб-приложение. При применении серверного рендеринга преследуют несколько целей:

• Улучшение SEO сайтов.
• Ускорение вывода сайтов в браузере.

• Angular. Тут используется Angular Universal.
• React. Для серверного рендеринга React-приложений применяется Next.js.
• Vue. Серверный рендеринг Vue-приложений выполняют с помощью фреймворка NuxtJS.

▍Генераторы статических сайтов

С ростом масштабов использования Jamstack генераторы статических сайтов (SSG, Static Site Generator) стали крайне востребованной технологией. Jamstack-приложение — это разновидность веб-приложения, материалы которого готовы к визуализации средствами браузера и, по сути, не нуждаются в веб-сервере (эти материалы можно отдавать клиентам прямо с CDN). Подробности о таких сайтах можно найти, пройдя по вышеприведённой ссылке. Перечислим здесь лишь основные сильные стороны SSG:

• Скорость: генераторы статических сайтов создают страницы сайтов во время сборки проекта, а не тогда, когда эти страницы запрашиваются клиентом.
• Безопасность: применение SSG позволяет отказаться от систем управления контентом (CMS, Content Management System), которые часто оказываются целями хакерских атак.
• Упрощение масштабирования: веб-проект при применении SSG представляет собой набор файлов, который можно передать клиенту откуда угодно. Это значительно упрощает хранение подобных файлов в CDN. В результате оказывается, что статические сайты очень хорошо масштабируются.
• Упрощение процесса разработки: SSG-проектам не нужна серверная часть и база данных. Это облегчает труд разработчиков.

• Angular. Scully.
• React. Gatsby (React + GraphQL), Next.js.
• Vue. Gridsome, Nuxt.

Аналитика

▍Наблюдение за поведением пользователей и A/B-тестирование

Организация наблюдения за поведением пользователей на сайте — это необязательно, но владение подобными данными вносит значительный вклад в совершенствование веб-проектов. Существует особый класс инструментов, направленных на сбор сведений о работе пользователей с сайтом. Эти инструменты позволяют разработчикам сайтов лучше учитывать нужды пользователей и, благодаря A/B-тестированию, помогают выбирать самые адекватные альтернативы. Речь идёт о возможностях сайтов, о поддерживаемых ими шаблонах поведения пользователей, о дизайне.

Вот некоторые решения, позволяющие организовать наблюдение за поведением пользователей и A/B-тестирование:

• Google Analytics (GA). Существуют руководства по использованию GA в Angular, React и Vue.
• Kameleoon. Это — основанный на технологиях искусственного интеллекта фреймворк для персонализации и A/B-тестирования веб-проектов.

▍Анализ производительности веб-проектов

Сложно за один заход разработать высокопроизводительное веб-приложение. Но, например, приложение, которое оптимизировали с целью ускорения его загрузки, вызовет у пользователя больше положительных эмоций, чем его более медленная версия. Существуют различные проекты, анализирующие сайты и выдающие рекомендации по их совершенствованию. Например — PageSpeed Insights от Google.

Среди инструментов разработчика Google Chrome можно найти весьма ценное средство для анализа производительности сайтов — Lighthouse. Оно оценивает сайты по пяти критериям (производительность, доступность, использование «лучших практик», SEO, PWA) используя 100-балльную шкалу. После анализа формируется отчёт с рекомендациями по улучшениям сайта.

Анализ сайта с помощью Lighthouse

Ещё одно средство анализа производительности, которое можно найти среди инструментов разработчика Chrome, это панель Coverage, позволяющая искать неиспользуемый JS и CSS-код. Исключив такой код из проекта, можно уменьшить размер его бандла. А это ускорит загрузку сайта, что будет особенно заметным на мобильных устройствах.

▍SEO

SEO, поисковая оптимизация, это то, чем надо заниматься ради повышения рейтинга сайта в поисковых системах, в таких, как Google, Bing, DuckDuckGo, да и во многих других. Хорошо оптимизированный сайт становится более «заметным». На самом деле, это так важно, что в мире веб-разработки есть даже особая должность: «SEO-специалист».

Если говорить о SEO в Angular, React и Vue, то получится следующее:

• Angular. Вот интересная статья по поисковой оптимизации, которая применима к Angular- и к Angular Universal-проектам.
• React. Вот материал об общих проблемах SEO в React-проектах. Вот — статья об улучшении поисковой оптимизации React-приложений.
• Vue. Вот подробная статья о поисковой оптимизации Vue-приложений.

Итоги

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

Какие свежие технологии фронтенд-разработки кажутся вам самыми перспективными?

• Блог компании RUVDS.com
• Веб-разработка

Фронтенд-разработка: ключевые технологии и понятия

Когда вы гуляете по городу, что вы видите? Взгляд часто останавливается на стильных витринах, созданных с целью привлечь внимание. Вы выбираете самую красивую из них и заходите внутрь.

То же самое происходит и в интернете. Блуждая по интернету в поисках необходимого, вы натыкаетесь на самый подходящий на первый взгляд сайт и заходите на него.

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

Что такое фронтенд-разработка? Фронтенд vs бэкенд

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

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

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

Бэкенд разрабатывается с использованием другого стека технологий, включая Java, PHP, Ruby, C# и иногда JavaScript, о которых мы поговорим в соответствующем разделе статьи.

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

HTML: ключевая фронтенд-технология

HTML (от англ. Hypertext Markup Language) — это язык гипертекстовой разметки, предназначенный для создания веб-сайтов, которые впоследствии могут просматриваться при помощи доступа к интернету. HTML обычно используется для структурирования веб-документа. Он определяет такие элементы, как заголовки или абзацы, и позволяет вставлять изображения, видео и другие медиафайлы.

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

• Гипертекст — способ, с помощью которого мы путешествуем по интернету, переходя по гиперссылкам, которые ведут на другие страницы. «Гипер» отсылает к нелинейности, которая позволяет перемещаться в любое место, поскольку этот процесса не подразумевает предопределенного порядка.
• Разметка определяет качества, которыми наделяется текст внутри HTML-тегов. Теги определяют, как браузеры форматируют и отображают содержимое страницы.
• Будучи языком, он содержит кодовые слова и синтаксис, как и любой другой язык.

Парный тег / определяет границы веб-страницы, а текст между тегами / определяет видимое содержимое страницы.

в самом начале объявляет тип документа для HTML5. Если его не обозначить, разные браузеры будут отображать его по-своему.

Вот так плавно мы перешли к HTML5.

HTML5

С момента первого своего релиза в 1991 году HTML претерпел множество обновлений. HTML5 был выпущен в 2014 году. В него были добавлены такие функции, как поддержка оффлайн хранилищ мультимедийных данных, более точные элементы контента (например, хедер, футер, навигация) и поддержка встраивания аудио и видео.

CSS: стилизация

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

Как это работает. CSS взаимодействует с HTML-элементами, компонентами веб-страницы.

• Для взаимодействия с HTML в CSS используются селекторы. Селектор — это часть CSS-кода, определяющая, на какую часть HTML будут воздействовать стили CSS.
• Объявление содержит свойства и значения, используемые селектором.
• Свойства определяют размер шрифта, цвет и отступы. Каждое свойство имеет значение или набор значений.

Возьмем в качестве примера:

где P (абзац) — это селектор, < font-size:24px; color:blue; >— это объявление, font-size: и color: — свойства, а 24px; и blue; — значения.

CSS записывается в виде простого текста в текстовом редакторе. Есть три способа добавить CSS-код в HTML:

• Вместо того, чтобы добавлять CSS-код к каждому HTML-элементу, который необходимо видоизменить, можно использовать внешнюю таблицу стилей (External style sheets) — текстовый файл, содержащий весь CSS-код. Внешняя таблица стилей подключается в .html файле в контейнере .
• При использовании внутренней таблицы стилей CSS-код размещается прямо в теле тега конкретной .html-страницы.
• Под встроенным стилем подразумевается прописывание CSS в html-коде непосредственно того элемента, который нужно стилизовать.

CSS-фреймворки. CSS-фреймворк — это набор дефолтных CSS- и HTML-файлов, который расширяет возможности по части дизайна. Помимо их пользы при создании адаптивного дизайна, CSS-фреймворки помогают создавать различные макеты, что избавляет разработчиков от необходимости писать код с нуля в каждом случае. Обычно они заметно помогают при разработке веб-приложений под разные платформы и размеры экрана. Благодаря общим компонентам пользовательского интерфейса, Grid Layout и многим другим функциям, CSS-фреймворки значительно ускоряют рабочий процесс разработки. Существуют разные виды фреймворков:

• Полнофункциональные (Bootstrap, Foundation, Semantic UI и др.),
• Ориентированные на материальный дизайн: (Materialize and Material Design Lite) и
• Легкие (Pure).

Мы не будем описывать их все, вместо этого приведем сравнительную таблицу:

Чтобы подробно изучить эти CSS-фреймворки, ознакомьтесь со статьей «Самые популярные адаптивные CSS-фреймворки».

Препроцессоры — Sass и LESS. Написание CSS является рутиной, и мелкие задачи, такие как: поиск значений цвета, закрытие тегов или любые другие повторяющиеся операции, отнимают много времени. Вот где пригождается препроцессор. CSS-препроцессор представляет собой скриптовый язык и расширяет возможности CSS.

Самые распространенные препроцессоры — это Sass и LESS. У них есть некоторые общие основы:

• Синтаксические элементы и
• Обратная совместимость с обычными файлами CSS.

Однако между ними есть и различия.

• Sass расшифровывается как Syntactically Awesome Style Sheets («синтаксически превосходные таблицы стилей»). Sass работает на Ruby и обрабатывается на стороне сервера. Поскольку корни его происхождения восходят к языку Ruby, установка осуществляется через так называемые gem-ы (несколько библиотек Ruby/Rails).
• LESS расшифровывается как Leaner Style Sheets («компактная таблица стилей»). На данный момент его можно назвать скорее JavaScript-библиотекой, которая обрабатывается на стороне клиента в браузере. Разработчики гораздо чаще выбирают LESS при использовании JavaScript с таблицами стилей. Эта технология позволяет использовать фрагменты CSS-кода в файлах LESS повторно.

DOM: структура веб-страницы

Объектная модель документа (DOM, Document Object Model) — это программный интерфейс для документов HTML и XML. Он интерпретирует страницу, чтобы программы могли видоизменять структуру, стиль и содержимое документа. DOM отображает документ в виде узлов и объектов, позволяя языкам программирования подключаться к странице.

Как это работает. Будем считать, что веб-страница — это документ, который может быть представлен либо в окне браузера, либо в качестве исходного HTML-кода. DOM является представлением этого документа, поэтому его можно изменить. DOM — это объектно-ориентированное представление веб-страницы, которое можно изменить с помощью сценарного языка, например, JavaScript.

DOM должен соответствовать стандартам спецификаций W3C и WHATWG, которые исполняются в большинстве современных браузеров. Современный DOM строится с использованием нескольких API, работающих вместе. DOM определяет объекты, которые полностью описывают документ и объекты в нем.

JavaScript: оживляя веб

JavaScript (JS) — один из самых популярных сценарных языков. Он в основном известен своей применимостью как для фронтенд-, так и для бэкенд-разработки. Во фронтенде он используется для придания веб-страницам динамики.

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

Фреймворки и библиотеки JavaScript и зачем они нам нужны

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

Фреймворки представляют собой шаблоны для создания веб-сайта или веб-приложения. Они обеспечивают структуру (например, основу или заготовки — scaffolding), на которой можно разместить весь проект. В то время как фреймворк устанавливает шаблоны страниц, они создают структуру с определенными выделенными областями для встраивания кода фреймворка.

Итак, фреймворки JavaScript — это полные наборы инструментов для формирования и настройки веб-сайта или веб-приложения.

Библиотеки — это наборы предварительно написанных фрагментов кода, которые повторно используются для реализации основных функций JavaScript. При необходимости фрагмент кода можно легко интегрировать в существующий код проекта.

Таким образом, библиотека — это специализированный инструмент для конкретных узких потребностей, а не универсальная машина для подготовки всего проекта.

Основные фреймворки и библиотеки

Начнем с фреймворков:

Angular — это JavaScript-фреймворк от Google, совместимый с большинством распространенных редакторов кода. Angular предназначен для создания динамических одностраничных веб-приложений (SPA — Single Page Applications) и прогрессивных веб-приложений. Еще с момента выпуска первоначальной версии этот фреймворк больше всего ценился за способность преобразовывать документы на основе HTML в динамический контент. Angular является одним из самых популярных фронтенд-фреймворков. Почитать про него подробнее можно в нашей статье о плюсах и минусах разработки на Angular.

Vue.js — еще один фреймворк с открытым исходным кодом для одностраничных приложений, который требует знания HTML и CSS. Он использует модель разработки на основе компонентов и позволяет присоединять компоненты к проекту. Vue.js — это пример библиотеки, больше похожей на фреймворк, поэтому мы отнесли его к фреймворкам. Он предлагает целую кучу шаблонов и паттернов, применяемых при разработке. Vue в первую очередь известен небольшим размером документов и синтаксисом на основе HTML. Чтобы ознакомиться подробнее с преимуществами и недостатками Vue.js, переходите по ссылке.

Ember.js — это фреймворк для разработки одностраничных, мобильных и десктопных приложений. Он использует шаблон проектирования Model-View-ViewModel (MVVM). Инструменты Ember позволяют проектировать среду разработки, а его интерфейс командной строки предоставляет инструменты для автоматизации сценариев.

А теперь коротко о нескольких библиотеках:

React — библиотека с открытым исходным кодом для создания динамических пользовательских интерфейсов, разработанная Facebook. Применяется для создания веб-приложений с множественными динамическими компонентами. React основан на JavaScript и JSX и позволяет создавать HTML-элементы для многократного использования. React также включает в себя React Native, специальную кроссплатформенную среду для разработки мобильных приложений. Чтобы узнать больше о плюсах и минусах React и React Native, читайте статью на эту тему.

jQuery, в свою очередь, предназначена для управления HTML-документами. Она обладает простым API для управления событиями и разработки анимации в браузерах. Кроме того, jQuery применяется для управления объектной моделью документа (DOM), а также служит инструментом разработки плагинов. Она также поставляется с более легкой кросс-браузерной библиотекой, jQuery UI для мобильного фреймворка jQuery Mobile и для построения графического интерфейса.

D3.js — это управляемая данными библиотека для визуализации данных. С помощью привязывания временных данных к DOM и внедрения в документ изменений, управляемых данными, библиотека позволяет управлять данными и создавать динамическую визуализацию данных. Она может поддерживать и обрабатывать большие наборы данных и динамические ответы для взаимодействия и анимации. Функциональный стиль D3 допускает повторное использование кода и работает с CSV и HTML.

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

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

JavaScript для бэкенда

Говоря о JavaScript как о комплексной среде разработки, мы не можем не упомянуть его значимость для бэкенд-разработки. Поскольку JavaScript очень популярен, мир разработки программного обеспечения адаптировал JS к специфике бэкенда.

Для разработки на стороне веб-сервера с помощью JavaScript одним из самых значимых инструментов, вероятно, стал Node.js. Однако, это не фреймворк и не библиотека. Node.js — это среда выполнения, работающая на основе ядра JavaScript V8. Чтобы больше узнать о Node.js, прочитайте статью о плюсах и минусах разработки веб-приложений на Node.js. Или посмотрите видео:

Взаимодействие между фронтендом и бэкендом

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

Асинхронные операции

В 2010-х годах одной из основных концепций, описывающих работу интернета, был AJAX. Термин расшифровывается как «асинхронный JavaScript и XML» (от англ Asynchronous JavaScript and XML). По сути, это комплекс средств для создания веб-сайтов и веб-приложений. Давайте рассмотрим ключевые компоненты, из которых состоит AJAX.

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

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

XML (или «расширяемый язык разметки», от англ Extensible Markup Language) позволяет передавать данные, размещенные на странице, в браузеры, которые ее просматривают. Это важно для определенных систем, которые зачастую не умеют взаимодействовать с данными, отформатированными другой системой. В этом случае XML позволяет избежать несовместимости при сохранении данных в текстовом формате между XML-тегами. Таким образом, XML предлагает средства хранения, перемещения и обмена данными, которые не зависят от какой-то одной программной или аппаратной системы. Поскольку XML устаревает, уступая новым форматам данных, можно запускать AJAX с JSON, который является более коротким и удобным для чтения людьми.

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

Как работают асинхронные обновления. Предположим, пользователь нажимает на кнопку. Клиент в фоновом режиме отправляет запрос серверу в формате XML/JSON, пока пользователь продолжает просматривать страницу. Серверная сторона получает данные от JavaScript, при необходимости обращается к базе данных и обрабатывает данные. Данные в формате XML/JSON отправляются обратно на исходную страницу на стороне клиента, которая выполнила запись. Коллбэк, выполняемый JavaScript, собирает данные и обновляет компонент веб-страницы, который требует изменений.

REST и GraphQL

REST расшифровывается как «передача репрезентативного состояния» (от англ Representational State Transfer). По сути, это упрощенный архитектурный стиль, применяемый для обмена сообщениями между клиентом (фронтенд) и сервером (бэкенд). Службы RESTful и API — это веб-службы, соответствующие архитектуре REST.

Например, разработчик должен разработать веб-приложение, которое показывает всех друзей в социальных сетях в определенном порядке. Фронтенд может создавать запросы к RESTful API Facebook для просмотра списка друзей и передачи этих данных обратно. Любая служба, использующая RESTful API, похожа на этот общий процесс, разница только в том, что данные извлекаются и возвращаются. REST — это простой набор руководств и практик, устанавливающих правила взаимодействия с веб-службой.

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

GraphQL представляет современную версию обмена сообщениями. Это язык запросов к базам данных из клиентских приложений. GraphQL определяет на стороне сервера, как отображать данные клиенту, и обслуживает различные типы клиентов и их потребности в данных. Чтобы узнать больше на эту тему, читайте статью о возможностях ядра GraphQL.

Больше практик, которые используются во фронтенд-разработке

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

Отзывчивый дизайн

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

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

Доступность и инклюзивность

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

Подведем итоги

Мы признаем, что знакомство даже с основами фронтенд-технологий может удивить. Давайте подытожим, что мы узнали.

HTML (Hypertext Markup Language) — это язык разметки для создания веб-сайтов. Обычно он применяется для структурирования веб-документа.

CSS (Cascading Style Sheets) — это язык таблиц стилей, который используется для стилизации HTML-элементов на веб-странице. Область действия CSS включает в себя дизайн, макет и варианты отображения для различных устройств и размеров экрана.

DOM (Document Object Model) — это программный интерфейс для HTML- и XML-документов. Он содержит информацию о странице, чтобы программы могли изменять структуру, стиль и содержимое документа.

JavaScript — сценарный язык. Во фронтенде он используется для придания веб-страницам динамики. Кроме того, он предоставляет фулстек-технологии с библиотеками и фреймворками для написания скриптов как на стороне клиента, так и на стороне сервера.

AJAX. AJAX (Asynchronous JavaScript and XML) — это комплекс методов для создания веб-сайтов и веб-приложений с динамически загружаемым контентом без создания новой записи данных.

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

Приглашаем всех желающих на бесплатные открытые занятия:

«Селекторы» — на вебинаре вы научитесь, как можно обращаться к html-элементам, а также рассмотрите разные виды селекторов. Регистрация.

«Функции и условия» — на этом занятии посмотрим, как делать повторяющиеся действия удобными и переиспользуемыми, разберем ситуации, в которых это может быть полезно. Регистрация.