dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє.
dev.ua продовжує знайомити початківців і світчерів із професіями в IT. Цього разу про те, як створювати сторінку, з якої ви читаєте цей текст, відмінність між фронтендом і бекендом і про свій шлях розповість Євген Жданов, Frontend Developer 3SS (3 Screen Solutions), який прийшов у сферу з досвідом роботи в різних галузях, але, здається, знайшов своє.
Frontend, або фронтенд, бо це слово, як і чимало інших термінів з IT, уже стало звичною частиною мови — це публічна частина web-додатків, вебсайти, з якими користувачі — тобто ви — взаємодієте та безпосередньо контактуєте. Усе, що бачить людина під час відкриття сторінки.
Web-додаток водночас є клієнт-серверним застосунком, тобто він зв’язує клієнта, яким виступає браузер, із сервером, на якому перебувають дані.
Ви відкриваєте свій браузер, заходите на потрібний сайт — і користуєтесь його функціоналом, розробленим фронтендерами. Саме функціоналом, тому що дизайн загалом — це завдання якраз дизайнера. Перше завдання фронтендера — вебверстка, тобто зробити так, щоб усі елементи розташовувались на своєму місці, виглядали цілісно та не закривали одне одного. Друге завдання — щоб усі ці елементи виконували своє пряме призначення. Щоб ви натискали на кошик — і потрапляли в кошик, де можете купити продукт, а не запускали відтворення відеофайлу, і навпаки, клік на play в онлайн-кінотеатрі має показати кіно, а не вивести на сторінку оплати.
Є три ключові компоненти фронтенд.
HTML (HyperText Markup Language) — це «клітинна будова тіла»: мова розмітки елементів на сторінці та їхня структурна взаємодія.
CSS (Cascading Style Sheets) — це «генотип і фенотип», мова, якою прописуються характеристики та стилізація зовнішнього вигляду сторінки: за її допомогою можна розташувати блоки, створити шрифти, кольори, адаптувати одну й ту саму сторінку в різних стилях, додати озвучку.
JavaScript — це «нервова система» кожної сторінки, мова, яка змушує сайти оживати у відповідь на ваші дії — обробляти переміщення курсора та кліки мишкою чи натискання клавіш, завантажувати дані «всередині» сторінки без її повного перезавантаження, запитувати щось у сервера, вводити повідомлення та багато-багато іншого.
Усе дуже просто: розробляти та створювати динамічні інтерфейси. Усе те, за що потім вам скажуть або «вау, класний сайт, усе супер», або «що за лажа, чому шрифти полізли на фотки, а кнопочка, яка має трошки з'їжджати, вилітає за екран».
Основне завдання фронтендера — узяти графічний макет від дизайнера та зв’язати його з бекендом сайту так, щоб усе «літало».
Часто люди плутають ці три професії. Якщо дуже просто, то фронтендер має бути верстальником, але не кожен верстальник — це фронтендер. Тобто верстка — це вузькопрофільна робота, яка полягає в тому, щоб отримати макет від дизайнера та зверстати його за допомогою HTML+CSS. Перетворити картинку на просту сторінку.
Що стосується дизайну, це окрема спеціальність, і ви можете її вивчити, щоб стати більш широкопрофільним спеціалістом і мати змогу самостійно створювати всю «зовнішність» сайтів.
Досвідчений фронтендер не просто «заверстує макет», він розуміється на JavaScript, яка цей макет оживлює та робить приємним для користувача; розуміє, що є на сервері, та нерідко знайомий із додатковими мовами — такими, як PHP.
З досвідом приходять й інші знання: препроцесори та збирачі (GULP, LESS, SASS, GRUNT), робота з SVG-об'єктами, розуміння UI/UX, кросплатформовість, кросбраузерність — бо ваш сайт дивитимуться люди з усього світу та використовуватимуть для цього різні гаджети та браузери, а він має виглядати й, головне, працювати однаково.
Насправді список — колосальний, і варто розуміти, що він може зростати, разом зі зростанням того, що потрібно прикрутити до вашого сайту. Одна справа — це маленький блог, а інша — велетенський онлайн-кінотеатр чи маркетплейс. Тому спробуймо зібрати хоча б основне.
Отож, потрібно:
Також добре, якщо ви знаєте інструменти контролю версій (Git, GitHub, CVS тощо), бази даних і мови запитів (SQL, MySql, NoSQL, MongoDB).
Насправді писати повний список того, що має знати або вміти фронтендер — марна справа. Є базові речі, які точно треба знати, усе інше — включно з вміннями продавати себе та презентувати проєкт — так чи інакше приходять із досвідом. Це стосується і мов програмування, і нових інструментів: ви зможете розібратися з цим поступово, коли зрозумієте, що саме хочете робити. Наприклад, одному з моїх колег більше сподобалася дизайнерська сторона роботи. Інший зацікавився бекендом і взаємодією із сервером.
Backend — це, якщо казати ресторанною мовою, кухня. Там є плити, холодильники, працюють кухарі, йде доставлення продуктів, гудять витяжки — робиться все те, заради чого ви прийшли до цього закладу, тобто — їжа.
Frontend, якщо продовжувати ту ж аналогію, це інтер'єр закладу й обслуговування.
Тобто ви заходите на маркетплейс, милуєтесь його красою й тим, як дизайнерські елементи зручно розташовані на сторінці — так само як відвідуєте улюблений заклад, сідаєте на дизайнерський стілець з IKEA та берете гарно зверстане меню. Після чого замовляєте обід, тобто, обравши потрібний товар, тиснете на кнопку «сплатити». Офіціант приймає замовлення — на цьому фронтенд закінчується, бо офіціант іде на кухню — до сервера, тобто ваш платіж пішов. Далі — справа за бекендом, кухарі отримують ваше замовлення, скажімо, борщ, і починають варити м’ясний бульйон, рубати капусту, відкривати свіжу сметану. Гроші пройшли, замовлення оформлене — і офіціант (знову робота фронтенда) несе вам тарілку запашного юнесківського надбання.
Бекенд-розробники працюють із серверами, тобто — із серверними мовами (Java, Python, PHP, Ruby), знають бази даних, архітектуру та навіть апаратну частину — характеристики сервера, що він може, а що не може. Ця робота теж може бути творчою — наприклад, якщо вам раптом потрібно витиснути із сервера те, на що він не здатний, але може бути. Та загалом фронтендери, яким потрібно вважати на користувацький досвід і зручність, та ще й по-доброму дивувати якимись особливостями сайту, мають значно більший потенціал для розкриття своїх творчих навичок, ніж бекендери, які зайняті аналізом та обчисленням.
Мої освіти навряд чи можна назвати профільними — бухоблік та аудит в Держакадемії статистики. Раніше мав мрію — піти в держапарат і покращувати ситуацію в країні. Трохи працював за спеціальністю — головбухом на держпідприємстві — і там на мене, недосвідченого спеціаліста, намагалися навісити відповідальність за дії попереднього бухгалтера, що назавжди відбило бажання працювати безпосередньо на державу.
Працював у банках — від менеджера з роботи з клієнтами до керівника департаменту обслуговування фізосіб.
Потім відкрив фотостудію, одружився, поїхали в подорож, потрапили в Непалі під той самий знаменитий землетрус.
Повернувся. Відкрив спортивну студію — Alfa Gravity — закрив, коли дружина завагітніла. Почав копатися в крипті, майнив на одному майнері, потім накупив відеокарт і майнив ефіроподібні монети, накопичив кілька біткоїнів, став мільйонером — і втратив основну частину монет, бо вони були на апаратному гаманці. Після піку бітка на 19 тисяч і його падіння вирішив зав’язувати: надто великі гойдалки, у крипту треба йти, коли маєш основний дохід. Тому зараз просто купую час від часу монети, які подобаються, і зберігаю на різних гаманцях.
Запасів вистачило на рік — потім за класикою намагався таксувати, узяв в оренду авто, воно перестало їздити на третій день, довелося розбиратися, вертати заклад.
Пробував здавати квартири, але відверто амортизація власної квартири в такому обсягу, як вийшло в мене після студентів, нелогічна.
Я люблю компи з дитинства, навіть намагався піти на програмування в технікум радіоелектроніки, але втрапив на кафедру радіоелектроніки та з третього курсу мене вигнали.
Загалом до курсів із GOIT, які я пройшов, уже двічі намагався проходити щось подібне, але обидва рази курси видалися слабкими, і я не витримував. А тут на презентації дали велетенську програму на 9 місяців щоденних занять — як в універі, тільки жорсткіше. Це вже був виклик. Дев’ять місяців мій мозок вибухав, кілька разів доводилося без сну сидіти добу чи дві. Я думав, що нічого не розумію та ніколи нічого не пишу.
Але просто під час навчання ми з однокурсником почали писати застосунок для складського обліку — на чистому, JS без використання фреймворку. Більше, щоб потренуватися в чистій мові програмування.
Та програма вийшла гарна, мала великий функціонал: прихід і витрата товару, переміщення за віддаленими складами, кабінети складів зі своїми даними, клієнти, звіти, графіки. Було складно, та за чотири місяці без ТЗ і практики я написав понад 40 тисяч рядків корисного коду.
Після чого на мене вийшов рекрутер компанії 3SS — створення стримінгових сервісів. Хоча я не розсилав резюме. Я прийшов на співбесіду та показав цей проєкт.
Це непросте запитання, оскільки все залежить від роботодавця та проєкту. Умовно можна сказати, що трейні заробляють до $600, джуніор — до $1200–1600, мідл — до $2500–3000, сіньйор — уже важко сказати, оскільки на тимчасовому проєкті й мідл може отримувати $5000.
На мій вибір вплинуло те, що коли був підприємцем, мав вічні проблеми з розробниками: жодного разу не написали нормальний сайт. Можна сказати, вирішив перевірити, чи брехали мені тоді, чи ні. Виявилося, брехали.
Пішов вчити JavaScript, тому що тут є повна екосистема, майже все можна написати цією мовою: сайт, мобільний застосунок, десктоп-застосунок, бекенд, є купа фреймворків, мільйони написаних бібліотек і просто шматків коду.
Іноді буває важко, адже більшу частину свого усвідомленого життя працював на себе або керував кимось. Тут розклад інший — гарно пропрацьовується командна робота.
