Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

ui patterns & code reuse a talk by @trek or why I hope we never need an ember.js widget library

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

“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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

"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

Slide 7

Slide 7 text

reuse

Slide 8

Slide 8 text

in-the-large in-the-small

Slide 9

Slide 9 text

in-the-small

Slide 10

Slide 10 text

“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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

_.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)

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

in-the-large

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

“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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

“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.”

Slide 21

Slide 21 text

in-the-large? in-the-small?

Slide 22

Slide 22 text

in-the-large? in-the-small?

Slide 23

Slide 23 text

A for effort!

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

{{action}} targeting router {{outlet popoverView}}

Slide 34

Slide 34 text

App.PopoverView App.PopoverController

Slide 35

Slide 35 text

{{action}} targeting router

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

popover.hbs {{#view App.DismissView}} {{/view}} ...

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

B-

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

{{action}} targeting router {{outlet modalView}}

Slide 50

Slide 50 text

modal.hbs {{#view App.DismissView}} {{/view}} ...

Slide 51

Slide 51 text

{{action}} targeting router

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

A-

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

App.PhotosController (ArrayController) two {{action}} targeting controller {{currentPhoto}}

Slide 58

Slide 58 text

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.

Slide 59

Slide 59 text

B

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

{{view Ember.TextField valueBinding=”arrivalDate”}} {{view App.Calendar valueBinding=”arrivalDate”}}

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

B+

Slide 68

Slide 68 text

No content