UI Patterns and Reuse ~ or ~ Why I Hope We Never Need an Ember.js Widget Library

Talk from EmberCamp 2013

Transcript

2. ui patterns & code reuse a talk by @trek or why I hope we never need an ember.js widget library
4. “They used to carry code ... from one job to the next, until the time came that software had value (in the 1970s), and then various corporate contractual provisions and some laws made it illegal to do.” Facts of Software Engineering Management Robert L. Glass (2002) http://www.informit.com/ articles/printerfriendly.aspx?p=30091
6. "Software reuse as a recognized area of study in software engineering dates only from 1968 when Douglas McIlroy of Bell Laboratories proposed basing the software industry on reusable components." http://en.wikipedia.org/wiki/Code_reuse
7. reuse
8. in-the-large in-the-small
9. in-the-small
10. “Reuse-in-the-small (libraries of subroutines) began nearly 50 years ago and is a well-solved problem.” Facts of Software Engineering Management Robert L. Glass (2002) http://www.informit.com/ articles/printerfriendly.aspx?p=30091
12. _.map(obj, iterator, context) _.reduce(obj, iterator, memo, context) _.reduceRigh(obj, iterator, memo, context) _.find(obj, iterator, context) _.filter(obj, iterator, context) _.reject(obj, iterator, context) _.every(obj, iterator, context) _.any(obj, iterator, context) _.include(obj, target) _.invoke(obj, method) _.pluck(obj, key)
14. in-the-large
18. “NASA-Goddard Software Engineering Laboratory (SEL) have shown that if you have to change more than 15 to 20 percent of a component to make it work in your program, it is more economical to build the component from scratch. And few components meet that 15-to-20 percent threshold” http://www.stickyminds.com/sitewide.asp?Function=edetail&ObjectType=COL&ObjectId=2731
20. “It is not very difficult to build generalized, reusable routines... The problem is, once those reusable modules are built, they have to do something that truly matches a great variety of needs in a great variety of programs. Reuse-in-the-large, when applied to a narrowly defined application domain, has a good chance of being successful. Cross-project and cross- domain reuse, on the other hand, does not.”
21. in-the-large? in-the-small?
22. in-the-large? in-the-small?
23. A for effort!
32. Appear in Proximity Retain proximal positioning if data changes trigger interacted element size to change or interaction causes the size of the popover to change. Only display a single on at a time Remove from display if the user interacts with other elements Accept/reject data interactions depending on how the element is dismissed
33. {{action}} targeting router {{outlet popoverView}}
34. App.PopoverView App.PopoverController
35. {{action}} targeting router
37. popover.hbs {{#view App.DismissView}} {{/view}} ...
40. Appear in Proximity Retain proximal positioning if data changes trigger interacted element size to change or interaction causes the size of the popover to change. Only display a single on at a time Remove from display if the user interacts with other elements Accept/reject data interactions depending on how the element is dismissed
41. Appear in Proximity Retain proximal positioning if data changes trigger interacted element size to change or interaction causes the size of the popover to change. Only display a single on at a time Remove from display if the user interacts with other elements Accept/reject data interactions depending on how the element is dismissed
42. Appear in Proximity Retain proximal positioning if data changes trigger interacted element size to change or interaction causes the size of the popover to change. Only display a single on at a time Remove from display if the user interacts with other elements Accept/reject data interactions depending on how the element is dismissed
43. B-
48. Appear visually centered Can appear and disappear in response to either user or data interaction Only display a single on at a time Remove from display if the user outside the element Accept/reject data interactions depending on how the element is dismissed
49. {{action}} targeting router {{outlet modalView}}
50. modal.hbs {{#view App.DismissView}} {{/view}} ...
51. {{action}} targeting router
53. Appear visually centered Can appear and disappear in response to either user or data interaction Only display a single on at a time Remove from display if the user outside the element Accept/reject data interactions depending on how the element is dismissed
54. A-
57. App.PhotosController (ArrayController) two {{action}} targeting controller {{currentPhoto}}
58. Handle the loading of more data when unloaded data is required (i.e. sparse array behavior) so potential total count and identifiers must be known, even if all data isn’t fetched. Handle rapid successive clicks of paginators Potentially cycle back to the beginning if last element is reached.
59. B
64. January February March Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa 1 2 3 4 5 1 2 1 2 6 7 8 9 10 11 12 3 4 5 6 7 8 9 3 4 5 6 7 8 9 13 14 15 16 17 18 19 10 11 12 13 14 15 16 10 11 12 13 14 15 16 20 21 22 23 24 25 26 17 18 19 20 21 22 23 17 18 19 20 21 22 23 27 28 29 30 31 24 25 26 27 28 24 25 26 27 28 29 30 31 April May June Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 1 2 3 4 1 7 8 9 10 11 12 13 5 6 7 8 9 10 11 2 3 4 5 6 7 8 14 15 16 17 18 19 20 12 13 14 15 16 17 18 9 10 11 12 13 14 15 21 22 23 24 25 26 27 19 20 21 22 23 24 25 16 17 18 19 20 21 22 28 29 30 26 27 28 29 30 31 23 24 25 26 27 28 29 30 July August September Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa 1 2 3 4 5 6 1 2 3 1 2 3 4 5 6 7 7 8 9 10 11 12 13 4 5 6 7 8 9 10 8 9 10 11 12 13 14 14 15 16 17 18 19 20 11 12 13 14 15 16 17 15 16 17 18 19 20 21 21 22 23 24 25 26 27 18 19 20 21 22 23 24 22 23 24 25 26 27 28 28 29 30 31 25 26 27 28 29 30 31 29 30 October November December Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th Fr Sa 1 2 3 4 5 1 2 1 2 3 4 5 6 7 6 7 8 9 10 11 12 3 4 5 6 7 8 9 8 9 10 11 12 13 14 13 14 15 16 17 18 19 10 11 12 13 14 15 16 15 16 17 18 19 20 21 20 21 22 23 24 25 26 17 18 19 20 21 22 23 22 23 24 25 26 27 28 27 28 29 30 31 24 25 26 27 28 29 30 29 30 31
65. {{view Ember.TextField valueBinding=”arrivalDate”}} {{view App.Calendar valueBinding=”arrivalDate”}}
67. B+