Blog

Frontend vs Backend: v čom je rozdiel?

Learn2Code tím - 28.05.2017 - Vzdelávanie

Vo februári 1997 bolo na sieti Internet prístupných milión webov. To bolo pred dvadsiatimi rokmi (tiež som si práve uvedomil aký som starý). Dnes by sme ich rátali v stovkách miliónov. Od tej doby prešiel vývoj webov neskutočnými zmenami. Z jednoduchých prezenčných stránok nakreslených v skicári a oživených HTML, CSS a JavaScript kódom sa stali zložité CMS, LMS, CRM a WTF systémy postavené na niektorých z desiatok back-end technológií. Dáta môžeme ukladať do SQL alebo NoSQL databázy a súbory už nenahrávame jednoducho na server cez FTP, ale používame zložité build systémy, ktoré náš kód najprv otestujú a až potom posunú do produkcie. Aplikácie otvárame na tabletoch, smartfónoch, laptopoch, chladničkách, … – preto je dobré ak majú responzívny dizajn. Aby tej terminológie nebolo málo.

Jednému programátorovi to množstvo technológií, s ktorými sa denne stretáva, začína prerastať cez hlavu. Preto sa web vývojári začínajú špecializovať. Dve najvýraznejšie skupiny sú front-end a back-end vývojári. Ďalší by boli full-stack vývojári, DevOps.. Tento text ti pomôže pochopiť, čo je úlohou front-end a back-end vývojára a s akými technológiami najčastejšie tieto dve skupiny vývojárov pracujú.

Polopatisticky

Ak chce programátor postaviť dom, najprv zavolá back-end tím: murára a tesára. Back-end murár mu vybetónuje základy, postaví steny, vymuruje otvory na dvere a okná. Neskôr mu pomôže back-end tesár. Ten postaví strechu. V takomto dome by sa však bývalo ťažko - preto príde front-end tím: maliar a bytový dizajnér. Front-end tím zútulní tehlové steny a zariadi dom – aby všetko vyzeralo parádne, spolu ladilo a hlavne plnilo svoj účel.

Ak to premeníme na web-development svet, tak back-end je základom pre našu aplikáciu. Je to skrytá časť aplikácie (používateľ ju nevidí), ktorá úzko spolupracuje so serverom, databázou. Úlohou back-end programátora je tvoriť kód, ktorý je efektívny, zbytočne nezaťažuje server, databázu - napr. aby používateľ nečakal príliš dlho na potrebné dáta. Už dve sekundy sú nekonečno. Front-end je zase tá časť aplikácie, ktorú vidí a pracuje s ňou používateľ. Často je označovaná pojmom User Interface (UI). Úlohou front-end programátora je, aby sa aplikácia zobrazovala každému používateľovi správne a aby mu čo najviac uľahčila prácu s aplikáciou. Front-end programátor vie z tvojho jednoduchého kliku na tlačidlo vyrobiť parádnu animáciu, ktorá ti napr. odkryje ďalšie možnosti práce s aplikáciou.

Jazyky, nástroje

Vývojári pracujú s mnnožstvom technológií, ktoré sa niekedy menia od projektu k projektu.

Diagramy zobrazujú len najpoužívanejšie technológie. Dôležité je rozumieť, že nie všetky technológie z diagramu musí vývojár ovládať - je však dobré o väčšine z nich aspoň niečo vedieť - pri veľkých projektoch môže mať niektorá technológia výhody, iná nevýhody. To je ale na dlhú debatu a mal by to riešiť vývojársky tím interne, najlepšie face-to-face. V žiadnom prípade neodporúčam pýtať sa na sociálnych sieťach, či je lepší React, alebo Vue JS. Nikam to nevedie :) 

Backend technológie

Backend technológie

Frontend technológie

Frontend technológie

Samostatnú kapitolu by mohli tvoriť webové frameworky ako Ruby on Rails, Laravel alebo ExpressJS. Tie nám uľahčujú postaviť celú aplikáciu - front-end aj back-end časť.

Technológie v Learn2Code

Každá webová aplikácia má iné nároky a výber technológií často súvisí aj so skúsenosťami a preferenciami tímu riadeného skúseným CTO. Takýto koktejl technológií sme namiešali v Learn2Code pre naše projekty:

Front-End

Pracujeme s frameworkom Ruby on Rails. S front-end časťou aplikácie nám v Rails pomáha SASS preprocesor, vďaka ktorému máme CSS štýly organizované v komponentoch a veľmi jednoducho sa v nich orientuje. Základ nášho layoutu tvorí framework Bootstrap, ktorého vzhľad je upravený pomocou CSS štýlov - opäť s využitím SASS. Na niektoré časti aplikácie www.learn2code.sk sme nasadili React - prezeranie videí, fórum. V starších projektoch stále využívame jQuery. Uvažovali sme nad experimentovaním s Vue.js, nakoniec túto technológiu neimplementujeme. Yablko však bude robiť online kurz na Vue.js :) React a všetky jeho závislosti spravuje NPM - Node Package Manager a WebPack, ktorý nakoniec vypľuje jeden veľký bundle.js súbor.

Back-End

Keďže používame Rails, back-end je písaný v skriptovacom jazyku Ruby. Na testovanie používame RSpec. Používame relačnú databázu PostgreSQL, kde máme uložené všetky dáta.

DevOps

Aplikácie nám bežia na serveroch Heroku. Obrázky skladujeme na Amazon S3. Video obsah je uložený na serveroch Vimeo, s ktorými komunikuje React prostredníctvom REST API. Kód všetkých projektov skladujeme v privátnych repozitároch na GitHub. Na nekvalitný kód nás neustále upozorňuje RuboCop a JSHint. Nasadenie nových funkcií do hlavnej aplikácie je riadené s pomocou Continuous Integration - CodeShip.com.

Niektoré z technológií, ktoré používame možno poznáš. Niektoré z nich ťa dokonca vieme naučiť aj u nás v Learn2Code, stačí pozrieť zoznam kurzov. V ďalších blogoch sa pozrieme na front-end aj back-end detailnejšie. Ak máš nejaké otázky, postrehy alebo si niečomu nerozumel, napíš komentár.


Logo facebook

Learn2Code tím

Učíme ľudí dizajnovať, robiť webstránky a programovať. Naše prezenčné kurzy nájdeš vo viacerých mestách na Slovensku a pomocou online kurzov sa môžeš vzdelávať z pohodlia domova.


Programovanie bez Ing. - aj bez diplomu z informatiky

Vzdelávanie

Nemáš diplom z informatiky a chceš byť programátor(ka)? Žiadny problém! Počas môjho interview na pozíciu programátora v Learn2Code nikoho nezaujímalo,...

Pomôžte nám tým, že darujete 2% z daní

Vzdelávanie

Blíži sa podávanie daňového priznania, a preto by sme sa vám radi pripomenuli. Aj tento rok majú zamestnanci, fyzické a právnické osoby možnosť pomôcť...

Remote práca z Nikaraguy a Kostariky

Vzdelávanie

Všetko to začalo Erazmom v Madride pred 3 rokmi. Bol to môj prvý dlhší pobyt mimo Slovenska a veľmi ma inšpiroval cestovať ďalej. Hneď po škole som...