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

Perl でも React.js の server-side rendering がしたい! / perl meets javascript with reactjs

zoncoen
June 24, 2015

Perl でも React.js の server-side rendering がしたい! / perl meets javascript with reactjs

Gotanda.pm#5 LT 資料

zoncoen

June 24, 2015
Tweet

More Decks by zoncoen

Other Decks in Programming

Transcript

  1. Perl Ͱ΋ React.js ͷ server-side rendering ͕͍ͨ͠ʂ Gotanda.pm #5 @zoncoen

  2. ͱ͍͏ਓ΋͍Δ͔΋͠Εͳ͍ ʢੈք͸޿͍ʣ

  3. Ͱ͖ΔΑ

  4. What is React.js • JavaScript view library • Facebook

  5. Why server-side rendering? • ॳظϩʔυ࣌ؒͷվળ • SEO ! React.js ͸ରԠͯ͠Δ

  6. • React.renderToString() • ReactElement ͷ initial HTML Λฦ͢ with Node.js

    web server React.renderToString(React.createElement(MyClass, {data: data})); <div data-reactid=".1emne5x67eo" data-react-checksum="154602720"></div>
  7. with other languages • Ruby (on Rails): react-rails ! •

    Python: python-react ! → ֤ݴޠ͔Β JavaScript ͷؔ਺Λ࣮ߦ react_component('MyComponent', {data: data}, {prerender: true}) render_component('my-component.jsx', {'data': data}, to_static_markup=true)
  8. Perl Ͱ΋΍ΕΔʢ͸ͣ | ΂͖ʣ

  9. How to implement • renderToString() ͷ࣮ߦ݁Ռ͕͋Ε͹͍͍ → Perl ͔Β JavaScript

    ͷؔ਺Λ࣮ߦ
  10. JavaScript::V8 • Perl interface to the V8 JavaScript engine •

    Latest version released on 28 Dec 2012 … ! • ͱΓ͋͑ͣ V8 v3.14.5.8 Ͱಈ͘͜ͱΛ֬ೝ
  11. Example #!/usr/bin/env perl use strict; use warnings; use utf8; !

    use JavaScript::V8; ! my $context = JavaScript::V8::Context->new(); ! my $result = $context->eval(q| (function () { return 'Hello, JavaScript world!'; })(); |); ! print "$result\n";
  12. Demo https://github.com/zoncoen-sample/reactjs_server-side- rendering_with_perl