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
orange — Client side concurrency made simple
Search
Florian Plank
October 17, 2013
Programming
0
140
orange — Client side concurrency made simple
Florian Plank
October 17, 2013
Tweet
Share
More Decks by Florian Plank
See All by Florian Plank
Ready, set, immersion!
polarblau
0
170
Prototyping all the things
polarblau
2
170
CoffeeScript vs. ECMAScript 6
polarblau
5
3.5k
Design for a complex Reality — Siili Breakfast Edition
polarblau
0
130
Enabling Design for a Complex Reality
polarblau
2
130
A primer on Content Security Policy
polarblau
1
400
Rails and the future of the open web
polarblau
3
130
Brief Ruby/Ruby on Rails intro
polarblau
3
180
Ruby Idioms
polarblau
3
570
Other Decks in Programming
See All in Programming
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
470
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
140
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
810
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
110
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
650
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
890
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
RailsConf 2023
tenderlove
30
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
How to Ace a Technical Interview
jacobian
278
23k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Transcript
orange — Client side concurrency made simple
rubysauna.org
heartrate.js
None
None
None
None
Concurrency
A B C
A B C
A B C
Concurrency is hard
A B C
Concurrency
Barber z z
Barber Customer z z Sleeping?
Barber Customer
Barber Customer Working?
Barber Customer
Barber
Barber Customer
Barber
Barber Customer ?
Barber Customer Crap.
Barber
Barber Customer
Barber z z Crap.
Concurrency in the browser
JavaScript and the golden thread
None
None
None
foo() 10ms 20ms 30ms 40ms click handled click fired setInterval
(10ms)
None
Synchronous —vs— Asynchronous
WebWorkers
JavaScript Thread Worker
Worker JavaScript Thread
Worker Worker JavaScript Thread
Dedicated, Shared & Inline Workers
None
orange
The queue
Define a worker
# workers/sum.coffee importScripts 'orange/worker.js' perform (data)-> data.numbers.reduce (a, b)-> a
+ b
# workers/sum.coffee importScripts 'orange/worker.js' perform (data)-> data.numbers.reduce (a, b)-> a
+ b
Create a new job
job = new Orange.Job('sum', numbers: [1..100])
job = new Orange.Job('sum', numbers: [1..100]) job.on 'success', (response) ->
console.log('Sum', response) job.perform()
Events
job.on 'success', (response)-> job.on 'complete', -> job.on 'error', (error)-> job.on
'failure', (error)->
Logging
# workers/sum.coffee importScripts 'orange/worker.js' perform (data)-> log 'The background worker
Gotham deserves ...' data.numbers.reduce (a, b) ->a + b
Batches
batch = new Orange.Batch
batch = new Orange.Batch job = new Orange.Job('sum', [1..100]) batch.push
job batch.perform()
batch = new Orange.Batch [job1, job2, job3]
batch.on 'complete', (jobs) -> batch.on 'job:success', (job) -> batch.on 'job:complete',
(job)-> batch.on 'job:error', (job) -> batch.on 'job:failure', (job) ->
job.getResponse() job.getLastError()
Configuration
Orange.Config.set maxWorkerPoolSize: 4 maxRetries : 3 workersPath : '/lib/workers/'
Retry mechanism and exponential back–off
Error handling
job.on 'error', (error)-> throw error BatchStateTransitionError JobStateTransitionError ResponderNotFoundError …
None
Roadmap >0.2.0
Customized Worker Shim Test coverage Data serialization Benchmarking
Forward arbitrary method calls to worker? Custom events? Instrumentation? Inline
Workers? Helper modules?
Kiitos!
@polarblau