Spuštění DEITY Falcon – front-end progresivní webové aplikace s otevřeným zdrojovým kódem

Datum spuštění:říjen 2018

Technický zásobník:Node.js, React.js, Webpack a Babel, GraphQL (prostřednictvím Apollo GraphQL — ApolloClient a ApolloServer), Koa (webový server), Jest (testovací knihovna)

Minulý týden, říjen 2018, jsme dosáhli významného milníku na naší cestě vydáním naší open source verze:DEITY Falcon. DEITY Falcon je sada nástrojů, knihovna, která umožňuje vývojářům vytvářet progresivní webové aplikace pro jakýkoli typ webu nebo webové aplikace:blog, webshop nebo jakýkoli jiný případ použití.

Spustili jsme DEITY jako důkaz konceptu pro bezhlavé produkty, postavili jsme front-end vyrobený pomocí NodeJS a ReactJS a back-end založený na Magento 2, Wordpress a Algolia. Přestože naším hlavním cílem bylo sdílet náš produkt Open Source, rozhodli jsme se vydat tento produkt výhradně našim partnerům, abychom mohli kontrolovaným způsobem vidět, co se děje, a získat zpětnou vazbu o tom, co by se mělo změnit. V průběhu minulého roku byla tato verze použita v několika projektech. Od úplných implementací obchodů po srovnávací weby, blogy a dokonce i modulární bezhlavou pokladnu.

Na základě těchto projektů jsme získali zpětnou vazbu od našich partnerů a vlastních zkušeností a zjistili jsme, že máme nějaké problémy, které byly způsobeny naší architekturou. DEITY-core byl monolit, vše bylo v jednom balíčku a bylo docela těžké řešení rozšířit o nové uživatelské funkce. Věděli jsme také, že čas běží, museli jsme brzy přejít na open source, takže jsme museli udělat důležité rozhodnutí. Co dělat dál? Pracujte na dalších funkcích, přidejte funkce, abychom mohli předvést úplný seznam funkcí — ale s architekturou, o které víme, že nám dělá problémy a měla by se přesto změnit? Nebo udělat krok zpět, zrefaktorovat celou architekturu tak, aby byla flexibilní a orientovaná na služby, ale pak bez nablýskaného seznamu funkcí?

Pro nás je prvním skutečným uživatelem vývojář. Zkušenosti vývojáře, kvalita kódu, flexibilita a rozšiřitelnost jsou tedy důležitější než marketingová hodnota v podobě nablýskaného seznamu funkcí, které lze předvést koncovým uživatelům. Stojíme za kvalitou — rozhodli jsme se udělat jeden krok zpět, abychom mohli udělat dva kroky vpřed úplnou změnou architektury:a DEITY Falcon byl na světě.

Co je tedy DEITY Falcon?

DEITY Falcon je nástroj a knihovna pro vytváření progresivních webových aplikací, které se neomezují pouze na e-commerce, ale na jakýkoli druh PWA, který můžete potřebovat:webové obchody, blogy, portfolia, srovnávací platformy — opravdu cokoli, co si dokážete představit.

Začali jsme stavět na principu, který jsme nazvali F.I.R.E:

-Flexibilní :Protože lidé používající DEITY Falcon by měli být schopni vytvořit jakýkoli druh PWA, který chcete.

-Integrovatelné :Protože lidé používající DEITY Falcon by s ním měli mít možnost integrovat jakýkoli druh zdroje dat.

-Spolehlivý :Protože lidé používající DEITY Falcon by se neměli obávat vysokého provozu a škálovatelnosti

-Rozšiřitelné :Protože lidé používající DEITY Falcon by měli mít možnost jej rozšířit o tolik vlastních funkcí, kolik je potřeba.

S ohledem na tyto základní principy jsme začali rozdělovat naši kódovou základnu do malých samostatných balíčků, které poskytují předdefinovanou sadu funkcí a lze je jakýmkoli způsobem znovu použít. Dále jsme se rozhodli rozdělit samotnou architekturu aplikace:vytvořit Falcon Server a Falcon Client.

Server Falcon

Falcon Server funguje jako API server, který spojuje celou platformu dohromady. Funguje jako middlewarová vrstva mezi front-endem, co vidíte v prohlížeči, a back-end službami poskytujícími data jako Magento, Wordpress, Algolia, Elastic Search atd.

