Розробка з боку Front end – що це таке і чим відрізняється від Back end?

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

Що таке фронтенд?

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

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

Frontend розробка – це робота зі створення публічної частини web-додатку, з якою безпосередньо контактує користувач, і функціоналу, який зазвичай виконується на стороні клієнта. Тобто, фронтенд розробник працює над тим, щоб на сайті кожна кнопочка, іконка, текст і вікно не тільки стояли на своєму місці, не перекривали один одного і виглядали цілісно (це веб-верстка), але і щоб вони виконували своє пряме призначення – підштовхували до якоїсь дії (наприклад, щоб кнопка “купити” відкривала кошик, а “play” – запускала відтворення фільму або музики).

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

Компоненти фронтенд розробки:

  • HTML (HyperText Markup Language) кажучи простими словами – це мова розмітки всіх елементів і документів на сторінці, і їх взаємодія в структурі сторінки.
  • CSS (Cascading Style Sheets) – це мова характеристики і стилізації зовнішнього вигляду документа. За допомогою CSS-коду браузер розуміє, як саме необхідно відображати елементи. CSS створює шрифти, кольори, визначає розташування блоків сайту, та інше. Також адаптує один і той же документ в різних стилях, виводить передачу на екран або для читання голосом.
  • JavaScript– мова, створена оживляти веб-сторінки. Завдання JavaScript – відгукуватися на дії користувача, обробляти натискання клавіш, переміщення курсора, кліки мишкою. JavaScript також дає можливість вводити повідомлення, посилати запити на сервер, а також завантажує дані без перезавантаження сторінки, і так далі.

Головне завдання Frontend-розробника

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

Вся фронтенд розробка виконується на стороні користувача, вона не менш важлива ніж бекенд розробка (про неї ми також згадаємо трохи нижче). Основне завдання фронтенд фахівця – це зв’язати представлені дизайнером графічні макети у web-додатку (сторінках сайту) з бекендом і за необхідності реалізувати обчислювальний функціонал на стороні користувача. Основні технології в арсеналі фронтендера це HTML, CSS і JavaScript. Звичайно, при роботі в команді потрібно знати і розбиратися в багатьох процесах, суміжних з роботою фронтенд-розробки . Будучи вже досвідченим фронтенд-розробником потрібно бути знайомим з бекенд-технологіями і розуміти принципи взаємодії користувача і з додатками (UX).

Що повинен знати досвідчений фронтенд-розробник?

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

Деякі роботодавці абсолютно не відрізняють фронтенд-розробника від верстальника, пред’являючи до претендента на вакансію фронтенд-розробника вимоги, що абсолютно не відносяться до його профілю. Роботодавці часто самі не знають, що верстальник – це фактично вузькопрофільний фахівець. Його завдання полягає в верстці макету, отриманого від дизайнера, використовуючи при цьому тільки HTML + CSS, і це лише третина від того, що повинен знати junior frontend розробник.

Що ж стосується досвідченого фронтенд девелопера, він не просто “верстає макети”, він відмінно знає JavaScript, орієнтується в фреймворках і бібліотеках, має уявлення і розуміння того, що розміщується на серверній стороні, і нерідко знає додаткові мови, наприклад PHP або C#.

Фронтенд-розробник розуміє роботу препроцесорів GULP, LESS, SASS, GRUNT, працює з SVG-об’єктами, DOM, API, AJAX і CORS і так далі. Крім усього іншого є розуміння принципів адаптивної і інтерактивної верстки, UI / UX-проектування, крос-браузерності і крос-платформенності, базового тестування, можливо, також, і знання навичок мобільної розробки. Фронтенд девелопер високого рівня також вміє використовувати графічні редактори, працює з контролем версій Git, GitHub, CVS, з шаблонами різних CMS. Варто відзначити, що дуже важливо також і знання англійської мови на рівні вільного спілкування з замовниками і читання документації.

