Izomorfná aplikácia s React a Nashorn

1. Prehľad

V tomto tutoriále pochopíme, čo presne je izomorfná aplikácia. Diskutujeme tiež o Nashorne, stroji Java JavaScript dodávanom s jazykom Java.

Ďalej preskúmame, ako môžeme použiť Nashorn spolu s front-end knižnicou ako React na vytvorenie izomorfnej aplikácie.

2. Trochu histórie

Klientske a serverové aplikácie boli tradične písané spôsobom, ktorý bol na strane servera dosť ťažký. Predstavte si PHP ako skriptovací stroj generujúci väčšinou statické HTML a webové prehliadače, ktoré ich vykresľujú.

Netscape prišiel s podpora JavaScriptu v jeho prehliadači už v polovici deväťdesiatych rokov. To začalo posúvať časť spracovania zo serverového na prehliadač na strane klienta. Vývojári dlho zápasili s rôznymi problémami týkajúcimi sa podpory JavaScriptu vo webových prehliadačoch.

S rastúcim dopytom po rýchlejšej a interaktívnej používateľskej skúsenosti sa hranice už posúvali čoraz silnejšie. Jedným z prvých rámcov, ktoré hru zmenili, bol jQuery. Priniesol niekoľko užívateľsky príjemných funkcií a oveľa vylepšenú podporu pre AJAX.

Čoskoro sa začalo objavovať veľa rámcov pre front-end vývoj, čo vývojárom výrazne zlepšilo skúsenosti. Počnúc AngularJS od Googlu, React z Facebooku a neskôr Vue začali priťahovať pozornosť vývojárov.

Vďaka modernej podpore prehľadávačov, pozoruhodným rámcom a požadovaným nástrojom príliv a odliv sa zväčša posúva smerom k strane klienta.

Ponorný zážitok na čoraz rýchlejších vreckových zariadeniach si vyžaduje viac spracovania na strane klienta.

3. Čo je izomorfná aplikácia?

Takže sme videli, ako nám front-endové rámce pomáhajú vyvíjať webovú aplikáciu, kde je používateľské rozhranie úplne vykreslené na strane klienta.

Avšak je tiež možné použiť ten istý rámec na strane servera a vygenerovať rovnaké užívateľské rozhranie.

Teraz sa nemusíme nevyhnutne držať iba riešení na strane klienta alebo servera. Lepšou cestou je mať riešenie kde klient aj server môžu spracovať rovnaký front-end kód a vygenerovať rovnaké užívateľské rozhranie.

Tento prístup má výhody, o ktorých si ešte povieme.

Takéto webové aplikácie sa nazývajú izomorfné alebo univerzálne. Jazykom na strane klienta je teraz výlučne jazyk JavaScript. Preto, aby fungovala izomorfná aplikácia, musíme používať JavaScript aj na strane servera.

Node.js je zďaleka najbežnejšia voľba na vytvorenie vykreslenej aplikácie na strane servera.

4. Čo je Nashorn?

Kde teda Nashorn zapadá a prečo by sme ho mali používať? Nashorn je JavaScriptový modul zabalený v predvolenom nastavení s Javou. Preto, ak už máme back-end webovej aplikácie v Jave a chceme vytvoriť izomorfnú aplikáciu, Nashorn je veľmi šikovný!

Nashorn bol vydaný ako súčasť Java 8. Ten je primárne zameraný na povolenie vložených aplikácií JavaScriptu v Jave.

Nashorn kompiluje JavaScript v pamäti do Java Bytecode a odovzdá ho JVM na vykonanie. To ponúka lepší výkon v porovnaní s predchádzajúcim motorom Rhino.

5. Vytvorenie izomorfnej aplikácie

Teraz sme si prešli dostatočným počtom súvislostí. Naša aplikácia tu zobrazí Fibonacciho sekvenciu a poskytne tlačidlo na vygenerovanie a zobrazenie ďalšieho čísla v sekvencii. Vytvorme teraz jednoduchú izomorfnú aplikáciu s rozhraním back-end a front-end:

  • Front-end: Jednoduché klientske rozhranie založené na React.js.
  • Back-end: Jednoduchý Spring Boot back-end s Nashornom na spracovanie JavaScriptu