Je postaven na ApolloServeru, což nám dává všechny funkce, které ApolloServer poskytuje, jako je například možnost sešívání schémat. Spojování schématu nám umožňuje vytvořit jedno schéma GraphQL z více zdrojů GraphQL. Protože naše rozšíření vracejí částečné schéma, budou během procesu sestavování sloučena do jednoho. Konkrétněji používáme Apollo DataSource REST k mapování našich vzdálených REST API — například Magento a Wordpress do našeho schématu. Dává tedy rozšíření svobodu rozhodnout se, jak doručit svou část schématu  –  buď mapování každého dotazu na vzdálený koncový bod REST API nebo přímé poskytování vzdáleného schématu GraphQL

Falcon Server má také vestavěný rámec rozšíření, který poskytuje abstrakční vrstvu pro rozšíření a umožňuje komukoli vytvořit rozšíření a snadno je připojit.

Tato rozšíření mohou rozšiřovat schémata GraphQL, poskytovat překladače a provádět jakékoli úpravy struktur GraphQL, čímž poskytují vývojářům plnou svobodu připojit jakýkoli druh zdroje dat. Navíc poskytuje tenkou vrstvu abstrakce pro volání REST, která zjednoduší používání externích koncových bodů REST v kódu rozšíření. Uživatelé DEITY Falcon nejsou přilepeni na zdroj dat nebo strukturu, kterou pro ně vybereme:DEITY Falcon je skutečně platformově agnostický.

Pro základní funkce obchodu poskytujeme rozšíření Falcon Shop, které poskytuje datové typy GraphQL. Rozšíření Falcon Shop je také back-end agnostické — může být připojeno k jakémukoli druhu API, které je schopné poskytovat funkce obchodu. Ve výchozím nastavení jsme jej propojili s Magento 2 API, pro které jsme vytvořili samostatný balíček — umožňující Falconu komunikovat s Magento 2.

Klient Falcon

DEITY Falcon Client je front-endová služba zodpovědná za zpracování front-endových úloh, jako je připojení k back-endu, vykreslování HTML atd. Pro vývojový režim byl integrován s nejnovější verzí Webpacku. Vzhledem k tomu, že front-end je plně založen na JavaScriptu, hodnota Google SEO může být ohrožena. Abychom tuto hodnotu ochránili a zajistili, že roboti jakéhokoli druhu mohou procházet weby vytvořené pomocí DEITY Falcon, integrovali jsme Server Side Rendering. Tato funkce funguje bez problémů a není třeba nic upravovat:funguje pouze v rámci aplikace. Snadný způsob, jak to otestovat, je vypnout JavaScript v DevTools a stále se bude zobrazovat celý obsah.

Navíc jsme pro váš obsah zabudovali dynamické směrování. Vzhledem k tomu, že je to docela složité, brzy o tom napíšeme další blog, ale v základu je hlavní výhodou, že obsah můžete obsluhovat přes DEITY Falcon z různých služeb — např. produktové stránky z Magento a blogové příspěvky z WordPress — pod stejnými adresami URL, jaké jsou nakonfigurovány v těchto zdrojích. Poté se DEITY Falcon postará o načtení požadovaného obsahu ze správného zdroje. To vám pak umožní integrovat front-end vašeho obchodu a blogu do DEITY Falcon, ale stále spravovat obsah z back-endů Magento a WordPress tak, jak to děláte právě teď. Jedna dobrá věc:nemusíte se bát, že byste ve své aplikaci měli příliš mnoho typů back-endu, velikost vašeho balíčku se drasticky nezvětší – máme to za vás, rozdělování kódu také řeší Falcon.

Jako další funkci a pro pomoc vývojářům jsme do Server Side Rendering přidali měření výkonu, takže můžete vidět, jak dlouho jsou prováděny vaše dotazy GraphQL a tedy jak dlouho trvají určité procesy na serveru. Abychom mohli spravovat svůj stav jednotným způsobem, bez ohledu na to, zda jsou data lokální v prohlížeči nebo vzdálená načtená ze serveru, změnili jsme správu stavu na Apollo Link State. A samozřejmě jsme zabudovali funkce progresivní webové aplikace, jako je základní režim offline, přidání na domovskou obrazovku, servisní pracovníci, manifest atd.

