Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Perl でも React.js の server-side rendering がしたい! ...
Search
zoncoen
June 24, 2015
Programming
0
2.1k
Perl でも React.js の server-side rendering がしたい! / perl meets javascript with reactjs
Gotanda.pm#5 LT 資料
zoncoen
June 24, 2015
Tweet
Share
More Decks by zoncoen
See All by zoncoen
About Merpay Engineering Productivity Team
zoncoen
0
1.7k
Perl の HTTP/2 事情 / HTTP2 in Perl
zoncoen
0
450
YAPC::Asia 2014
zoncoen
0
2.7k
同期的にプレゼンテーションするツールをつくった話
zoncoen
1
990
Gunosy.go #4 ~ flag.go ~ #gunosygo
zoncoen
0
230
Gunosy.go #3 ~ expvar.go ~ #gunosygo
zoncoen
1
730
初心者がGoでpercol実装してみた話 / Golang + Reveal.js + Websocket で同期的にプレゼンテーションしたい #hikarie_go
zoncoen
0
2.5k
Other Decks in Programming
See All in Programming
インターフェース設計のコツとツボ
togishima
2
490
衛星の軌道をWeb地図上に表示する
sankichi92
0
250
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
240
primeNumberでのRBS導入の現在 && RBS::Traceでinline RBSを拡充してみた
mnmandahalf
0
260
Zennの運営完全に理解した #完全に理解したTalk
wadayusuke
1
140
PT AI без купюр
v0lka
0
200
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
810
【TSkaigi 2025】これは型破り?型安全? 真実はいつもひとつ!(じゃないかもしれない)TypeScript クイズ〜〜〜〜!!!!!
kimitashoichi
1
300
Passkeys for Java Developers
ynojima
1
320
REST API設計の実践 – ベストプラクティスとその落とし穴
kentaroutakeda
2
320
Agent Rules as Domain Parser
yodakeisuke
1
350
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
130
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Being A Developer After 40
akosma
91
590k
The Invisible Side of Design
smashingmag
299
50k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
The World Runs on Bad Software
bkeepers
PRO
68
11k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Faster Mobile Websites
deanohume
307
31k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Statistics for Hackers
jakevdp
799
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
How STYLIGHT went responsive
nonsquared
100
5.6k
Transcript
Perl Ͱ React.js ͷ server-side rendering ͕͍ͨ͠ʂ Gotanda.pm #5 @zoncoen
ͱ͍͏ਓ͍Δ͔͠Εͳ͍ ʢੈք͍ʣ
Ͱ͖ΔΑ
What is React.js • JavaScript view library • Facebook
Why server-side rendering? • ॳظϩʔυ࣌ؒͷվળ • SEO ! React.js ରԠͯ͠Δ
• 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>
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)
Perl ͰΕΔʢͣ | ͖ʣ
How to implement • renderToString() ͷ࣮ߦ݁Ռ͕͋Ε͍͍ → Perl ͔Β JavaScript
ͷؔΛ࣮ߦ
JavaScript::V8 • Perl interface to the V8 JavaScript engine •
Latest version released on 28 Dec 2012 … ! • ͱΓ͋͑ͣ V8 v3.14.5.8 Ͱಈ͘͜ͱΛ֬ೝ
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";
Demo https://github.com/zoncoen-sample/reactjs_server-side- rendering_with_perl