Przychodzisz z React albo Vue i nic się nie składa? Przeczytaj najpierw Model mentalny: pięć minut o tym, gdzie podziały się computed, watch, haki cyklu życia i ładowanie danych.
$mol to reaktywny framework UI: opisujesz, czym jest interfejs, a framework ustala, jak i kiedy go zaktualizować. Bez wirtualnego DOM, bez ręcznych subskrypcji, bez useEffect. Komponenty piszesz jako drzewo; $mol renderuje tylko to, co widoczne, i przelicza tylko to, co faktycznie się zmieniło.Komponent składa się z trzech plików:name.view.tree — deklaratywny układ (zwięzły język drzew)name.view.ts — zachowanie (zwykłe klasy TypeScript)name.view.css.ts — typowane style (sprawdzane przez kompilator)Ten podział to cała idea: układ pozostaje czytelny, logika pozostaje testowalna, style pozostają bezpieczne typowo.Żaden z tych trzech nie jest sam w sobie obowiązkowy. Drzewo to skrót zapisu struktury, którą możesz napisać też ręcznie: Z TypeScriptu do view.tree buduje jeden komponent na oba sposoby i pokazuje kod, do którego drzewo się kompiluje.
Chcesz małą aplikację, która pozostaje mała w miarę rozwoju — runtime jest zwięzły, a renderowanie domyślnie zwirtualizowane.Lubisz typy wszędzie — nawet style są sprawdzane przez TypeScript.Masz dość ręcznego łączenia reaktywności — stan w $mol jest reaktywny automatycznie, jak w arkuszu kalkulacyjnym.
Licznik, w całości:1$my_counter$mol_view2 sub /3<= Count $mol_view4 sub /<= count \5<= Increment $mol_button6 click?<=> increment?7 sub /<= label \+1namespace $.$${2export class $my_counterextends$.$my_counter{3@ $mol_memcount(){return 0}4@ $mol_actionincrement(){this.count(this.count()+1)}5}6}count jest reaktywny: wszystko, co go odczytuje, renderuje się ponownie automatycznie, gdy się zmieni. Nie ma setState, nie ma tablicy zależności, nie ma magazynu do zarejestrowania.
