@pepa-linha/sobria v1.0.0

Sobria JavaScript Framework

Sobria je jednoduchý komponentový framework napsaný v TypeScriptu určený pro webové prezentace i jednoduché aplikace. Jeho cílem je vnést do kódu určitou logiku a dodržování struktury napříč celým projektem. Hlavními prvky frameworku jsou komponenty a služby.

Jak začít

Nejprve je potřeba nainstalovat závislosti v podobě Node.js balíčků.

npm install

Spusťte vývojový server

npm run dev

src/App/bootstrap.ts

Místo, kde dochází ke spouštění aplikace. Je potřeba importovat všechny potřebné soubory, vytvořit instanci aplikace (samozřejmě je možné využít dědičnosti a vytvořit svou vlastní třídu pro aplikaci, která bude dědit od Sobria.Application) a té předat DI kontejner, ve kterém jsou (zatím ručně) přidané služby.

Následuje seznam importovaných komponent. To z toho důvodu, aby se objevily ve finálním souboru po kompilaci TypeScriptem. Pokud je jiná a lepší možnost jak zahrnout nikde jinde nevyužívané třídy, které je potřeba mít ve finálním bundle souboru, dejte mi prosím vědět! :-)

První komponenta a @Component(...)

Práce s komponentama je ve frameworku velmi jednoduchá. Každou komponentu je doporučené umístit do samostatného souboru, který má shodný název s její třídou. Komponentu MyComponent tedy umístíme do souboru MyComponent.ts do složky Component. Každá komponenta musí dědit od Sobria.Component a implementovat její abstraktní metody prepare (voláno při vytváření) a destroy (voláno při rušení).

@Component("List")

Komponentu je třeba označit dekorátorem @Component(...), který přijímá parametr název komponenty. Tento stejný název se pak nachází v HTML, tedy

<div component="List">...</div>

Každá komponenta má vazbu s tímto elementem, je uložena ve vlastnosti třídy element.

Životní cyklus komponenty

• constructor(element: Element)
• Injektování závislostí
• prepare()

Doporučení

Uvnitř metody prepare je vhodné psát základní inicializaci komponenty, například nastavení událostí k jednotlivým elementům.

Metody pro zpracování událostí nazývat s prefixem handle a tvořit je pomocí tzv. arrow functions pro zachování kontextu komponenty uvnitř těchto metod.

Dependency Injection kontejner

Díky DI kontejneru je možné nastavit služby a přepsat tak výchozí chování frameworku. Zatím to není 100%.

Do kontejneru tedy registrujeme služby použité v aplikaci. Tyto služby jde jednoduše využívat v ostatních službách a komponentách pomocí dekorátoru @Inject(...)

@Inject()

Tak je možné automaticky injektovat závislost do komponenty, ale i služby. Jako parametr stačí uvést konstruktor služby. Příklad:

    @Inject(Logger)
    logger: Logger;

Do vlastnosti logger typu Logger je injektována služba Logger nebo služba, která ji rozšiřuje.

API dokumentace

K frameworku je možné vygenerovat aktuální API dokumentaci. Před generováním nainstalujte globálně balíček typedoc

    npm install typedoc -g

a následně spusťte skript ke generování dokumentace

    npm run doc

Vygenerovaná dokumentace bude ve složce .doc v adresáři s projektem.