Client side

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

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

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

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

Каждое направление разработки играет важную роль. Разработчики часто совмещают в своей работе как Frontend, так и Backend. Таких специалистов называют Full Stack разработчиками.

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

levels

Что такое фронтенд (web разработка)?

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

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

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

Часто используемые технологии и некоторые требования

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 и так далее)
Инструменты контроля версий (Git, GitHub, CVS и так далее)
Базы данных и языки запросов (SQL, MySql, NoSQL, MongoDB и так далее)

Процесс взаимодействия 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, они абсолютно уверенно себя чувствуют как с одной так и с другой стороны медали.

Frameworks

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

К счастью, есть некоторые популярные фреймворки, которые могут вам с этим помочь! В этом детальном руководстве мы представим вам самые популярные Front end framework, которые есть на сегодня. Получив всю информацию, вы определённо сможете сделать правильный выбор.

Bootstrap

bootstrap

Boostrap с гордостью занял своё место среди самых популярных фронтенд фреймворков ещё с момента своего создания в 2011 году. На ноябрь 2022 года каждый пятый сайт в Интернете использует именно его, включая таких гигантов как Netflix и CNN. Однако всё начиналось совсем с другого названия. Стремясь к постоянству инструментов, используемых внутри компании Twitter, Марк Отто и Якоб Торнтон пришли к тому, что тогда они назвали Twitter Blueprint.

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

Bootstrap ставит в приоритет адаптивный веб-дизайн, упрощая его с помощью сеточной системы и использования классов. В дополнение к этому, данный front end framework предлагает предварительно стилизованные компоненты, состоящие из HTML, CSS и в некоторых случаях JavaScript.

React

react

React на данный момент фреймворк для сайта номер один, среди всех фреймворков для JavaScript. Также как и Bootstrap, это фреймворк веб-платформы, который изначально начинался как внутренний проект ещё одной крупной компании социальных сетей. В 2011 году разработчики Facebook устали от того, что некоторые приложения стали слишком сложными для работы. Поэтому они создали собственный фреймворк, позволяющий им работать более эффективно. Это был ранний прототип фреймворка React.

На данный момент список клиентов содержит такие компании как AirBnB, PayPal и другие известные компании. В 2015 году команда также выпустила React Native для мобильной разработки (Android и iOS).

React работает с виртуальным DOM и особенно быстро работает с обновлениями. Он полагается на JavaScript и состоит из повторно используемых компонентов. Хотя новички довольно часто путают их с элементами, это две разные вещи: по сути, элементы являются неизменяемыми объектами. Компоненты, с другой стороны, представляют собой разделы предварительно написанного кода, которые обозначают классы или функции. Вы можете настроить их со своими личными данными, используя реквизиты.

Vue.js

vue

Другим популярным выбором среди front end framework является Vue.js. Выпущенный в 2014 году, он младше большинства из них, что говорит о том, что команда была в курсе проблем других фреймворков JS и постаралась избежать повторениях их ошибок.

Front end framework: Vue.js.В результате Vue.js невероятно лёгкий - скачанные файлы занимают около 20 килобайт. За счёт этого система невероятно быстра и гибка. Она также менее ограничена, проста в изучении и расширении с помощью различных библиотек и инструментов. Всё это делает его одним из лучших фреймворков UI для новичка. В опросе, проведённом Monterail, почти шестьдесят процентов пользователей Vue.js упоминают именно простоту использования в качестве основной причины его выбора. По утверждениям самой команды Vue.js, вам нужно лишь знать основы HTML и JavaScript, чтобы начать пользоваться фреймворком. Front end framework Vue.js поддерживает Babel и Typescript, а также обычный JavaScript. Также для него имеется обширная документация, которую 75% опрошенных Monterail, назвали весьма полезной. Кроме того, если говорить про другие популярные фреймворки, то у этого меньшая область API, что упрощает навигацию.

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

Angular

angular

Изначально выпущенный в 2009 году, этот front end framework получил название Angular JS. Однако сейчас это имя относится лишь к прошлой версии 2.0 - все новые версии называются лишь Angular. Почему? Потому что переписывание системы было слишком значительным, чтобы пользователи могли просто перейти с одной версии на другую. В отличие от Angular JS, который использовал лишь JavaScript, Angular использует TypeScript, который позволяет проводить статическую проверку. В дополнение к этому, AngularJS просто превращал HTML в динамический контент. Angular, с другой стороны, гораздо больше подходит для современных сайтов и работает на множестве платформ, включая мобильные устройства.

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

Digitable/Client side