EmberJS budoucnosti... dnes!

Ember má některé vzrušující funkce, které jej převádějí z „starého“ rámce, který někteří možná znají, na vzrušující, ergonomické a plně vybavené frontendové nástroje pro maximální produktivitu.
Pokud jste dříve Ember oprášili jako něco, co nestojí za to vyzkoušet, podívejte se na tento příspěvek, kde ukážu některé z mých oblíbených funkcí, které právě používám na emberclear.io.

POZNÁMKA :Některé z nich jsou poněkud krvácející edge, a ještě nebyl oficiálně vydán. Každá funkce má rázné Q.A. a dostat se přes všechny scénáře zpětné kompatibility a cesty upgradu nějakou dobu trvá. Oficiální průvodci tedy nebudou mít některé z těchto zmíněných funkcí. Rozpis toho, co je připraveno k výrobě / stále v experimentálních fázích, je na konci tohoto příspěvku.

Chcete-li zůstat co nejčerstvější, připojte se prosím k diskuzi Ember Community Discord

Async Lifecycle Hooks

Zde je obslužný program směrování – demonstruje asynchronní háky životního cyklu, které jsou zakázány v kontextu vykreslování na straně serveru prostřednictvím dekorátoru. Někdo to může chtít udělat, protože aplikace může interagovat s localStorage nebo indexeddb, které v kontextu na straně serveru neexistují.

  • beforeModel je strážcem přístupu na trasu. Na emberclear.io, abyste mohli chatovat, musíte mít nastaven svůj "účet".
  • model je to, co načítá data pro trasu. Data API podporuje grafová data – v findAll vyvolání, specifikuji to pro každý message , chci také sender . To pomáhá snížit počet požadavků na backend.

Syntaxe pro komponenty

Ember také jde ve stopách úhlového, reagujícího a vue má <AngleBracketInvocation /> komponent, což vašemu kódu umožňuje působit přirozeněji a čitelněji – zejména ve srovnání se starší (a někdy nenáviděnou) syntaxí Handlebars, kde by šablona byla načtena s {{ ... }} všude.

Nyní {{ ... }} se používají pouze pro hodnoty jiné než HTML, nebo jinými slovy, dynamické / interpolované hodnoty.

  • {{input ... }} je pomocník, který abstrahuje některé <input konfigurace a také nastavení obousměrné vazby dat.
  • {{t ... }} je pomocník, který vyhledává klíč internacionalizace / i18n pro dynamické překlady.
  • @title je zápis, který říká komponentě, že proměnná je určena pro použití jako argument komponenty, spíše než jako atribut HTML pro značku. Můžete například v FocusCard šablony, zadejte ...attributes a všechny atributy HTML uvedené v <FocusCard ... /> vyvolání by prošlo do ...attributes používání. To je velká výhoda oproti this.props v reakci, podle mého názoru. Být ve výchozím nastavení explicitní se záměrem je v javascriptu tak podceňováno.
  • nakonec {{action ...}} určuje, co je button udělá po kliknutí (událost bound dom může být přizpůsobena, ale není zde zobrazena)

Testování

Aplikace Ember jsou připraveny s asynchronním testovacím rámcem, který používá skutečné prohlížeče . Žádné jsdom nebo falešné prohlížeče, které by způsobily obavy z podivných problémů s kompatibilitou mezi vašimi testy a realitou. Testy JSOU REALITA.

Ember je standardně dodáván s QUnit, ale jako alternativa jsou široce podporovány také mocha a chai, pokud máte srdce nastavené na konkrétní sadu testovacích nástrojů.

Injekce závislosti je nutností

Podle mého názoru kontejner pro vkládání závislostí vytváří vše rozdíl v úplnosti rámce. Ve výchozím nastavení přichází Ember s injekcí závislostí. Není třeba zapojovat všechny své závislosti. Není potřeba vše importovat. Nemusíte se starat o to, kolik instancí třídy máte, protože služby singletons.

Ember Dependency Injection Container zvyšuje produktivitu tím, že pomáhá spravovat stav na úrovni aplikace bez jakéhokoli lepidla.

Usnadnění přístupu pomocí klávesnice

Chcete do své aplikace přidat přístupnost klávesnice? Doplněk Ember ember-keyboard to usnadňuje tím, že poskytuje sadu nástrojů, které vám umožňují provádět běžné úlohy dostupné z klávesnice, jako je přepínání modálů.

Komponenta na ukázkovém snímku obrazovky je poháněna touto komponentou bez šablony:KeyboardPress.

Souhrn

V době psaní tohoto článku jsou některé funkce k dispozici pro testování a experimentální použití prvními uživateli.

Můžete však experimentovat s následujícími dnes :

  • dekoratéři (a dokonce i vlastní dekoratéři)
  • Rozvržení sjednocení modulu

Tyto jsou připraveny k výrobě v jakémkoli aplikace dnes:

  • TypeScript
  • <AngleBracketInvocation />
  • vykreslování na straně serveru
  • servisní pracovníci
  • async/wait v testech

I když každá z těchto funkcí ještě nemusí být oficiálně podporována, stále existuje mnoho lidí, kteří věci zkouší a používají tyto doplňky a funkce ve výrobě. Pokud jste tedy ochotni věnovat trochu času navíc tomu, abyste měli krvácení hrana, stojí to za to;)

Poznámka:Pokud se chcete podívat ještě více do budoucnosti:Ember Octane

Něco málo o mně – na twitteru jsem @NullVoxPopuli a miluji programování a abstrakce, se kterými lidé přicházejí, aby byl vývoj produktivnější a zábavnější. Mám 2,5 roku profesionální zkušenosti s Reag a 4 roky příležitostné / hobby zkušenosti s Ember. Mám je rád oba. A raději používám každý pro konkrétní účely. Myslím, že Ember se hodí spíše k účelu „plně vybavené aplikace“ než k reakci – i když technicky reagovat a její podpůrný ekosystém může vyřešit všechny stejné problémy jako Ember. S Ember je to skutečně je hezké, že nemusím zjišťovat všechny kódy lepidla mezi všemi knihovnami jako v ekosystému Reag. „Produktivita prostřednictvím omezení“ je moje motto, pokud jde o frameworky.