Vydání DoneJS

Dnes, když oznamujeme vydání DoneJS, cítíme směs uspokojení, hrdosti a trochu vyčerpání.

DoneJS je open source JavaScript framework, který obsahuje vše, co potřebujete k vytváření vysoce výkonných webových, mobilních a desktopových aplikací v reálném čase. Nejedná se o nový rámec, ale o vyčištěnou a vylepšenou verzi JavaScriptMVC.

Nejlepší způsob, jak získat představu o možnostech DoneJS, je věnovat si 45 minut a projít si jeho rychlý průvodce. Zde si vytvoříte jednoduchou chatovací aplikaci, která:

• je v reálném čase
• je vykreslen na straně serveru
• progresivně načítá balíčky z CDN
• běží jako mobilní aplikace, aplikace pro počítače a webová aplikace

Zde jsou dokončené mobilní, stolní a webové chatovací aplikace, které si vzájemně zasílají zprávy:

V tomto článku zdůrazním:

1. Funkce, které dělají z DoneJS framework nové generace.

DoneJS zahrnuje všechny "moderní" front-endové aplikační a vývojové funkce jako:

• vykreslování na straně serveru,
• progresivně načítané optimalizované balíčky,
• aktualizace v reálném čase,
• Sestavení aplikací pro mobilní zařízení a počítače a další.

Navíc jeho těsná integrace modulového zavaděče a rámce MVVM znamená, že jeho celek je větší než součet jeho částí. Ukážeme si například, jak můžete:

• progresivně importovat moduly do šablon a
• vložte data modelu do HTML vykresleného na straně serveru.

2. Jak se začít učit DoneJS.

Je toho hodně, co se musíte naučit vytvářet aplikace JavaScript světové třídy. Chceme poskytnout co nejlepší studijní zkušenost. Nyní, když je vydán DoneJS, se zaměříme na dokumentaci a evangelizaci. Poskytujeme týdenní školení, "úřední hodiny" a bezplatná jednodenní školení.

3. Odkaz dlouhověkosti DoneJS.

Dlouhá životnost je důležitým a podceňovaným hlediskem při hodnocení rámců JavaScriptu. DoneJS, který je vysoce kompatibilní s JavaScriptMVC 3.3, přestože byl přepsán v mnoha nových technologiích, dokazuje náš závazek být pevnou rukou. Rámce DoneJS a JavaScriptMC již 8 let kráčí na hranici mezi inovací a zpětnou kompatibilitou.

Funkce nové generace

DoneJS obsahuje širokou škálu funkcí nezbytných pro moderní aplikace JavaScript. Věříme, že řeší mnoho nejdůležitějších, ale náročných problémů lepšími způsoby než alternativní řešení.

Pro tento článek je obtížné vybrat nejlepší funkce DoneJS z jeho obrovského seznamu funkcí. DoneJS může například jednou změnou zapnout vykreslování a porovnávání pracovních vláken. Jak skvělé to je! V tomto článku se však zaměříme na funkce, které mají největší dopad na vaše aplikace:

• Vykreslování na straně serveru
• Rychlejší načítání stránek
• Chování v reálném čase
• Sestavení aplikací pro mobilní zařízení a počítače

Než se ponoříme do funkcí, je zde několik dalších věcí, které byste o DoneJS měli vědět:

• DoneJS je agnostický vůči jakémukoli jazyku nebo frameworku na straně serveru. I když je NodeJS požadavkem pro použití nástrojů CLI DoneJS, můžete si pro implementaci backendu vybrat jakýkoli jazyk, včetně Pythonu, Javy, Ruby nebo .NET.
• Můžete kombinovat mnoho základních knihoven DoneJS. Použijte StealJS s Reactem. Použijte CanJS s RequireJS. Test s jasmínem nebo mochou. Pokud chcete přidat nějakou integraci, dejte nám vědět!

Ok… ok… podívejme se na techniku!

Vykreslování na straně serveru

Aplikace DoneJS jsou napsány jako Single Page Applications (SPA). SPA používají JavaScript na straně klienta k vytváření veškerého HTML. Čisté oddělení frontendu a backendu je skvělé pro údržbu. Jednostránkové aplikace (jako GMail) jsou ale známé pro přadleny.

Nikdo nechce vidět spinner!

Vytvoření bohaté aplikace bez spinnerů může být složité. Většina alternativních přístupů je buď pomalá, obtížně použitelná nebo obtížně udržitelná. Vykreslování na straně serveru DoneJS řeší všechny tyto problémy.

Rychlé

Vykreslování DoneJS na straně serveru je super rychlé. Vykreslování probíhá asynchronně v rámci smyčky událostí NodeJS pomocí odlehčeného virtuálního DOM . Pojďme to rozebrat:

asynchronně v rámci smyčky událostí NodeJS , máme na mysli, že jakákoliv IO, například žádost o data, je neblokující. To umožňuje částečné vykreslení výsledné stránky, zatímco čeká na data.

Vykreslování stránky se provádí pomocí odlehčeného virtuálního domku což je mnohem rychlejší než vykreslování se skutečným DOM.

Následující diagram ukazuje, co se stane, když jsou požadovány dvě stránky přibližně ve stejnou dobu. Všimněte si, že když data požaduje jedna stránka, mohou být zpracovány další stránky:

Snadné použití

Vykreslování na straně serveru by nemělo být dodatečným nápadem, něco, co se zapne až v produkci, kde najednou objevíte problémy. Pokud během vývoje provedete změny, měli byste okamžitě vidět, jak ovlivňují vykreslování na straně serveru.

Vykreslování na straně serveru DoneJS používá stejnou výměnu horkého modulu, která probíhá na klientovi. Když změníte soubor, vykreslovací kód na straně serveru se aktualizuje, takže další aktualizace zobrazí html, který je vykreslen s nejnovějším kódem. Není třeba restartovat server!

Vykreslování na straně serveru DoneJS je k dispozici jako expresní middleware, takže nastavení je tak jednoduché jako:

app.use('/', ssr({
 config: __dirname + '/public/package.json!npm',
 liveReload: true
}));

Snadná údržba

Vykreslování na straně serveru by mělo vyžadovat co nejméně změn kódu vaší aplikace. Alternativní řešení:

• Používejte jiný než DOM, jako je virtuální DOM, což znemožňuje použití widgetů založených na DOM nebo jQuery.
• Vyžadovat volání synchronního vykreslování, což znamená, že před vykreslením musí být přítomna všechna data.

DoneJS se těmto omezením vyhýbá použitím virtuálního DOM, který vypadá velmi podobně jako normální DOM. To znamená, že moduly, které upravují DOM pomocí jQuery, mohou pracovat s vykreslováním na straně serveru. A to znamená, že moduly, stejně jako vlastní prvky, mohou načítat svá vlastní data. Jednoduše musí uvést, na co čekají, pomocí waitFor metoda. Vypadá to takto:

can.Component.extend({
 tag: "user-name",
 template: can.stache( "{{user.name}}" ),
 viewModel: {
 init: function () {
 var promise = User.getOne({ id: this.attr("id") });
 this.attr( "%root" ).waitFor( promise );
 promise.then( (user) => { 
 this.attr( "user", user ); 
 });
 }
 }
});

DoneJS jde ještě o krok dále. Pokud .waitFor je zaměněn za .pageData , budou vyřešená data příslibu vložena do odpovědi HTML. Když se JavaScript v klientovi nakonec pokusí provést stejný požadavek, použijí se místo něj vložená data.

Následující video ukazuje, jak fungují vložená data:

Rychlejší načítání stránek

DoneJS má skvělý příběh o výkonu. Kompletní obrázek najdete v sekci výkonu domovské stránky:

DoneJS zrychluje vnímané doby načítání a skutečné doby načítání pomocí kombinace technologií:

• vykreslování na straně serveru
• optimalizované progresivně načítané sestavení
• stahování sestavení ze sítě pro doručování obsahu
• a další

