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
2.2k
0
Share
Perl でも React.js の server-side rendering がしたい! / perl meets javascript with reactjs
Gotanda.pm#5 LT 資料
zoncoen
June 24, 2015
More Decks by zoncoen
See All by zoncoen
About Merpay Engineering Productivity Team
zoncoen
0
1.9k
Perl の HTTP/2 事情 / HTTP2 in Perl
zoncoen
0
490
YAPC::Asia 2014
zoncoen
0
2.7k
同期的にプレゼンテーションするツールをつくった話
zoncoen
1
1k
Gunosy.go #4 ~ flag.go ~ #gunosygo
zoncoen
0
250
Gunosy.go #3 ~ expvar.go ~ #gunosygo
zoncoen
1
760
初心者がGoでpercol実装してみた話 / Golang + Reveal.js + Websocket で同期的にプレゼンテーションしたい #hikarie_go
zoncoen
0
2.6k
Other Decks in Programming
See All in Programming
アーキテクチャモダナイゼーションとは何か
nwiizo
19
5.2k
AI時代のエンジニアリングの原則 / Engineering Principles in the AI Era
haru860
0
340
UIの境界線をデザインする | React Tokyo #15 メイントーク
sasagar
2
360
How We Benchmarked Quarkus: Patterns and anti-patterns
hollycummins
1
140
おれのAgentic Coding 2026/03
tsukasagr
1
150
The Less-Told Story of Socket Timeouts
coe401_
3
250
Google Nest CamとApple Vision frameworkと猫🐈🐈⬛ / onishi50
yutailang0119
0
110
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
16
5.6k
HTML-Aware ERB: The Path to Reactive Rendering @ RubyKaigi 2026, Hakodate, Japan
marcoroth
0
140
The Monolith Strikes Back: Why AI Agents ❤️ Rails Monoliths
serradura
0
330
Server-Side Kotlin LT大会 vol.18 [Kotlin-lspの最新情報と Neovimのlsp設定例]
yasunori0418
1
150
Coding at the Speed of Thought: The New Era of Symfony Docker
dunglas
0
5k
Featured
See All Featured
Chasing Engaging Ingredients in Design
codingconduct
0
170
Art, The Web, and Tiny UX
lynnandtonic
304
21k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
180
Six Lessons from altMBA
skipperchong
29
4.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Exploring anti-patterns in Rails
aemeredith
3
320
Producing Creativity
orderedlist
PRO
348
40k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
2k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
1k
How to Ace a Technical Interview
jacobian
281
24k
Discover your Explorer Soul
emna__ayadi
2
1.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
370
20k
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