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

Нею займаються кілька типів програмістів: фронтендери, бекендери та розробники з повним стеком. Отже, для того, щоб на вашому сайті відображався список відео з каналу YouTube, потрібен фронтенд розробник, який звернеться до інтерфейсу програмування YouTube, візьме звідти цей список і виведе його на сторінку. Якщо ви хочете, щоб дані банківської карти максимально безпечно надходили в банк і ініціювали переказ, то вам слід зв'язатися з бекендером. Причому розробники з повним стеком можуть виконувати обидва завдання.

Отже, чим фронтенд відрізняється від бекенду і з чого почати, якщо ви хочете спробувати себе в одному з напрямків веброзробки?

Які напрямки існують в веброзробці

Веброзробку заведено розділяти на дві складові: front-end і back-end. Фронтенд розробники займаються розробкою графічного інтерфейсу - тієї частини програми, яку бачить користувач. Вони перетворюють створений вебдизайнером макет у функціональний і зручний інтерфейс. Коректне відображення полів і блоків, робочі кнопки та форми для введення даних - все, з чим користувач стикається в браузері, знаходиться в зоні відповідальності фронтендерів. Бекенд-розробники описують логіку роботи з даними, які використовує або генерує додаток. Вони створюють систему, яка працює поза графічним інтерфейсом: щоб пошук знаходив те, що потрібно користувачеві, а люди могли увійти у свої особисті кабінети.Також у веброзробці є фахівці, які поєднують обидві ці ролі – фулстек розробники. Однак зазвичай вони глибше розуміють одне.Універсальними знаннями, якими повинен володіти будь-який веброзробник, є Git і робота з середовищем Linux. Йому також важливо розуміти загальні принципи роботи інтернету. Крім того, існує безліч специфічних інструментів, які потрібно освоювати в залежності від спеціалізації – їх ми опишемо нижче.

Що роблять фронтенд розробники

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

‍Що потрібно знати фронтенд розробнику:

‍- Мови: HTML, CSS, JavaScript, все частіше і частіше потрібен TypeScript.

- Фреймворки: React, Vue або Angular. Потрібно вміти працювати з одним з них.

- Додаткові інструменти: робота з зовнішніми розширеннями через NPM або Yarn, настройка front-end збірки (наприклад, Webpack).

Розглянемо типове завдання молодшого фронтенд розробника

Припустимо, у вашої команди є проєкт React і TypeScript. До нього потрібно додати компонент, який відображає значок на сторінці. Значок може бути різних кольорів в залежності від ситуації, в якій він з'являється:

'primary' — основний колір,

'вторинний' — вторинний колір,

'error' — колір у разі помилки,

«Успіх» — колір у разі успішної операції.

Всі кольори вказані в системі оформлення. Зв'язок між іменами та кольорами описаний у файлі utils.ts. Виглядає це приблизно так:

У файлі описуються можливі типи значків і те, як вони співвідносяться з кольорами з системи оформлення. Молодший фронтенд розробник може описати тільки сам компонент:

У файлі icon.tsx створіть саму іконку, щоб при вбудовуванні цього компонента в будь-яку точку програми можна було встановити його стан.

Це лише невеликий приклад завдання, але він наочно демонструє необхідність розуміння додаткових технологій, крім HTML, CSS і JavaScript: наприклад, React і TypeScript. Які технології будуть потрібні на конкретному проєкті, визначається стеком, прийнятим всередині команди або компанії. Його потрібно або знати, або бути готовим швидко зануритися в нього.

Що роблять бекенд-розробники

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

Припустимо, ви оплачуєте замовлення на сайті інтернет-магазину. Форма, яка збирає ваші платіжні дані, є інтерфейсною; Вона відправляє дані на сервер, де починає працювати бекенд-додаток. Він зв'язується з сервером платіжної системи або банку, відправляє на нього запити, що містять дані платника і суму, після чого отримує відповідь від платіжної системи про те, що переказ коштів завершений. Після цього додаток економить час покупки, дані покупця і суму в базі даних. Потім запускаються такі етапи обробки замовлення: списання товару зі складу, передача його службі доставки й так далі.

Складніше сформувати єдині вимоги до знань бекендера, адже бекенд може бути написаний на різних мовах. Найбільш поширеними є Python, Java, Go, Rust, C++, Ruby, PHP, JavaScript і TypeScript (технологія NodeJS).

