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
100
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
540
Rage against the state machine
appltn
1
430
Building web apps with Express
appltn
4
480
The Modern JavaScript Application
appltn
5
580
Object Creation Pattern Performance
appltn
1
730
Introducing Mint Source
appltn
1
390
Other Decks in Programming
See All in Programming
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
440
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
1k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
540
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
390
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
Golang と Erlang
taiyow
8
1.9k
Jakarta Concurrencyによる並行処理プログラミングの始め方 (JJUG CCC 2024 Fall)
tnagao7
1
240
【Kaigi on Rails 2024】YOUTRUST スポンサーLT
krpk1900
1
250
Macとオーディオ再生 2024/11/02
yusukeito
0
220
Featured
See All Featured
Designing for Performance
lara
604
68k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
Automating Front-end Workflow
addyosmani
1365
200k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Statistics for Hackers
jakevdp
796
220k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Building Adaptive Systems
keathley
38
2.2k
A Tale of Four Properties
chriscoyier
156
23k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.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
?