1. diel - Úvod a porovnania
Tento článok je súčasťou webovej reprezentácia ročníkové práce Honzu Bittnera, písané v školskom roku 2014/2015.
V tomto článku tiež vysvetľujem skratky, ktoré sú použité v celej sérii článkov.
Použité značky, skratky a symboly
Ajax - Asynchronous JavaScript and XML
back end - časť webu, ktorá slúžiace k administrácii, generuje obsah pre front end
BEM - Block, Element, Modifier - štýl zápisu OOCSS tried
BFU - bežný Fyzický (Franta) Užívateľ
CSS - Cascading Style Sheets
framework - špecializovaný balík knižníc pre uľahčenie práce
front end - časť webu, ktorú vidí návštevník webu
HTML - HyperText Markup Language
IDE - Integrated Development Environment - Vývojové prostredie
jQuery - JavaScriptová knižnica
JS - JavaScript
Less - CSS preprocesor
minifikace - zmenšenie zdrojových kódu (odstránenie medzier, zalomenie a i.)
MVC - Model-view-controller
MVP - Model-view-presenter
OOCSS - objektovo orientované štýly
PHP - PHP: Hypertext Preprocessor, pôvodne Personal Home Page
Sass - Syntactically Awesome Style Sheets - CSS preprocesor
web - webová stránka
webový prehliadač - internetový prehliadač; program, ktorým zobrazujeme web
Úvod
Webové technológie sa rok čo rok vyvíja a už dlho nám pre vývoj webové stránky, alebo aplikácie, nestačia dva až tri jazyky / technológie, ale potrebujeme rovno celý arzenál. Projekty sa verzují, automatizujú a stále viac sa tiež využívajú frameworky v podstate na všetko, pretože ohromne uľahčujú ďalší vývoj - alebo by aspoň mali.
Vyznať sa v súčasných trendoch a ovládať, alebo sa aspoň orientovať, dané technológia je teda veľmi náročné. V súčasnej dobe sa tiež stále viac vyvíja na báze open-source, kde desiatky, stovky, a dokonca aj tisíce vývojárov pracujú na jednom projekte a spoločne vytvárajú nádherné, a súčasne náročné, aplikácie či technológie. Tu sa na projektoch uplatní vo veľkej miere výhody Verziovací systémov.
Keďže je nutnosťou používať nespočet technológií a jazykov, na písanie webové stránky si nevystačíme s poznámkovým blokom, ale pre písanie kvalitného kódu, kde nám bude dopomáhať minimálne chytré napovedanie a zvýrazňovanie špecifických prvkov daného jazyka / technológia, potrebujeme špeciálne prepracované programy - editory alebo IDE. Našťastie pre písanie webových stránok či aplikácií nepotrebujú vývojári rovnaký program, a teda môže každý využívať program podľa svojich preferencií.
Časom, keď sa projekty začali čoraz viac zväčšovať, začali sa tiež využívať automatizačné nástroje, ktoré dokážu samé kompilovať zdrojový kód, modifikovať (napr. Minifikace), interagovať s konzolou ai. V mojej ročníkové práci sa budem zaoberať vývojom webových aplikácií za použitia moderných technológiou. Vyberiem mnou používané či odporúčanej technológie, ktorým budem venovať samostatnej podkapitoly, kde danú technológiu v základe vysvetlím.
V praktickej časti ročníkové práce vytvorím jednoduchú webovú aplikáciu, zameranú na redakčný systém. Systém bude vedieť registrácii a prihlásení používateľov, spravovať články a užívateľské účty a bude obsahovať špeciálne administrátorské rozhranie.
Webová stránka vs. webová aplikácia
V tejto ročníkové práci mám za úlohu vytvoriť webovú aplikáciu, ale pritom som už niekoľkokrát zmienil webovú stránku. Rozdiel, medzi týmito dvoma pojmami je zároveň zásadný a súčasne minimálne. Záleží totiž na uhle pohľadu.
Ak sa bavíme o webovej stránke, je väčšinou myslený front end, teda to, čo vidíme u nás vo webovom prehliadači. Samotné vytváraní stránky, resp. jej generovanie vôbec neberieme do úvahy.
Ak sa bavíme o webové aplikáciu, je väčšinou myslený práve back end, teda tá časť, pri ktorej webovú stránku vytvárame. Môže sa jednať o najrôznejšie redakčné systémy, hry a pod.
Mnoho ľudí však tieto pojmy zamieňa, pretože sú si veľmi podobné a blízke - a nie vždy je to zle. Ak sa zameriame na statické stránky, teda stránky, ktoré nie sú vygenerované žiadnym systémom, ale sú napísané "ručne", môžeme ich označovať za webovú aplikáciu napr. V prípade, keď majú rozvinutú front end logiku a väčšinou teda vie niečo viac, než len vykresliť stránku - vie napr. rozpohybovať stránku, vytvárať animácie / prezentácie, vykresľovať obrazce, obsahujú hru či aplikáciu i.
Podľa môjho názoru sa dá webová stránka považovať aj za aplikáciu v prípadoch, keď obsahuje back end alebo pokročilejší front end logiku. Ak sa chceme týmto nezrovnalostiam vyvarovať, môžeme napríklad použiť univerzálnu skratku web.
Editor vs. IDE
V úvode ročníkové práce som sa zmieňoval o tom, že nám pre písanie webov nestačí jednoduchý poznámkový blok, ale je nutné využívať špeciálne editory alebo IDE.
Aký je ale medzi týmito dvoma druhmi programov rozdiel? V oboch prípadoch môžeme editovať / písať naše weby s eleganciou - máme pekne zvýraznený kód a nejaké napovedanie. IDE však kódu naozaj rozumie. Chápe to, čo píšeme a vytvára spojenie medzi časťami súborov, knižnicami, frameworky atp.
V praxi to znamená, že ak požadujeme po editora nápovedu v mieste, kde očakávame premennú, dostaneme zoznam funkcií, premenných, často sa vyskytujúcich slov apod. Ak budeme požadovať nápovedu na mieste, kde očakávame premennú, po IDE, dostaneme na výber iba premenné, ku ktorým si navyše môžeme zobraziť v nejakom rýchlom náhľade tiež dokumentáciu.
IDE obsahuje tiež veľa nástrojov, ako napríklad nástroje pre kompiláciu, debugovania (nástroj, ktorým môžeme zistiť príčinu chyby) a pod. Tieto nástroje sa taktiež do väčšiny chytrých editorov dajú doplniť v podobe rozšírenia, väčšinou vytvárané komunitou.
