Tagfrontend

console.log() pro frontendisty

Jem malé doplnění článku o možnostech funkce console.log, terntokráte pto ty, co se ve vývoji pohybují na frontendu.

Pomocí modifikátoru %c můžete stylovat výstup do konzole prohlížeče a dosáhnout tak větší čtivosti vašich logovaných informací:

Výsledek pak může vypadat třeba takto:

Návod, jak se stát frontendovým vývojářem :)

Bower, balíčkovací systém pro NodeJS

Bower je přesně ten nástroj, který jako vývojář v NodeJS potřebujete, abyste své webové aplikaci vdechnuli život v internetovém prohlížeči na straně návštěvníka. Jde o utilitu, která pracuje nad centrálním repozitářem knihoven a jednoduchým způsobem vám dovoluje stahovat, updatovat javascriptové knihovny, které chcete vkládat do své www aplikace a následně je spouštět coby frontend v prohlížeči návštěvníka.

bower
Jedná se o takovou obdobu npm pro frontend. Jeho autorem je, stejně jako u Bootstrapu, Twitter a vznikl v už roce 2012, takže žádná horká novinka, ale stabilní, otestovaný nástroj.

Jak funguje Bower

Po nainstalování na vaše pc máte k dispozici příkaz bower, který provádí všechny požadované akce. Jeho podobnost s npm je mimořádná. Má svůj bower.json konfigurační soubor, který popisuje váš projekt s pohledu frontendových knihoven.
Založit bower.json můžete příkazem

Budete vyzváni k zadání pár odpovědí, které povedou k založení konfiguráku:

Důležitá poznámka
V adresáři vašeho projektu byste si měli vytvořit soubor .bowerrc, kde budete specifikovat minimálně adresář do kterého se budou stahovat, instalovat, vámi požadované knihovny:

Když takto nenaspecifikujete kam se mají knihovny stahovat, budou defaultně stahovaný do bower_components.
Detailní specifikaci .bowerrc souboru najdete zde.

Vložení Angularu do projektu

No a pak už jen stačí zadat příkaz

Do adresáře public/components se stáhne Angular, která pak můžete jednoduše použít v HTML souborech vaší aplikace:

–save se postará o modifikaci vašeho bower.json konfiguračního souboru:

Já jsem cvičně doinstaloval i knihovny pro JQuety a Bootsrap.
Můžete pak kdykoliv smazat public/components a následně pak jednoduše nainstalovat vše znovu:

Rozdíl mezi npm a Bower

Bower na rozdíl od npm neřeší závislosti. Pokud v NodeJS potřebujete balíček mongodb a ten sám je závislý na nějakém jiném, dalším, balíčku, pak při instalaci balíčku mongodb se do adresáře s knihovnou mongodb stáhnou všechny požadované závislosti. A tohle funguje rekurzivně. To znamená, že pokud by knihovna mongodb byla závislá na knihovně super-file a ta závislá na knihovně fileio, nainstalují se do projektu všechny tyto knihovny a to včetně požadovaných verzí (závislost lze specifikovat i na požadovanou verzi knihovny).

A tohle v pojetí knihoven v Boweru nefunguje. Bower neřeší žádné závislosti. To znamené, že pokud chcete používat Bootstrap, který je závislý na JQuery, musíte specifikovat a nainstalovat oba zvlášť.

AngularJS v příkladech, kniha o Angularu

Intro

V poslední době se hodně věnuji programování v AngularJS. Jedná se o webový framework od Googlu, který ma za cíl zjednodučit a zefektivnit vývoj SPA aplikací.

AngularJS je jeden z možných frameworků pro UI webových aplikací a je kolem něj docela rozruch. Má velmi početnou skupiny zapřisáhlých odpůrců, kteří mu vyčítají kde co. Vedle toho se bohudík najde asi daleko větší a významnější skupina, která jej dále rozvíjí a pracuje jak na něm, tak v něm.

Významná je i podpora samotného Googlu. AngularJS je dítětem jednoho z jejich programátorů a Google samotný jej hodně používá. Jestli máte email na GMailu, pak jej používáte také, protože GMail jede na Angularu.

Proč AngularJS

Každá webová aplikace se víceméně skládá ze dvou základních částí. Backend: něco se děje na serveru. Tím něco může být příprava dat, nějak naprogramovaná obchodní logika a podobné věci, které třeba ani uživatel nevidí. Frontend: to je přesně to, co pak vidí každý návštěvník webové stránky.

A AngularJS je přesně to, co vám pomůže rozhýbat váš frontend. Stránky ve webovém prohlížeči. Ze statických stránek, respektive stránek plných JavaScriptových knihoven udělá poměrně jednoduchou aplikaci.
Tím nechci říct, že by ze stránek zmizel JavaScript, ale je organizovaný podle nějakých pravidel Angularu.

Ovládněte AngularJS

AngularJs a rychlost učení
Ačkoliv tento obrázek tomu moc neodpovídá, má AngularJS docela strmou a rychlou učící křivku. To znamená, že své SPA aplikace budete schopni psát relativně brzo a rychle.

Rychlý start

K psaní SPA pomocí Angularu budete potřebovat Angular. Abyste mohli začít hned psát své aplikace, budete muste do každé HTML stránky vkládat AngularJS knihovnu. Ten nejednodušší způsb jak toho dosáhnout, je vložit přímo odkaz na CDN, který danou knihovnu Angularu nabízí:

Co pak musíte udělat je říct Angularu kde je vaše aplikace a jak jí má ovládat. Toho docílíte pomocí HTML directiv ng-app a ng-controller.

Direktivou ng-app vytvoříte AngularJS modul a ng-controller vytvoří ovladač, který spojí vrstvy model a view v pomyslném MVC modelu.

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