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

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 • αϯϓϧιʔε