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

Zdroják » JavaScript » Proč Facebook React zabil jQuery

Proč Facebook React zabil jQuery

Články JavaScript

Facebook React je knihovna pro tvorbu user interface. Nic víc a nic míň. Tím se liší od ucelených řešení jako jsou Angular, Ember a další. React se soustředí na jednu věc a její řešení dotáhl k dokonalosti.

Nálepky:

Tak nezabil, nicméně pro tvorbu UI silně doporučuji React zvážit, a naopak jQuery bych vám rozmlouval.

Ale od začátku. Martin Hassman už mě asi půl roku (už skoro rok – pozn. red.) uhání o článek o Facebook Reactu, a čím déle ten článek odkládám, tím více se mi hromadí témata, o kterých bych rád napsal, a která s Reactem, potažmo vývojem javascriptových aplikací úzce souvisí. Rozhodl jsem se ale, že místo jednoho super obsažného článku napíšu sérii drobných menších tak, abyste každý mohli přečíst během deseti minut. Ke každému článku doplním odkazy k samostudiu.

Facebook React

Facebook React je knihovna pro tvorbu user interface. Nic víc a nic míň. Tím se liší od ucelených řešení jako jsou Angular, Ember a další. React vám neříká, jak má vypadat model (což ostatně Angular také ne), React také neříká, jestli máte používat requirejs nebo CommonJS. React se soustředí na jednu věc, a její řešení dotáhl k dokonalosti.

reactweb

Co je největším problémem při práci s DOMem? DOM sám, respektive jeho update. Představte si tabulku s výpisem nějakých produktů. Chcete na click editovat řádek a aktualizovat v něm data. V klasické jQuery aplikaci byste to řešili tak, že si načtete element který chcete změnit, a změníte ho. Tohle řešení neškáluje. Nutí vás psát mnoho manuálních změn DOMu. Šablony se zdají být řešením, ale taky neškálují. Klasický šablonovací systém vygeneruje HTML string, který promítnete přes innerHTML nějakému elementu. A v tom je problém. Nechcete kvůli změně jediné hodnoty, třeba počet položek v košíku, přerenderovat celou stránku. Nejde jen o rychlost, ale především o to, že stránka může obsahovat různé DOM komponenty, editovaná políčka, označené obrázky, které takový hromadný .innerHTML update přemaže.

Potřebujete nástroj, něco jako HTML diff, který za vás vygeneruje minimální nutnou změnu DOM. Takhle funguje Angular i Ember (a další). Zbavují vás nutnosti ruční manipulace s DOMem. Z hlediska čistoty kódu je mnohem lepší přidat instanci produktu do kolekce v košíku, a nějak něčemu říct „Aktualizuj UI“.

Normalizace

Základem dobře navržené aplikace je oddělit model od jeho reprezentace v UI. Představte si to jako normalizaci databáze. Chcete, aby informace o počtu položek v košíku byla v aplikaci pouze jednou. Tato informace však může mít několik vizuálních reprezentací. Číslíčko u košíku vpravo nahoře, ikonka v seznamu produktů i v detailu produktu. Obrovský problém pro klasickou jQuery aplikaci, která ukládá model do HTML. Když máte tři elementy, které zobrazují zboží v košíku, kdo má pravdu? Jak se říká, muž s dvojími hodinkami si nikdy nemůže být jist, kolik je hodin.

Výhody Reactu

Řešením je samozřejmě oddělit model od jeho vizuální reprezentace. Písmenko M v triádě MVC. To dělají v podstatě všechny MVC frameworky, čím se tedy React liší? Čistotou návrhu, kvalitou jeho implementace, ale především jedním důležitým rozhodnutím.

React preferuje HTML v kódu.

