Front End Developer vs Back End Developer - Definíció és jelentés a gyakorlatban

A weboldalak és az alkalmazások összetettek! A gombok és képek csak a jéghegy csúcsa. Ennél a bonyolultságnál emberekre van szükségük a kezeléséhez, de mely részekért felelősek a front end és a back end fejlesztők?

  • A fejlődés sok rétege
  • De nem vagyunk mind teljes veremben
  • Tehát mi a különbség a front end fejlesztés és a back end fejlesztés között?
  • Mi az a front end fejlesztés?
  • Mi a háttér-fejlesztés?
  • Ahol a dolgok elmosódnak
  • Források a tanuláshoz

A fejlődés sok rétege

Akár egy webhelyen, akár egy natív iOS alkalmazásban dolgozik, az összes fejlesztői környezet közös témát mutat - létezik egy alkalmazás kezelőfelülete és egy háttér.

Ez a vonal elmosódhat, különösen a javascript térnyerése és a szerver nélküli világ miatt. Ha az eszköz kissé összeolvad, néha felmerülhet bennünk a kérdés, hogy teljes verem fejlesztő-e.

„Fullstack” fejlesztő. pic.twitter.com/yfymQmJJgq

- Brian Holt (@holtbt), 2018. március 24

De nem vagyunk mind teljes veremben

Bármennyire is szeretnénk lenni, nem vagyunk teljes verem fejlesztők. Személy szerint azt tapasztalom, hogy produktív lehetek egy alkalmazás hátulján, de ez nem az én erősségem, és sokkal inkább szeretnék fejjel lehúzni a felhasználói felületeket.

Néhány ember pedig az ellenkezőjével foglalkozik, ahol az API-k építésével foglalkoznak a legerősebben egy alkalmazás hátulján, és bár fel tudnak építeni egy felhasználói felületet, ez talán inkább egy prototípus-szerű élmény, mint egy továbbfejlesztett alkalmazás.

Tehát mi a különbség a front end fejlesztés és a back end fejlesztés között?

Még akkor is, ha teljes verem fejlesztő vagy, ez nem jelenti azt, hogy nincs megosztva a felelősség.

Szóval hogy néznek ki ezek?

Mi az a front end fejlesztés?

Az alkalmazás kezelőfelülete általában arra a rétegre utal, amely a felhasználói felületet (felhasználói felület) képviseli. Ez magában foglalhat bármit, a HTML-t és CSS-t tartalmazó statikus webhelytől kezdve a felhasználói felületet működtető teljes React alkalmazásig.

Hogyan nézett ki a Front End Development hagyományosan?

A Javascript jelenleg irányítja az elülső webet, de ez nem mindig volt így. Bár felhasználható lett volna kevés interakció hozzáadásához egy webhelyhez, általában a kezelőfelületeket kiszolgálóoldali sablonnyelvek segítségével renderelték, például keretrendszer-vezérelt PHP és Template Toolkit (Perl).

Ez a gyakorlatban rendkívül népszerűvé vált az otthoni keretrendszerekkel vagy olyan eszközökkel, mint a Wordpress, amelyek a PHP-t arra használták, hogy hatalmas fejlesztői közösséget irányítsanak, akik ezen eszközökkel építették fel weboldalukat.

Úgy működött, hogy a sablonnyelv képes volt adatait közvetlenül a kiszolgálóról szerezni, amint renderelték. Amikor egy böngésző közvetlenül az origótól (magától a szervertől) kérte az oldalt, bármilyen adatra lenne szüksége a sablonnak, akkor az alkalmazáslogika megadná.

Néhány hagyományosabb elülső eszköz:

  • Olyan könyvtárak, mint a jQuery vagy a MooTools
  • Webhely-keretek, mint például a Wordpress
  • Sima CSS
  • A táblázat elemek bőséges használata

De ahogy telt az idő, a javascript egyre érettebb lett, mint egy nyelv, és a böngészők egyre erőteljesebbé váltak, ami arra az ötletre vezetett, hogy több munkát át tudnánk vinni a böngészőbe, hogy gyorsabb és interaktívabb élményeket szerezzünk.