Кожна з мов має свої фреймворки: в Python це Django, в Java - Весна, в Ruby - Ruby on Rails, а в JavaScript - Express. Знати їх теж потрібно. Крім того, фахівцеві необхідний досвід роботи як мінімум з однією реляційною (Postgress, MySQL) і однією нереляційною базою даних (MongoDB, Redis).

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

Для запису запитів в реляційні бази даних використовуйте мову SQL. Движок SQL описує ключові операції, незалежні від конкретної бази даних, що робить SQL універсальним. Універсальної мови запитів для нереляційних баз даних не існує.

На практиці, для роботи з базами даних використовуються спеціальні інструменти: ORM для реляційних баз даних і ODM для нереляційних баз даних. Вони дозволяють обробляти інформацію в форматі звичних розробникам об'єктів - наприклад, списків. Крім того, такі інструменти мають зручний інтерфейс для базових операцій: створення, зчитування, оновлення та видалення даних.

Типове завдання молодшого бекенд-розробника виглядає так

‍

‍
‍Припустимо, що бекенд проєкт написаний на Python і фреймворку Django. На сайті, який підтримує компанія, вирішили створити блог зі статтями. Там вже є інші розділи, а блог новий. Він повинен містити кілька категорій статей: новини компанії, оновлення продуктів і спецпроєкти. Коли адміністратор сайту створює статтю, він повинен вибрати для неї одну з категорій: тобто кожен матеріал повинен бути прив'язаний до своєї категорії. База даних повинна зберігати самі статті, можливі категорії та зв'язки між ними. І всім слід управляти з адмін панелі сайту.

Щоб розв'язувати цю проблему, ми створюємо моделі даних для категорій статей і самих матеріалів. Спочатку опишемо вбудованим інструментам Django, які поля будуть в кожній моделі. Потім через ForeignKey ми будуємо зв'язок між статтями та категоріями. Також встановлюємо допоміжні настройки: максимальну довжину рядків, обов'язковість або необов'язковість полів, описуємо, як ця конструкція буде відображатися українською в адмін панелі.

Що роблять розробники з повним стеком

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

У програмуванні клієнт - це система, яка відправляє запити на виконання якихось процедур, отримує відповіді та видає результат користувачеві. Сервер, з іншого боку, виконує процедури у відповідь на запити користувачів і передає результат цих процедур клієнту. У вебконтексті клієнтом найчастіше є браузер, а сервером - вебсервер (машина і набір програм в хмарі).

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

Розробник з повним стеком може створити графічний інтерфейс, запрограмувати всю необхідну логіку, запущену на сервері, а потім побудувати відносини між цими двома частинами, щоб отримати єдиний додаток. Крім роботи з HTML і CSS, він також вміє писати програми, які буде виконувати браузер — і як програмувати сервер. Fullstec може сам створити реєстраційну форму і додати до цього завдання весь код сервера, який перевірить, чи був такий користувач зареєстрований раніше. Якщо людина вже є в базі даних, сервер відправить повідомлення про помилку браузеру, якщо немає - збереже дані в базу даних, а браузер відправить відповідь про успішну реєстрацію користувача.

Як вибрати сферу і почати в ній розвиватися

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

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

Щоб вибрати напрямок для майбутньої кар'єри, потрібно прислухатися до себе і вирішити, чим цікавіше займатися.

Фронтенд розробник повинен почати з вивчення HTML, CSS, JavaScript. Бекенд-розробнику необхідно вивчити хоча б один з мов сценаріїв (наприклад, Python або Ruby), розібратися в основах мереж та інтернету. Також буде потрібно навчитися взаємодіяти з реляційними та нереляційними базами даних обраною мовою.

Якщо людина починає з нуля, то варто прочитати книгу Шарля Петцольда «Код. Секретна мова інформатики" - він простою мовою розповідає про те, як працює комп'ютер. Він буде корисний як початківцям бекендерам, так і фронтендерам. Для початку в обох областях досить знання шкільної математики та англійської мови.

Фронтенд і бекенд - це величезні поля для розробки. Більш того, на деяких етапах роботи фронтенд розробнику необхідно зануритися в бекенд, а бекенд-розробнику - зануритися в фронтенд: адже це «їнь та ян» веброзробки. І вони однаково важливі для роботи будь-якого товару: від інтернет-магазину до служби таксі.

‍