Щоб стати затребуваним і досвідченим фахівцем в області фронтенда розробки , необхідно освоїти наступні технології:

  • HTML і CSS (в тому числі сітки і CSS-фреймворки, специфікації W3C і WHATWG, HTML5 / CSS3 Polyfills);
  • вільно працювати з JavaScript;
  • Розуміти логіку роботи клієнт-серверної архітектури в контексті написання реальних програм;
  • Знати популярні бібліотеки і феймворки: React.js, jQuery, Angular.JS, Redux, Backbone.js, розуміти принципи побудови сучасних односторінкових додатків (Single Page Application);
  • препроцесорів CSS (Sass, Less, Stylus і т. д.);
  • популярних CMS (WordPress, Drupal, Joomla і т.д.);
  • OOCSS / BEM / SMACSS;
  • ECMAScript 6;
  • HTML5 API;
  • SVG;
  • DOM;
  • Розуміти принципи побудови Backend (Node.js, PHP, Ruby, .NET і т. д.);
  • JavaScript транспайлери (Babel);
  • Інструменти дебаггінгу (Chrome Dev Tools, Firebug і так далі);
  • Графічні редактори (Photoshop, Illustrator та інше);
  • Інструменти контролю версій (Git, GitHub, CVS і так далі);
  • Бази даних і мови запитів (SQL, MySql, NoSQL, MongoDB і так далі).

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

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

На кусах фронтенд розробки в DAN. IT ви зможете придбати знання та освоїти всі навички, необхідні затребуваним frontend-розробникам.

Розробка з боку Front end - що це таке і чим відрізняється від Back end? - фото №1

Frontend і Backend розробка –   відмінності і взаємодія між собою

Backend – це програмно-апаратна частина проекту,  Frontend ж є клієнтською стороною призначеного для користувача інтерфейсу до програмно-апаратної частини проекту, тобто до бекенду. Іншими словами бекенд – це все те, що відбувається на стороні сервера і що залишається невидимим користувачеві (сам сервер теж є частиною бекенду, тільки апаратного). Звідси і назва front – це видиме спереду, back – це те, що приховано позаду, невидиме.

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

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

Розглянемо процес взаємодії frontend і backend:

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

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

Варіанти взаємодії frontend і backend:

  • HTTP-запит відправляється на сервер, сервер в процесі пошуку інформації, вбудовує її в шаблон і повертає назад у вигляді HTML-сторінки.
  • Випадок із застосуванням інструментарію AJAX (Asynchronous JavaScript and XML). В даному випадку запит відправляє JavaScript, який завантажений в браузер, відповідь же приходить в форматі XML або JSON.
  • Односторінкові додатки, які завантажують дані без оновлення сторінок. Це робиться за допомогою AJAX або фреймворків Angular і Ember.
  • Ember або бібліотека React надають допомогу у використанні програми і в клієнтській частині і на сервері. Frontend і backend взаємодіють через AJAX і HTML-код, який обробляється на сервері.

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

Кар’єра і зарплата фронтенд-розробника

Найчастіше кар’єра frontend-розробника починається з верстальника і тестувальника. В процесі роботи вивчається HTML + CSS, далі здобуваються знання JavaScript, бібліотек і фреймворків. Потім вивчаються основні поняття побудови серверної частини, паралельно додаючи інструменти, відповідно до обраної спеціалізації. Додатково напрацьовуються навички роботи з графічними редакторами і розумінням принципів UI / UX дизайну і, звичайно ж, софт-скіли .

В цілому, можливі такі основні шляхи розвитку фронтенд девелопера:

  • горизонтальний (розвиватися, рости як фахівець, що значно підвищить попит на ринку праці) – пробувати себе в різних проектах, постійно вивчати нові технології;
  • вертикальний (зростання по кар’єрних сходинках) – покращувати навички та рівень їх володіннями в рамках однієї компанії ;
  • диверсифікаційний (паралельне вивчення суміжних спеціальностей, перекваліфікація) – наприклад, почати з фронтенда і перейти на бекенд.

