{{should-avoid this.renderModifiers butHow=true}}

EmberFest, Paris, Day 1, Sept 22, 2022

The ember-render-modifiers README states that the modifiers are “very useful for quickly bridging the gap between classic components and Glimmer components, but they are still generally an anti-pattern.” It also says that you should “rethink your functionality rather than use these modifiers as a crutch.”.

However, the README doesn’t give any real guidance on what we should do instead.

In this talk I’m explain why these modifiers are problematic and explore the two main use cases I’ve seen ember-render-modifiers used for and how we can go about replacing them with modern Ember patterns that will set us up for success in the future. And finally, after this talk, we’ll have a resource to which we can point future engineers when they scratch their heads about how to avoid these modifiers.

Transcript

1. Paris Ember Fest 2022
2. @grandazz achambers
3. Inspiration
4. Inspiration
5. Inspiration
6. Modifiers 101
7. Modifiers 101
8. Modifiers 101
9. Modifiers 101
10. Modifiers 101
11. Goal for this talk… What are render-modifiers and why do they exist? What are the alternatives? Why are render-modifiers discouraged?
12. Goal for this talk… What are render-modifiers and why do they exist? Why are render-modifiers discouraged? What are the alternatives?
13. Goal for this talk… What are render-modifiers and why do they exist? Why are render-modifiers discouraged? What are the alternatives?
14. Goal for this talk… What are render-modifiers and why do they exist? Why are render-modifiers discouraged? What are the alternatives?
15. Today (v4.7) Classic Components (v1.0.0-rc6) Glimmer Components (v3.15)
16. Today (v4.7) Glimmer Components (v3.15) Classic Components (v1.0.0-rc6)
17. Today (v4.7) Glimmer Components (v3.15) Classic Components (v1.0.0-rc6)
18. Classic Component Lifecycle Hooks
19. Classic Component Lifecycle Hooks On Initial Render
20. Classic Component Lifecycle Hooks On Re-Render
21. Classic Component Lifecycle Hooks On Component Destroy
23. Glimmer Component Lifecycle
24. Classic Component Glimmer Component
25. {{did-insert}} didInsertElement() didUpdateAttrs() willDestroyElement() {{did-update}} {{will-destroy}}
26. Example Time
27. We’ll look at… Initializing a 3rd party lib Registering event listeners Data fetching/re-fetching
28. ? Initializing a library
29. Classic Component Initializing a library
30. Classic Component Initializing a library
31. Classic Component Initializing a library
32. Classic Component Initializing a library
33. Classic Component Initializing a library
34. Glimmer Component (with render-modifiers) Initializing a library
35. Glimmer Component (with render-modifiers) Initializing a library
36. Glimmer Component (with render-modifiers) Initializing a library
37. Glimmer Component (with render-modifiers) Initializing a library
38. Glimmer Component (with render-modifiers) Initializing a library
39. Glimmer Component (with render-modifiers) Initializing a library
40. Glimmer Component (with render-modifiers) Initializing a library Unused DOM element passed to will-destroy function Setup/Teardown of the calendar is not logically grouped together Unnecessary DOM element
41. Initializing a library Glimmer Component (with custom-modifiers)
42. Initializing a library Glimmer Component (with custom-modifiers)
43. Initializing a library Glimmer Component (with custom-modifiers)
44. Initializing a library Glimmer Component (with custom-modifiers)
45. Initializing a library Glimmer Component (with custom-modifiers)
46. Initializing a library Encapsulation of behaviour in logical package Glimmer Component (with custom-modifiers) Sensible separation of concerns No unnecessary DOM elements
47. When interacting with DOM elements, use custom modifiers Initializing a library Takeaway
48. Adding/Removing Event Listeners ?
49. Classic Component Adding/Removing Event Listeners
50. Classic Component Adding/Removing Event Listeners
51. Classic Component Adding/Removing Event Listeners
52. Glimmer Component (with render-modifiers) Adding/Removing Event Listeners
53. Glimmer Component (with render-modifiers) Adding/Removing Event Listeners
54. Glimmer Component (with render-modifiers) Adding/Removing Event Listeners
55. Glimmer Component (with render-modifiers) Adding/Removing Event Listeners
56. Glimmer Component (with render-modifiers) Adding/Removing Event Listeners Unused DOM element passed to functions Setup/Teardown not logically grouped together Unnecessary DOM element
57. Glimmer Component (with component hooks) Adding/Removing Event Listeners
58. Glimmer Component (with component hooks) Adding/Removing Event Listeners
59. Glimmer Component (with component hooks) Adding/Removing Event Listeners
60. Glimmer Component (with component hooks) Adding/Removing Event Listeners
61. Glimmer Component (with component hooks) Adding/Removing Event Listeners
62. Adding/Removing Event Listeners Glimmer Component (with component hooks) Encapsulation of behaviour in logical package Registering destructor instead of relying on lifecycles No unnecessary DOM elements
63. Adding/Removing Event Listeners When adding/removing event listeners, use component’s constructor and register a destructor function. (or use a custom modifier) Takeaway
64. ? Fetching/ Re-Fetching Data
65. Fetching/ Re-Fetching Data Classic Component
66. Fetching/ Re-Fetching Data Classic Component
67. Fetching/ Re-Fetching Data Classic Component
68. Fetching/ Re-Fetching Data Classic Component
69. Fetching/ Re-Fetching Data Classic Component
70. Fetching/ Re-Fetching Data Classic Component
71. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
72. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
73. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
74. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
75. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
76. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
77. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers)
78. Fetching/ Re-Fetching Data Glimmer Component (with render-modifiers) Unused DOM element passed to functions Fetch/Re-fetch not logically grouped together Unnecessary DOM element Eagerly fetched
79. Fetching/ Re-Fetching Data Glimmer Component (with resources)
80. Fetching/ Re-Fetching Data Glimmer Component (with resources)
81. Fetching/ Re-Fetching Data Glimmer Component (with resources)
82. Fetching/ Re-Fetching Data Glimmer Component (with resources)
83. Fetching/ Re-Fetching Data Glimmer Component (with resources)
84. Fetching/ Re-Fetching Data Glimmer Component (with resources)
85. Fetching/ Re-Fetching Data Glimmer Component (with resources) Reactivity Fetching behaviour bundled into shareable resource No unnecessary DOM elements Lazy loaded/executed
86. Fetching/ Re-Fetching Data https://github.com/NullVoxPopuli/ember-resources Prefer Resources, which are reactive and lazily executed and encapsulate behaviour that is easily shareable. Takeaway
87. Summary
88. Render Modifiers are a bridge
89. 3 use cases… DOM interaction Adding/removing event listeners Fetching data
90. Instead of render-modifiers consider… Custom modifiers Component constructor and registerDestructor Resources DOM interaction Adding/removing event listeners Fetching data
91. Do I have to remove ember-render-modifiers?
92. One final thought
93. One final thought Think not in terms of component lifecycles Think in terms of encapsulated behaviour
94. https://nullvoxpopuli.com/avoiding-lifecycle “Avoiding Lifecycle in Components”
95. https://youtu.be/jQY32hRqBzo “What’s the hard thing TIMING about async?”
96. Thanks for having me
97. Thank you @grandazz achambers