Přejít k navigační liště

Zdroják » JavaScript » MeteorJS – platforma pre super rýchly vývoj real-time aplikácií

MeteorJS – platforma pre super rýchly vývoj real-time aplikácií

Články JavaScript

Meteor nie je iba framework. Je to platforma, ktorá slúži na vývoj izomorfných, real-time, webových a mobilných aplikácií v JavaScripte. Táto platforma sa stará o celý ekosystém vývoja – packages (balíčky), vlastné client & server technológie a deploy.

Meteor 1.0 vyšiel 28.10.2014.

6.11.2014 prebehol Worldwide Meteor 1.0 meetup v rôznych mestách po celom svete. Mimochodom aj v Prahe.

Čo je Meteor?

Meteor je sada nástrojov, pomocou ktorých dosiahneme rýchlejší a pohodlnejší vývoj webových, prípadne mobilných aplikácií. Stará sa o front-end, back-end, databázu, balíčky a deploy. Filozofia meteoru je: „JavaScript everywhere„.

Prečo Meteor?

Izomorfné aplikácie sa dostávajú stále viac do pozornosti. A nie je to len tak pre nič, za nič. Výhoda izomorfných aplikácií je, že môžete zdieľať kód na klientovi aj na serveri. Teda môžete napríklad validovať dáta s tým istým kódom na klientovi aj na serveri. Už žiadna duplicita kódu.

Na naučenie sa Meteoru potrebujete mať základy JavaScriptu, HTML a CSS. Žiadne PHP, Ruby, Python, alebo iný serverový jazyk nepotrebujete ovládať.

Už žiadne prepínanie kontextu medzi server-side a client-side jazykom. V Meteore píšete celú aplikáciu v JavaScripte.

Čo Meteor ponúka?

JavaScript na klientovi aj na serveri

Základným stavebným kameňom Meteoru je Node.js. Klient a server komunikujú medzi sebou prostredníctvom jednoduchého protokolu DDP (Distributed Data Protocol). Na front-ende používa vlastný šablónovací jazyk Spacebars, ktorý má veľa podobného s Handlebars. Pre real-time zmeny v šablónach používa vlastný šablónovací engine Blaze.

Zdieľanie kódu medzi klientom a serverom

Aka Izomorfné aplikácie. Určite sa vám veľakrát stalo, že ste potrebovali validovať formulár na strane klienta a následne na strane servera. Výsledkom bol duplicitný kód. V Meteore si môžete napísať funkciu pre validáciu formulára a môžete ju použiť na klientovi aj na serveri. Už žiadna duplicita kódu!

Jednoduchá inštalácia

Meteor momentálne (v1.0) oficiálne nepodporuje Windows, ale niečo sa chystá.

Pre Linux a MAC stačí pre inštaláciu použiť jediný príkaz:

curl https://install.meteor.com/ | sh

Jednoduché vytvorenie projektu

Pre vytvorenie projektu slúži príkaz:

meteor create nazov-projektu

Po vytvorení projektu treba ísť do jeho zložky a spustiť Meteor server príkazom meteor:

cd nazov-projektu & meteor

Príkaz „meteor“ spustí server a „nainštaluje“ lokálnu MongoDB databázu. Nemusíte riešiť inštalovanie databázy ani pripojenie k databázi. Môžete začať hneď vyvíjať.

Real-time defaultne

Predstavte si jednoduchý chat. Napíšete správu, správa sa uloží do databázy a automaticky sa zobrazí všetkým pripojeným klientom. Programátor okrem zobrazenia a uloženia dát nemusí robiť nič, aby dosiahol real-time aktualizáciu.

Minimongo

Minimongo je klientská implementácia MongoDB. Tj. Pracovať s kolekciami môžeme na serveri aj na klientovi. Zo serveru môžeme poslať do Minimonga rozumné množstvo dát a sním ďalej pracovať. Vyhľadávanie v Minimongu je rýchle, pretože odpadá request-response čas.

Live reload

Zabudnite na F5 a refresh prehliadača. Meteor to spraví za vás automaticky, keď uložíte súbor vo vašom projekte. Je to veľmi príjemné a návykové.

Množstvo balíkov (packages)

Meteor vytvoril svoj vlastný balíkovací systém pre izomorfné balíky – tj. 1 balík môže obsahovať jak serverový kód, tak klientský kód. Ba dokonca aj HTML šablóny (templates). Viac ako 2500 Meteor balíkov nájdete na AtmosphereJS. Ak nejaký balíček nenájdete na Atmosphere, môžete použiť NPM, alebo Bower. Alebo si vytvoriť vlastný Meteor balíček, je to jednoduché.

Balíky pridáte do aplikácie jednoducho:

meteor add nazov-balicku

A balíček môžete začať hneď používať.

Vstavaná autentizácia/registrácia užívateľov

Jeden z najužitočnejších balíkov je accounts-ui. Tento balík zaisťuje vykresľovanie užívateľského rozhrania pre prihlasovanie a registrovanie užívateľov. Stačí pridať balík pomocou:

meteor add accounts-ui

A pre vykreslenie užívateľského rozhrania treba pridať do šablóny:

{{> loginButtons}}

Ak chcete prihlasovanie cez heslo a email, pridajte balík accounts-password. Ak chcete prihlasovanie cez rôzne externé služby, pridajte balíky accounts-facebook, accounts-github, accounts-google, accounts-twitter,….

Automatické pridanie JS a CSS do HTML

Ak vytvoríte nový súbor, či už klientský JavaScript alebo CSS, je automaticky pridaný do HTML. Nemusíte ručne pridávať script a link (css) tagy.

Automatická minifikácia CSS/JS

Na produkčnom serveri sú všetky CSS a JavaScript súbory minifikované do jedného CSS a jedného JS súboru. Opäť nemusíte nič riešiť, všetko sa deje automaticky.

Jednoduchý refaktoring

Meteor používa špeciálnu štruktúru zložiek v projekte. Ak pochopíte túto štruktúru, tak môžete ľubovoľne vytvárať zložky a presúvať súbory medzi nimi bez strachu, že niečo rozbijete.

Latency compensation

Skvelá vec. Užívateľ nemusí čakať na odozvu zo servera. Funguje to ako tlačítko like na Facebooku. Vidíte hneď, že sa niečo udialo. Ak nastane chyba na serveri, tlačítko sa dá do pôvodného stavu. Pomocou callbacku môžete informovať užívateľa o chybe.

Skvelý článok o Latency compensation nájdete na Meteorhacks.

Vývoj webovej a mobilnej aplikácie zároveň

Meteor používa pre mobilné aplikácie knižnicu Cordova. Zatiaľ podporuje iba iOS a Android.

meteor add-platform ios
meteor add-platform android

Viac informácii o vývoji mobilných aplikácií v Meteore nájdete na Meteor wiki.

Jednoduchý deploy

Ak už máte pocit, že by vaša aplikácia mohla uzrieť svetlo sveta, môžete napísať do konzoly:

meteor deploy nazov-projektu

Tento príkaz zabalí vašu aplikáciu do jedného balíka (bundle), nahrá ho na server, ktorý ponúka Meteor platforma zdarma, na serveri tento balík rozbalí a spustí ho. Aplikáciu potom nájdete na adrese:

http://nazov-projektu.meteor.com

Ak chcete spraviť deploy na vlastný server, použite Meteor up.

SEO v SPA

SPA vývojári odjakživa bojujú so SEO. V Meteore môžete mať SPA aj SEO! Vďaka spiderable balíku:

meteor add spiderable

Komunita

Za krátky čas vzniklo veľa užitočných balíkov a to hlavne vďaka komunite. Vzniklo tiež veľa článkov, veľa aplikácií, jedna kniha a vzniká ďalšia. Meteor komunita je jedna veľká rodina. Na Facebooku vznikla skupina pre Meteor nadšencov, ktorí sa chcú naučiť viac, naučiť niečo ostatných, alebo len diskutovať.

Meteor sa naučí každý

Meteor sa naučí každý, kto sa dokázal naučiť JavaScript. Ak máte radi JavaScript, Meteor si zamilujete ešte viac.

Špeciality Meteoru

V aktuálnej verzii 1.0 podporuje jedinú databázu – MongoDB. Dajú sa ale nájsť balíky od komunity pre podporu iných databáz.

Má vlastný šablónovací engine Blaze a šablónovací jazyk Spacebars, ktoré sa starajú o real-time zmeny v HTML šablónach. Nie je potrebný žiadny front-end framework.

Posielanie dát zo serveru na klienta (Minimongo) – publish/subscribe. V Meteore sa neposiela zo serveru celé HTML. Posielajú sa iba dáta vo formáte JSON pomocou protokolu DDP. Dáta publikujeme na serveri napríklad takto:

Meteor.publish('messages', function(limit) {
  return Messages.find({}, {
    limit: limit,
    sort: { timestamp: -1 }
  });
});

Keď chceme dostať dáta na klientovi, musíme si o ne požiadať pomocou subscribe:

Meteor.subscribe('messages', 10);

Dáta sa uložia v Minimongu a môžeme ich následne zobraziť v šablóne.

Záver

Dúfam, že vás Meteor aspoň trochu zaujal a vyskúšate si ho. Rieši naozaj veľa problémov a bola by škoda ho nevyužiť.

Komentáře

Subscribe
Upozornit na
guest
16 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Jan Prachař

Je pro sídlení kódu jiný důvod než validace formuláře? (To někoho opravdu trápí?) A co když k validaci potřebuju data na serveru?

A co meteorjs a offline-first přístup?

achtan

Vies co je vlastne refaktoring?

imho obecne v JS je refaktoring dost tazky a meteor ho nijak specialne neulahcuje… a preco by vlastne mal ?! o refaktoring sa ma starat IDE a nie framework…

Kolemjdouci

IDE? WTF? A vis ty, co je vlastne refactoring???

achtan

tak by sme si ujasnili pojmy

Code refactoring is the process of restructuring existing computer code – changing the factoring – without changing its external behavior. Refactoring improves nonfunctional attributes of the software. Advantages include improved code readability and reduced complexity to improve source code maintainability, and create a more expressive internal architecture or object model to improve extensibility.

zdroj: http://en.wikipedia.org/wiki/Code_refactoring

takze tvrdit ze Meteor zaistuje „Jednoduchý refaktoring“ je trocha prestrelene (hlavne ked potom narazas na to ze vies presunut subor do ineho precinka…)

na margo IDE – nevravel som ze ide 100% rafaktoruje kod kt. pises, ale aspon ti v tom pomaha https://www.jetbrains.com/phpstorm/webhelp/refactoring-source-code.html

karel

No jestli web meteoru bezi na meteoru tak si jeste chvili necham zajit cas, koukal jsem se po nem pred pul rokem a znova ted a jeste to chvilku zabere nez se to posune do pouzitlnejsi veci, myslim ze prepnuti mezi jednotlivyma verzema dokumentace, mi uplne zaseklo firefox, a po reloadu stranky me firefox pozadal zda muze ukoncit javascript

karel

zajit cas = zajit chut
mi uplne zaseklo firefox = by mi uplne zaseklo firefox nemelo

to zaseknuti me trosku vyvedlo z koncentrace a pretrhalo nit pri psani komentare :D

pavel
curl https://install.meteor.com/ | sh

Skvely zpusob, jak si zkompromitovat pocitac.

karel

a odinstalace
rm -rf /

fejk

Říkal jsem si, kdy už se na českém webu objeví něco o Meteoru. Sám jsem si ho všiml někdy před rokem a půl, když byl asi ve verzi 0.5. Už tenkrát jsem z něho byl nadšený a nadšení přetrvává. V kombinaci s fb Reactem (https://github.com/reactjs/react-meteor) je to fakt neskutečná pecka. Abych ale taky trochu krotil nadšení, tak je pravda,
že některé weby, které jsem viděl, jsou poměrně zasekané, což je ale dost možná problem toho meteor renderovacího systému blaze a s Reactem to tak nebude. Další věc je taky, že je potřeba rozumět trochu jak to funguje, aby ten výsledný produkt byl trochu efektivní (např. stránkování založené na klasickém offset(skip)/limit je v meteoru uplně šíleně neefektivní, protože se nepoužívá oplog tailing, ale pollanddiff. Doporučuji každému, kdo to s tím myslí alespoň trochu vážně, si přečíst toto https://github.com/meteor/meteor/wiki/Oplog-Observe-Driver.

vaclav.sir

Zrovna na tohle jsem se ptal na Meteor workshopu na Devfestu, jestli se jednotlivé části frameworku dají snadno nahradit (konkrétně mi šlo právě o React místo těch ošklivých šablon). Bylo mi řečeno něco v tom smyslu, že to moc nejde, protože to ani není potřeba… Rád vidím, že to jde.

Ještě popátrám, jak se dá s Meteorem ošetřit ztráta spojení, protože ukázkové aplikace to neřeší a přitom mi to přijde celkem zásadní (když killnu server, uživatel se ani nedozví, že se jeho data nikam neukládají).

fejk

Popravdě jsem tomu Blazu moc šanci nedal, protože se mi prostě nelíbilo to, že mám zvlášť templatu, helpery, handlování eventů apod. Přišlo mi to takové neucelené oproti Reactu, kde si napíšu jeden js objekt a konec.

fejk

Tak to nevím, co by na tom nemělo jít, protože třeba ten zmíněný odkaz na repo na githubu, které je mimochodem přímo od tvůrce Reactu Pete Hunta, tak je pár řádků kódu. Lze tím nahradit Blaze úplně jednoduše. Akorát místo React.createClass používám ReactMeteor,createClass a navíc definuji jednu metodu getMeteorState, která je pak volána v componentWillMount. Musím ale podotknout, že je tam jeden celkem nepříjemný bug a to že když ReactMeteor volá getMeteorState v rámcí componentWillReceiveProps, což je nutné, tak ale Tracker není aktivní, tzn. ta metoda prostě v tu chvíli není reaktivní, což je nanic. Osobně jsem si to fixnul tím, že invaliduji computation object vzniklý při volání componentWillMount (tedy první volání getMeteorState – zde reaktivní) a hned volám Tracker.flush. Pak mám zaručeno, že mi getMeteorState proběhne i při componentWillReceiveProps a hlavně že je reaktivní! Nevím, proč to v tom repu není, asi už se o to nikdo nezajímá a nebo to má nějaké side effecty, na které jsem ještě nenarazil.

Mirek

Mám rád python (a navzdory pythonistům i web2py), takže držím palce tomuhle:
klient: ractivejs/ractive,
server: web2py/web2py + mdipierro/w3.
Každopádně toto i meteor na nějaké aplikaci vyzkouším.

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.

Pocta C64

Za prvopočátek své programátorské kariéry vděčím počítači Commodore 64. Tehdy jsem genialitu návrhu nemohl docenit. Dnes dokážu lehce nahlédnout pod pokličku. Chtěl bych se o to s vámi podělit a vzdát mu hold.