6. Aplikácia front-end

Budeme používať React.js za vytvorenie nášho klientskeho rozhrania. React je populárna knižnica JavaScriptu na vytváranie jednostránkových aplikácií. To pomáha nám rozložiť zložité užívateľské rozhranie na hierarchické komponenty s voliteľným stavom a jednosmernou väzbou údajov.

React analyzuje túto hierarchiu a vytvára dátovú štruktúru v pamäti, ktorá sa nazýva virtuálny DOM. To pomáha Reactu nájsť zmeny medzi rôznymi stavmi a vykonať minimálne zmeny v DOM prehliadača.

6.1. Reagovať Komponent

Vytvorme si náš prvý komponent React:

var App = React.createClass ({displayName: "App", handleSubmit: function () {var last = this.state.data [this.state.data.length-1]; var secondLast = this.state.data [this .state.data.length-2]; $ .ajax ({url: '/ next /' + last + '/' + secondLast, dataType: 'text', success: function (msg) {var series = this.state. data; series.push (msg); this.setState ({data: series});} .bind (this), error: function (xhr, status, err) {console.error ('/ next', status, err .toString ());} .bind (this)});}, componentDidMount: function () {this.setState ({data: this.props.data});}, getInitialState: function () {return {data: []};}, render: function () {return (React.createElement ("div", {className: "app"}, React.createElement ("h2", null, "Fibonacci Generator"), React.createElement ( „h2“, null, this.state.data.toString ()), React.createElement ("input", {type: "submit", value: "Next", onClick: this.handleSubmit})))}}} );

Poďme teda pochopiť, čo robí vyššie uvedený kód:

  • Na začiatok sme definovali komponent triedy v Reacte s názvom „App“
  • Najviac dôležitou funkciou vo vnútri tohto komponentu je „render“, ktorý je zodpovedný za generovanie používateľského rozhrania
  • Poskytli sme štýl className ktoré môže komponent používať
  • Tu používame stav komponentu na ukladanie a zobrazovanie sérií
  • Zatiaľ čo sa stav inicializuje ako prázdny zoznam, načíta údaje odovzdané komponentu ako rekvizita, keď sa komponent pripojí
  • Nakoniec kliknutím na tlačidlo „Pridať“ sa uskutoční volanie jQuery do služby REST
  • Hovor načíta ďalšie číslo v poradí a pripojí ho do stavu komponentu
  • Zmena stavu komponentu komponent automaticky vykreslí

6.2. Používanie komponentu React

Reagovať hľadá pomenovaný prvok „div“ na stránke HTML na ukotvenie jej obsahu. Musíme len poskytnúť stránku HTML s týmto prvkom „div“ a načítať súbory JS:

   Hello React ReactDOM.render (React.createElement (App, {data: [0,1,1]}), document.getElementById ("root")); 

Pozrime sa teda, čo sme tu urobili:

  • My importoval požadované knižnice JS, reagoval, reagoval-dom a jQuery
  • Potom sme definovali prvok „div“ s názvom „root“
  • Importovali sme tiež súbor JS s našou komponentou React
  • Ďalej sme nazvali komponent Reagovať „Aplikácia“ s niekoľkými počiatočnými údajmi, prvými tromi číslami Fibonacci

7. Back-end aplikácie

Teraz sa pozrime, ako môžeme vytvoriť vhodný back-end pre našu aplikáciu. Už sme sa rozhodli používajte Spring Boot spolu s Spring Web na zostavenie tejto aplikácie. Dôležitejšie je, že sme sa rozhodli použite Nashorn na spracovanie front-endu založeného na JavaScripte sme vyvinuli v poslednej časti.

7.1. Maven závislosti

Pre našu jednoduchú aplikáciu budeme používať JSP spolu s Spring MVC, takže do nášho POM pridáme niekoľko závislostí:

 org.springframework.boot jarný boot-štartovací web org.apache.tomcat.embed k dispozícii tomcat-embed-jaspis 

Prvým z nich je štandardná závislosť zavedenia pružiny pre webovú aplikáciu. Druhý je potrebný na zostavenie JSP.

7.2. Webový radič

