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
Modular UI with (Angular || Ember)
Search
Andy Appleton
January 15, 2014
Programming
0
110
Modular UI with (Angular || Ember)
A talk at the London Ember.js meetup
Andy Appleton
January 15, 2014
Tweet
Share
More Decks by Andy Appleton
See All by Andy Appleton
Done is better than perfect
appltn
0
570
Rage against the state machine
appltn
1
470
Building web apps with Express
appltn
4
490
The Modern JavaScript Application
appltn
5
610
Object Creation Pattern Performance
appltn
1
770
Introducing Mint Source
appltn
1
400
Other Decks in Programming
See All in Programming
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
型安全なDrag and Dropの設計を考える
yudppp
5
660
Rails産でないDBを Railsに引っ越すHACK - Omotesando.rb #110
lnit
1
100
バリデーションライブラリ徹底比較
nayuta999999
1
440
What Spring Developers Should Know About Jakarta EE
ivargrimstad
1
620
RubyKaigiで得られる10の価値 〜Ruby話を聞くことだけが RubyKaigiじゃない〜
tomohiko9090
0
100
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
140
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
1
130
ワンバイナリWebサービスのススメ
mackee
10
7.5k
❄️ tmux-nixの実装を通して学ぶNixOSモジュール
momeemt
1
120
eBPFを用いたAIネットワーク監視システム論文の実装 / eBPF Japan Meetup #4
yuukit
3
620
Interface vs Types ~型推論が過多推論~
hirokiomote
1
230
Featured
See All Featured
Making Projects Easy
brettharned
116
6.2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
A better future with KSS
kneath
239
17k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.3k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Documentation Writing (for coders)
carmenintech
71
4.8k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Into the Great Unknown - MozCon
thekraken
39
1.8k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Transcript
MODULAR UI WITH (ANGULAR || EMBER)
ANDY APPLETON @appltn
None
IN JANUARY 2013 WE HAD A PROBLEM
None
customer merchant partner
customer merchant partner
None
WE STARTED SEEING PATTERNS
None
None
None
DEVELOPERS ARE ALLERGIC TO DUPLICATION
<!-- my-page.html --> ! <gc-modal></gc-modal>
<!-- modal-template.html --> ! <a href="#">Show modal</a> <div class="modal-hidden">
<h1>Modal title</h1> <p>Modal content</p> </div>
<!-- my-page.html --> ! <gc-modal link-text="Add customer"> </gc-modal>
<!-- modal-template.html --> ! <a href="#">{{link-text}}</a> <div class="modal-hidden"> <h1>Modal
title</h1> <p>Modal content</p> </div>
<!-- my-page.html --> ! <gc-modal link-text="Add customer"> <h1>New Customer</h1> <form>
... </form> </gc-modal>
<!-- modal-template.html --> ! <a href="#">{{link-text}}</a> ! <div class="hidden-modal" ng-transclude></div>
ANGULAR ROCKS!
EMBER SUCKS!
QUESTIONS?
<!-- my-page.html --> ! {{#gc-modal title="Add customer"}} <h1>{{title}}</h1> <p>Dialog content</p>
{{/gc-modal}}
<!-- modal-template.html --> ! <a href="#">{{link-text}}</a> <div class="hidden-modal"> {{yield}}
</div>
NEXT PROBLEM
THOSE PESKY CUSTOMERS
customer merchant partner
None
SEPARATE APPS SHARED COMPONENTS
TO THE RESCUE
None
THE APP BECOMES A THIN(ish) LAYER OF GLUE CODE
None
None
None
/gocardless-ng
?