Hogyan néz ki most a Front End Development?

Most már gyakran látni olyan javascript-tartalmú webhelyeket és alkalmazásokat, amelyek olyan felhasználói felület-keretrendszerek segítségével készültek, mint a React, a Vue és az Angular. Ezek az eszközök olyan absztrakciókat nyújtanak, amelyek lehetővé teszik a fejlesztők számára, hogy összetett felhasználói felületeket hozzanak létre újrafelhasználható mintákkal, például alkatrészekkel.

Amikor a böngésző betölti az oldalt, az oldal megkapja a kezdeti HTML dokumentumot, amely a JavaScript tagot is tartalmazza (ugyanaz, mint mindig). De amint a javascript betöltődik, a böngésző kéréseivel eléri az API-kat, amelyek elkészültével frissítse az oldalt, hogy töltsön be bármilyen dinamikus adatot, amelyet általában az első HTML-dokumentummal kap.

Noha több lépésnek tűnik, általában gyorsabb kezdeti oldalbetöltést és renderelést biztosít, nem beszélve arról, hogy nagyszerű fejlesztői tapasztalattal rendelkezik. Azáltal, hogy kevesebbet teljesít az első kérésnél, és rangsorolja, hogy mi töltődik be azután, ez általában jobb felhasználói élményt nyújt.

Néhány elterjedtebb eszköz, amely egyre gyakoribb és egyre népszerűbb:

  • UI keretrendszerek, mint a React vagy a Vue
  • Web-keretrendszerek, mint Gatsby
  • Olyan fordítók, mint Bábel
  • A csomagolók szeretik a Webpack-ot
  • CSS eszközök, mint a Sass

De ezeket az API-kat, legyenek azok, amelyekért fizetünk, vagy magunk hozunk létre, valahol fel kell építeni . Ott jön be a háttér.

Mi a háttér-fejlesztés?

A háttérréteg általában ott van, ahol az üzleti logika bekövetkezik. Ez rendkívül bonyolult lehet, mint például az e-kereskedelmi társaság bevételét meghatározó szabályok, vagy valami általánosabb dolog, például a felhasználói profil.

Hogyan nézett ki a Back End Development hagyományosan?

Az alkalmazások hátuljait történelmileg olyan szerveroldali nyelvek segítségével építették fel, mint a PHP vagy a Ruby. Az elképzelés az, hogy van egy kiszolgálója, amelyen komplex műveleteket kell végrehajtania, így ennek módja egy olyan nyelv, amelyet a szerver megért.

A kiszolgálóhoz intézett minden kérés esetén a háttérprogram elvégzi a műveletek teljes veremét, beleértve az elülső rész megjelenítését is. Keretek vagy barkácsarchitektúrák használatával a háttér elfogadja a kérést, kitalálja, mit kell tennie a kéréssel, futtat a kéréshez szükséges üzleti logikát, és átadja a kezelőfelületnek azokat az adatokat, amelyekre válaszra lenne szüksége. azt a kérést.

Néhány hagyományosabb háttéreszköz a következőket tartalmazza:

  • Helyi vagy távolról felügyelt szerverek, például a Rackspace
  • HTTP szerverek Apache használatával
  • Olyan adatbázisok, mint a MySQL
  • Kiszolgálóoldali nyelvek, például PHP vagy Perl
  • Alkalmazási keretek, mint a Ruby on Rails

Hogyan néz ki most a Back End Development?

A háttérvégek halmai kissé hasonlítanak a korábbiakhoz, az újabb kódmintáktól eltekintve, kivéve, hogy gyakrabban látni fogja, hogy a háttérvégek API-n keresztül HTTP-kérelmeken keresztül szolgáltatnak adatokat, nem pedig közvetlenül azokhoz a sablonokhoz, amelyeken a kezelőfelület csapata dolgozik.

