Začínáme s Ember.js v roce 2020

Napsal Anjolaoluwa Adebayo-Oyetoro ✏️

JavaScript, jedna ze základních technologií, která pohání web, se v průběhu let vyvíjela. Původně zamýšlel být pouze skriptovací jazyk na straně klienta, ale nyní se stal vyspělým jazykem as jeho růstem jsme v průběhu let viděli vzestup a pád mnoha knihoven a frameworků.

V tomto článku se podíváme na jeden z nejstarších frontend frameworků JavaScriptu, Ember.js. Prozkoumáme základní koncepty a uvidíme, jak jej začít používat.

Co je Ember?

Ember.js, který vytvořili Yehuda Katz a Tom Dale v roce 2011, je opensource JavaScriptový framework, je populárně známý jako framework pro vytváření ambiciózních aplikací a běžně označovaný jako „together framework“ díky své úzké komunitě. Je to rámec, který se nejlépe hodí k vytváření rozsáhlých aplikací na straně klienta.

Její oficiální webové stránky popisují Ember jako :

Předpoklady

Tento výukový program předpokládá, že čtenář má následující:

  • Node.js 10x nebo vyšší
  • Příze / npm 5.2 nebo vyšší nainstalovaná v počítači
  • Základní znalost JavaScriptu a fungování rámců

Základní použití

Nainstalujte si nástroj ember-cli, tato sada nástrojů je pro Ember.js, která vám pomůže zavádět projekty Ember za běhu.

Nainstalujte nástroj CLI pomocí následujícího příkazu:

npm install -g ember-cli

Globální instalací balíčku Ember CLI získáme přístup k ember příkaz v našem terminálu, ember new nám pomůže vytvořit novou aplikaci.

Dále vytvořte žhavý projekt s new příkaz:

ember new ember-quickstart

Tento příkaz vytvoří nový adresář s názvem ember-quickstart a nastavit novou aplikaci Ember se všemi potřebnými soubory a konfiguracemi pro zavedení projektu uvnitř ní.

Změňte adresář na adresář aplikace:

cd ember-quickstart

spusťte vývojový server:

ember serve

Měli byste mít něco podobného spuštěného na http://localhost:4200 po spuštění ember serve příkaz.

Pochopení adresářové struktury a architektury Ember

Základní koncepty

Ember.js je framework založený na MVC, řídí se jednosměrným vzorem toku dat, známým jako Data Down Actions Up (DDAU), který byl ovlivněn architektonickým vzorem Flux vytvořeným Facebookem a používá Glimmer VM pro vykreslování a aktualizaci DOM, Glimmer je virtuální stroj který kompiluje kód šablon řídítek do bajtkódu, čímž poskytuje rychlejší zážitek. analyzuje bajtový kód a vykresluje pohled uživatelům.

Pochopení následujících pojmů v Emberu je důležité.

Modely

Modely jsou objekty používané k ukládání a údržbě dat používaných v naší aplikaci. Data lze načíst pomocí knihovny Ember Data pro robustní správu dat v aplikacích. Knihovna Ember Data je standardně zahrnuta v našem lešení Ember CLI.

Ovladače

Ovladače jsou obaly kolem modelu, fungují jako prostředník mezi pohledy a modely. Používají se k načítání, aktualizaci a úpravě dat v modelu. Požadavky na data do modelů provádí správce.

Šablony

Šablony představují vrstvu zobrazení v MVC, jsou rozhraním používaným k vykreslování dat uživatelům. Šablony jsou vytvořeny s jazykem šablon pro řídítka.

Směrování

Směrování je spravováno souborem Router, mapuje trasu na obslužný program trasy uložený v /routes Router je zodpovědný za vykreslení obsahu vytvořeného pomocí šablony uživateli.

Komponenty

Komponenty jsou opakovaně použitelné kolekce prvků uživatelského rozhraní, které obsahují značky, logiku a styly. Jsou stavebním kamenem aplikace.

Struktura adresářů

Nový projekt Ember je strukturován podobně jako tento:

├── app
│   ├── app.js
│   ├── components
│   ├── controllers
│   ├── helpers
│   ├── index.html
│   ├── models
│   ├── router.js
│   ├── routes
│   ├── styles
│   │   └── app.css
│   └── templates
│       └── application.hbs
├── config
│   ├── environment.js
│   ├── optional-features.json
│   └── targets.js
├── ember-cli-build.js
├── package.json
├── package-lock.json
├── public
│   └── robots.txt
├── README.md
├── testem.js
├── tests
│   ├── helpers
│   ├── index.html
│   ├── integration
│   ├── test-helper.js
│   └── unit
└── vendor

Soubory a adresáře

