Погружение в веб-разработку для начинающих. Часть 1. Фронтенд

27.07.2019

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

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

Гайд разделён на несколько частей, и в первой будет рассмотрена самая простая и, одновременно, самая важная часть - фронтенд разработка.

Языки и инструменты фронтенда

HTML

HyperText Markup Language (HTML) - язык разметки для описания информации которая будет показана пользователю. HTML документ содержит элементы, каждый из которых представлен специальным HTML тэгом, например заголовок, параграф или поле для ввода текста. Также одни HTML документы могут ссылаться на другие. Каждый тэг содержит содержит свой тип контента, имеет определённый внешний вид и поведение. Изучив только HTML вы уже сможете создавать простейшие статичные страницы.

CSS

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

Препроцессоры

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

  • Sass/SCSS расширяет возможности CSS для более удобного сопровождения. Некоторые возможности, такие как вложения, уменьшают количество CSS кода и упрощают его написание, а переменные и примеси (mixins) позволяют организвать переиспользование кода. Также поддерживается импорт других SCSS файлов для разделения кода. Многи популярные CSS фреймворки базируются именно на Sass.
  • PostCSS это инструмент для автоматизоации рутинных операций над CSS используя плагины написанные на JavaScript. Вы можете добавить плагины которые будут выполнять анализ кода, добавят поддержку переменных, оптимизируют код и тд. В отличие от SCSS или Less, которые являются отдельными форматами, здесь мы имеем набор PostCSS плагинов которые эмулируют стандартные возможности CSS.
  • Less это препроцессор по возможностям близкий к Sass. Несмотря на схожесть, у них есть различия в основе реализации. Несмотря на прошлую популярность, в настоящее время большинство разработчиков предпочитают Sass или PostCSS

JavaScript

JavaScript (JS) наиболее распространённый язык программирования используемый для создания интерфейсов веб-приложений. С ним вы можете добавить интерактивное поведение к вашему вебсайту, например отклики на различные действия пользователя, загрузку данных с веб-сервисов и показ/скрытие элементов на странице. Также позволяет взаимодействовать с браузером используя API. JS можно использовать как для программирования отдельных интерактивных элементов на странице, так и для постройки комплексных веб-приложений.

Возможно вы также сталкивались с термином ECMAScript. Это описание спецификации к языку JavaScript. В большинстве случаев можно воспринимать их как синонимы.

Фреймворки

JavaScript мощный язык, но, если вы собираетесь создавать целое веб-приложение, то без использования фреймворков вам придётся написать большое количество типового кода. Чтобы упростить задачу есть различные фреймворки с наборами базового функционала, например таким как манипуляции с HTML элементами, загрузка данных, общая архитектура приложения и другими. Наиболее популярные фреймворки на данный момент это React, Angular и Vue.js.

  • React это библиотека для создания пользовательских интерфейсов разрабатываемая Facebook. Принцип разработки базируется на создании компонентов, таких как кнопка или меню, которые могут быть преобразованы в HTML основываясь на входных параметрах (размер кнопки или пункты меню). Компоненты React пишутся на языке, расширении для JavaScript, JSX, который позволяет удобно комбинировать JavaScript и HTML. Компоненты могут быть собраны вместе для создания собранных UI элементов или целого приложения. React не является фреймворком как таковым, он только обеспечивает возможности отображений, тем не менее это обширная экосистема из инструментов и различных библиотек для создания больших веб-приложений.
  • Angular это компонент-ориентированный самодостаточный фреймворк разрабатываемый Google. Angular приложения обычно пишутся на TypeScript. Фреймворк содержит различные инструменты которые могут понадобиться для создания приложения, такие как скрипты создания и сборки проекта, а также множество библиотек для управления формами, загрузки данных, роутинга и прочие.

Возможно также вы сталкивались с другими фреймворками, которые имеют меньшие сообщества или были вытеснены со временем, например такие как Ember.js или AngularJS.

TypeScript

TypeScript это надстройка над JavaScript которая добавляет статическую типизацию и другие возможности последних версий ECMAScript, такие как async/await, классы или стрелочные функции. TypeScript компилируется в обычный JavaScript.

Библиотеки компонентов

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

  • Bootstrap мощный фреймворк для создания адаптивных веб-приложений. Поставляется с большим набором компонентов, инструментов для создания страниц и их кастомизации. С минимальными знаниями JavaScript также имеется возможность добавлять интеракцивные элементы, такие как всплывающие окна или выпадающие меню.
  • Semantic UI другая популярная UI библиотека со всеми видами компонентов.
  • Material UI - популярная реализация концепции Google Material Design. Содержит компоненты для полного соответствия приложениям Google.

Инструменты

Экосистема фронтенда известна своим обширным арсеналом полезных инструментов под любые нужды. Рассмотрим необходимые для начала работы.

NPM

Npm может означать две вещи:

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

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

Webpack

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

Иногда как альтернатива Webpack может использоваться Rollup.js.

Chrome DevTools

Chrome DevTools это богатый набор инструментов доступный прямо в браузере Chrome. Может использоваться для самых разных случаев при дебаге, таких как просмотр кода и навигация по HTML элементам, просмотр сетевых запросов и их данных. Позволяет на лету редактировать страницы, что может быть полезно при тестировании небольших визуальных изменений. Подобные инструменты есть также и в других браузерах.

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