Bár az alapítvány nem szuper különbség, valójában egyre bonyolultabbá válik, mivel különböző biztonsági vonatkozásokkal kell megküzdenie, amelyek veszélyeztethetik a rendszerét, ha nincsenek megfelelően konfigurálva, például nyitott API-t hagyva a nyilvánosság számára, amely érzékeny felhasználói adatokat ad vissza.

A szerver működése azonban teljesen más is lehet. Míg korábban előfordulhat, hogy a pythonunkat a saját kezelt szerverünkön futtatjuk (még mindig tudjuk), most már használhatunk szerver nélküli funkciókat olyan eszközökkel, mint az AWS Lambda, amelyek leegyszerűsítik a kód kezelését.

Míg a „szerver nélküli” nem feltétlenül jelenti azt, hogy szó szerint nincsenek szerverek, ez azt jelenti, hogy a fejlesztőknek szolgáltatásként nem kell aggódniuk a szerver karbantartása miatt, és inkább csak a futtatni kívánt kódra összpontosíthat.

Néhány a leggyakrabban használt és egyre népszerűbb háttéreszközök közül:

  • Felhőszerverek, például AWS EC2
  • Szerver nélküli szolgáltatások, mint például az AWS Lambda
  • NoSQL adatbázisok, mint például a MongoDB
  • Olyan nyelvek, mint a Python vagy a javascript a NodeJS-en keresztül
  • Webalkalmazás-keretrendszerek, például Serverless Framework

Ahol a dolgok elmosódnak

A hátsó végű sodratok egy része most már megírhatja a hátulját javascript-tel. A Node.js beindításával a fejlesztők lehetőséget kaptak arra, hogy a kedvenc böngésző nyelvüket ugyanazokhoz a dolgokhoz hajtsák végre, amelyeket korábban megszoktak és ismertek, de most egy szerveren.

Noha nem mindenki szereti a javascript szerveroldali nyelvként történő futtatását, kissé könnyebbé vált ugyanannak a nyelvnek az alkalmazás teljes kötegének megírása. Ez kissé megváltoztatta a játékot, ami az elülső és a hátsó végeket illeti.

De az is elkezdett teljes kört ölni, ahol most olyan rendszereket lát, amelyek API-kat építenek közvetlenül a kezelőfelület mellett, hasonlóan ahhoz, amit egy hagyományos veremben láthatunk.

Front End vs Back End

A veremtől függetlenül az aggályok mindig elkülönülnek egymástól. A kezelőfelület és az összes interakció, függetlenül attól, hogy a szerveren vagy a böngészőben jelenítik-e meg, az teszi a kezelőfelületet a kezelőfelületté, és az adat- és üzleti logikát, függetlenül attól, hogy a vállalat szekrényében lévő szerverről vagy egy felügyelt funkcióból származik-e. a hátulját a hátuljává teszi.

Akár a felhasználói funkciókkal szeretne dolgozni, akár a logikát szeretné felépíteni, amely lehetővé teszi számukra a dolgokat, rengeteg erőforrás áll rendelkezésre az induláshoz.

Források a tanuláshoz

Front End

  • freecodecamp.org Adaptív webdesign tanúsítás (freecodecamp.org)
  • Kezdő Javascript (beginnerjavascript.com - Wes Bos)
  • React bemutató kezdőknek (youtube.com - programozás Mosh-szal)
  • Front End Masters (frontendmasters.com)

Hátul

  • freecodecamp.org API-k és Microservices tanúsítás (freecodecamp.org)
  • Szuper egyszerű kiszolgáló nélküli indítás (kentcdodds.com)
  • AWS Certified Cloud Practitioner Training 2019 - Ingyenes 4 órás videotanfolyam (freecodecamp.org)
  • CS50 Bevezetés a számítástechnikába (edx.org)

A fentiek mind

  • Hogyan válhat teljes verem webfejlesztővé 2020-ban (colbyfayock.com)
  • Egghead.io (egghead.io)
  • 100 napos kód (100daysofcode.com)
  • A webfejlesztő Bootcamp (udemy.com - Colt Steele)

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? ️ Iratkozzon fel a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre