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

Gotanda.pm#5 LT 資料

Transcript

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

   View Slide

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

   View Slide

3. Ͱ͖ΔΑ
   

   View Slide

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

   View Slide

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

   View Slide

6. • React.renderToString()
   • ReactElement ͷ initial HTML Λฦ͢
   with Node.js web server
   React.renderToString(React.createElement(MyClass, {data: data}));
   
   

   View Slide

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)
   

   View Slide

8. Perl Ͱ΋΍ΕΔʢ͸ͣ | ΂͖ʣ
   

   View Slide

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

   View Slide

10. JavaScript::V8
    • Perl interface to the V8 JavaScript engine
    • Latest version released on 28 Dec 2012 …
    !
    • ͱΓ͋͑ͣ V8 v3.14.5.8 Ͱಈ͘͜ͱΛ֬ೝ
    

    View Slide

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";
    

    View Slide

12. Demo
    https://github.com/zoncoen-sample/reactjs_server-side-
    rendering_with_perl
    

    View Slide