V únoru 1997 bylo na síti Internet přístupných milion webů. To bylo před dvaceti lety (také jsem si právě uvědomil jak jsem starý) . Dnes bychom je počítali ve stovkách milionů. Od té doby prošel vývoj webů neskutečnými změnami. Z jednoduchých prezenčních stránek nakreslených ve skicáři a oživených HTML, CSS a JavaScript kódem se staly složité CMS, LMS, CRM a WTF systémy postavené na některých z desítek back-end technologií. Data můžeme ukládat do SQL nebo NoSQL databáze a soubory již nenahráváme jednoduše na server přes FTP, ale používáme složité build systémy, které náš kód nejprve otestují a teprve poté posunou do produkce. Aplikace otevíráme na tabletech, chytrých telefonech, laptopech, ledničkách, … – proto je dobré pokud mají responzivní design. Aby té terminologie nebylo málo.
Jednomu programátorovi to množství technologií, se kterými se denně potýká, začíná přerůstat přes hlavu. Proto se web vývojáři začínají specializovat. Dvě nejvýraznější skupiny jsou front-end a back-end vývojáři. Další by byli full-stack vývojáři, DevOps .. Tento text ti pomůže pochopit, co je úkolem front-end a back-end vývojáře as jakými technologiemi nejčastěji tyto dvě skupiny vývojářů pracují.
Polopatisticky
Pokud chce programátor postavit dům, nejprve zavolá back-end tým: zedníka a tesaře. Back-end zedník mu vybetonuje základy, postaví stěny, vyzdí otvory na dveře a okna. Později mu pomůže back-end tesař. Ten postaví střechu. V takovém domě by se však bývalo těžko – proto přijde front-end tým: malíř a bytový designér. Front-end tým zútulní cihlové zdi a zařídí dům – aby vše vypadalo parádně, spolu ladilo a hlavně plnilo svůj účel .
Pokud to přeměníme na web-development svět, tak back-end je základem pro naši aplikaci. Je to skrytá část aplikace (uživatel ji nevidí), která úzce spolupracuje se serverem, databází. Úkolem back-end programátora je tvořit kód, který je efektivní, zbytečně nezatěžuje server, databázi. aby uživatel nečekal příliš dlouho na potřebná data. Už dvě vteřiny jsou nekonečno. Front-end je zase ta část aplikace, kterou vidí a pracuje s ní uživatel. Často je označována pojmem User Interface (UI). Úkolem front-end programátora je, aby se aplikace zobrazovala každému uživateli správně a aby mu co nejvíce usnadnila práci s aplikací. Front-end programátor umí z tvého jednoduchého kliku na tlačítko vyrobit parádní animaci, která ti např. odkryje další možnosti práce s aplikací.
Jazyky, nástroje
Vývojáři pracují s řadou technologií, které se někdy mění od projektu k projektu.
Diagramy zobrazují jen nejpoužívanější technologie . Důležité je rozumět, že ne všechny technologie z diagramu musí vývojář ovládat – je však dobré o většině z nich alespoň něco vědět – u velkých projektů může mít některá technologie výhody, jiná nevýhody. To je ale na dlouhou debatu a měl by to řešit vývojářský tým interně, nejlépe face-to-face. V žádném případě nedoporučuji ptát se na sociálních sítích, zda je lepší React, nebo Vue JS. Nikam to nevede :)
Samostatnou kapitolu by mohly tvořit webové frameworky jako Ruby on Rails, Laravel nebo ExpressJS. Ty nám usnadňují postavit celou aplikaci – front-end i back-end část.
Technologie v Learn2Code
Každá webová aplikace má jiné nároky a výběr technologií často souvisí i se zkušenostmi a preferencemi týmu řízeného zkušeným CTO. Takový koktejl technologií jsme namíchali v Learn2Code pro naše projekty:
Front-End
Pracujeme s frameworkem Ruby on Rails. S front-end částí aplikace nám v Rails pomáhá SASS preprocesor, díky kterému máme CSS styly pořádané v komponentech a velmi snadno se v nich orientuje. Základ našeho layoutu tvoří framework Bootstrap, jehož vzhled je upraven pomocí CSS stylů – opět s využitím SASS. Na některé části aplikace https://skillmea.sk jsme nasadili React – prohlížení videí, fórum. Ve starších projektech stále využíváme jQuery. Uvažovali jsme nad experimentováním s Vue.js, nakonec tuto technologii neimplementujeme. Yablko však bude dělat online kurz na Vue.js :) React a všechny jeho závislosti spravuje NPM – Node Package Manager a WebPack, který nakonec vyplivuje jeden velký bundle.js soubor.
Back-End
Jelikož používáme Rails, back-end je psán ve skriptovacím jazyce Ruby. K testování používáme RSpec. Používáme relační databázi PostgreSQL, kde máme uložena všechna data.
DevOps
Aplikace nám běží na serverech Heroku. Obrázky skladujeme na Amazon S3. Video obsah je uložen na serverech Vimeo, se kterými komunikuje React prostřednictvím REST API. Kód všech projektů skladujeme v privátních repozitářích na GitHub. Na nekvalitní kód nás neustále upozorňuje RuboCop a JSHint. Nasazení nových funkcí do hlavní aplikace je řízeno s pomocí Continuous Integration-CodeShip.com .
Některé z technologií, které používáme možná znáš. Některé z nich tě dokonce umíme naučit iu nás v Learn2Code, stačí podívat se na seznam kurzů . V dalších blozích se podíváme na front-end i back-end detailněji. Pokud máš nějaké otázky, postřehy nebo jsi něčemu nerozuměl, napiš komentář.