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
440
YAPC::Asia 2014
zoncoen
0
2.6k
同期的にプレゼンテーションするツールをつくった話
zoncoen
1
990
Gunosy.go #4 ~ flag.go ~ #gunosygo
zoncoen
0
230
Gunosy.go #3 ~ expvar.go ~ #gunosygo
zoncoen
1
720
初心者がGoでpercol実装してみた話 / Golang + Reveal.js + Websocket で同期的にプレゼンテーションしたい #hikarie_go
zoncoen
0
2.5k
Other Decks in Programming
See All in Programming
Chrome Extension Techniques from Hell
moznion
1
160
Building Scalable Mobile Projects: Fast Builds, High Reusability and Clear Ownership
cyrilmottier
2
260
Devin入門と最近のアップデートから見るDevinの進化 / Introduction to Devin and the Evolution of Devin as Seen in Recent Update
rkaga
9
4.8k
AWSで雰囲気でつくる! VRChatの写真変換ピタゴラスイッチ
anatofuz
0
150
「影響が少ない」を自分の目でみてみる
o0h
PRO
2
990
Going Structural with Named Tuples
bishabosha
0
200
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
500
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
150
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
840
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
4
880
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.1k
PHP で学ぶ OAuth 入門
azuki
1
130
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1369
200k
BBQ
matthewcrist
88
9.6k
Navigating Team Friction
lara
184
15k
It's Worth the Effort
3n
184
28k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
We Have a Design System, Now What?
morganepeng
52
7.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
390
A Tale of Four Properties
chriscoyier
158
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
5
520
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.1k
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