Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React meets Nashorn #jjug_ccc #ccc_l8 /react-meets-nashorn-jjug-ccc-2016-fall

React meets Nashorn #jjug_ccc #ccc_l8 /react-meets-nashorn-jjug-ccc-2016-fall

JJUG CCC 2016 Fall で発表したスライドです

0a98ad166f9cdf8d27d92c37438c6e9d?s=128

Manabu Matsuzaki

December 03, 2016
Tweet

Transcript

  1. React meets Nashorn JJUG CCC 2016 Fall 2016/12/03 @matsumana

  2. ࣗݾ঺հ • ໊લɿ দ࡚ ֶ • ॴଐɿ LINE Fukuokaגࣜձࣾ
 ։ൃࢧԉνʔϜ

    • Twitterɿ @matsumana
  3. ΞδΣϯμ • NashornͱReactͷ؆୯ͳ঺հ • αʔόαΠυϨϯμϦϯάͷϝϦοτ • NashornͰReactΛಈ͔͢ʹ͸ • NashornͰReactΛαʔόαΠυϨϯμϦ ϯάͯ͠ૺ۰ͨ͠໰୊

  4. “αʔόαΠυϨϯμϦϯά”
 ͸௕͍ͷͰ
 Ҏ߱͸”SSR”ͱදه͠·͢

  5. Nashornʹ͍ͭͯ

  6. • Java8ʹಉࠝ͞Ε͍ͯΔJavaScriptΤϯδϯ
 (Java7·Ͱ͸Rhinoͩͬͨ) • Java8ͷNashornͰ͸
 ECMA-262 Edition 5.1 ४ڌ •

    Java9ͰES6ରԠ
  7. https://blogs.oracle.com/wlc/entry/javaee_c117 ΑΓൈਮ • JavaScriptΛɺ͍ͬͨΜAST/IRʢந৅ߏจ໦ ʗதؒදݱʣͱ͍͏தؒੜ੒෺ʹม׵͠ɺͦ ͔͜ΒASMΛ࢖ͬͯJavaόΠτίʔυΛੜ੒ ͢Δ
 (JavaScript͕JavaόΠτίʔυʹͳΔ) • ͕ͨͬͯ͠ɺJavaScript͕ωΠςΟϒʹJVM্

    Ͱಈ࡞͢ΔɻύϑΥʔϚϯεʹ΋ࢧো͕ͳ͍
  8. JDK™ 9 Early Access Releases ͷNashornͰES6Λ ࢼ͢ࣄ͕ग़དྷ·͢ • JDK™ 9

    Early Access Releases
 https://jdk9.java.net/download/ • JEP 292
 http://openjdk.java.net/jeps/292
  9. $ jjs -h jjs [<options>] <files> [-- <arguments>] … ུ

    … --language (Specify ECMAScript language version.) param: [es5|es6] default: es5 … ུ … JDK™ 9 Early Access Releases
 Build 146Ͱࢼͯ͠ΈΔ
  10. $ jjs --language=es6 jjs> let hello = (name) => 'Hello,

    ' + name; jjs> hello('World!'); Hello, World!
  11. jjs> class Greet { ...> constructor(v) { ...> this.v =

    v; ...> } ...> hello() { ...> return this.v; ...> } ...> } java.lang.RuntimeException: <shell>:1:0 ES6 class declarations and expressions are not yet implemented class Greet { ^
  12. ·ͩES6ͷશߏจ͸ ࢖͑ͳ͍

  13. ࠓޙͷES6ରԠʹ͍ͭͯ • JavaOne 2016ͰʮWhat’s New in JDK 9?ʯ
 ͱ͍͏ηογϣϯ͕͋Γ·ͨ͠
 ެ։͞ΕͨεϥΠυʹΑΔͱɺ


    "Follow ups in minor releases"ͱͷࣄ
 https://oracle.rainfocus.com/scripts/ catalog/oow16.jsp? event=javaone&search=nashorn&showEnr olled=false&search.event=javaone
  14. Reactʹ͍ͭͯ

  15. ެࣜνϡʔτϦΞϧΑΓൈਮ React is a declarative, efficient, and flexible JavaScript library

    for building user interfaces. 
 (React͸ϢʔβʔΠϯλʔϑΣΠεΛߏங͢ ΔͨΊͷએݴతͰޮ཰తͰॊೈͳJavaScript ϥΠϒϥϦͰ͢)
  16. ެࣜνϡʔτϦΞϧΑΓൈਮ

  17. SSRͷϝϦοτ

  18. • ॳճͷϖʔδද͕ࣔ஗͍ɺ
 ද͕ࣔνϥͭ͘ͱ͍͏໰୊͕ղܾͰ͖Δ • αʔόʔαΠυͱϑϩϯτΤϯυͰ
 ಉ͡ίʔυΛڞ༗Ͱ͖Δ
 (Universal JavaScript)
 ※Ҏલ͸Isomorphic JavaScriptͱݺ͹Ε͍ͯͨ

  19. NashornͰReactΛ ಈ͔͢ʹ͸

  20. • Springͩͱ؆୯ʹग़དྷΔ
 Spring Framework 4.2ͰScript Templating ͱ͍͏ػೳ͕௥Ճ͞Ε͍ͯΔ
 https://spring.io/blog/2016/03/15/ springone2gx-2015-replay-isomorphic- templating-with-spring-boot-nashorn-and-

    react
  21. • ϒϥ΢βͷJavaScript؀ڥʹ͸ଘࡏ͢Δ͕
 Nashornʹ͸ଘࡏ͠ͳ͍΋ͷ͕͋ΔͷͰ
 ػೳͷ݀ΛຒΊΔඞཁ͕͋Δ(polyfill) • windowΦϒδΣΫτͳͲ

  22. • Java8ͷNashorn͸ES5͔͠αϙʔτͯ͠
 ͳ͍ͷͰES5Ͱॻ͔͘
 ES6Ͱॻ͍ͯBabelͰτϥϯεύΠϧ͢Δ

  23. • Java͸࠷৽όʔδϣϯΛ࢖͏ • Java 8u66ͰҎԼͷ໰୊͕fix͞Ε͍ͯΔ • Nashorn react.js benchmark performance

    regression
 http://www.oracle.com/technetwork/java/ javase/2col/8u66-bugfixes-2692105.html
 
 http://bugs.java.com/view_bug.do? bug_id=8134403
  24. ૺ۰ͨ͠໰୊

  25. ૺ۰ͨ͠໰୊ • NashornͷॳظԽॲཧ͕஗͍
 
 ͳͥ஗͍ͷ͔ʁ

  26. 1. React͸εϨουηʔϑͰ͸ͳ͍ͷͰɺ
 NashornͷΠϯελϯεΛ
 ThreadLocalʹอ࣋͢Δඞཁ͕͋Δ
 (Spring͕ThreadLocalʹอ͍࣋ͯ͠Δ) ૺ۰ͨ͠໰୊

  27. 2. JavaScriptιʔε͔ΒASTΛੜ੒ͯ͠ JavaόΠτίʔυੜ੒ͱ͍͏ॲཧ͕ APαʔόͷεϨουຖʹߦΘΕΔ ૺ۰ͨ͠໰୊

  28. 3. Nashorn͕ॳظԽ͞Εͯͳ͍εϨουͰ
 HTTPϦΫΤετ͕ॲཧ͞ΕΔ౓ʹ ॳظԽॲཧ͕ߦΘΕΔ ૺ۰ͨ͠໰୊

  29. ૺ۰ͨ͠໰୊ • ϫʔΫΞϥ΢ϯυ • ։ൃ࣌͸APαʔόͷεϨου਺ΛݮΒ͢ • ຊ൪Ͱ͸ΞϓϦىಈޙͷ΢ΥʔϜΞοϓ ॲཧΛݕ౼͢Δ

  30. ͦͷଞ ؾΛ͚ͭΔࣄ • componentWillMountʹϑϩϯτΤϯυͰ͠ ͔ಈ࡞͠ͳ͍ίʔυΛॻ͍ͯ͸͍͚ͳ͍
 
 componentWillMount͸SSRͰݺ͹ΕΔ͕
 componentDidMount͸ݺ͹Εͳ͍ͱ͍͏ࣄ Λҙࣝͯ͠ίʔυΛॻ͘ඞཁ͕͋Δ

  31. ·ͱΊ • NashornͷॳظԽॲཧ͕஗͍
 (ϫʔΫΞϥ΢ϯυ͸͋Δ) • αʔόαΠυͱϑϩϯτΤϯυͷ྆ํͰ
 ಈ͘ReactΞϓϦΛॻ͘ͷ͸೉͍͠ • SSR͕ඞཁ͔Α͘ݕ౼ͨ͠ํ͕ྑ͍

  32. ϦϯΫू • Java SE 8ͷ৽JavaScriptΤϯδϯʮNashornʯ͕࣮ݱ͢Δ࣍ੈ୅ͷ “JavaScript in Java”؀ڥ • JEP

    292 • What’s New in JDK 9? • Tutorial: Intro To React • SpringOne2GX 2015 replay: Isomorphic templating with Spring Boot, Nashorn and React • JDK 8u66 Bug Fixes • JDK-8134403 : Nashorn react.js benchmark performance regression • αϯϓϧιʔε