Poďme si teraz vytvoriť náš webový radič, ktorý spracuje náš súbor JavaScript a vráti HTML pomocou JSP:

@Controller public class MyWebController {@RequestMapping ("/") public String index (Map model) throws Exception {ScriptEngine nashorn = new ScriptEngineManager (). GetEngineByName ("nashorn"); nashorn.eval (nový FileReader ("static / js / react.js")); nashorn.eval (nový FileReader ("static / js / react-dom-server.js")); nashorn.eval (nový FileReader ("static / app.js")); Objekt html = nashorn.eval ("ReactDOMServer.renderToString (" + "React.createElement (App, {data: [0,1,1]})" + ");"); model.put ("obsah", String.valueOf (html)); návratový "index"; }}

Čo sa tu teda presne deje:

  • Načítame inštanciu ScriptEngine typu Nashorn z ScriptEngineManager
  • Potom my načítajte príslušné knižnice do súboru React, react.js a react-dom-server.js
  • Načítame tiež náš súbor JS, ktorý má našu reakčnú zložku „Aplikácia“
  • Na záver vyhodnotíme reakčný prvok vytvárajúci fragment JS s komponentom „App“ a niekoľkými počiatočnými údajmi
  • Toto nám poskytuje výstup z Reactu, fragmentu HTML ako Objekt
  • Tento fragment HTML odovzdáme ako údaje príslušnému zobrazeniu - JSP

7.3. JSP

Ako teraz spracujeme tento fragment HTML v našom JSP?

Pripomeňme si, že React automaticky pridáva svoj výstup k pomenovanému prvku „div“ - v našom prípade „root“. Avšak náš fragment HTML na strane servera pridáme do toho istého prvku ručne v našom JSP.

Pozrime sa, ako vyzerá JSP teraz:

   Ahoj reaguj! $ {content} ReactDOM.render (React.createElement (App, {data: [0,1,1]}), document.getElementById ("root")); 

Toto je rovnaká stránka, ktorú sme vytvorili predtým, s výnimkou skutočnosti, že sme náš fragment HTML pridali do „root“ div, ktorý bol predtým prázdny.

7.4. Ovládač REST

Nakoniec potrebujeme aj koncový bod REST na strane servera, ktorý nám dá ďalšie Fibonacciho číslo v poradí:

@RestController verejná trieda MyRestController {@RequestMapping ("/ next / {last} / {secondLast}") public int index (@PathVariable ("last") int last, @PathVariable ("secondLast") int secondLast) vyvolá výnimku {návrat posledný + druhýposledný; }}

Nič fantastické, iba jednoduchý ovládač Spring REST.

8. Spustenie aplikácie

Teraz, keď sme dokončili front-end aj back-end, je čas spustiť aplikáciu.

Aplikáciu Spring Boot by sme mali normálne spustiť s využitím triedy bootstrapping:

@SpringBootApplication verejná trieda Aplikácia rozširuje SpringBootServletInitializer {@Override chránená SpringApplicationBuilder configure (aplikácia SpringApplicationBuilder) {návrat application.sources (Application.class); } public static void main (String [] args) hodí Exception {SpringApplication.run (Application.class, args); }}

Keď riadime túto triedu, Spring Boot kompiluje naše JSP a sprístupňuje ich vo vstavanom Tomcate spolu so zvyškom webovej aplikácie.

Ak teraz navštívime našu stránku, uvidíme:

Poďme pochopiť postupnosť udalostí:

  • Prehliadač požaduje túto stránku
  • Keď žiadosť o túto stránku dorazí, webový kontrolór Spring spracuje súbory JS
  • Nashorn engine vygeneruje fragment HTML a odovzdá ho JSP
  • Aplikácia JSP pridá tento fragment HTML do prvku „root“ div a nakoniec vráti vyššie uvedenú stránku HTML
  • Prehliadač vykreslí HTML a medzitým začne sťahovať súbory JS
  • Nakoniec je stránka pripravená na akcie na strane klienta - do série môžeme pridať ďalšie čísla

