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.