Udělejme si čas na pochopení toho, co soubory a složky představují a jak je můžeme použít.

  • package.json — obsahuje informace o vašem projektu, jako jsou závislosti nainstalované ve vašem projektu a skripty, které lze spustit
  • /app — tato složka obsahuje základní kód vaší aplikace. Obsahuje kritické části vaší aplikace, jako jsou komponenty, šablony, modely, trasy a styly. Většinou byste pracovali se soubory v tomto adresáři
    • app.js — toto je hlavní soubor aplikace. Je to vstupní bod aplikací
    • /templates — tato složka obsahuje šablony řídítek, tyto šablony jsou kompilovány do /dist složku během sestavení
    • /controllers — tato složka obsahuje vaše řadiče, řadič je místo, kde definujete datovou vazbu k proměnným ve vašich šablonách
    • /helpers — tato složka obsahuje pomocné funkce používané v šablonách řídítek. Pomocné funkce jsou funkce JavaScriptu, které k vašim šablonám přidávají další funkce nad rámec toho, co je již zahrnuto v Ember
    • /index.htmlapp/index.html soubor pokládá základ pro aplikaci Ember. Zde se vytvoří základní struktura DOM, nastaví se atribut title a provede se šablona stylů/zahrnutí JavaScriptu
    • /models — tento adresář je místem, kde se vytvářejí vaše modely, modely jsou objekty, které představují základní data ve vaší aplikaci. Používají se k ukládání a údržbě dat používaných v naší aplikaci
    • /router.js — tento soubor obsahuje konfigurace směrování aplikací. Trasy zde definované odpovídají trasám v /routes složka
    • /routes — tato složka obsahuje soubory obslužného programu trasy, který nastavuje, co se má stát při načtení trasy
  • ember-cli-build.js — tento soubor popisuje, jak by měla Ember CLI budovat naši aplikaci
  • testem.js — Testovací program Ember CLI Testem je nakonfigurován v testem.js
  • /public — tento adresář bude zkopírován do dist adresář během sestavení, použijte jej pro položky, které nemají krok sestavení, jako jsou obrázky nebo písma
  • /vendor — do tohoto adresáře jdou frontendové závislosti (jako je JavaScript nebo CSS), které nespravuje npm
  • /teststests adresář obsahuje vaše automatizované testy a také různé pomocníky pro načítání a spouštění testů. QUnit je výchozí testovací rámec pro Ember
  • /configconfig adresář obsahuje konfigurační soubory vaší aplikace, prostředí a nastavení sestavení prohlížeče

Proč vývojáři milují Ember

Ember.js se těší velké oblibě od vývojářů, kteří jej využívají z několika důvodů, mezi které patří:

  • Konvence nad konfigurací — jedním z mnoha důvodů, proč vývojáři, jako je Ember, je skutečnost, že upřednostňuje konvence před konfigurací. Konvence nad konfigurací, kterou prosazuje David Heinemeier Hansson (tvůrce frameworku Rails), je paradigma softwarového designu, které se pokouší snížit počet rozhodnutí, která musí vývojář používající framework učinit, aniž by nutně ztratil flexibilitu. To znamená, že se vývojáři nemusí starat o správnou věc nebo správnou architekturu, když tato rozhodnutí činí rámec
  • Pevně ​​propojená komunita — komunita Ember je také jedna z věcí, která je pro mnohé přitažlivá s více než 2 000 doplňky, komunita také upřednostňuje vymýšlení standardního způsobu, jak dělat věci místo toho, aby lidé dělali věci jinak
  • Je to švýcarský armádní nůž — je předkonfigurován téměř se vším, co potřebujete ke spuštění aplikace
  • Stabilita bez stagnace — má zpětnou kompatibilitu
  • Včasné přijetí — přijetí nejnovějších webových standardů a nejnovější funkce jazyka JavaScript

Výhody a nevýhody používání Ember

Klady

  • Komunita
  • Vše je připraveno z krabice
  • Podrobná dokumentace a zdroje
  • Včasné přijetí funkcí jazyka JavaScript
  • Glimmer VM dělá kompilaci směšně rychlou

Nevýhody

  • Velikost – je poměrně velká
  • Křivka učení – má strmou křivku učení
  • Rigidita – žádný prostor pro průzkum
  • Mnoho výukových programů je zastaralých

Závěr

V tomto článku jsme viděli, co je Ember.js, naučili jsme se jeho základní koncepty a jak začít s jeho používáním.

Rámec Ember.js ušel dlouhou cestu a má spoustu příruček a výukových programů, které pomáhají novým uživatelům rámce. Podívejte se na tento výukový program vytvořený pro lidi přicházející z jiných rámců (zahrnuje Vue a React), také dokumentace je poměrně robustní a vysvětluje pojmy do hloubky. Nejlepší na Ember je komunita – mají diskordní skupinu, jejich diskusní fórum je docela užitečné a kanál Dev.to je docela vynalézavý.

Má to cenu se učit?

Kromě toho, že je to konkrétně potřeba pro práci, myslím, že je docela zbytečné se to učit vzhledem k jeho strmé křivce učení, kromě toho, že to zjevně děláte jen pro zajímavost.

Nízká míra poptávky po dovednostech také naznačuje, že by bylo lepší používat novější a nablýskané knihovny/rámce, jako jsou React, Vue nebo Svelte.

Plug:LogRocket, DVR pro webové aplikace




LogRocket je frontendový protokolovací nástroj, který vám umožní přehrát problémy, jako by se staly ve vašem vlastním prohlížeči. Namísto hádání, proč k chybám dochází, nebo žádostí uživatelů o snímky obrazovky a výpisy protokolů, vám LogRocket umožňuje přehrát relaci, abyste rychle pochopili, co se pokazilo. Funguje perfektně s jakoukoli aplikací, bez ohledu na rámec, a má pluginy pro přihlášení dalšího kontextu z Redux, Vuex a @ngrx/store.

Kromě protokolování akcí a stavu Redux zaznamenává LogRocket protokoly konzoly, chyby JavaScriptu, stacktrace, síťové požadavky/odpovědi s hlavičkami + těly, metadata prohlížeče a vlastní protokoly. Nástroj DOM také zaznamenává HTML a CSS na stránku a vytváří videa s dokonalými pixely i těch nejsložitějších jednostránkových aplikací.

Vyzkoušejte to zdarma.

Příspěvek Začínáme s Ember.js v roce 2020 appeared first on LogRocket Blog.