Dôležité je tu pochopiť, čo sa stane, ak React nájde fragment HTML v cieľovom prvku „div“. V takých prípadoch, React porovnáva tento fragment s tým, čo má, a nenahrádza ho, ak nájde čitateľný fragment. To je presne to, čo podporuje vykresľovanie na strane servera a izomorfné aplikácie.

9. Čo viac je možné?

V našom jednoduchom príklade sme práve poškriabali povrch toho, čo je možné. Front-end aplikácie s modernými frameworkami založenými na JS sú čoraz výkonnejšie a komplexnejšie. S touto pridanou zložitosťou je veľa vecí, o ktoré sa musíme postarať:

  • Pokiaľ je to v skutočnosti, v našej aplikácii sme vytvorili iba jeden komponent React niekoľko zložiek tvoriacich hierarchiu ktoré odovzdávajú údaje prostredníctvom rekvizít
  • Radi by sme vytvoriť samostatné súbory JS pre každú súčasť udržiavať ich zvládnuteľné a spravovať ich závislosti prostredníctvom príkazov „export / vyžadovať“ alebo „export / import“
  • Okrem toho nemusí byť možné spravovať stav iba v rámci komponentov; možno budeme chcieť použiť štátna knižnica pre správu ako Redux
  • Ďalej budeme možno musieť interagovať s externými službami ako vedľajšie účinky akcií; môže to vyžadovať, aby sme ich používali vzor ako redux-thunk alebo Redux-Saga
  • Najdôležitejšie je, že by sme chceli využiť JSX, rozšírenie syntaxe k JS pre popis užívateľského rozhrania

Aj keď je Nashorn plne kompatibilný s čistým JS, nemusí podporovať všetky vyššie uvedené funkcie. Mnohé z nich vyžadujú prekladovú kompiláciu a polyfill kvôli kompatibilite JS.

Zvyčajná prax v takýchto prípadoch je využite zväzok modulov ako Webpack alebo Rollup. To, čo robia hlavne, je spracovanie všetkých zdrojových súborov React a ich zoskupenie do jedného súboru JS spolu so všetkými závislosťami. To si vyžaduje moderný kompilátor JavaScriptu, ako je Babel, aby kompiloval JavaScript tak, aby bol spätne kompatibilný.

Výsledný balík obsahuje iba staré dobré JS, ktorým prehliadače rozumejú a tiež sa ich drží Nashorn.

10. Výhody izomorfnej aplikácie

Veľa sme teda hovorili o izomorfných aplikáciách a dokonca sme teraz vytvorili jednoduchú aplikáciu. Prečo by nám ale vlastne malo na tomto vôbec záležať? Poďme pochopiť niektoré kľúčové výhody používania izomorfnej aplikácie.

10.1. Vykreslenie prvej stránky

Jednou z najvýznamnejších výhod izomorfnej aplikácie je rýchlejšie vykreslenie prvej stránky. V typickej vykreslenej aplikácii na strane klienta začína prehľadávač stiahnutím všetkých artefaktov JS a CSS.

Potom sa načítajú a začnú vykresľovať prvú stránku. Ak pošleme prvú stránku vykreslenú na strane servera, môže to byť oveľa rýchlejšie a poskytnúť vylepšený používateľský zážitok.

10.2. SEO priateľské

Ďalší výhoda často uvádzaná pri vykresľovaní na strane servera súvisí so SEO. Predpokladá sa, že vyhľadávací roboti nie sú schopní spracovať JavaScript, a preto nevidia indexovú stránku vykreslenú na strane klienta prostredníctvom knižníc ako React. Vykreslená stránka na strane servera je preto priateľskejšia pre SEO. Stojí za zmienku, že moderné roboty vyhľadávacích strojov tvrdia, že spracúvajú JavaScript.

11. Záver

V tomto tutoriáli sme si prešli základné koncepty izomorfných aplikácií a nashornského JavaScriptového enginu. Ďalej sme skúmali, ako vytvoriť izomorfnú aplikáciu s programami Spring Boot, React a Nashorn.

Potom sme diskutovali o ďalších možnostiach rozšírenia front-endovej aplikácie a výhodách používania izomorfnej aplikácie.

Ako vždy, kód nájdete na GitHub.


$config[zx-auto] not found$config[zx-overlay] not found