Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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.2k
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.8k
Perl の HTTP/2 事情 / HTTP2 in Perl
zoncoen
0
480
YAPC::Asia 2014
zoncoen
0
2.7k
同期的にプレゼンテーションするツールをつくった話
zoncoen
1
1k
Gunosy.go #4 ~ flag.go ~ #gunosygo
zoncoen
0
240
Gunosy.go #3 ~ expvar.go ~ #gunosygo
zoncoen
1
740
初心者がGoでpercol実装してみた話 / Golang + Reveal.js + Websocket で同期的にプレゼンテーションしたい #hikarie_go
zoncoen
0
2.6k
Other Decks in Programming
See All in Programming
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
24
21k
【CA.ai #3】ワークフローから見直すAIエージェント — 必要な場面と“選ばない”判断
satoaoaka
0
210
Querying Design System デザインシステムの意思決定を支える構造検索
ikumatadokoro
1
1.2k
大体よく分かるscala.collection.immutable.HashMap ~ Compressed Hash-Array Mapped Prefix-tree (CHAMP) ~
matsu_chara
1
210
Reactive Thinking with Signals and the new Resource API
manfredsteyer
PRO
0
160
dnx で実行できるコマンド、作ってみました
tomohisa
0
130
dotfiles 式年遷宮 令和最新版
masawada
1
670
Media Capture and Streams: W3C仕様と現場での知見
nowaki28
0
130
「文字列→日付」の落とし穴 〜Ruby Date.parseの意外な挙動〜
sg4k0
0
360
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
ternbusty
7
1.9k
手軽に積ん読を増やすには?/読みたい本と付き合うには?
o0h
PRO
1
140
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
180
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.5k
The Language of Interfaces
destraynor
162
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
45
8.3k
Docker and Python
trallard
46
3.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Scaling GitHub
holman
464
140k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
It's Worth the Effort
3n
187
29k
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