Modular UI with (Angular || Ember)

A talk at the London Ember.js meetup

Transcript

1. MODULAR UI WITH (ANGULAR || EMBER)
2. ANDY APPLETON @appltn
4. IN JANUARY 2013 WE HAD A PROBLEM
6. customer merchant partner
7. customer merchant partner
9. WE STARTED SEEING PATTERNS
13. DEVELOPERS ARE ALLERGIC TO DUPLICATION
14. <!-- my-page.html --> ! <gc-modal></gc-modal>
15. <!-- modal-template.html --> ! <a href="#">Show modal</a> 
 <div class="modal-hidden">
 <h1>Modal title</h1>
 <p>Modal content</p>
 </div>
16. <!-- my-page.html --> ! <gc-modal link-text="Add customer">
 </gc-modal>
17. <!-- modal-template.html --> ! <a href="#">{{link-text}}</a> 
 <div class="modal-hidden">
 <h1>Modal title</h1>
 <p>Modal content</p>
 </div>
18. <!-- my-page.html --> ! <gc-modal link-text="Add customer">
 <h1>New Customer</h1>
 <form> ... </form>
 </gc-modal>
19. <!-- modal-template.html --> ! <a href="#">{{link-text}}</a> ! <div class="hidden-modal" ng-transclude></div>
20. ANGULAR ROCKS!
21. EMBER SUCKS!
22. QUESTIONS?
23. <!-- my-page.html --> ! {{#gc-modal title="Add customer"}}
 <h1>{{title}}</h1> <p>Dialog content</p>
 {{/gc-modal}}
24. <!-- modal-template.html --> ! <a href="#">{{link-text}}</a>
 
 <div class="hidden-modal">
 {{yield}}
 </div>
25. NEXT PROBLEM
26. THOSE PESKY CUSTOMERS
27. customer merchant partner
29. SEPARATE APPS SHARED COMPONENTS
30. TO THE RESCUE
32. THE APP BECOMES A THIN(ish) LAYER OF GLUE CODE
36. /gocardless-ng
37. ?