Java + React.jsでSever Side Rendering #reactjs_meetup

1. Java + React.jsで Sever Side Rendering 2015-04-24 React.js meetup #1 LT Toshiaki Maki (@making)

2. 自己紹介 • @making • Java界隈にいます • Spring Framework好き

3. 自己紹介 • @making • Java界隈にいます • Spring Framework好き「はじめてのSpring Boot」著者

4. 自己紹介 • @making • Java界隈にいます • Spring Framework好き「はじめてのSpring Boot」著者 Spring IO 2015スピーカー

5. 私とServer Side Rendering • SPAでブログ作った！ http://blog.ik.am

6. 私とServer Side Rendering • SPAでブログ作った！ Backend API (Java) Frontend SPA (Backbone.js) Backend SPA (Backbone.js) REST API REST API http://blog.ik.am https://github.com/making/categolj2-backend

7. ＿人人人人人人人＿＞ググれない＜￣Y^Y^Y^Y^Y^Y￣

8. ＿人人人人人人人＿＞ググれない＜￣Y^Y^Y^Y^Y^Y￣アフィリエイト収入が 1/4に😭

9. はてブ

10. はてブ＿人人人人人人人＿＞ Loading... ＜￣Y^Y^Y^Y^Y^Y￣

11. Sever Side Rendering やるしかない！

12. SSR候補 •Prerender •Rendr (Backbone.js) •React.js

13. SSR候補 •Prerender •Rendr (Backbone.js) •React.js 採用理由: 流行っているから

14. React.jsで SSR?

15. React.jsで SSR? それJavaでもできるよ

16. JavaScript Engine in Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn

17. JavaScript Engine in Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn JavaとJavaScriptの関係はインドとインドネシアの関係ほど単純じゃない

18. ScriptEngine ScriptEngineManager engineManager =   new ScriptEngineManager();  ScriptEngine engine =   engineManager.getEngineByName("js");  engine   .eval("function sum(a,b){return a + b;}");  System.out.println(engine.eval("sum(1,2);"));  // 3 http://www.oracle.com/technetwork/articles/java/jf14-nashorn-2126515.html

19. ScriptEngineを使って Sever Side Rendering V8バインディングいらず！

20. React.js側のコード window.renderOnClient = function (initialData) {   React.render(   <App data={initialData} />,   document.getElementById('content')   );   };     window.renderOnServer = function (initialData) {   //initialData = Java.from(initialData); Listの場合  return React.renderToString(   <App data={initialData} />   );   };

21. React.js側のコード var App = React.createClass({   render: function () {   return (   <div>   <h1>React.js</h1>   <Greet   data={this.props.data} />   </div>   );   }   }); サーバーサイドで用意されたデータが渡される

22. React.js側のコード var Greet = React.createClass({   getInitialState: function () {   return this.props.data ||   {id: 0, content: 'Now Loading...'};   },   // …   }); getInitialState()でサーバーで用意したデータを返す

23. サーバーサイド// JSONマッパー   ObjectMapper objectMapper = new ObjectMapper();   // ScriptEngineのラッパー   ScriptEngine engine = new JavaScriptEngine()   .polyfill()   .load("static/bundle.js")   .get();   @RequestMapping("/")   String index(Model model) throws Exception {   Greet initialData = new Greet(100, "Data on Server");   Object markup = ((Invocable) engine)   .invokeFunction("renderOnServer", initialData);  model.addAttribute("markup", markup);   model.addAttribute("initialData",   objectMapper.writeValueAsString(initialData));   return "index";   }

24. HTMLテンプレート (Thymeleaf) <body>   <div id="content" th:utext="${markup}"></div>   <script src="bundle.js"></script>   <script type="text/javascript"   th:inline="javascript">   document.addEventListener("DOMContentLoaded", function () {   var initialData = JSON.parse(/*[[${initialData}]]*/   '{"id": -1, "content": "モックデータ"}');   renderOnClient(initialData);   }, false);   </script>   </body> エンジン経由だとコメントの中身が評価されるテンプレートを直で開くとコメントの後ろが評価されるので、フロントエンドに閉じて開発可能! サーバーで生成した HTMLを埋め込む

25. componentDidMount (Ajax) SSRできた！ JSも評価されてる

26. ということでフロントをReact.jsで作り直した Backend API (Java) Frontend SPA (React.js) Backend SPA (Backbone.js) REST API REST API https://github.com/making/categolj2-backend/tree/master/frontend-ui-reactjs

27. ぐぐれ・・・・

28. ぐぐれとるやん

29. ん？

30. ん？ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった！！

31. ん？ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった！！ Google先生が優秀だった

32. まとめ • NashornがあればJavaでもサーバーサイドレンダリングできた • Google先生はSPAに対応していた今日のソースコード https://github.com/making/ssr-demo

Java + React.jsでSever Side Rendering #reactjs_meetup

Toshiaki Maki

Transcript