Modifiers: the good and the Camp

A presentation on a new feature in Ember: Modifiers. Inspired by lots of campy musicals.

Transcript

1. Modifiers: The good and the camp.
2. • Pronouns he/him/his • Engineering Manager at Movable Ink • Frequent Broadway-goer • @spencer516 on Twitter & Github • Amateur photographer of one dog Hi! I’m Spencer!
3. fingernails, dreamcoats, & züca bags
4. ‘Camp’ not ‘camp’
5. - Susan Sontag: Notes on “Camp” “It is the love of the exaggerated, the ‘off,’ of things-being-what-they-are-not.”
7. - Susan Sontag: Notes on “Camp” “People who share this sensibility are not laughing at the thing they label as ‘a camp,’ they're enjoying it. Camp is a tender feeling.”
9. - Susan Sontag: Notes on “Camp” “What it does is to find the success in certain passionate failures.”
11. - Susan Sontag: Notes on “Camp” “The whole point of Camp is to dethrone the serious. Camp is playful, anti-serious.”
13. Modifiers: The good and the Camp.
14. • The Modifier Concept • History of Modifiers • Creating Modifiers • Good Use Cases • Campy Use Cases Overview
15. What is a Modifier?
16. A small reusable tool, like a Helper, that attaches behavior to elements using lifecycle events. What is a Modifier?
17. Classic Components (State/Actions + DOM) + Handlebars Templates (HTML) What is a Modifier?
18. Glimmer Components (State/Actions) + Modifiers (DOM) + Handlebars (HTML) What is a Modifier?
19. • autofocus attribute only works on Page Load • element.focus() needs to fire once after element is added example: Autofocus
20. <input autofocus /> example: Autofocus
21. <input {{autofocus}} /> example: Autofocus
22. What is a Modifier? • Cannot be expressed by HTML alone • Therefore, does not run Server-side in Fastboot
23. Modifiers in Ember
24. • {{action}} modifier attaches event listeners to elements • Supports an on=“EVENT_TYPE” argument • {{bind-attr}} modifier to set element attributes • Deprecated in 1.11 • Removed in 2.0 History of Ember Modifiers
25. Autofocus Before Modifiers export default Component.extend({ tagName: 'input', didInsertElement() { this.element.focus(); } });
26. Autofocus Before Modifiers export default Mixin.create({ didInsertElement() { this._super(...args); this.element.focus(); } }); export default Component.extend(FocusMixin, { tagName: 'input' });
27. Autofocus in Octane export default class AutoFocusInput extends GlimmerComponent { @action focus(element) { element.focus(); } }; <input {{did-insert this.focus}}>
28. Making a Modifier
29. • Use the setModifierManager API • Use the ember-oo-modifiers library • Use the ember-functional-modifiers library Making a Modifier
30. Autofocus: OO Modifiers // app/modifiers/autofocus.js import Modifier from 'ember-oo-modifiers'; export default class AutofocusModifier extends Modifier { didInsertElement() { this.element.focus(); } }
31. Autofocus: Functional Modifiers // app/modifiers/autofocus.js import modifier from 'ember-functional-modifiers'; export default modifier( element => element.focus() );
32. Using a Modifier
33. Autofocus: Native Elements <input {{autofocus}} /> <textarea {{autofocus}}></textarea>
34. Autofocus: Components {{! templates/application.hbs }} <MySpecialInput {{autofocus}} /> {{! templates/components/MySpecialInput.hbs }} <label> {{@label}} <input ...attributes /> </label>
35. Modifiers: the good
36. a note on the format…
37. “I'm Black Jesus, I'm Black Mary But this Mary's legs are hairy.” Land of Lola
38. Modifier: draggable
39. Modifier: draggable <button {{draggable this.updatePosition}}> Drag Me </button>
40. Modifier: draggable export default class MoveMe extends Component { @tracked x = 0; @tracked y = 0; @action updatePosition([x, y]) { this.x = x; this.y = y; } }
41. Modifier: draggable export default class MoveMe extends Component { @tracked x = 0; @tracked y = 0; @action updatePosition([x, y]) { this.x = x; this.y = y; } get style() { const { x, y } = this; return htmlSafe(`transform: translate(${x}px, ${y}px);`); } }
42. Modifier: draggable <button style={{this.style}} {{draggable this.updatePosition}} > Drag Me </button>
43. “I spend my life accounting with figures and such. To what is my life amounting, it figures not much.” I Wanna Be a Producer
44. Modifier: track-on <button {{on "click" @addToCart}}> Add to Cart </button>
45. Modifier: track-on export default class CartAdder extends Component { @service metrics; @action addtoCart(...args) { this.metrics.track('Add to cart'); this.args.addToCart(...args); } }
46. Modifier: track-on <button {{on "click" @addToCart}} {{track-on "click" "Add to Cart"}} > Add to Cart </button>
47. “As someone told me lately: ‘Everyone deserves the chance to fly’” Defying Gravity
48. Modifier: flyover
49. • ember-tooltip by @sir-dunxalot • ember-attacher by @kybishop • ember-pop-over by @tim-evans (not updated since Jan 2018) Modifier: flyover
50. Modifier: flyover <SomeComponent> Hover for more info <EmberTooltip @side="right"> Here is the info! </EmberTooltip> </SomeComponent>
51. Modifier: flyover <SomeComponent> Hover for more info </SomeComponent> {{#if this.showFlyover}} <SomeTooltip> Here is the info! </SomeTooltip> {{/if}}
52. Modifier: flyover <SomeComponent {{on "mouseenter" (set this.showFlyover true)}} {{on "mouseleave" (set this.showFlyover false)}} > Hover for more info </SomeComponent> {{#if this.showFlyover}} <SomeTooltip> Here is the info! </SomeTooltip> {{/if}}
53. Modifier: flyover <SomeComponent {{on "mouseenter" (set this.showFlyover true)}} {{on "mouseleave" (set this.showFlyover false)}} {{launch—pad}} > Hover for more info </SomeComponent> {{#if this.showFlyover}} <SomeTooltip {{flyover}}> Here is the info! </SomeTooltip> {{/if}}
54. rapid fire!
55. “Why do you write like you're running out of time? Write day and night like you're running out of time?” Non-Stop
56. Modifier: autoresize
57. Modifier: autoresize <Textarea {{autoresize}} />
58. “Jaysus, that’s a jumbo! And now I'm adding this up We got thirty-eight planes ...holy shit!” 38 Planes
59. Modifier: did-resize
60. Modifier: did-resize <div {{did-resize this.didResize}}> Resize Amount: {{this.resizes}} Current Width: {{this.width}}px </div> This exists! Thanks @gmurphey ember install ember-did-resize-modifier
61. “I'll escape now from that world,
 from the world of Jean Valjean. Jean Valjean is nothing now — another story must begin!” Valjean’s Soliloquy
65. Modifier: focus-trap
66. Modifier: focus-trap <div {{focus-trap}}> <p> Here is a focus trap <a href="#">with some</a> <a href="#">focusable parts.</a> </p> <p> <button>Some button</button> </p> </div> This exists too! Thanks @josemarluedke ember install ember-focus-trap
67. Modifiers: the Camp
68. in defense of the ideas we filter
69. “I'm all alone (he's all alone) All by myself (except for me)” I’m All Alone
70. • Solves the problem of “prop drilling” with ephemeral services • Idea borrowed from ember-provider by @alexlafroscia • Relies on parentView (doesn’t exist in Glimmer?) • Conceptually similar to React Context Modifier: scoped
71. Modifier: scoped {{! templates/application.hbs }} <div {{scoped-provider "DocumentStore"}}> <MyFunkyComponent /> </div> {{!...somewhere deeply nested in MyFunkyComponent }} <div {{scoped-consumer "DocumentStore" (set this.documentStore _)}}> {{#each this.documentStore.docs as |doc|} } <Doc @doc={{doc}} /> {{/each}} </div>
72. • Looking on the bride side o’ life: it solves a real problem • What if you wormhole? • Maybe just another “global” :-| Modifier: scoped
73. “I'm gonna have ta gallop, because there is a gal up here Who's rustlin' up a herd of your love. So saddle up!” Ride ‘Em
74. Modifier: split-view
75. • This exists! ember-split-view-modifier • Thanks @bekzod • Uses split.js under-the-hood • Super easy to use Modifier: split-view
76. Modifier: split-view <div {{split-view sizes=(array 25 25 50)}}> <div class="col1"></div> <div class="col2"></div> <div class="col4"></div> </div>
77. • Split.js adds unmanaged elements • Conditional elements? • Would a Component-based API be better? Modifier: split-view
78. “Vibrations and something magnets And doo-be-diddly-pom-pom-pom I'll analyze your isotopes And something, something, quantum, quantum” Stuck
79. • The same as the on modifier • But it predicts! • Related Library: guess-js Modifier: predict-on
80. Modifier: predict-on <LinkTo @route="flowers" {{predict-on "click" (fn this.preload "flowers")}} > Flowers </LinkTo> <LinkTo @route="paint" {{predict-on "click" (fn this.preload "paint")}} > Paint </LinkTo>
81. • Machine Learning, something something, AI • I HAVE NO IDEA HOW TO DO THIS. Modifier: predict-on
82. rapid fire!
83. “Skeptical cats, Dispeptical cats Romantical cats, Pedantical cats Critical cats, Parasitical cats (…etc)” Jellicle Songs for Jellicle Cats
84. Modifier: ón <button {{on “click" this.doTheThing}}> Click me! </button>
85. Modifier: ón <button {{ón “click" this.doTheThing}}> Click me! </button>
86. Modifier: ón
87. F**************************** ***************************** ***************************** ***************************** ***************************** ***************************** ***********************k you! F**k You Talk
88. Modifier:
89. Modifier: <div class="container"> <div class="item"><p>6</p></div> <div class=“item”><p {{}}>7</p></div> <div class="item"><p>8</p></div> <div class="item"><p>9</p></div> <div class="item"><p>10</p></div> </div>
90. Modifier:
91. “And the way I keep my pinky up Indubitably proves That we got elegance.” Elegance
92. Modifier: pointy-cursor
93. Modifier: pointy-cursor <div {{pointy-cursor}}> <button {{pointy-cursor-target}}> Target Me! </button> </div>
94. …phew…
95. • Modifiers and their History • Creating Modifiers • Good Use Cases • Campy Use Cases Recap
96. Examples Here! github.com/spencer516/modifier-camp
97. • Small and isolated is good • Bigger Abstractions ≈ Component? • Experiment and share! Rules about Modifiers
98. Setup: “That’s a bad idea.” Comeback: “No, it’s a campy idea.”
99. if you find yourself saying “That’s a bad idea..”
100. …find a way to find some success in another’s passionate failure.
102. “Hold your Bat Boy, Touch your Bat Boy No more need to hide! Know your Bat Boy, Love your Bat Boy. Don’t deny your beast inside! Ah, ah — Aaaaaaa! Aaaaaaahhhh! Hold Me Bat Boy (Reprise)
103. Thanks!