Front End Developer проти Back End Developer - Визначення та значення на практиці

Веб-сайти та додатки складні! Кнопки та зображення - лише вершина айсберга. При такій складності вам потрібні люди, щоб керувати нею, але за які частини відповідають розробники інтерфейсу та розробники інтерфейсу?

  • Багато шарів розвитку
  • Але ми не всі в повному складі
  • Отже, яка різниця між розробкою інтерфейсу та розробкою інтерфейсу?
  • Що таке Front End Development?
  • Що таке Back End Development?
  • Де речі стають нечіткими
  • Ресурси для вивчення

Багато шарів розвитку

Незалежно від того, працюєте ви на веб-сайті або власному додатку iOS, усі середовища розробки мають спільну тему - передній кінець програми та задній кінець.

Цей рядок може стати розмитим, особливо з огляду на зростання рівня JavaScript та безсерверний світ. Коли інструменти дещо зливаються, ми іноді можемо задатися питанням, чи є ми повноцінним розробником стека.

Розробник “Fullstack”. pic.twitter.com/yfymQmJJgq

- Брайан Холт (@holtbt) 24 березня 2018 р

Але ми не всі в повному складі

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

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

Отже, яка різниця між розробкою інтерфейсу та розробкою інтерфейсу?

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

То як вони виглядають?

Що таке Front End Development?

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

Як традиційно виглядав Front Front Development?

На даний момент Javascript править веб-інтерфейсом, але це не завжди було так. Незважаючи на те, що це могло бути використано для додавання невеликих фрагментів взаємодії з сайтом, зазвичай інтерфейсні кінці відтворювались із використанням мов шаблонів на стороні сервера, таких як PHP, керований фреймворком, та Інструментарій шаблонів (Perl).

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

Як це працювало, мова шаблонів змогла отримати свої дані прямо з сервера, як вони були відображені. Коли браузер запитував сторінку безпосередньо у джерела (самого сервера), які б дані не були потрібні шаблону, логіка програми надавала б тоді.

Деякі з найбільш традиційних інструментів інтерфейсу включають:

  • Бібліотеки, такі як jQuery або MooTools
  • Фреймворки веб-сайтів, такі як Wordpress
  • Звичайний CSS
  • Рясне використання елементів таблиці

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

Як зараз виглядає Front End Development?

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

Коли браузер завантажує сторінку, сторінка отримує початковий HTML-документ, який також включає тег сценарію в javascript (такий же, як завжди). Але як тільки цей javascript завантажується, він звертається до API, використовуючи запити браузера, які після завершення оновлюють сторінку, щоб заповнити будь-які динамічні дані, які ви зазвичай отримуєте разом із цим першим документом HTML.

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

Деякі з найпоширеніших та популярніших інструментів інтерфейсу включають:

  • Фреймворки інтерфейсу, такі як React або Vue
  • Веб-фреймворки, такі як Гетсбі
  • Компілятори, такі як Бабель
  • Пакети, такі як Webpack
  • Інструменти CSS, такі як Sass

Але ці API, незалежно від того, чи ми платимо, чи створюємо самі, потрібно десь будувати . Ось де входить задній кінець.

Що таке Back End Development?

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

Як традиційно виглядав Back End Development?

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

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

Деякі з найбільш традиційних інструментів задньої версії включають:

  • Локальні або віддалено керовані сервери, такі як Rackspace
  • HTTP-сервери з використанням Apache
  • Бази даних, такі як MySQL
  • Мови на стороні сервера, такі як PHP або Perl
  • Фреймворки програм, такі як Ruby on Rails

Як зараз виглядає Back End Development?

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

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

Але також те, як працює сервер, може бути абсолютно різним. Хоча раніше ми могли запускати наш python на власному керованому сервері (ми все ще можемо), тепер ми можемо використовувати безсерверні функції за допомогою таких інструментів, як AWS Lambda, які спрощують управління кодом.

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

Деякі з найпоширеніших та зростаючих популярностей інструментів задньої версії:

  • Хмарні сервери, такі як AWS EC2
  • Безсерверні сервіси, такі як AWS Lambda
  • Бази даних NoSQL, такі як MongoDB
  • Такі мови, як Python або javascript через NodeJS
  • Фреймворки веб-додатків, такі як Serverless Framework

Де речі стають нечіткими

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

Хоча не всі захоплюються використанням JavaScript як мови на стороні сервера, стало трохи легше використовувати ту саму мову для написання повного стеку програми. Це трохи змінило гру, що стосується передніх і задніх кінців.

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

Передній та задній кінці

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

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

Ресурси для вивчення

Передній кінець

  • freecodecamp.org адаптивна сертифікація веб-дизайну (freecodecamp.org)
  • Початковий Javascript (beginnerjavascript.com - Wes Bos)
  • Підручник React для початківців (youtube.com - Програмування за допомогою Mosh)
  • Майстри фронту (frontendmasters.com)

Задній кінець

  • API і сертифікація мікросервісів freecodecamp.org (freecodecamp.org)
  • Супер простий старт до безсерверного (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019 - Безкоштовний 4-годинний відео-курс (freecodecamp.org)
  • Вступ CS50 до комп’ютерних наук (edx.org)

Все вищесказане

  • Як стати веб-розробником повного стеку в 2020 році (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 днів коду (100daysofcode.com)
  • Bootcamp веб-розробника (udemy.com - Кольт Стіл)

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку