1. díl - Úvod a porovnání

HTML a CSS Technologie pro vývoj webových aplikací Úvod a porovnání

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

V tomto článku také vysvětluji zkratky, které jsou použity v celé sérii článků.


Použité značky, zkratky a symboly

Ajax – Asynchronous JavaScript and XML

back end – část webu, která sloužící k administraci, generuje obsah pro front end

BEM – Block, Element, Modifier – styl zápisu OOCSS tříd

BFU – Běžný Fyzický (Franta) Uživatel

CSS – Cascading Style Sheets

framework – specializovaný balík knihoven pro usnadnění práce

front end – část webu, kterou vidí návštěvník webu

HTML - HyperText Markup Language

IDE – Integrated Development Environment – Vývojové prostředí

jQuery – JavaScriptová knihovna

JS – JavaScript

Less – CSS preprocesor

minifikace – zmenšení zdrojových kódu (odstranění mezer, zalomení aj.)

MVC – Model-view-controller

MVP – Model-view-presenter

OOCSS – objektově orientované styly

PHP – PHP: Hypertext Preprocessor, původně Personal Home Page

Sass – Syntactically Awesome Style Sheets – CSS preprocesor

web – webová stránka

webový prohlížeč – internetový prohlížeč; program, kterým zobrazujeme web

Úvod

Webové technologie se rok co rok vyvíjí a už dlouho nám pro vývoj webové stránky, nebo aplikace, nestačí dva až tři jazyky/technologie, ale potřebujeme rovnou celý arsenál. Projekty se verzují, automatizují a stále více se také využívají frameworky v podstatě na všechno, jelikož ohromně usnadňují další vývoj – nebo by alespoň měly.

Vyznat se v současných trendech a ovládat, nebo se alespoň orientovat, dané technologie je tedy velmi náročné. V současné době se také stále více vyvíjí na bázi open-source, kde desítky, stovky, a dokonce i tisíce vývojářů pracují na jednom projektu a společně vytvářejí nádherné, a současně náročné, aplikace či technologie. Zde se na projektech uplatní ve velké míře výhody verzovacích systémů.

Jelikož je nutností používat nespočet technologií a jazyků, na psaní webové stránky si nevystačíme s poznámkovým blokem, ale pro psaní kvalitního kódu, kde nám bude dopomáhat minimálně chytré napovídání a zvýrazňování specifických prvků daného jazyka/technologie, potřebujeme speciální propracované programy - editory nebo IDE. Naštěstí pro psaní webových stránek či aplikací nepotřebují vývojáři stejný program, a tedy může každý využívat program podle svých preferencí.

Časem, když se projekty začaly čím dál více zvětšovat, začaly se také využívat automatizační nástroje, které dokáží samy kompilovat zdrojový kód, modifikovat (např. minifikace), interagovat s konzolí aj. V mé ročníkové práci se budu zabývat vývojem webových aplikací za použití moderních technologií. Vyberu mnou používané či doporučované technologie, kterým budu věnovat samostatné podkapitoly, kde danou technologii v základu vysvětlím.

V praktické části ročníkové práce vytvořím jednoduchou webovou aplikaci, zaměřenou na redakční systém. Systém bude umět registraci a přihlášení uživatelů, spravovat články a uživatelské účty a bude obsahovat speciální administrátorské rozhraní.

Webová stránka vs. webová aplikace

V této ročníkové práci mám za úkol vytvořit webovou aplikaci, ale přitom jsem již několikrát zmínil webovou stránku. Rozdíl, mezi těmito dvěma pojmy je zároveň zásadní a současně minimální. Záleží totiž na úhlu pohledu.

Pokud se bavíme o webové stránce, je většinou myšlen front end, tedy to, co vidíme u nás ve webovém prohlížeči. Samotné vytváření stránky, resp. její generování vůbec nebereme v úvahu.

Pokud se bavíme o webové aplikaci, je většinou myšlen právě back end, tedy ta část, při které webovou stránku vytváříme. Může se jednat o nejrůznější redakční systémy, hry apod.

Mnoho lidí však tyto pojmy zaměňuje, jelikož si jsou velmi podobné a blízké – a ne vždy je to špatně. Pokud se zaměříme na statické stránky, tedy stránky, které nejsou vygenerovány žádným systémem, ale jsou napsány „ručně“, můžeme je označovat za webovou aplikaci např. v případě, kdy mají rozvinutou front end logiku a většinou tedy umí něco více, než jen vykreslit stránku – umí např. rozpohybovat stránku, vytvářet animace/prezentace, vykreslovat obrazce, obsahují hru či aplikaci aj.

Podle mého názoru se dá webová stránka považovat i za aplikaci v případech, kdy obsahuje back end nebo pokročilejší front end logiku. Pokud se chceme těmto nesrovnalostem vyvarovat, můžeme například použít univerzální zkratku web.

Editor vs. IDE

V úvodu ročníkové práce jsem se zmiňoval o tom, že nám pro psaní webů nestačí jednoduchý poznámkový blok, ale je nutné využívat speciální editory nebo IDE.

Jaký je ale mezi těmito dvěma druhy programů rozdíl? V obou případech můžeme editovat/psát naše weby s elegancí – máme hezky zvýrazněný kód a nějaké napovídání. IDE však kódu opravdu rozumí. Chápe to, co píšeme a vytváří spojení mezi částmi souborů, knihovnami, frameworky atp.

V praxi to znamená, že pokud požadujeme po editoru nápovědu v místě, kde očekáváme proměnnou, dostaneme seznam funkcí, proměnných, často se vyskytujících slov apod. Pokud budeme požadovat nápovědu na místě, kde očekáváme proměnnou, po IDE, dostaneme na výběr pouze proměnné, ke kterým si navíc můžeme zobrazit v nějakém rychlém náhledu také dokumentaci.

IDE obsahuje také spoustu nástrojů, jako například nástroje pro kompilaci, debugování (nástroj, kterým můžeme zjistit příčinu chyby) apod. Tyto nástroje se také do většiny chytrých editorů dají doplnit v podobě rozšíření, většinou vytvářené komunitou.


 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (9 hlasů) :
3.888893.888893.888893.88889 3.88889


 


Miniatura
Všechny články v sekci
Technologie pro vývoj webových aplikací
Miniatura
Následující článek
Výběr technologií 1

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!