Що потрібно знати дизайнеру про Фронтенд розробку
Ви теж неодноразово чули твердження про те, що розробники, м'яко кажучи, недолюблюють дизайнерів? Тоді ви якраз вчасно зайшли. У цьому матеріалі я спробую пояснити, чому ця думка правдива, що впливає на таке ставлення, а найголовніше, як цю ситуацію виправити.
Увага — дисклеймер. Уся інформація, яку ви прочитаєте нижче, взята з відкритих джерел, власного та досвіду трьох senior frontend-розробників, які щодня працюють з вебдизайнерами.
Прошу не повторювати в реальному житті =)
Frontend-розробка та етапи її розвитку
Якщо ви вже знаєте, що це таке, а може й чули про фреймворки, API чи односторінкові застосунки, то у вас виникне запитання: «Навіщо нам матеріал про фронтенд, якщо ми взагалі дезігнери?» Я ж відповім, що базове знання цієї галузі й того, як вона працює полегшить вам роботу, допоможе знайти спільну мову з розробниками, дасть зрозуміти його чи її зауваження і нарешті почути від девелопера заповітне «Моя повага».
То що ми знаємо про frontend-розробку? Що є такий собі HTML для написання структури сайту, є CSS, завдяки якому можна приправити її різними стилями, ще існує JS, що дозволяє зробити анімацію й працювати з даними й бла, бла, бла.
Це все так, але фронтенд не стоїть на місці вже протягом 25 років. Постійно з’являються десятки нових бібліотек і фреймворків. Деякі розробники також розвиваються, вивчають останні технології й штовхають вебпроцеси вперед. А є такі, що зупинилися на конкретному підході й продовжують з ним працювати. Це схоже на дизайнерів, які далі створюють сайти у фотошопі.
Я б міг тут розписати історію розвитку фронтенду, технології, роки їх появи та скільки сайтів завдяки їм написали. Але краще ми зосередимося на трьох ключових моментах:
Епоха JQuery і AJAX
JQuery — це найпопулярніша JS бібліотека, яка з’явилася у 2006-му. Феномен її популярності полягає у тому, що вона проста, з багатьма допоміжними бібліотеками й, на той час, працювала на всіх браузерах. Через низький поріг входу платформи, розробники починали кодувати, навіть не вивчивши основ JS. Та кінець історії JQuery настав у 2010 році. За цей час на ній написали 74% усіх сайтів, що є в інтернеті.
Чому це для нас важливо? Тому що переписати логіку чи структуру великої платформи — дороге задоволення, на відміну від мінімальних змін в UI-дизайні.
Значення компонентного підходу у розробці
З дня на день, з року в рік frontend-розробники працювали над тими ж завданнями: завантажити дані, відобразити їх у HTML, а коли там щось відбулося, наприклад, реєстрація, потрібно це опрацювати на рівні JavaScript і надіслати, скажімо, на backend-розробку. Все по колу.
Тому коли ми постійно вирішуємо однакові завдання, хочеться їх автоматизувати. Ви помічали, що створюючи дизайн для сайту чи платформи, у вас накопичується хмара блоків, як хедер, інпут, футер тощо, які в різному вигляді, але повторюються на сторінках? Щось схоже відбувається у розробників. І тут входить в гру компонентний підхід, завдяки якому девелопер пише одну функцію, яку виносить в компонент і застосовує її там, де потрібно.
Ера фреймворків: Vue, Angular та React
Через необхідність переходити на вище згаданий підхід, почали з'являтися чимало фреймворків і бібліотек, які дозволяли це зробити. Та сьогодні чи не найпопулярнішими для цього є такі інструменти, як Vue, React, Angular.
Перш ніж рухатися далі, пропоную уточнити різницю між бібліотекою та фреймворком. Останній ставить певні обмеження та інструктує, як писати код, а бібліотеку викликає розробник і самостійно керує процесом.
Тепер з інформацією про етапи розвитку фронтенду, можемо переходити до нашої наступної статті про чотири типів розробників, з якими вам, ймовірно, доведеться співпрацювати.
Щоб заповнити свою стрічку "feed" корисним контентом, підписуйся на наші соцмережі.