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