3. diel - Výber technológií 2
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ýber moderných webových technológií
Štýlovanie
Pre štýlovanie zostavenej stránky pomocou HTML máme len jedinú možnosť a tou je jazyk CSS. Tzv. kaskádové štýly žiadnu inú alternatívu nemajú, alebo som ju minimálne nenašiel.
CSS je veľmi jednoduchý jazyk, ktorý má ale tendenciu byť poriadne neporiadny - hlavne vo väčších projektoch. Platí jednoduché pravidlo - čím menej CSS, tým lepšie. CSS kód je dobré rozdeľovať do malých komponentov tak, aby zostal krásne prehľadný.
Na tento účel, a nielen k nemu, sa využíva CSS preprocesorov, ktoré obsahujú možnosť importovať jednotlivé časti kódu (tzv. Partials) a po kompiláciu vytvorí jeden výsledný súbor so štýlmi.
CSS preprocesora
Najpoužívanejšími preprocesoru sú Sass a Less. Oba dva preprocesoru dodávajú do CSS možnosť premenných, cyklov, funkcií, mixin, matematiky, vnorovanie ai. Sú to teda ideálne nástroje pre tvorbu webov, hlavne pre väčšie projekty.
Preprocesor Less so svojou špeciálnou syntaxou drží skôr bližšie CSS, kdežto Sass so svojou pôvodnou syntaxou dosť rozchádzal od CSS, napríklad vôbec nevyužíval zložené zátvorky. Jeho nová syntaxe, tá sa nazýva SCSS, sa už podobá syntax CSS a je súčasne používaná majoritne.
Oba dva preprocesoru ponúka mnoho a je tak v podstate jedno, či si vyberiete ten alebo onen. Hlavné je si nejaký vybrať. Dobrou voľbou je riadiť sa podľa výberu spolupracovníkov. Ja osobne odporúčam preprocesor Sass, ktorý sa mi páči viac.
Interakcie
Pre interakciu s webom sa dajú využiť 2 jazyky. JavaScript a Dart. Jazyk JavaScript je pomerne známy a pre weby je dostupný skoro od začiatku. Kvôli jeho zvláštnemu štýlu zápisu objektového kódu však vzniká mnoho rôznych preprocesorov, ktoré sa snažia zjednodušiť syntax a zaviesť štandardné objektový návrh tak, ako poznáme napr. Z jazykov ako Java, C #, C ++ a i.
Dart
Jazyk Dart je nová technológia od Googlu, ktorá sa však v apríli 2015 prestala vyvíjať ako náhrada JavaScriptu (do tej doby bol využívaný len v špeciálnej verzii prehliadača Chrome a bolo plánované nasadenie do ostatných prehliadačov) a teraz sa bude vyvíjať len jeho kompilátor dart2js - čo znamená, že sa z neho stane niečo ako JavaScript preprocesor. Dart má vlastný virtuálny stroj a jeho vývoj by sa mal smerovať smerom na desktopy, mobily a servery.
Nadstavby JavaScriptu
Jeden z najpoužívanejších preprocesorov je CoffeeScript, ktorý veľmi uľahčuje syntax. Píše sa v ňom mnoho pluginov, stránok i aplikácií. Ďalšou možnosťou je napr. TypeScript, vyvíjaný Microsoftom tiež na open source licenciu.
Jednou z majoritne využívaných JavaScriptových knižníc je knižnica jQuery, ktorá značne vylepšuje výber / selektovanie konkrétnych HTML elementov z webu a umožňuje s nimi ďalej jednoduchú manipuláciu.
Back end
Pre back end je o mnoho viac funkčných možností, pretože sa dá využiť takmer akéhokoľvek jazyka, ktorý sa dá využiť na serveri. Klasicky sa využívajú jazyky PHP, Java, VB.NET, Ruby, Python, C / C ++ atď.
Najobľúbenejším jazykom, vďaka veľkej podpore platených, aj bezplatných, serverov je jazyk PHP, ktorý má jednoduchú syntax a dobrú krivku učenia (je veľmi jednoduchý na naučenie). Beží na ňom približne 80% všetkých webov. Je k dispozícii mnoho frameworkov, z ktorých je momentálne na špici celosvetových trendov framework Laravel a pre Česko framework Nette. Všetky frameworky majú jasné základné ciele - zjednodušiť syntax a poskytovať čo možno najväčšiu úroveň zabezpečenia a ochrany proti rôznym útokom.
Databázy
Do back end môžeme zaradiť aj databázy, kde sa často používa napr. Oracle, MySQL, MariaDB, SQLite ai. Databázy sú navrhnuté tak, aby mohli uchovávať veľké množstvo dát a bol k nim čo najrýchlejší prístup. Najčastejšie používanou databáz na menších projektoch je MySQL.
Verzovacie systémy
Prác na čím ďalej tým väčších projektoch nie je preposielanie kódu emailom či prenosnými médiami práve ideálne riešenie. Najpoužívanejšími verziovacími systémy sú Git, Mercurial a Subversion. Tieto systémy fungujú ako lokálne, tak aj na zdieľanom úložisku, kde sa synchronizuje kód od všetkých používateľov. Jednotlivé úložiska sa potom nazývajú repozitára a sú ako platené, tak i bezplatné.
Všetky systémy majú samozrejme svoje výhody a nevýhody, ale povedal by som, že Git je najviac rozšírený a vďaka službám ako je GitHub (najväčší úložisko bezplatných repozitárov s open source projektmi) ho používa čím ďalej tým viac ľudí.
Práve na GitHub vyvíja tisíce vývojárov svoje projekty, ako napr. CSS preprocesor Sass / Less, javascriptové knižnicu jQuery, nový moderný editor Atom atď.
Automatizačné systémy
Ak tisíce ľudí pracujú na projekte, je nutné, aby všetci dodržiavali rovnaký štýl kódu, kompilovali a vyvíjali rovnakým štýlom atď. Tu prichádza do hry nástroje na automatizáciu, kde stačí raz, v nejakom špeciálnom súbore, definovať čo a ako sa má vykonať a každý vývojár si len spustí daný systém a je o všetko postarané.
Veľa využívanými systémy, minimálne v oblasti webov, sú Gulp a Grunt. Obaja beží na platforme Node.js, čo je JavaScriptová platforma. Grunt sa konfiguruje štýlom podobným spôsobu JSON a Gulp sa konfiguruje pomocou JavaScriptu.
Sám som skúšal oba dva systémy na projekte s tisíckami riadkami CSS, resp. Sass, kódu. V GRUNT mi kompilácie trvala okolo 7,8s a v GULP okolo 1,2s - čo už je veľký rozdiel.
Do automatizačných systémov môžeme zaradiť aj špeciálne súbory, ktoré nastavujú editory a IDE - ich odsadenie, kódovanie, pridávajú na koniec súboru voľný riadok alebo napr. Mažú medzery za textom.
Gulp
Gulp využíva tzv. Streamy, v preklade prúdy, ktoré na začiatku načítajú dáta zo súborov, s ktorými majú pracovať, a na konci výsledok uloží z pravidla do jedného súboru.
Medzi tým na dátach, uložených v pamäti, môže byť vykonaná akákoľvek úloha - najčastejšie napr. Minifikace, kompilácie CSS preprocesoru atp. Grunt sa, oproti tomu, po každej úlohe uloží, čo spomaľuje celý proces. Gulp obsahuje mnoho doplnkov, ktoré sa dajú stiahnuť z balíčkového manažéru NPM, ktorý slúži pre platformu Node.js.