To je veliký rozdíl proti ostatním (Angular, Ember), kteří naopak vkládají kousky kódu do HTML. Proč je to takový rozdíl? Protože JavaScript je mnohem expresivnější jazyk než HTML. Aby mohl Angular fungovat, bylo třeba znovu vymyslet mnoho nových konceptů, které ale v JavaScriptu už existují. Angular parsuje HTML řetězce, což je prostor pro mnoho bezpečnostních problémů, které jsou už z principu těžko řešitelné. Angular HTML se musí kompilovat. Každá netriviální aplikace obsahuje mnoho stránek, a je třeba nějak v HTML znovu vymyslet, jak je všechny poskládat. Tohle a mnoho dalšího v Reactu odpadá.

Indexovatelnost vyhledávači

Angular i Ember potřebují ke svému běhu prohlížeč. To je veliký problém, pokud chcete, aby vaše javascriptová aplikace byla indexovatelná vyhledávači. Toho s Angularem nikdy nedosáhnete. Ne elegantně. Buďto budete muset na serveru nastartovat celý headless browser, což vám přinese mnoho nejen výkonnostních problémů, nebo si budete muset platit nějakou službu, která vám naparsuje běžící aplikaci. Prostě jeden workaround za druhým. V Reactu stačí v Node.js zavolat React.renderComponentToString a hotovo. Indexovatelné AJAX aplikace díky Reactu už nejsou žádným problémem. Svatý grál si můžete postavit doma na poličku.

Krom renderování UI umí React poslouchat DOM události. Zapomeňte na bublání eventů nebo explicitní přiřazování ID produktu konkrétnímu elementu pro pozdější zjištění, na co uživatel vlastně kliknul. Podívejte se na příklad: https://github.com/steida/este-todomvc/blob/master/src/todos/react/todo.jsx#L27

      return (
        <li className={liClassName} key={todo.id}>
          <div className="view">
            <input
              checked={todo.completed}
              className="toggle"
              onChange={this.onToggleChange.bind(this, todo)}
              type="checkbox" />
            <label
              onDoubleClick={this.onLabelDoubleClick.bind(this, todo)}>
              {todo.title}
            </label>
            <button className="destroy"
              onClick={this.onDestroyClick.bind(this, todo)}>
            </button>
          </div>
          <input
            className="edit"
            defaultValue={todo.title}
            onBlur={this.onEditBlur.bind(this, todo)}
            onKeyDown={this.onEditKeyDown.bind(this, todo)}
            ref="edit"
          />
        </li>
      );

Pomocí bind vložím do listeneru zrovna iterovanou položku. Žádné parsování atributů s ID z DOM, žádné dohledávání v kolekci. Easy peasy lemon squeezy. Nebojte se inline handleru, React na pozadí používá event bubling i event delegation. Tohle je pouze syntax sugar.

JSX

Asi jste si všimli podivné HTML syntaxe v JavaScriptu. WTF? Reactí element, třeba H1, je ve skutečnosti klasická funkce. Aby mohli React používat kodéři na HTML zvyklí, Facebook vytvořil JSX, nadstavbu nad JavaScriptem.

React lze používat samozřejmě bez JSX, ale byla by chyba JSX nevyužít. JSX totiž nejenom umožňuje zapisovat HTML v kódu čitelněji, ale… už teď přináší části ECMAScriptu 6, a Facebook s ním má veliké plány. Bude ještě dlouho trvat než se všechny prohlížeče naučí ES6, s JSX ho ale můžete začít používat už dnes. A zase, místo komplexního řešení jako je třeba github.com/google/traceur-compiler můžete bezbolestně integrovat části ES6 specifikace do svých současných aplikací. Stejně jako React. Agilita aka průběžné změny místo brutálního přechodu na komplet novou technologii vede.

Autor článku pořádá školení, která si můžete objednat na javascript-skoleni.cz.

Závěr

To byl stručný úvod do Reactu. Příklady, tutorialy a další si můžete vyzkoušet na následujících odkazech. Není nutné, abych je přepisoval. Příště si povíme něco o izomorfních aplikacích, a proč jsou Object.observe i Angular dirty checking v podstatě zbytečné koncepty, nebo lépe řečeno, pouhými workaroundy nedobrých návrhů.

 Odkazy

Komentáře

Subscribe
Upozornit na
guest
23 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Oldřich Vetešník