Již jsme se zabývali tím, jak DoneJS zlepšuje vykreslování na straně serveru. Zde budeme hovořit o tom, jak dokáže rychleji načíst JavaScript a CSS vašeho webu, a upozorníme na to, jak to DoneJS jedinečně zjednodušuje.

DoneJS dokáže načíst vaše stránky rychleji, protože stahuje méně kódu, rychleji. Stahuje pouze JS a CSS, které potřebuje pro danou stránku, a stahuje je ze sítě pro doručování obsahu (CDN), což zrychluje stahování.

Na DoneJS je jedinečné, jak snadno získáte progresivní načítání a optimalizované balíčky. Chcete-li něco postupně načíst, jednoduše zabalíte podmíněnou sekci do šablony s <can-import> .

Můžete například chtít:

• načtěte a zobrazte <home-page> prvek, když je adresa URL /home
• načtěte a zobrazte <chat-page> prvek, když je adresa URL /chat

Chcete-li to provést, jednoduše zapište toto chování do šablony:

{{#eq page 'home'}}
 <can-import from="components/home">
 {{#isResolved}}<home-page/> {{else}} Loading {{/}}
 </can-import>
{{/eq}}
{{#eq page 'chat'}}
 <can-import from="components/chat">
 {{#isResolved}}<chat-page/> {{else}} Loading {{/}
 </can-import>
{{/eq}}

A je to! Sestavovací systém DoneJS detekuje těchto <can-import> s a vytvoří pro tyto stránky optimalizovaný balíček.

Algoritmus sestavení DoneJS je také jedinečný. Zjistí nejlepší způsob, jak automaticky vytvořit aplikaci. Následující video vysvětluje:

DoneJS lze snadno nakonfigurovat pro nasazení a načítání ze služby CDN. Po konfiguraci stačí napsat:

donejs deploy

k vytlačení vašeho statického obsahu.

V reálném čase

DoneJS usnadňuje přidání chování v reálném čase do jakéhokoli backendového systému.

DoneJS je server-agnostik. Nenutí vás přijmout určitou konkrétní službu nebo databázovou technologii. Pokud váš server dokáže vytvořit REST-ish rozhraní a může odesílat zprávy prohlížeče, když jsou záznamy vytvářeny, aktualizovány a mazány, může DoneJS automaticky aktualizovat uživatelské rozhraní, když k těmto změnám dojde.

Dosahuje toho s nastavenou logikou. Například následující adresa URL vrátí všechny nové úkoly, které patří uživateli 5:

/services/todos?type=new&ownerId=5

S jQuery jste mohli zadat tento požadavek jako:

$.get("/services/todos", {type: 'new', ownerId: 5})

v DoneJS byste to udělali takto:

Todo.getList({type: 'new', ownerId: 5})

Parametry předané do $.get a Todo.getList jsou {type: ‘new’, ownerId: 5} . Tyto parametry představují množinu.

Když klient podá created úkol do prohlížeče jako:

{id: 100, type: ‘new’, ownerId: 5, name: "do dishes"}

DoneJS ví, že má přidat vytvořený úkol tam, kam patří v sadě {type: 'new', ownerId: 5} . DoneJS přidá vytvořený úkol k úkolům přijatým .getList , který automaticky aktualizuje uživatelské rozhraní. Následující video to vysvětluje:

Zacházení s parametry, které předáte požadavku ajax, jako s reprezentujícími sadu, je velmi jednoduchý nápad. Díky použití sad jsme nejenom byli schopni usnadnit nastavení chování v reálném čase na jakémkoli backendu, ale použili jsme je k přidání dalších optimalizací výkonu, jako jsou:

• propadnout mezipaměti
• ukládání do mezipaměti
• kombinování požadavků

Optimalizace v reálném čase a další optimalizace jsou součástí can-connect, kterou lze používat zcela nezávisle na jakékoli jiné části DoneJS a CanJS.

Sestavení pro mobilní zařízení a počítače

Pokud nestačí vysoce výkonná webová aplikace vykreslovaná na straně serveru v reálném čase, aplikace DoneJS lze rychle přenést do nativních mobilních a desktopových aplikací pomocí Apache Cordova a NW.js. Chcete-li vytvořit na mobilní platformě Cordova Android nebo iOS, jednoduše spusťte:

donejs add cordova

a poté

donejs build cordova

Chcete-li vytvořit desktopovou aplikaci pomocí NW.js, spusťte:

donejs add nw

a poté

donejs build nw

Když to uděláte v naší příručce Začínáme, uvidíte něco jako:

Vypadá to, že brzy bude ještě více konkurentů Hipchat, Slack, Campfire a Gitter.

Doufejme, že jste právě viděli, jak DoneJS řeší kritické problémy vytváření aplikací v reálném čase, které běží všude a načítají se super rychle. Věříme, že jsme jediný rámec, který řeší všechny tyto problémy, a rozhodně jediný, který je řeší tak elegantně.

Ale to není vše, co DoneJS dělá! Existuje spousta dalších funkcí, které můžete vyzkoušet:

• Funkce výkonu
  • Vykreslování na straně serveru
  • Progresivní načítání
  • Ukládání do mezipaměti a minimální požadavky na data
  • Vykreslování pracovního vlákna
  • Nasazení do sítě CDN
• Funkce použitelnosti
  • Sestavení pro iOS, Android a Desktop
  • Podpora IE8
  • Připojeno v reálném čase
  • Hezké adresy URL s pushstate
• Funkce údržby
  • Komplexní testování
  • Dokumentace
  • Nepřetržitá integrace a nasazení
  • Modles
  • Balíčky NPM
  • Moduly ES6
  • Vlastní prvky HTML
  • Architektura MVVM
  • Výměna horkých modulů
  • Generátory

Učte se

Skvělá technologie, která se neustále zlepšuje, nic neznamená, pokud nevíte, jak ji používat. V současné době má web DoneJS dva průvodce:

• Rychlý start – Vytvořte a nasaďte v reálném čase vykreslovanou, postupně načítanou aplikaci na straně serveru, která běží na počítači, iOS a Androidu.
• Do hloubky – sestavujte, testujte , dokument , nepřetržitě integrovat a nepřetržitě nasadit v reálném čase vykreslovanou, postupně načítanou aplikaci na straně serveru, která běží na desktopu, iOS a Androidu.

Dokumentace a průvodci jsou historicky místem, kde jsme měli prostor ke zlepšení.

To je důvod, proč pomoci komunitě naučit se DoneJS je jedním z našich hlavních cílů. Po tomto vydání si dáváme 3 měsíce pauzu od vývoje nepodstatných funkcí, abychom se soustředili na psaní dokumentace, průvodců a dalších ukázkových aplikací.

Náš závazek ke vzdělávání však přesahuje toto.

Za prvé, máme týdenní školení JavaScript, jQuery a DoneJS. Naším cílem je vytvořit sérii videí, kterou si každý může zvednout a naučit se postavit cokoli správným způsobem. Začali jsme v květnu, takže už máte 23 hodin obsahu, abyste mohli začít.

Za druhé, poskytneme 5 $* jednodenní školení jakékoli skupině 10 nebo více lidí kdekoli v USA. Vytvořili jsme již 9 různých setkání po celých Spojených státech. Přihlaste se na školení ve vašem místním městě.

Pokud vaše město není uvedeno, ale vy, vaše uživatelská skupina nebo společnost máte zájem, dejte nám vědět e-mailem - [email protected]. Pokud jste mimo USA, dejte nám také vědět. Pravděpodobně budeme vyžadovat více účastníků nebo konkrétní datum, ale také vám chceme pomoci s učením.

Dlouhověkost

Vytvoření aplikací světové třídy trvá měsíce nebo roky. Pokračující údržba, pokud je aplikace úspěšná, bude často trvat déle než 5 let. Krajina JavaScriptu se však téměř neustále mění. Nové rámce se objevují se vzrušujícími novými technologiemi a často nahrazují staré rámce a technologie zcela nekompatibilními způsoby. Nedávno jsme o tomto problému napsali článek.

Věříme, že s touto verzí DoneJS demonstruje, že je nejlepším příkladem dosažení rovnováhy mezi trvalou inovací a zpětnou kompatibilitou. DoneJS je v podstatě sedmá hlavní verze JavaScriptMVC. Má technické dědictví starší 8 let.

Před 8 lety obsahoval JavaScriptMVC mnoho funkcí, bez kterých by dnes žádný vývojář frontendu nebyl:

• Šablony směrování
• Modely
• Zavaděč a sestavení modulů
• Testování

Od té doby jsme rámec soustavně vylepšovali a přidali mnoho nápadů z jiných rámců a knihoven:

• Pozorovatelné
• Živá vazba a obousměrná vazba
• Vlastní prvky
• Rozdíl DOM

...ale přidávání technologií je vlastně snadné. Jsme nejvíce hrdí na to, že vykopáváme naše uživatele z děr při zachování velkého množství zpětné kompatibility. Když byl vytvořen JavaScriptMVC, neexistoval žádný NodeJS. Nebylo ani AMD. Když byl JavaScriptMVC 3.3 vydán před dvěma lety, byl založen na Rhinu (jsou Java JavaScript engine) a používal formát modulu (steal ), kterou nikdo nepodporoval.

Hrubé...

Potřebovali jsme všechny dostat na NodeJS a na moduly CommonJS, AMD nebo ES6. Přepsali jsme StealJS na NodeJS, abychom podporovali nové formáty a zároveň zachovali starší formát steal. S vydáním DoneJS budou uživatelé JavaScriptMVC moci upgradovat svou aplikaci postupně na standardní formáty modulů.

Také jsme přepsali DocumentJS a náš testovací spouštěcí nástroj v NodeJS.

Podobně, když byla živá vazba našeho původního enginu pro šablony knírek na bázi strun pomalá jako melasa, přepsali jsme nový, vysoce zpětně kompatibilní šablonový modul založený na fragmentech DOM, který je více než dvakrát rychlejší – stache.

Důsledný vývoj našich nástrojů může být trochu hrbolatý. Téměř každá hlavní verze vedla (ale nenutila) naše uživatele ke změně technologií. Například:

• Použití QUnit místo naší vlastní knihovny výrazů.
• Změna šablon EJS na šablony založené na kníru.
• Použití vlastních prvků a MVVM místo MVC.

Nyní, s DoneJS, doufáme, že lidé přejdou na:

• nové formáty modulů
• can-connect namísto can.Model
• nové syntaxe vazeb

Změna není snadná. Ale spousta malých změn rozložených v čase je lepší než přepisování celé aplikace do nového rámce každé 3 roky.

Proto jsme se zavázali vždy vyvíjíme naši technologii tak, abychom ji zdokonalovali pomocí nových nástrojů a technik a zároveň byli vysoce zpětně kompatibilní mezi hlavními verzemi.

Na rozdíl od sponzorských společností jiných rámců nejsme motivováni výsledky vyhledávání ani spojováním vás s přáteli. Záleží nám na jedné věci, pomáhat lidem a týmům vytvářet úžasné aplikace.

Pokud hledáte framework, který roste s vámi a vaším týmem, DoneJS je framework pro vás.

Úvahy na závěr

Velmi se těším na další kapitolu JavaScriptMVC. Velké poděkování patří všem, kteří přispěli, propagovali, tweetovali nebo používali JavaScriptMVC za posledních 8 let. Dostat se z JavaScriptMVC na DoneJS bylo obrovské úsilí mnoha velmi zkušených softwarových inženýrů.

V plánu máme několik skvělých nových funkcí. Pokud máte zájem pomoci, dejte nám vědět.

And if you haven’t yet checked out donejs, start now with the getting started guide. Your journey begins by installing donejs.

npm install donejs -g

Poznámky:

• $5 meetups - We only charge to make sure people are committed to being there when signing up. We are going to bring more than $5 of swag per person to every event.