Що стосується підвищення рівня кваліфікації з позиції junior до senior – в перших двох випадках шанси стати синьйором і / або тім-лідом практично однакові, все залежить від вашої завзятості рости і вчитися. У третьому випадку вам може знадобиться трохи більше часу, адже змінивши напрямок, ви можете зістрибнути з позиції senior frontend на junior backend.

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

Розробка з боку Front end - що це таке і чим відрізняється від Back end? - фото №2

Як стати фронтенд-розробником – курси, які навчать

Якщо ви новачок в ІТ-індустрії і хочете вивчити фронтенд з нуля, то курси за направленням frontend будуть правильним рішенням. Якщо у вас є бажання працювати з клієнтською і візуальної частиною сайтів і посадкових сторінок, маєте уявлення, що таке комп’ютерна верстка і хочете розвиватися в цьому напрямку, спеціалізовані курси допоможуть отримати повні і структуровані знання. Для новачків курси послугують твердою базою на шляху до просунутого рівня, а ментори в DAN.IT education допоможуть освоїти її з огляду на ваші наявні знання та побажання.

На курсах DAN.IT в Києві вас навчать веб-верстці, поширеній в середовищі програмістів мові JavaScript, фреймворкам типу React. js, робота з Git, плюс дадуть основи BackEnd. Курс Front End доповнений прикладами і кейсами, отримав схвалення ізраїльських і українських розробників, студенти проходять навчання за останніми стандартами ІТ-ринку.

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

Чому ми навчаємо на курсах

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

  • Основи HTML, CSS. Селектори CSS; оформлення елементів; управління розміром і положенням блоків на сторінці; поля і відступи; порядок верстки блоку; тестування результатів верстки; адаптивна веб верстка; нюанси кросбраузерності верстки; базова анімація; стандарт CSS3; основні інструменти розробника.
  • Основи JavaScript. Базові і об’єктні типи даних; перетворення типів; змінні і правила їх іменування; умови, оператори, масиви, цикли, функції; області видимості, замикання; контекст виклику; керуючі конструкції; обробка помилок; введення в браузерні події; Localstorage / Sessionstorage.
  • Advanced HTML / CSS. CSS методології на прикладі BEM; верстка з піксельної точністю; верстка з підтримкою Retina екранів; крос-браузерна верстка; Web accessibility; Mobile first
  • Advanced JavaScript. Глибоке занурення в можливості мови; вивчення основ об’єктно-орієнтованого програмування (ООП), базових шаблонів проектування, основ функціонального програмування, можливостей стандарту ES6 \ ES7 (ECMAScript); конструктори; прототипне спадкування (prototype); рекурсія; модулі; strict mode; cookies; Async / Await. Знайомство зі стандартами WebSocket, JSONP, AJAX, XMLHttpRequest, Promise, Single Page Application, загальна інформація про RESTful API, тестування коду за допомогою фреймворків.
  • Основи роботи з бібліотекою React.js. Верстка JSX; віртуальний DOM; components; робота з Props / State компонента; React Router; Redux; робота з ImmutableJS в React / Redux додатку; робота з middleware, Redux-thunk; Redux-forms; Тестування програми за допомогою Jest і Enzyme; Використання хуків в React.
  • Воркшоп: Серверна JavaScript (Backend). Знайомство з технологією Node.js; інфраструктура і використання пакетного менеджера NPM (package manager); фреймворк Express.js; робота з базами даних на прикладі MongoDB.
  • Додаткові навички. Робота з Git Bash; workflow від створення сховища до його відправки на віддалений сервер; робота з гілками; робота з файлами.

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

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

Також студентам надається можливість роботи в команді над фінальним проектом за методикою scrum. Стартом такого проекту послужить реалізація ідеї клієнта. Після закінчення фінального проекту студентів чекає його презентація перед членами Наглядової ради.

Всі статті
Контакти