Creating Your First #EmberJS Add-On
-
Upload
tracy-lee -
Category
Technology
-
view
798 -
download
1
Transcript of Creating Your First #EmberJS Add-On
![Page 1: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/1.jpg)
Material Design
{{ Creating your first add-on }}
{{! - -A step-by-step guide to adding more rainbows to your life. - - }}
@ladyleet
![Page 2: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/2.jpg)
What are we going to talk about today?
@ladyleet
Why add-ons are great!
How I built i-love-rainbows.herokuapp.com
Things to think about when creating an add-on.
Getting started with creating an add-on.
Extracting/refactoring code from your app for add-ons.
Differences between ember apps and ember add-ons.
Publishing & using your add-on.
![Page 3: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/3.jpg)
Material Design{{ Add-ons are = “great!” }}
@ladyleet
![Page 4: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/4.jpg)
Composable - easy to add isolated pieces of code to your app.
Leverage community expertise and let domain experts
implement code.
Create best practices (ex. ember-data, ember-cli-deploy, ember-cli-mirage).
Reusability and shareability across code bases.
Why add-ons are great.
@ladyleet
![Page 5: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/5.jpg)
Add-ons can be fun too.
@ladyleet
coin-clicks rainbow-tail
On a page, input konami code. click anywhere, and mario coins
pop out of your mouse! Mario coin click sound is also present.
Disappears after 10 clicks of the mouse.
www.npmjs.com/package/coin-clicks
On a page, add {{rainbow-tail}}. Specify the class you want the rainbow-tail to be triggered by. Upon clicking on the selector,
a rainbow tail will appear for a short moment. :)
www.npmjs.com/package/rainbow-tail
![Page 6: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/6.jpg)
Material Design{{ Why am I telling you all this? }}
@ladyleet
![Page 7: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/7.jpg)
{{Tracy Lee}}
@ladyleet github.com/ladyleet modern-web.org [email protected]
@ladyleet
Hello! Nice to meet you!
![Page 9: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/9.jpg)
Material Design{{ I learned how to code less than a year ago. }}
@ladyleet@ladyleet
![Page 10: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/10.jpg)
Material Design{{ And have been doing it part-time since. }}
@ladyleet@ladyleet
![Page 11: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/11.jpg)
Material Design{{ With ember, things are easy. }}
@ladyleet@ladyleet
![Page 12: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/12.jpg)
Material Design{{ And I love the add-on ecosystem. }}
@ladyleet@ladyleet
![Page 13: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/13.jpg)
Material Design{{ I like to make fun apps. }}
@ladyleet@ladyleet
![Page 14: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/14.jpg)
![Page 15: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/15.jpg)
Material Design{{! - - Notes before you get started
with add-ons… - - }}
@ladyleet@ladyleet
![Page 16: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/16.jpg)
Notes to consider with add-ons.
@ladyleet
Create add-ons when you find repeatable patterns that could benefit across multiple apps.
Check emberaddons.com and emberobserver.com to see if it’s
been implemented already.
Add-ons don’t have to be public. Create private addons & use them
by pointing to a git repository.
In-app add-ons isolate implementation details from
business logic to test.
![Page 17: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/17.jpg)
Material Design{{ Here’s how I implemented
my rainbow-tail add-on. }}
@ladyleet@ladyleet
![Page 18: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/18.jpg)
Material Design
{{! - - I created this while pairing with @spencer516 & @jeremy_w_rowe.
The total process of creating the app, extracting and refactoring, and publishing this add-on
took 3 hours. - - }}@ladyleet@ladyleet
![Page 19: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/19.jpg)
Creating my hbs file.
@ladyleet
![Page 20: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/20.jpg)
Material Design{{ I needed to add the functionality
of a rainbow-tail in my app. }}
@ladyleet@ladyleet
![Page 21: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/21.jpg)
@ladyleet
Created a component in my app.
Creates action on mouse move
Calls hook, listens for clicks on rainbowClass.
Ensures multiple instances of component don’t share the same array and draws. Counter of how many times rainbow-tail
has been drawn.
![Page 22: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/22.jpg)
@ladyleet
Created a component in my app.
Tail coordinates.
How long I want the tail to show up for.
Resets tail after a # of draws.
![Page 23: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/23.jpg)
@ladyleet
Component for the actual tail.
Minimal CSS needed.
![Page 24: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/24.jpg)
@ladyleet
![Page 25: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/25.jpg)
Material Design{{ Extracting and refactoring my code
to create an add-on }}
@ladyleet@ladyleet
![Page 26: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/26.jpg)
Material Design{{ What’s it like to create an add-on? }}
@ladyleet@ladyleet
![Page 27: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/27.jpg)
@ladyleet
What’s it like to create an add-on?
Creating an add-on feels very much like developing an ember app.
You approach problems the same way.
Similar structure as a normal ember app.
You get all the build tools you’d normally get with building an ember app.
![Page 28: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/28.jpg)
Material Design
Ember-CLI
ember addon $ {name-of-project}
@ladyleet@ladyleet
![Page 29: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/29.jpg)
The file structure of an add-on.Add-on directory -where the source code of the add-on lives.
App directory - references your add-on source files for namespacing purposes.
Dummy app for testing. @ladyleet
![Page 30: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/30.jpg)
Material Design
{{! - - If your add-on has a component or template, make sure to ember-install
ember-cli-htmlbars.
Not defaulted to make add-ons lighter weight - - }}
@ladyleet@ladyleet
![Page 31: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/31.jpg)
Material Design
{{ HTMLBars dependencies in package.json }}
Move the following lines from devDependencies to dependencies.
"ember-cli-htmlbars": “1.0.2", "ember-cli-htmlbars-inline-precompile": "^0.3.1"
@ladyleet@ladyleet
![Page 32: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/32.jpg)
Differences between my in-app component and add-on code.
@ladyleet
Specifying layout – (ember-cli automatically does this for you) – import layout from the addon templates directory vs the app templates directory.
In add-ons, make sure no prototype extensions are used. In this case, I couldn’t use a javascript array because pushObject
is not available and had to refactor the code from array to ember array.
![Page 33: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/33.jpg)
Differences between my in-app component and add-on code.
Import your add-on’s CSS in the index.js file.
Your add-on’s CSS should go in the vendor folder and be named the same as your add-on.
@ladyleet
![Page 34: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/34.jpg)
Material Design{{ Publishing your add-on! }}
@ladyleet@ladyleet
![Page 35: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/35.jpg)
Material Design
{{ Sign-up for npm if you don’t have an account. }}
www.npmjs.com/signup
@ladyleet@ladyleet
![Page 36: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/36.jpg)
Material Design{{ Edit your package.json before you publish. }}
@ladyleet@ladyleet
![Page 37: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/37.jpg)
Add author & MIT license.
Add version.
Change description.
Change repository to the proper git repository.
Editing your package.json.
@ladyleet
![Page 38: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/38.jpg)
Material Design
{{ Publishing your add-on! }}
$ git add . $ git commit -m “your message here” $ git push $ npm publish
@ladyleet@ladyleet
![Page 39: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/39.jpg)
Material Design{{ Then, install your add-on in an app! }}
@ladyleet@ladyleet
![Page 40: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/40.jpg)
Material Design$ cd {app-name} $ ember install {{rainbow-tail}}
@ladyleet@ladyleet
![Page 41: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/41.jpg)
@ladyleet
What the add-on looks like in your code.
![Page 42: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/42.jpg)
@ladyleet
![Page 43: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/43.jpg)
What we learned today!
@ladyleet
Why add-ons are great!
How I built i-love-rainbows.herokuapp.com
Things to think about when creating an add-on.
Getting started with creating an add-on.
Extracting/refactoring code from your app for add-ons.
Differences between ember apps and ember add-ons.
Publishing & using your add-on.
![Page 44: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/44.jpg)
Material Design<em> But wait, there’s more… </em>
@ladyleet@ladyleet
![Page 45: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/45.jpg)
@ladyleet
![Page 46: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/46.jpg)
@ladyleet
![Page 47: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/47.jpg)
@ladyleet
![Page 48: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/48.jpg)
@ladyleet
![Page 49: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/49.jpg)
Material Design
Links Rainbow-tail add-on https://github.com/ladyleet/rainbow-tail
App using add-on http://i-love-rainbows-with-addon.herokuapp.com/ https://github.com/ladyleet/i-love-rainbows-with-addon
App without add-on http://i-love-rainbows.herokuapp.com/ https://github.com/ladyleet/rainbow-tail-app
Me! http://modern-web.org http://twitter.com/ladyleet [email protected] @ladyleet@ladyleet
![Page 50: Creating Your First #EmberJS Add-On](https://reader031.fdocuments.net/reader031/viewer/2022030300/5880c9791a28abba3b8b6f3d/html5/thumbnails/50.jpg)
{{ Tracy Lee }}
@ladyleet github.com/ladyleet modern-web.org [email protected]
@ladyleet
Thank you! See you online :)