В данном цикле статей разберем, как быстро научиться разрабатывать frontend.
Этапы разработки Frontend'a
Разработка клиентской части приложения обычно включает в себя следующие этапы: проектирование макета, верстка веб-страницы по макету, написание функционала для созданного представления.
Проектирование макета — это создание предварительного представления будущей веб-страницы, формы, элементов. Обычно данный этап выполняется веб-дизайнером, но зачастую данную процедуру пропускают, если использую готовый стиль разработки на основе библиотек стилей и фреймворков (ReactJS, VueJS). Стек программ для проектирования: Photoshop(устаревший), Figma(набирает популярность).
Верстка веб-страницы – верстка представления выполняется после создания макета, но зачастую разработчики совмещают эти два этапа в этапе верстке, это происходит по большей части из-за однотипности создаваемого веб-приложения или сайта.
Написание функционала – после того как будут созданы представления, наступает этап разработки функций и процедур, который будут обрабатывать поведение различных элементов веб-страниц (обработка нажатия на кнопку, заполнение формы, отправка запросов на сервер и прочее).
Стек технологий
Ниже описан подробный стек технологий, который необходим для понимания как работает клиентская часть веб-приложения.
Проектирование макета
Figma
Photoshop
Верстка веб-страницы
HTML – основа основ, язык разметки с помощью которого выполняется создание каркаса будущей веб страницы.
CSS – каркас это хорошо, но он не имеет цвета, нужных размеров и адаптивности. Тут нам в помощь вступает язык описания внешнего вида страницы. С помощью него задаются стили веб-страницы приятные глазу пользователя.
Написание функционала
JavaScript – для того что бы кнопочки реагировали на клики пользователя по ним, нам необходимо описать функции, которые будут выполняться по взаимодействию пользователя с элементом веб-страницы. JavaScript – язык программирования для написания тех самых функций. С помощью него мы будем взаимодействовать с сервером, для получения и обработки данных.
Выше перечислены основные инструменты для разработки веб-приложений. В ходе эволюции процессов веб-разработки, так же развивался и стек технологий. Как говориться, лень двигатель прогресса. Появились так называемые фреймворки или библиотеки с готовым кодом (ReactJS, VueJS, AngularJS), которые упрощают процесс разработки и экономят затраты на разработку, как время, так и потраченные средства заказчиков. Но у данного процесса есть и негативные последствия, увеличился порог вхождения в разработку, а именно – что бы начать разрабатывать на основе фреймворка, необходимо знать основы (HTML, CSS и JavaScript).
Этапы изучения
Изучать Frontend разработку лучше начинать с верстки простых макетов. Например, используя HTML и CSS, сверстать форму авторизации или сверстать таблицу показывающую список покупок.
После того как будет получен необходимый опыт и понимание элементарной верстки, можно подключать разработку функционала, а именно что бы при нажатии на кнопку, форма (условно) отправляла запрос на сервер или печатала данные в консоль разработчика.
Первая задача с подробными шагами
Постановка задачи (ТЗ): Необходимо реализовать форму для редактирования личной информации пользователя (имя, пароль, дата рождения, электронная почта), с последующей передачей данных на сервер.
Шаг первый. Макет
Первое, что необходимо сделать разработчику это либо получить макет от дизайнера, либо нарисовать примерный макет будущей формы. Многие разработчики пренебрегают данным шаг и сразу пытаются верстать страницу, о чем потом могут пожалеть, поскольку появляются подводные камни которые можно было бы увидеть при создании макет. Так же макет лучше согласовать с заказчиком, да бы не возникло недопониманий в после этапа верстки.
Шаг второй. Выбор стека разработки
Далее необходимо определиться будите ли вы верстать на чистом HTML И CSS или же будет фреймворк. В данной задаче мы выберем первый вариант.
Для написания верстки необходим текстовый редактор в котором будем писать наш код. Существует множество редакторов для написания верстки. В частности может подойти даже блокнот, но в нем будет неудобно работать, поскольку в нем нет даже банальной подсветки синтаксиса. Лично мой выбор среды разработки – WebStorm от JetBrains. Подробнее ознакомиться с редакторами вы можете в интернете и подобрать себе по вкусу.
Шаг третий. Верстка
Заходим в среду разработки(редактор) и создаем файл под названием index.html
Далее создаем базовую HTML- разметку (подробнее про HTML и теги можете так же почитать в интернете).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page!</title>
</head>
<body>
<!--минута становления (ах да так выглядит комментарий)-->
<h1>My first page!</h1>
<p>Hello, am a programmer!</p>
</body>
</html>
Уже сейчас можно посмотреть в браузере как выглядит наша страница. Открываем наш файл index.html в любом браузере и смотрим на наш триумф (WebStorm так же позволяет просматривать в режиме реального времени страницу, которую вы разрабатываете).
Далее мы создаем нашу форму для редактирования.
Код формы:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My first page!</title>
</head>
<body>
<!--минута становления (ах да так выглядит комментарий)-->
<h1>My first page!</h1>
<p>Hello, am a programmer!</p>
<form>
<div>
<label for="inputName">Имя</label>
<input id="inputName" />
</div>
<div>
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password"/>
</div>
<div>
<label for="inputEmail">Email</label>
<input id="inputEmail" type="email"/>
</div>
<div>
<label for="inputDate">Дата рождения</label>
<input id="inputDate" type="date" />
</div>
<div>
<label for="inputAgree">Согласие на обработку перс. данных</label>
<input id="inputAgree" type="checkbox" />
</div>
<div>
<button type="submit">Отправить</button>
</div>
</form>
</body>
</html>
Шаг четвертый. Стили
Форма создана, но она не имеет стилей. Что бы навести марафет, мы будем использовать классы css.
Для этого создаем файл styles.css и подключаем его в index.html.
<head>
<meta charset="UTF-8">
<title>My first page!</title>
<link rel="stylesheet" href="styles.css"/>
</head>
После чего можем создавать классы стилей и применять их к элементам формы.
Код формы с добавленными классами стилей:
<body>
<!--минута становления (ах да так выглядит комментарий)-->
<h1>My first page!</h1>
<p>Hello, am a programmer!</p>
<form class="edit-form">
<div class="form-control">
<label for="inputName">Имя</label>
<input id="inputName" />
</div>
<div class="form-control">
<label for="inputPassword">Password</label>
<input id="inputPassword" type="password"/>
</div>
<div class="form-control">
<label for="inputEmail">Email</label>
<input id="inputEmail" type="email"/>
</div>
<div class="form-control">
<label for="inputDate">Дата рождения</label>
<input id="inputDate" type="date" />
</div>
<div class="form-control">
<label for="inputAgree">Согласие на обработку перс. данных</label>
<input id="inputAgree" type="checkbox" />
</div>
<div class="form-btn">
<button type="submit">Отправить</button>
</div>
</form>
</body>
</html>
Код самих стилей:
*{
font-family: monospace;
}
body{
display: flex;
flex-direction: column;
padding: 0 50vw 0 20vw;
}
h1, p{
padding: 10px;
}
.edit-form .form-control{
padding: 10px;
display: flex;
flex-direction: row;
align-items: flex-start;
flex-wrap: wrap;
}
.edit-form .form-control input{
width: 100%
}
.edit-form .form-control input[type="checkbox"]{
width: auto;
}
.edit-form .form-btn{
padding: 10px;
display: flex;
flex-direction: row;
align-items: end;
flex-wrap: nowrap;
justify-content: flex-end;
}
Шаг пятый. JavaScript
После того как мы сверстали страницу, нам необходимо добавить обработчик кнопки (формы) “Отправить”. Для этого создадим файл main.js и подключим его в файле index.html. Подключать файлы скриптов необходимо в конце тега body.
...
</form>
<script src="main.js"></script>
</body>
</html>
Так же добавим onsubmit=" return false;"
на форму, что страница не перерисовывалась.
<form class="edit-form" onsubmit=" return false;">
Далее необходимо создать функцию в файле main.js, которая будет вызываться по нажатию на кнопку.
function send(){
console.log('Hello, I am worked!')
}
И добавляем вызов этой функции на кнопку:
<button type="submit" onclick="send()">Отправить</button>
В функции send мы создали сообщение, которое выведется в консоль разработчика. Что бы его посмотреть откройте в браузере консоль с помощью меню в правом верхнем углу браузера или нажмите ctrl+shift+i (для хрома, у других браузером иная комбинация клавиш). Так же можно открыть консоль разработчик путем нажатия правой мышки на элементе формы и выбрать из контекстного меню пункт “исследовать элемент”.
Далее мы эмулируем отправку данных на сервер путем вывод сообщения с отправляемыми данным.
function send(){
console.log('Hello, I am worked!')
const name = document.getElementById('inputName').value
const password = document.getElementById('inputPassword').value
const email = document.getElementById('inputEmail').value
const date = document.getElementById('inputDate').value
const agree = document.getElementById('inputAgree').value
const data ={ name, password, email, date, agree}
console.log('Data: ', data)
}
Вот и все! Осталось посмотреть как все отработает.
Дополнительное задание
Добавьте функцию getValue которая бы возвращала значение input элемента тем самым сократив строки для получения параметров. В итоге у вас получится такой вариант вызова этой функции. Реализацию вы должны сделать.
const name = getValue('inputName')
P.S.
Код проекта находится на https://github.com/mrsky1001/simple-frontend