Supr, zrovna něco takového jsem hledal – tak trochu slep-si-to-sám-ale-s-tímhle-ti-fakt-píchnu. Těším se na další díly. :-)

Jaroslav Kubíček

„Žádné parsování atributů s ID z DOM, žádné dohledávání v kolekci.“ – nice, tohle mi je příliš povědomé…

Pavel Lang

Pěkné, stručné, poučné, díky Dane. Už se těším na pokračování.
Určitě bude o FLUX architektuře, žejo ;-)

Těším se až ukážeš, jak stránku vyrenderovat na serveru v node.js a na klientu namountovat.

daniel.steigerwald

React server side rendering můžeš vidět zde: https://github.com/steida/este

vire

Kedze sa nastolila super tematika ohladom React, rad by som upriamil vasu pozornost na zaujimavy benchmark, ktory porovnava efektivitu a performance v case, jednotlivych enginov http://jsfiddle.net/sVPQL/11/ React tam dopadol prekvapivo najhorise a merucry virtual DOM engine od autora Ryanos-a (twitter) zas pozitivne prekvapil.

Misino

Príklad trochu mimo mísu. Sila reactu je v tom, že vrámci jedného komponentu sa vyrenderuje iba to čo je potrebné zmeniť.

V tomto teste sa v každej iterácii vytvára nový komponent.

Petr Nevyhoštěný

React je velmi zajímavý. Souhlasím, že string-based šablonování pomocí innerHTML je určitě špatně. Osobně se mi nějak víc líbí Angular, ale přiznám se, nestudoval jsem React do podrobna. Ale je těžké to srovnávat, protože, jak je zmíněno v článku, oba projekty se nesnaží o to samé. Z pohledu rychlosti a možnosti vykreslování na serveru se mi React opravdu líbí. Možná není špatné Angular a React spojit, jak je to třeba ukázáno zde.

Choakinek

Super, skvělý, paráda! Tak a teď srozumitelně! Nejsem žádný nováček, co teprve zkoumá, jak zapnout počítač, jsem webový kodér a nepochopil jsem z toho vůbec nic.

Na takové články bohužel narážím hodně často. Takže pokud prostě nechcete skrze psaní textu jenom machrovat, jak jste hrozně dobří a chcete textem opravdu předávat informace, tak si prostě budete muset najít někoho, kdo za vás ty myšlenky sepíše srozumitelně, když to neumíte.

Martin Hassman

Článek není pro každého, radě lidem se líbil, zkuste hledat problém u sebe, to ze je pro vás náročný není chyba, jsou v něm odkazy na dalsi informace, toho můžete využit.

Choakinek

Však v pohodě. Jestli chce autor machrovat nebo oslovit jen nějakou úzkou skupinu Javascriptových programátorů, pak ok, ať takhle píše dál. Jestli chce ovšem oslovit širší skupinu lidí, tak takhle by psát tedy neměl. Rozhodnutí je pochopitelně na něm, co chce. Jenom si dovolím malou poznámku: psát texty pro úzkou skupinu lidí nebo pro širokou skupinu lidí mi vždy přišlo jako otázka efektivity takového psaní.

tonovotny

Na jednu stranu si Dan trochu nabehl na vidle tim titulkem – kterym prilakal web.kodery, kterym staci rozhybat par elementu na strance (no offense) a cekali nahradu jQuery, na druhou stranu nechapu tuhle hysterickou reakci. Vysvetlovat si to, ze necemu nerozumim, „machrovanim“ autora, je celkem ubohe. Proc Vas to naopak nemotivuje si k tematu neco precist, abyste clanku lepe porozumnel? Opravdu hledejte problem spis u sebe.

Choakinek

Akorát bych se opakoval, ale ta poznámka s web kodérem mě zaujala. To je totiž také jeden z častých jevů, který pozoruji a to sice ten, jako by se předpokládalo, že člověk se už s nějakou profesí narodí a také s ní umře (no offense – vašimi slovy). Samozřejmě to je úplný nesmysl, člověk se v čase vyvíjí. No a od určitého věku to prostě nemůže dělat jen vlastními silami, potřebuje k tomu nějaký informační servis, srozumitelný informační servis ;-).

