IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Lekce 2 - Výběr technologií 2

Tento článek je součástí webové reprezentace ročníkové práce Honzy Bittnera, psané ve školním roce 2014/2015.


Výběr moderních webových technologií

Stylování

Pro stylování sestavené stránky pomocí HTML máme jen jedinou možnost a tou je jazyk CSS. Tzv. kaskádové styly žádnou jinou alternativu nemají, nebo jsem ji minimálně nenalezl.

CSS je velmi jednoduchý jazyk, který má ale tendenci být pořádně nepořádný – hlavně ve větších projektech. Platí jednoduché pravidlo – čím méně CSS, tím lépe. CSS kód je dobré rozdělovat do malých komponent tak, aby zůstal krásně přehledný.

K tomuto účelu, a nejen k němu, se využívá CSS preprocesorů, které obsahují možnost importovat jednotlivé části kódu (tzv. partials) a po kompilaci vytvoří jeden výsledný soubor se styly.

CSS preprocesory

Nejpoužívanějšími preprocesory jsou Sass a Less. Oba dva preprocesory dodávají do CSS možnost proměnných, cyklů, funkcí, mixinů, matematiky, vnořování aj. Jsou to tedy ideální nástroje pro tvorbu webů, hlavně pro větší projekty.

Preprocesor Less se svou speciální syntaxí drží spíše blíže CSS, kdežto Sass se svou původní syntaxí dosti rozcházel od CSS, například vůbec nevyužíval složené závorky. Jeho nová syntaxe, ta se nazývá SCSS, se již podobá syntaxi CSS a je současně používána majoritně.

Oba dva preprocesory nabízí mnoho a je tak v podstatě jedno, jestli si vyberete ten nebo onen. Hlavní je si nějaký vybrat. Dobrou volbou je řídit se podle výběru spolupracovníků. Já osobně doporučuji preprocesor Sass, který se mi líbí více.

Interakce

Pro interakci s webem se dají využít 2 jazyky. JavaScript a Dart. Jazyk JavaScript je poměrně známý a pro weby je dostupný skoro od začátku. Kvůli jeho zvláštnímu stylu zápisu objektového kódu však vzniká mnoho různých preprocesorů, které se snaží zjednodušit syntaxi a zavést standardní objektový návrh tak, jak známe např. z jazyků jako Java, C#, C++ aj.

Dart

Jazyk Dart je nová technologie od Googlu, která se však v dubnu 2015 přestala vyvíjet jako náhrada JavaScriptu (do té doby byl využíván jen ve speciální verzi prohlížeče Chrome a bylo plánováno nasazení do ostatních prohlížečů) a nyní se bude vyvíjet jen jeho kompilátor dart2js – což znamená, že se z něho stane něco jako JavaScript preprocesor. Dart má vlastní virtuální stroj a jeho vývoj by se měl směřovat směrem na desktopy, mobily a servery.

Nadstavby JavaScriptu

Jeden z nejpoužívanějších preprocesorů je CoffeeScript, který velmi ulehčuje syntaxi. Píše se v něm mnoho pluginů, stránek i aplikací. Další možností je např. TypeScript, vyvíjený Microsoftem také na open source licenci.

Jednou z majoritně využívaných JavaScriptových knihoven je knihovna jQuery, která značně vylepšuje výběr/selektování konkrétních HTML elementů z webu a umožňuje s nimi dále snadnou manipulaci.

Back end

Pro back end je o mnoho více funkčních možností, jelikož se dá využít téměř jakéhokoliv jazyku, který se dá využít na serveru. Klasicky se využívají jazyky PHP, Java, VB.NET, Ruby, Python, C/C++ atd.

Nejoblíbenějším jazykem, díky velké podpoře placených, i bezplatných, serverů je jazyk PHP, který má jednoduchou syntaxi a dobrou křivku učení (je velmi jednoduchý na naučení). Běží na něm zhruba 80% všech webů. Je k dispozici mnoho frameworků, z nichž je momentálně na špici celosvětových trendů framework Laravel a pro Česko framework Nette. Všechny frameworky mají jasné základní cíle – zjednodušit syntaxi a poskytovat co možná největší úroveň zabezpečení a ochrany proti různým útokům.

Databáze

Do back end můžeme zařadit i databáze, kde se často používá např. Oracle, MySQL, MariaDB, SQLite aj. Databáze jsou navrženy tak, aby mohly uchovávat velké množství dat a byl k nim co nejrychlejší přístup. Nejčastěji používanou databází na menších projektech je MySQL.

Verzovací systémy

Prací na čím dál tím větších projektech není přeposílání kódu emailem či přenosnými médii zrovna ideální řešení. Nejpoužívanějšími verzovacími systémy jsou Git, Mercurial a Subversion. Tyto systémy fungují jak lokálně, tak i na sdíleném úložišti, kde se synchronizuje kód ode všech uživatelů. Jednotlivá úložiště se pak nazývají repozitáře a jsou jak placené, tak i bezplatné.

Všechny systémy mají samozřejmě své výhody a nevýhody, ale řekl bych, že Git je nejvíce rozšířený a díky službám jako je GitHub (největší úložiště bezplatných repozitářů s open source projekty) jej používá čím dál tím více lidí.

Právě na GitHubu vyvíjí tisíce vývojářů své projekty, jako např. CSS preprocesor Sass/Less, JavaScriptovou knihovnu jQuery, nový moderní editor Atom atd.

Automatizační systémy

Pokud tisíce lidí pracují na projektu, je nutné, aby všichni dodržovali stejný styl kódu, kompilovali a vyvíjeli stejným stylem atd. Zde přichází do hry nástroje na automatizaci, kde stačí jednou, v nějakém speciálním souboru, definovat co a jak se má vykonat a každý vývojář si jenom spustí daný systém a je o všechno postaráno.

Hodně využívanými systémy, minimálně v oblasti webů, jsou gulp a Grunt. Oba běží na platformě Node.js, což je JavaScriptová platforma. Grunt se konfiguruje stylem podobným způsobu JSON a gulp se konfiguruje pomocí JavaScriptu.

Sám jsem zkoušel oba dva systémy na projektu s tisíci řádky CSS, resp. Sass, kódu. V Gruntu mi kompilace trvala okolo 7,8s a v gulpu okolo 1,2s – což už je velký rozdíl.

Do automatizačních systémů můžeme zařadit také speciální soubory, které nastavují editory a IDE – jejich odsazení, kódování, přidávají na konec souboru volný řádek nebo např. mažou mezery za textem.

Gulp

Gulp využívá tzv. streamy, v překladu proudy, které na začátku načtou data ze souborů, s kterými mají pracovat, a na konci výsledek uloží z pravidla do jednoho souboru.

Mezi tím na datech, uložených v paměti, může být vykonána jakákoliv úloha – nejčastěji např. minifikace, kompilace CSS preprocesoru atp. Grunt se, oproti tomu, po každé úloze uloží, což zpomaluje celý proces. Gulp obsahuje mnoho doplňků, které se dají stáhnout z balíčkového manažeru npm, který slouží pro platformu Node.js.


 

Předchozí článek
Výběr technologií 1
Všechny články v sekci
Technologie pro vývoj webových aplikací
Přeskočit článek
(nedoporučujeme)
Popis vybraných technologií 1
Článek pro vás napsal Honza Bittner
Avatar
Uživatelské hodnocení:
20 hlasů
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Aktivity