Елементи сучасної front-end розробки на прикладі html, css, javascript

Гузар Святослав Васильович

студент 4 курсу, спеціальність 121 «Інженерія програмного

забезпечення»

Івано-Франківський національний технічний університет нафти і газу

СУЧАСНІ ІНФОРМАЦІЙНІ ТЕХНОЛОГІЇ

(Програмне забезпечення)

 Елементи сучасної front-end розробки на прикладі html, css, javascript

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

Сучасну веброзробку поділяють на: фронтенд (англ. front-end) та бекенд (англ. back-end). Людину, яка ж оволодіє обидвома парадигмами, сміло можна називати фулстек-розробником (англ. full stack developer). Також варто зазначити, що для розробки вебсторінок чи вебдодатків застосовують клієнт- серверну архітектуру, що й спричинило поділ веброзробки.

Фронтенд – це те, що ми можемо бачити та взаємодіяти, коли користуємось браузером. Це власне те, що відносять до «клієнтської сторони».

Бекенд, або ж «серверна сторона» – це частина вебсторінки, яку ми не бачимо. Вона відповідає за зберігання та організацію даних. Бекенд взаємодіє з фронтендом, надсилаючи та отримуючи інформацію, яка відображається як вебсторінка, вебдодаток, тощо.

Перейдемо до професійних інструментів фронтенд-розробника. Так звана

«дорожня мапа» розробника клієнтської частини [3, c. 11], насправді доволі велика, проте аналізуючи сучасні засоби, варто закцентувати увагу саме на трьох китах фронтенду, а саме на: HTML, CSS, Javascript.

HTML, або ж мова гіпертекстової розмітки. Вона використовується для побудови «скелета» або розмітки для майбутнього вебсервісу.

CSS, або ж каскадні таблиці стилів. Використовуються для визначення того, як повинні візуально виглядати елементи HTML. Також CSS застосовується для створення адаптивних макетів, або, якщо точніше, щоб вебсторінка мала читабельний вигляд, незалежно від типу екрану користувача. Вивчаючи CSS варто звернути увагу на наступні аспекти: одиниці виміру елементів, модель коробки (внутрішні та зовнішні відступи елементів, їх обрамлення), змінні (вважається хорошим тоном, використовувати змінні для стилізування елементів, що повторюються), медіа-запити (головний компонент у створенні адаптивного макету), CSS Grid та CSS Flexbox (сучасні засоби, що допомагають зробити вебсторінку адаптивною).

Javascript – скриптова мова програмування, застосовується, щоб зробити вебсервіс інтерактивним, що є невід’ємною частиною сучасних вебсторінок. Вона надає сайту додаткові функціональні можливості, яких неможливо досягти лише за допомогою HTML та CSS. JavaScript дозволяє вебсторінкам реагувати на активність користувачів та динамічно оновлювати себе, і все це без необхідності перезавантаження сторінки для зміни зовнішнього вигляду.

Наступний інструмент, що вартий уваги – система контролю версій Git. Дозволяє відстежувати зміни у коді та файлах відносно часу, дає змогу повернутися до попередньої версії проєкту без будь-яких проблем. Крім того, допомагає створювати колаборації з людьми, які працюють над спільним проєктом.

Плоди своєї праці потрібно якось відображати, чудовими варіантами для розміщення вебсервісу в мережі Інтернет є платформи Github Pages, або Netlify. Як було зазначено вище, сучасна фронтенд розробка, це не лише HTML,

CSS, Javascript. Існує багато технології якими потрібно оволодіти. Наступною логічною стежкою у дорожній мапі фронтенд-розробника є використання менеджерів пакетів. Менеджер пакетів – це в основному інструмент, який автоматизує процес встановлення, оновлення, налаштування та видалення програм або проектів.

Вивчивши всі основи та наведені вище інструменти, наступним кроком є вибір фреймворку/бібліотеки Javascript. Наразі є три популярні та варті уваги інструменти: Angular, React, Vue JS. Вибір одного із них пов’язаний з типом майбутнього вебсервісу.

Рейтинг та використання серед розробників даних інструментів з кожним роком змінюється, але лідерські позиції наразі займає React.

React — це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду — “компонентів”. [2] За допомогою React розробники можуть створювати компоненти багаторазового використання, і ці компоненти відображають дані у міру їх зміни з часом.

Ще однією невід’ємною частиною світу front-end розробки є тестування, для цього існує також багато фреймворків, які використовують в залежності від типу тестування.

Одним із найпопулярніших інструментів для тестування React додатків є Jest. Jest — це платформа для тестування JavaScript з акцентом на простоті використання. При вивченні процесу знаходження помилок, обов’язково слід зупинити увагу на тестуванні за допомогою знімків. Типовий тестовий знімок робиться під час обробки інтерфейсу користувача, а потім порівнюється з еталонним файлом знімка, що зберігається поряд із тестовим. Тест не вдасться, якщо обидва знімки не збігаються.

Переходячи до висновку, сучасна веброзробка не стоїть на місці, набір інструментів для створення вебсервісів досить обширний. Технології оновлюють мало не що року. Це зумовлює високі вимоги до рівня компетентності

 

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

Список використаних джерел:

1. Мельник Р. Програмування веб-застосувань / Роман Мельник. – Львів: Видавництво Львівської політехніки, – 248 с.
2. Посібник React [Електронний ресурс] – Режим доступу до ресурсу: https://uk.reactjs.org/tutorial/tutorial.html.
3. Lindley C. Front-end Road Map / Cody Lindley // Front-end Developer Handbook / Cody , 2019. – С. 11–14.

Науковий керівник: кандидат технічних наук, доцент, доцент кафедри інженерії програмного забезпечення Вовк Р. Б.