fish

chjo, kdyby lidi misto „krafani“ jak je to nesrozumitelne, radsi venovali cas studiu, nemuseli by se resit tyhle volovinky v diskuzi. pro autora je to min. tip ze pouzivat v titulku jQuery nebo Rohliky za 0,90Kc neni zrovna dobry napad, pokud bude obsahem napr. knihovna pro node.js, o ktere nekteri netusi do dnesnich dni.

Martin Hassman

To není problém. Jakmile lidí potřebujících takový informační servis bude dostatek a budou za něj ochotni i adekvátně zaplatlit, vznikne přesně dle jejich potřeb, tam není co řešit 8-)

Choakinek

No tak to je ono, ale to mohl autor napsat hned v článku. On tam sice napsal, že pořádá školení, ale už tam nenapsal, že článek je upoutávkou na ta školení.

No a jinak pokud jde o literaturu (za kterou se platí), tak porovnejte zahraniční „produkci“ počítačových knih a množství existujících web. technologií s produkcí českých vydavatelství počítačové literatury. Ten nepoměr je doslova zoufalý :-(.

Martin Hassman

Pro někoho zoufalý, ovšem logický. Neznalost angličtiny se nevyplácí. Na tom nic nezměníme.

Martin Hassman

Jinak článek má informační hodnotu bez ohledu na školení. Jak tu prokazují lidé, kteří mu rozumí a na onom školení nebyli 8-)

horaklukas

Ono to mozna nebude autorem…React je tak trochu jina filozofie a ten zakladni koncept je potreba trochu lip prostudovat k dobremu pochopeni (nejlepe na strankach Reactu a zkousenim si examplu). Me to, jakozto cloveku vyuzivajicimu sablony, selektory a update ui skrze innerHTML, chvili trvalo, ale od te doby jsem z Reactu maximalne nadseny a na UI jsem jej zacal pouzivat temer vyhradne. Podle me je clanek jen upoutavka na samotny React (ne na ty zminovana skoleni), aby to lidi zaujmulo a zacali se o nej zajimat, a ac i me ten text prijde chvilema trochu „rozhrkany“ tak pro upoutani pozornosti je supr…

Choakinek

No, jak mám rozumět tomu odstavci s nadpisem „Normalizace“? Jako že výstup ze serveru (z databáze) vyprodukovaný např. PHP se „otiskne“ do jakéhosi prostředí mezi serverem a HTML stránkou tam, kde se aplikuje ten React, čili ze serveru přijde výstup v podobě např. nějaké jedné hodnoty a prostředí s Reactem ji rozešle v různých podobách do několika míst na HTML stránce najednou (je-li to potřeba)?

daniel.steigerwald

Apklikace má nějaká data, třeba počet produktů v košíku. Ty v klasické aplikaci držíte vždy na serveru, na klienta vyrenderujete HTML, a je-li třeba to změnit, tak browser musí udělat POST a stránku znovu načíst.

V AJAX aplikaci na server odešlete jen změnu košíku a jen zjišťujete, jeslti operace proběhla v pořádku.

Tak, a kde ty data browser drží? Buď přímo vyrenderovaná v HTML, což je ale špatně, nebo v nějakém JavaScriptovém objektu. Tak, a to je ta „normalizace“ dat. Košík je normální JS instance, a data z ní se renderují kde je třeba. Už nenačítám počet produktů v košíku z HTML, ale z JavaScriptu.

Choakinek

No a pak kde je problém pro jQuery? jQuery nečte jen z HTML, ale i ze souborů jiných formátů.

blabla

Pravá sranda nastane při kombinaci Meteoru a Reactu. Otevírají se úplně nové možnosti programování realtime webových aplikací.
https://www.meteor.com/
https://github.com/reactjs/react-meteor

Rejpal

V článku píšete že React je M v triádě MVC, ale na https://facebook.github.io/react/docs/why-react.html se píše že je to písmenko V
:-)

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.