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

    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