Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Leaving jsps in the dust
Search
Veena Basavaraj
June 30, 2012
Technology
2
420
Leaving jsps in the dust
LinkedIn moving to client templates for the web
Veena Basavaraj
June 30, 2012
Tweet
Share
More Decks by Veena Basavaraj
See All by Veena Basavaraj
Dust and web-performance at LinkedIn
vybs
1
200
CuriousCaseOfDust.pdf
vybs
1
280
Other Decks in Technology
See All in Technology
セキュリティベンダー/ユーザー双方の視点で語る、 Attack Surface Managementの実践 - Finatextパート / cloudnative-architecture-of-asm
stajima
0
2k
SDN の Hype Cycle を一通り経験してみて思うこと / Going through the Hype Cycle of SDN
mshindo
3
320
FlutterアプリにおけるSLI/SLOを用いたユーザー体験の可視化と計測基盤構築
ostk0069
0
330
歴史あるRuby on Railsでデッドコードを見つけ、 消す方法@yabaibuki.dev #3
ayumu838
0
110
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
190
乗っ取れKubernetes!!~リスクから学ぶKubernetesセキュリティの考え方~/k8s-risk-and-security
mochizuki875
2
270
情シスの引継ぎが大変という話
miyu_dev
2
410
MTDDC Meetup TOKYO 2024 運用フェーズに突入したウェブサイト。年々コスト増えていませんか?
kurashige
1
120
あなたの知らない Function.prototype.toString() の世界
mizdra
PRO
4
2.9k
生成AIが変えるデータ分析の全体像
ishikawa_satoru
0
320
Continuous Integration! Raising the Bar
tdpauw
1
120
Amazon ECSとCloud Runの相互理解で広げるクラウドネイティブの景色 / Mutually understanding Amazon ECS and Cloud Run
iselegant
12
1.1k
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Why Our Code Smells
bkeepers
PRO
334
57k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
A Philosophy of Restraint
colly
203
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Designing the Hi-DPI Web
ddemaree
280
34k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Happy Clients
brianwarren
98
6.7k
Transcript
Leaving jsps in the dust @vybs
We are pi@linkedIn
front-end infrastructure
Goal(s)
In the beginning... Site-Speed Site-Scale +
What is the Problem?
But... Site-Speed Site-Scale Developer Velocity
Simple things should be dead easy
Build Quick, Iterate More
front-end infrastructure now became....
Static Vs Dynamic Jruby Node.js Grails
Anyone notice a bad pattern?
Do once, Do the same twice, Do the same thrice...!
How does this work effectively in mobile?
Still building heavy pages not apps
We created a few more problems indeed!
How did we solve them?
Unification • Javascript Templates, CDN caching • Write once •
JSON for data • One Standard • Event-ed Server as JSON Aggregator + JS V8 engine • Scale once
JavaScript templates • Evaluated tons, handlebars, dust, mustache • Good:
Simple, less logic, 4KB, precompiled to javascript, performance is a feature • Bad: None are mature enough, i18n/ formatters not out of the box
_t = “Hello {name}! You have {count} new messages from
{#people} {name}, {/people} ”; json = { "name": ”James", "count": 2, “people” : [{ “name” : “Jim”, “distance” : “2” },{ “name”: ”Eran” “distance” : “1”} ] } Hello James! You have 2 new messages from Jim, Eran! !dust.render(_t, json, function(error, data) {! $(“mydiv”).html(data);! }!
Dust - *less logic • Simple, DRY • loops, conditionals,
partials, inheritance {#people} {>”/path/degree_icon_{distance}”/} {/people}
Dust • Client Helpers for extensions, reusability • Rendering logic,
math, i18n • @if, @select, @lte, @ceil, @i18n, @form {#people} <li class="card {@select key=“distance”} {@lte value=“1”/} {@i18n text=“first degree”/} {@gt value=“1”/} {@i18n text=“second degree”/} {/select} </li> {/people}
! on client • Server side precompiled to JS •
Rendering times on client snappy
! on client • Server side processed helper tags •
auto-generate template dependencies {#people} {“>degree_icon”/} {/people}
! on client • Dust Preprocessed helper tags • leverage
JVM based i18n, formatting and A/B testing • creates template driven, context based JSON {#people} {@ss.fmt key=”fmt_name” type=“name” value=”{name}”/} {/people} {#people} {fmt_name} {/people} Client template/ js “people” : [{ “name” : “Joe Jada”, “fmt_name” : “Joe J”, “distance” : “2” },{ “name”: ”Jade Pink” “fmt_name” : “Jade P”, “distance” : “1”} ] } Server Source template uses
! on client • No javascript, SEO pages • Seamless
rendering of dust on the server using V8
data layer JSON JSON Browser UI /JSON Aggregator V8 Page
apps Module Module JSON CDN caching content delivery Static Assets static content js, css, templates linkedin.com
linkedin.com/people/pymk
we dust! https://github.com/linkedin/dustjs https://github.com/linkedin/Lu https://github.com/linkedin/inject