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
Splitting up 8Ball and building/sharing components
Search
Mark Stuart
February 19, 2015
Programming
0
110
Splitting up 8Ball and building/sharing components
Mark Stuart
February 19, 2015
Tweet
Share
More Decks by Mark Stuart
See All by Mark Stuart
JS@PayPal 2015 - Insanely fast rendering w/ Service Workers and Early Flushing
mstuart
0
980
Midwest JS 2014 - Securing your Node.js & Single Page Apps
mstuart
2
350
enterJS 2014 - Securing your Node.js & Single Page Apps
mstuart
4
630
HTML5DevConf 2014 - Securing your JavaScript apps
mstuart
0
180
Other Decks in Programming
See All in Programming
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
260
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
10
1.7k
パスタの技術
yusukebe
1
380
What's new in Adaptive Android development
fornewid
0
140
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
170
画像コンペでのベースラインモデルの育て方
tattaka
3
1.7k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
670
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
130
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
870
あのころの iPod を どうにか再生させたい
orumin
2
2.4k
『リコリス・リコイル』に学ぶ!! 〜キャリア戦略における計画的偶発性理論と変わる勇気の重要性〜
wanko_it
1
520
QA x AIエコシステム段階構築作戦
osu
0
270
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
880
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
770
Adopting Sorbet at Scale
ufuk
77
9.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Building an army of robots
kneath
306
45k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
KATA
mclloyd
32
14k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.8k
Transcript
Splitting up 8ball & Building & Sharing Components: Our Plan
for 2015
go/8ballcomponents
Part 1: App Split
What’s the plan?
Split up the app. Create more server-side modules. Package up
flows, dynamic and static components.
Building
Why split up the app?
Faster/easier releases Benefit #1 ! ! !
Independent releases. Can’t block each other. Less cross-team merge conflicts.
Improved focus Benefit #2 ! ! !
Remove the noise. Write small, focused modules. Better code, better
docs, better tests. Easier ramp up time for new devs.
More stable Benefit #3 ! ! !
Errors and crashes are more contained. Kinda sad, but this
is a nice feature. =)
Able to move forward Benefit #4 ! ! !
It’s hard to change a monolith. It’s easy to change
a small app. Easier to experiment.
Push Schedule 2/24 - settingsnodeweb LTS March - Credit App
LTS April - Transfer App LTS
Okay, so how do components fit into this?
Part 2: Components
Modularize the common parts. Reason #1 ! ! !
Modularize the common parts.
consumerweb-* modules
consumerweb-* TODOs Some failing unit tests. No ESLint. Need to
add CI ASAP. Any takers? =)
Create value ($$$) Reason #2 ! ! !
P2P and Add Bank everywhere. Drive more people to Consumer
Web.
Unified Login… Unified Add Bank?
Components are really tough.
Highly recommended!
No consistent UI platform. Difficult to share code with teams.
No Kraken for the UI. No consistent component APIs.
Delivering UI components
Web Components Option #1 ! ! !
End all be all? ! Encapsulation. Shadow DOM. Natural components.
None
iframes Option #2 ! ! !
The Good Parts (tm) Super old and works everywhere. Easy
to implement. Server-side or Client-side rendered. Encapsulated. UI platform agnostic. Communication via postMessage.
The Bad Parts You can’t pick what you want, you
get it all. Multiple versions of jQuery, etc. Could have performance implications.
Example: P2P 1-line iframe integration
<script src=“loader.js?path=/myaccount/transfer” /> 1. Fetches and loads loader.js 2. loader.js
scrapes off “path” from itself 3. Creates an iframe 4. Sets the iframe’s URL to the “path”
Great part is this is super re-usable. <script src=“loader.js?path=/myaccount/transfer/send” />
<script src=“loader.js?path=/myaccount/wallet/bank/add” /> <script src=“loader.js?path=/myaccount/settings/address” /> …
redirectUrl Option #3 ! ! !
Common pattern. Useful for flows (P2P, Add Bank, etc.) Least
amount of risk. Crappiest UX.
paypal.com/myaccount/transfer?redirectUrl=/merchant/home 1. Store redirectUrl in session. 2. /myaccount/transfer is rendered.
3. If the user exits, redirect to redirectUrl. 4. If the user completes, redirect to redirectUrl.
Next steps Split out as many apps as possible. Keep
building server-side modules. Build UI components for dust/Backbone. Hopefully within 2-3 months =)
Packaging components
Bower out. npm in.
component-creditmodule npm postinstall script Copies files into public/ ! dependencies,
peerDependencies
If you’d like to help out, let me know!