Тут є світло - коворкінги Києва 🔥

Хто такий Frontend-девелопер і як «оживити» вебсайт і зробити його приємним для користувача

dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє. 

Залишити коментар
Хто такий Frontend-девелопер і як «оживити» вебсайт і зробити його приємним для користувача

dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє. 

Зміст

Що таке Frontend 

Frontend, або фронтенд, бо це слово, як і чимало інших термінів з IT, уже стало звичною частиною мови — це публічна частина web-додатків, вебсайти, з якими користувачі — тобто ви — взаємодієте та безпосередньо контактуєте. Усе, що бачить людина під час відкриття сторінки. 

Web-додаток водночас є клієнт-серверним застосунком, тобто він зв’язує клієнта, яким виступає браузер, із сервером, на якому перебувають дані. 

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

Які є компоненти Frontend

Є три ключові компоненти фронтенд. 

HTML (HyperText Markup Language) — це «клітинна будова тіла»: мова розмітки елементів на сторінці та їхня структурна взаємодія. 

CSS (Cascading Style Sheets) — це «генотип і фенотип», мова, якою прописуються характеристики та стилізація зовнішнього вигляду сторінки: за її допомогою можна розташувати блоки, створити шрифти, кольори, адаптувати одну й ту саму сторінку в різних стилях, додати озвучку. 

JavaScript — це «нервова система» кожної сторінки, мова, яка змушує сайти оживати у відповідь на ваші дії — обробляти переміщення курсора та кліки мишкою чи натискання клавіш, завантажувати дані «всередині» сторінки без її повного перезавантаження, запитувати щось у сервера, вводити повідомлення та багато-багато іншого. 

У чому завдання Frontend-розробника 

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

Основне завдання фронтендера — узяти графічний макет від дизайнера та зв’язати його з бекендом сайту так, щоб усе «літало». 

Чим фронтендер відрізняється від верстальника та дизайнера

Часто люди плутають ці три професії. Якщо дуже просто, то фронтендер має бути верстальником, але не кожен верстальник — це фронтендер. Тобто верстка — це вузькопрофільна робота, яка полягає в тому, щоб отримати макет від дизайнера та зверстати його за допомогою HTML+CSS. Перетворити картинку на просту сторінку. 

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

Досвідчений фронтендер не просто «заверстує макет», він розуміється на JavaScript, яка цей макет оживлює та робить приємним для користувача; розуміє, що є на сервері, та нерідко знайомий із додатковими мовами — такими, як PHP. 

З досвідом приходять й інші знання: препроцесори та збирачі (GULP, LESS, SASS, GRUNT), робота з SVG-об'єктами, розуміння UI/UX, кросплатформовість, кросбраузерність — бо ваш сайт дивитимуться люди з усього світу та використовуватимуть для цього різні гаджети та браузери, а він має виглядати й, головне, працювати однаково. 

То що треба знати досвідченому фронтендеру?

Насправді список — колосальний, і варто розуміти, що він може зростати, разом зі зростанням того, що потрібно прикрутити до вашого сайту. Одна справа — це маленький блог, а інша — велетенський онлайн-кінотеатр чи маркетплейс. Тому спробуймо зібрати хоча б основне. 

Отож, потрібно:

  • опанувати HTML, CSS, JavaScript (база);
  • розуміти, як працює клієнт-серверна архітектура;
  • знати популярні бібліотеки/фреймворки (React.js, jQuery, Angular.JS, Redux, js)
  • розбиратися в CMS (WordPress, Drupal, Joomla); 
  • розуміти принципи backend (Node.js, PHP, Ruby, .NET тощо); 
  • знати інструменти дебагінгу (Chrome Dev Tools, Firebug);
  • знати англійську на рівні вільного читання документації як мінімум, а як максимум — для спілкування із замовниками;
  • використовувати графічні редактори та знати дизайн.

Також добре, якщо ви знаєте інструменти контролю версій (Git, GitHub, CVS тощо), бази даних і мови запитів (SQL, MySql, NoSQL, MongoDB). 

Насправді писати повний список того, що має знати або вміти фронтендер — марна справа. Є базові речі, які точно треба знати, усе інше — включно з вміннями продавати себе та презентувати проєкт — так чи інакше приходять із досвідом. Це стосується і мов програмування, і нових інструментів: ви зможете розібратися з цим поступово, коли зрозумієте, що саме хочете робити. Наприклад, одному з моїх колег більше сподобалася дизайнерська сторона роботи. Інший зацікавився бекендом і взаємодією із сервером. 

У чому різниця між Frontend і Backend

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

Frontend, якщо продовжувати ту ж аналогію, це інтер'єр закладу й обслуговування. 

