Fun with Ember Addons

Beginner talk for Ember ATX Meet Up 2/25/2016

Transcript

1. Fun with Ember Addons
2. Our goal for tonight Take you from…
4. …which causes…
6. to… I got this
7. Who am I? • Chris Bonser • Electrical engineer turned programmer • 4 kids Ages 6, 4, 2, 6mo… …all girls • twitter: @cmbonser • slack: @chbonser
8. Leadership knows the right stuff is getting done Contributors know how their work affects the big picture The business becomes predictable through, weekly predictive insights Join the Khorus at www.khorus.com/
9. Looking for…. • Ember Devs • Senior backend Rails Developer careers@khorus.com Khorus is Hiring
10. Why make an Addon? 30+ Categories on Ember Observer http://emberobserver.com/ This section of the docs on addon scenarios gives you a feel the scope of what is possible.
11. Why make an Addon? Let’s focus on creating a component
12. How? Ember CLI docs are your best friend http://ember-cli.com/extending/#developing-addons-and- blueprints
13. How? $ ember init addon-name … sometime before your next birthday (npm installs) and …
14. what the… file structure • app/ • addon/ • blueprints/ • public/ • test-support/ • tests/ • vendor/
15. These look familiar what the… file structure • app/ • addon/ • blueprints/ • public/ • test-support/ • tests/ • vendor/
16. New friends what the… file structure • app/ • addon/ • blueprints/ • public/ • test-support/ • tests/ • vendor/
17. “So I put my stuff in app/ right?” well… sometimes other times that causes…
18. generators to the rescue
19. app/ vs addon/ addon/ - part of the addon’s namespace app/ - merged with application namespace
20. let’s investigate app/ vs addon/ in the dummy app
21. app/ vs addon/ in the dummy app Example Add-on https://github.com/chbonser/magic-button Tag basic-magic-button extend component:magic-button $ ember g component magic-button --dummy
22. lets be repetitive addon/ - part of the addon’s namespace app/ - merged with application namespace TAKE TO HEART AND SAVE YOURSELF HOURS OF TEARS AND SUFFERING
23. Consuming Your Add-on Example App https://github.com/chbonser/fun-with-addons Tag install-magic-button
24. npm link 1. Add my-addon to your app’s package.json 2. my-addon-folder $ npm link 3. my-app-folder $ npm link my-addon & npm install When you are done 1. my-addon-folder $ npm unlink 2. my-addon-folder $ npm install https://docs.npmjs.com/cli/link
25. Livereload consuming app when addon changes
26. Extend in Consuming App Create a component of the same name $ ember g component magic-button We aren’t going to override the template so: $ rm app/templates/components/magic-button.hbs Extend! // app/components/magic-button.js import MagicButton from ‘magic-button/components/magic-button'; export default MagicButton.extend({ … });
27. get some style 6 year old: “that doesn’t match dad” Me: “What?! It looks fine.” 6 year old: “well, its not my fashional dad” 6 year old: (gives the look of death) Me: “uhh… well ‘fashional’ is not even a word” Me: “I’ll go change now”
28. Styles To import CSS… I like the advice here. Put it in “app/” but namespace it… app/styles/addon-name/main.css Then in the consuming app… // app/styles/app.css @import ‘addon-name/main.css’ Example tag: magic-button-with-style
29. Styles To import compiled SASS • put it in addon/styles/ • follow instructions at ember-cli-sass docs • compiles into app’s vendor.css file • PLUS: consuming app doesn’t even need to us SASS To import precompiled SASS • put it in app/styles/addon-name/ • add sass compiler dependencies in package.son • PLUS: consuming app can use the power of SASS to set variables, etc (see ember-paper) To style your dummy app • put it in tests/dummy/app/styles/ • import libraries via ember-cli-build.j (see example)
30. What the… config files? • package.json • devDependencies - dev specific • dependencies - consuming app will evaluate these • ember-cli-build.js - only for configuring the dummy app • index.js - Addon entry point (see Addon Hooks) • Default blueprint - Blueprint with the same name of the addon runs automatically Example: ember-paper, hammer.js bower dependency bower.json, default blueprint, index.js
31. Testing Just like normal app BUT acceptance test run against the dummy app
32. Sharing is Caring Publish using npm and git (a helpful gist) Use the demo app and github pages as demo/ docs. ember-cli-github-pages makes it so easy.
34. Evolution of an Ember Addon
35. ember-accordion Requirements • Classic accordion behavior (bootstrap example) • clicking on an item opens a panel and closes other sibling items • Un-classic requirements • Optionally allow multiple items to be open at once • An item can have multiple toggle buttons and panels • Components in a panel should be able to close the panel • Accordions should be nestable
36. ember-accordion First Version In app jQuery spaghetti
37. ember-accordion First Version In app jQuery spaghetti Version 0.0.1 (link) ember-accordion addon was born verbose, tightly coupled components
38. ember-accordion First Version In app jQuery spaghetti Version 0.0.1 (link) ember-accordion addon was born verbose, tightly coupled components Version 0.2 slimmer api, decoupled components, added action currying to close items
39. ember-accordion First Version In app jQuery spaghetti Version 0.0.1 (link) ember-accordion addon was born verbose, tightly coupled components Version 0.2 slimmer api, decoupled components, added action currying to close items Version 0.3 uses a service to slim down the api
40. ember-accordion github https://github.com/khorus/ember-accordion interactive docs http://khorus.github.io/ember-accordion/