Proč Facebook React zabil jQuery

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.

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

Independent software gardener, libertarian, web applications consultant and trainer. Google Developer Expert since 2012.

Komentáře: 23

Přehled komentářů

Oldřich Vetešník Čupr
jaroslav.kubicek.5036 wow
Pavel Lang Pěkné
daniel.steigerwald Re: Pěkné
vire React vs Merucry - benchmark
Misino Re: React vs Merucry - benchmark
Petr Nevyhoštěný
Choakinek Srozumitelně, prosím
Martin Hassman Re: Srozumitelně, prosím
Choakinek Re: Srozumitelně, prosím
tonovotny Re: Srozumitelně, prosím
Choakinek Re: Srozumitelně, prosím
fish Re: Srozumitelně, prosím
Martin Hassman Re: Srozumitelně, prosím
Choakinek Re: Srozumitelně, prosím
Martin Hassman Re: Srozumitelně, prosím
Martin Hassman Re: Srozumitelně, prosím
horaklukas Re: Srozumitelně, prosím
Choakinek Re: Srozumitelně, prosím
daniel.steigerwald Re: Srozumitelně, prosím
Choakinek Re: Srozumitelně, prosím
blabla Meteor a React
Rejpal
Zdroj: https://www.zdrojak.cz/?p=12210