Тобто ви заходите на маркетплейс, милуєтесь його красою й тим, як дизайнерські елементи зручно розташовані на сторінці — так само як відвідуєте улюблений заклад, сідаєте на дизайнерський стілець з IKEA та берете гарно зверстане меню. Після чого замовляєте обід, тобто, обравши потрібний товар, тиснете на кнопку «сплатити». Офіціант приймає замовлення — на цьому фронтенд закінчується, бо офіціант іде на кухню — до сервера, тобто ваш платіж пішов. Далі — справа за бекендом, кухарі отримують ваше замовлення, скажімо, борщ, і починають варити м’ясний бульйон, рубати капусту, відкривати свіжу сметану. Гроші пройшли, замовлення оформлене — і офіціант (знову робота фронтенда) несе вам тарілку запашного юнесківського надбання. 

Бекенд-розробники працюють із серверами, тобто — із серверними мовами (Java, Python, PHP, Ruby), знають бази даних, архітектуру та навіть апаратну частину — характеристики сервера, що він може, а що не може. Ця робота теж може бути творчою — наприклад, якщо вам раптом потрібно витиснути із сервера те, на що він не здатний, але може бути. Та загалом фронтендери, яким потрібно вважати на користувацький досвід і зручність, та ще й по-доброму дивувати якимись особливостями сайту, мають значно більший потенціал для розкриття своїх творчих навичок, ніж бекендери, які зайняті аналізом та обчисленням. 

Чи потрібно з дитинства вчитися Frontend

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

Працював у банках — від менеджера з роботи з клієнтами до керівника департаменту обслуговування фізосіб. 

Потім відкрив фотостудію, одружився, поїхали в подорож, потрапили в Непалі під той самий знаменитий землетрус. 

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

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

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

Чи легко перебудуватися, якщо ти вже працював в інших сферах

Я люблю компи з дитинства, навіть намагався піти на програмування в технікум радіоелектроніки, але втрапив на кафедру радіоелектроніки та з третього курсу мене вигнали. 

Загалом до курсів із GOIT, які я пройшов, уже двічі намагався проходити щось подібне, але обидва рази курси видалися слабкими, і я не витримував. А тут на презентації дали велетенську програму на 9 місяців щоденних занять — як в універі, тільки жорсткіше. Це вже був виклик. Дев’ять місяців мій мозок вибухав, кілька разів доводилося без сну сидіти добу чи дві. Я думав, що нічого не розумію та ніколи нічого не пишу.

Але просто під час навчання ми з однокурсником почали писати застосунок для складського обліку — на чистому, JS без використання фреймворку. Більше, щоб потренуватися в чистій мові програмування. 

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

Після чого на мене вийшов рекрутер компанії 3SS — створення стримінгових сервісів. Хоча я не розсилав резюме. Я прийшов на співбесіду та показав цей проєкт.

Скільки заробляє фронтендер 

Це непросте запитання, оскільки все залежить від роботодавця та проєкту. Умовно можна сказати, що трейні заробляють до $600, джуніор — до $1200–1600, мідл — до $2500–3000, сіньйор — уже важко сказати, оскільки на тимчасовому проєкті й мідл може отримувати $5000. 

Чому вибрав саме Frontend

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

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

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

Хто такий C++ розробник і як за допомогою цієї мови створюються GTA The Witcher StarCraft TES
Хто такий C++ розробник і як за допомогою цієї мови створюються GTA, The Witcher, StarCraft, TES
По темi
Хто такий C++ розробник і як за допомогою цієї мови створюються GTA, The Witcher, StarCraft, TES
Мисливець за головами або хто такий сорсер? Як шукають кандидатів рекрутери які знаються на коді: огляд професії зсередини
Мисливець за головами, або хто такий сорсер? Як шукають кандидатів рекрутери, які знаються на коді: огляд професії зсередини
По темi
Мисливець за головами, або хто такий сорсер? Як шукають кандидатів рекрутери, які знаються на коді: огляд професії зсередини
Професія для тих хто не боїться експериментувати та помилятись. Хто такий HR та які його задачі
Професія для тих, хто не боїться експериментувати та помилятись. Хто такий HR та які його задачі
По темi
Професія для тих, хто не боїться експериментувати та помилятись. Хто такий HR та які його задачі
Читайте головні IT-новини країни в нашому Telegram
Читайте головні IT-новини країни в нашому Telegram
По темi
Читайте головні IT-новини країни в нашому Telegram
Електробайки по-українськи між Києвом та Лос-Анджелесом в «СКШ»

Дивіться, чим живе Delfast під час війни в Україні

Ми запускаємо розсилку про українське IT-ком’юніті. Залиште email, аби розуміти більше. Прем’єра — скоро!
Дякую! На вказану адресу надіслано листа для підтвердження підписки.

Хочете повідомити важливу новину? Пишіть у Telegram-бот

Головні події та корисні посилання в нашому Telegram-каналі

Обговорення
Коментарів поки немає.