New to Ember: What ARE All These Things?

New to Ember? So am I! What are all these things? A new code base often means unfamiliar words and paradigms. I definitely had my share in this Ember new world. When I saw mut, I thought of adorable dogs. When I saw can I thought of soup.

Eventually, I realized the mystery words are part of Ember addons! But with so many to learn, I was quickly overwhelmed. Let me walk you through my exploration of addons. How do you balance code time with addon learning time? From ember-a11y-testing to zoey, we’ll dig into Ember & its addons, and strategies for persistent, sustained learning anyone can rely on

Transcript

1. New to What are all of these things? Jennifer Wong @mybluewristband
2. The ABCs of Ember aka
3. ADD AN IMAGE OF CAT
4. MUSHROOM MUSHROOM!
7. WHAT IS EMBER? • Coming from a React background • Rock & Roll with Ember.js • Version 20180104 - lol oops! • Version 20180801 - yay! • Envoy administrative web app • The deep end…
10. A
12. A? • Array? • Function that creates an Ember.NativeArray from an Array-like object • Ember arrays allow you to use observable methods
13. A2
14. !!!
15. B
17. Basic Dropdown • “…why would you want to use a third party addon for such a simple thing?” • “Well, there are two kinds of people. Those who think that dropdowns are an easy thing and those who have actually built one.” • Indeed.
18. C
19. Thomas Altfather Good
20. Can • Simple authorization add-on for Ember • Abilities!
21. C2
23. Computed Property • Lets you declare functions as properties Erik Charlton DOES COMPUTE
24. C3
26. Changesets • https://github.com/poteto/ember- changeset • Set of valid changes to be applied onto any Object • Each change is tested against an optional validation, and if valid, the change is stored and applied when executed.
27. D
29. (Ember) Data • DS = Data Store • … I think? • “…a powerful set of tools for formatting requests, normalizing responses, and efficiently managing a local cache of data.”
32. Decorators! • Me: “Hmm people are really excited about this. It must be important.” • “…provide a set of decorators which can be used to write native classes with every standard feature that is available in Ember.”
33. E
34. Ember the Movie!
36. F
38. Flash Messages • https://github.com/poteto/ember-cli-flash • “…adds a simple flash message service and component to your app.” • Actually, Envoy’s homegrown flash messages! Chris Hunkeler
41. G
43. Glimmer • Glimmer is a rendering engine used in Ember. • “However, in order to build Ember apps, you don't need to know anything about Glimmer, other than it's super fast and that the contributors to the core codebase love to geek out about it.”
45. H
46. Helpers • Composable Helpers • Helpers that enable more declarative templating • Truth Helpers • HTMLBars template helpers for additional truth logic in if and unless statements • Test Helpers • A test-framework-agnostic set of helpers for testing Ember.js applications.
48. I
50. Inject (as Service) • A Service is an Ember object that lives for the duration of the application • Can be made available in different parts of your application. • Useful for features that require shared state or persistent connections.
51. J
52. JSON API Adapter • By default, Ember Data is designed to work out of the box with JSON:API. • JSON:API is a formal specification for building conventional, robust, and performant APIs. • Not an Ember-specific thing! • https://jsonapi.org/ Rodrigo Paredes
53. K
55. Ember.K I DON’T KNOW.
57. L
59. Link-to • Component! • Creates a link to a route! Gage Skidmore
60. M
61. Mirage
62. Mirage • A client-side server to help you build, test and demo your Ember app • A fake server that runs in the client, and can be used in both development and testing
63. M2
64. MUT(ATE)
65. N
66. Naming Conventions
67. N2
68. Names
69. O
71. Outlet • Each template will be rendered into the {{outlet}} of its parent route's template • Parents (templates) are an outlet for their children (templates) ;)
72. P
73. Power Select “This project aims to build a select component that has all the features of existing libraries but allows you to leverage Ember's primitives.”
74. ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹
76. Q
79. QUnit • QUnit • A JavaScript Unit Testing Framework • Ember QUnit • Provides QUnit-specific wrappers around ember-test-helpers Q S.C. Atkinson
80. R
82. RSVP • Simple tools for organizing asynchronous code • Created before Promises were in browser • “A tiny implementation of Promises/A+” Tim Pierce
83. S
85. • Ember CLI command • Starts the server. • Aliases: ember s, ember serve ember s(erver) Roberto Faccenda
86. T
88. • Ember Concurrency • An Ember Addon that makes it easy to write concise, robust, and beautiful asynchronous code • Task primitive ✨ Task
89. U
91. Utils
92. V
94. Ember View • https://www.emberjs.com/api/ember/2.8/ classes/Ember.View DEPRECATED
95. W
96. ???
98. Wormhole • Provides a component that allows for rendering a block to a DOM element somewhere else on the page. • …but why? • Because Ember Modal Dialog
99. ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹ ☹
101. X
102. X-Select • A select component based on the native HTML select that worked with Ember actions • Couldn’t use the native <select> • Mutant <select>
103. Y
104. ???
105. Yield • Block form components can be passed a Handlebars template • That template is rendered inside the component's template wherever the {{yield}} expression appears.
106. Z
107. Zoey!
109. How do we keep learning?
110. Learning! • Stay diligent! Ask questions! • Pop into the Discord! • Don’t be afraid to ask your coworkers! • Check out the Ember Guides! • Subscribe to The Ember Times! • Use Ember Observer! • Sign up for Ember Map!
111. Thanks to Bill, Chris, Eric, & Esteban Ryan, Steve, Tom, & Yohan
112. Thank you! Jennifer Wong @mybluewristband