Ale je toho víc!

Při budování obchodů po mnoho let jsme přišli na to, že spousta webshopů je na tom podobně, alespoň pokud jde o vizuální stránku. Zejména v počáteční fázi vývoje, jako je Proof of Concept a přechod od PoC k prvnímu MVP, je vizuální struktura u většiny obchodů velmi podobná.

Abychom vám pomohli s touto počáteční fází vývoje, vytvořili jsme knihovnu komponent uživatelského rozhraní s vestavěnými možnostmi tématiky, které vám umožní rychle vytvářet prototypy obchodů. Jakmile si vytvoříte obchod pomocí naší knihovny uživatelského rozhraní, můžete změnit globálně definované téma pro všechny komponenty, což vám dává možnost během okamžiku plně změnit vzhled a dojem z obchodu. Theming v tuto chvíli pokrývá barevná schémata, odezvu, mezery, fonty, rozvržení (s vlastnostmi css mřížky) a mnoho dalších. S touto sadou funkcí jste schopni změnit i celé rozložení obchodu, aniž byste se dotkli jakékoli HTML struktury.

Nejdůležitější na tom je, že knihovna uživatelského rozhraní je založena na CSS v JavaScriptu, nepoužívá žádné konvenční CSS. Udělali jsme to, abychom dosáhli další úrovně přizpůsobitelnosti a výkonu. S CSS v JS získáte:

Skutečně rozsahové styly — definujete styly pouze pro konkrétní komponenty, takže se nemusíte bát, že styly z jedné komponenty ovlivní další oblasti vašeho HTML dokumentu. Knihovnu lze použít pro vytváření jakéhokoli uživatelského rozhraní — obchody, blogy, webové stránky , webapps — vše, co můžete vytvořit pomocí JavaScriptu.

Aby to bylo ještě jednodušší, zahrnuli jsme editor vizuálních témat jako komponentu React. Jakmile je zabudováno do vaší aplikace, která používá Falcon UI, můžete své uživatelské rozhraní vyladit super rychlým a snadným způsobem, přičemž změny uvidíte okamžitě v reálném čase.
Skvělý výkon hned po vybalení, aniž byste se museli spoléhat na jakékoli služby pod tím, abyste urychlili svůj výkon. To je proto, že:
Načte se pouze CSS potřebné pro vykreslení aktuálního objektu
CSS selektory jsou velmi jednoduché, prohlížeč se nemusí starat o parsování nebo párování složitých CSS selektorů.
Kritické CSS je vždy načteno v HTML — nedochází k žádným ošklivým zábleskům během načítání stránky, protože získáte kompletní HTML s CSS, které je nutné k vykreslení vaší stránky. Nejsou potřeba žádné před nebo postprocesory CSS. Díky tomu je proces sestavení mnohem jednodušší a tím rychlejší.

Jak tedy začít používat DEITY Falcon?

Pokud jste tímto spuštěním nadšeni stejně jako my a chtěli byste okamžitě začít používat DEITY Falcon, přejděte prosím na náš Github:https://github.com/deity-io/falcon nebo si můžete vygenerovat ukázkový projekt pomocí našeho CLI nástroj děláním

  • npx create-falcon-app my-app

Tím se vygeneruje základní aplikace, která se připojí k našim demo backend serverům, takže si můžete vyzkoušet, jak DEITY Falcon a všechny nástroje spolupracují.

Jsme velmi hrdí na to, čeho jsme dosáhli, a jsme rádi, že jsme se před několika měsíci rozhodli změnit architekturu a ne pouze přidat další funkce. Tento projekt však stále (silně) probíhá a usilovně pracujeme na tom, abychom brzy dostali ještě lepší verzi a více komponent. Chcete nám pomoci v našem poslání změnit web navždy? Připojte se k nám, staňte se partnerem nebo začněte přispívat!

Kontaktujte nás prosím na adrese:přispě[email protected] a my si s vámi rádi popovídáme!

Tento blog je první z úplně nové série. V našich dalších blozích probereme plán a ukážeme, co od nás můžete dále očekávat, budeme vás informovat o nových funkcích a nástrojích a ponoříme se hlouběji do toho, proč věříme, že architektury izolované od služeb jsou budoucností elektronického obchodování.

Zůstaňte naladěni!