Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java + React.jsでSever Side Rendering #reactjs_meetup

14,228 views

Published on

React.js meetup #1の LT資料です

Published in: Technology
  • Be the first to comment

Java + React.jsでSever Side Rendering #reactjs_meetup

  1. 1. Java + React.jsで Sever Side Rendering 2015-04-24 React.js meetup #1 LT Toshiaki Maki (@making)
  2. 2. 自己紹介 • @making • Java界隈にいます • Spring Framework好き
  3. 3. 自己紹介 • @making • Java界隈にいます • Spring Framework好き 「はじめてのSpring Boot」 著者
  4. 4. 自己紹介 • @making • Java界隈にいます • Spring Framework好き 「はじめてのSpring Boot」 著者 Spring IO 2015スピーカー
  5. 5. 私とServer Side Rendering • SPAでブログ作った! http://blog.ik.am
  6. 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. 7. _人人人人人人人_ > ググれない <  ̄Y^Y^Y^Y^Y^Y ̄
  8. 8. _人人人人人人人_ > ググれない <  ̄Y^Y^Y^Y^Y^Y ̄ アフィリエイト収入が 1/4に😭
  9. 9. はてブ
  10. 10. はてブ _人人人人人人人_ > Loading... <  ̄Y^Y^Y^Y^Y^Y ̄
  11. 11. Sever Side Rendering やるしかない!
  12. 12. SSR候補 •Prerender •Rendr (Backbone.js) •React.js
  13. 13. SSR候補 •Prerender •Rendr (Backbone.js) •React.js 採用理由: 流行っているから
  14. 14. React.jsで SSR?
  15. 15. React.jsで SSR? それJavaでもできるよ
  16. 16. JavaScript Engine in Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn
  17. 17. JavaScript Engine in Java • ScriptEngine API (JSR-223) • Java SE 6, 7 … Rhino • Java SE 8 … Nashorn JavaとJavaScriptの関係は インドとインドネシア の関係ほど単純じゃない
  18. 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. 19. ScriptEngineを使って Sever Side Rendering V8バインディング いらず!
  20. 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. 21. React.js側のコード var App = React.createClass({ 
 render: function () { 
 return ( 
 <div> 
 <h1>React.js</h1> 
 <Greet 
 data={this.props.data} /> 
 </div> 
 ); 
 } 
 }); サーバーサイドで用意さ れたデータが渡される
  22. 22. React.js側のコード var Greet = React.createClass({ 
 getInitialState: function () { 
 return this.props.data || 
 {id: 0, content: 'Now Loading...'}; 
 }, 
 // … 
 }); getInitialState()でサーバー で用意したデータを返す
  23. 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. 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. 25. componentDidMount (Ajax) SSRできた! JSも評価されてる
  26. 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. 27. ぐぐれ・・・・
  28. 28. ぐぐれとるやん
  29. 29. ん?
  30. 30. ん? ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった!!
  31. 31. ん? ブログのフロントエンドは React.jsで書いてみたけど SSR対応はまだだった!! Google先生が優秀だった
  32. 32. まとめ • NashornがあればJavaでも サーバーサイドレンダリングで きた • Google先生はSPAに対応して いた 今日のソースコード https://github.com/making/ssr-demo

×