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
560
Rage against the state machine
appltn
1
460
Building web apps with Express
appltn
4
480
The Modern JavaScript Application
appltn
5
600
Object Creation Pattern Performance
appltn
1
750
Introducing Mint Source
appltn
1
390
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
210
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1.2k
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
360
AWS Step Functions は CDK で書こう!
konokenj
5
870
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
250
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
130
たのしいSocketのしくみ / Socket Under a Microscope
coe401_
8
1.4k
Ça bouge du côté des animations CSS !
goetter
2
160
Swift Testingのモチベを上げたい
stoticdev
2
200
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
140
Webフレームワークとともに利用するWeb components / JSConf.jp おかわり
spring_raining
1
130
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Faster Mobile Websites
deanohume
306
31k
BBQ
matthewcrist
87
9.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
13
1k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
Raft: Consensus for Rubyists
vanstee
137
6.8k
Facilitating Awesome Meetings
lara
53
6.3k
Bash Introduction
62gerente
611
210k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
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
?