Front End Developer срещу Back End Developer - Определение и значение на практика

Уебсайтовете и приложенията са сложни! Бутоните и изображенията са само върхът на айсберга. При този вид сложност имате нужда от хора, които да го управляват, но за кои части са отговорни разработчиците отпред и отзад?

  • Многото слоеве на развитие
  • Но не всички сме пълни
  • И така, каква е разликата между Front End Development и Back End Development?
  • Какво представлява Front End Development?
  • Какво представлява Back End Development?
  • Където нещата се размиват
  • Ресурси за учене

Многото слоеве на развитие

Независимо дали работите върху уебсайт или собствено приложение за iOS, всички среди за разработка споделят обща тема - има преден край на приложение и заден край.

Този ред може да стане размазан, особено като се има предвид появата на javascript и безсървърния свят. С някакво сливане на инструментариума, понякога може да се чудим дали сме разработчик на пълен стек.

Разработчик „Fullstack“. pic.twitter.com/yfymQmJJgq

- Брайън Холт (@holtbt) 24 март 2018 г.

Но не всички сме пълни

Колкото и да искаме да бъдем всички, ние не сме всички разработчици на пълни стекове. Лично аз намирам, че мога да бъда продуктивен в задния край на приложение, но това не е моята сила и много предпочитам да бъда с глави надолу, изграждайки потребителски интерфейси.

А някои хора са обратното, където най-силно се справят с изграждането на API в задния край на приложението и макар да могат да изграждат потребителски интерфейс, това може да е по-скоро прототипно изживяване, отколкото доработено приложение.

И така, каква е разликата между Front End Development и Back End Development?

Дори и да сте разработчик на пълни стекове, това не означава, че няма разделение на отговорностите.

И така, как изглеждат тези?

Какво представлява Front End Development?

Предният край на приложение обикновено се отнася до слоя, който представлява потребителския интерфейс (потребителски интерфейс). Това може да включва всичко - от статичен сайт с HTML и CSS до пълно приложение React, което захранва потребителския интерфейс.

Как традиционно изглеждаше Front End Development?

Понастоящем Javascript управлява мрежата на предния край, но това не винаги е било така. Въпреки че можеше да се използва за добавяне на малки части от взаимодействието към даден сайт, обикновено предните краища се изобразяваха с помощта на езици за шаблониране от страна на сървъра като PHP и Template Toolkit (Perl), управлявани от рамката.

Това стана супер популярно на практика с домашно отгледани рамки или инструменти като Wordpress, които използваха PHP, за да стимулират огромна общност от разработчици, които изградиха своите уебсайтове с тези инструменти.

Начинът, по който работеше, беше, че езикът за шаблони успя да получи данните си направо от сървъра, докато бяха изобразени. Когато браузър поиска страницата директно от произхода (самия сървър), каквито и данни да са необходими на шаблона, логиката на приложението ще предостави по това време.

Някои от по-традиционните предни инструменти включват:

  • Библиотеки като jQuery или MooTools
  • Уебсайт рамки като Wordpress
  • Обикновен CSS
  • Обилно използване на елементи на таблица

Но с течение на времето javascript продължаваше да става по-зрял като език, а браузърите ставаха все по-мощни, което доведе до идеята, че можем да преместим повече от тази работа в браузъра, за да изградим по-бързо и по-интерактивно изживяване.

Как изглежда Front End Development сега?

Сега е обичайно да виждате тежки javascript уебсайтове и приложения, изградени с помощта на потребителски интерфейси като React, Vue и Angular. Тези инструменти предоставят абстракции, които позволяват на разработчиците да изграждат сложни потребителски интерфейси с многократно използваеми модели като компоненти.

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

Макар да звучи като повече стъпки, той обикновено осигурява по-бързо първоначално зареждане и рендиране на страницата, да не говорим, че има страхотен опит за разработчици. Като доставя по-малко на тази първа заявка и приоритизира това, което се зарежда след това, това обикновено завършва като по-добро потребителско изживяване.

Някои от предните инструменти, които са по-често срещани и нарастват популярността, включват:

  • Потребителски интерфейси като React или Vue
  • Уеб рамки като Gatsby
  • Съставители като Babel
  • Пакети като 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
  • Рамки за уеб приложения като Framework без сървъри

Където нещата се размиват

Част от обрата със задни краища вече можете да напишете отзад с javascript. С създаването на Node.js, разработчиците получиха възможността да използват любимия си език на браузъра, за да правят повечето от същите неща, с които бяха свикнали и познати, но сега на сървър.

Въпреки че не всеки обича да изпълнява javascript като език от страна на сървъра, стана малко по-лесно да използвате същия език, за да напишете пълния стек на приложение. Това промени играта малко по отношение на предните и задните краища.

Но също така започна да излиза пълен кръг, където сега виждате системи, които изграждат API точно до предния край, подобно на това, което може да видите в традиционния стек.

Преден край срещу заден край

Независимо от стека, винаги ще има разделяне на проблемите. Потребителският интерфейс и цялото взаимодействие, независимо дали се изобразяват на сървъра или в браузъра, е това, което прави предния край предния край, а данните и бизнес логиката, независимо дали идват от сървъра в килера на вашата компания или управлявана функция, е това, което прави задния край задния край.

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

Ресурси за учене

Преден край

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

Заден край

  • API на freecodecamp.org и сертифициране на Microservices (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 и други интересни неща!

  • ? Последвай ме в Туйтър
  • ? ️ Абонирайте се за моя Youtube
  • Регистрирайте се за моя бюлетин