creating your first #emberjs add-on
TRANSCRIPT
Material Design
{{ Creating your first add-on }}
{{! - -A step-by-step guide to adding more rainbows to your life. - - }}
@ladyleet
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.
Material Design{{ Add-ons are = “great!” }}
@ladyleet
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
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
Material Design{{ Why am I telling you all this? }}
@ladyleet
{{Tracy Lee}}
@ladyleet github.com/ladyleet modern-web.org [email protected]
@ladyleet
Hello! Nice to meet you!
Material Design{{ I learned how to code less than a year ago. }}
@ladyleet@ladyleet
Material Design{{ And have been doing it part-time since. }}
@ladyleet@ladyleet
Material Design{{ With ember, things are easy. }}
@ladyleet@ladyleet
Material Design{{ And I love the add-on ecosystem. }}
@ladyleet@ladyleet
Material Design{{ I like to make fun apps. }}
@ladyleet@ladyleet
Material Design{{! - - Notes before you get started
with add-ons… - - }}
@ladyleet@ladyleet
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.
Material Design{{ Here’s how I implemented
my rainbow-tail add-on. }}
@ladyleet@ladyleet
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
Creating my hbs file.
@ladyleet
Material Design{{ I needed to add the functionality
of a rainbow-tail in my app. }}
@ladyleet@ladyleet
@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.
@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.
@ladyleet
Component for the actual tail.
Minimal CSS needed.
@ladyleet
Material Design{{ Extracting and refactoring my code
to create an add-on }}
@ladyleet@ladyleet
Material Design{{ What’s it like to create an add-on? }}
@ladyleet@ladyleet
@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.
Material Design
Ember-CLI
ember addon $ {name-of-project}
@ladyleet@ladyleet
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
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
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
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.
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
Material Design{{ Publishing your add-on! }}
@ladyleet@ladyleet
Material Design
{{ Sign-up for npm if you don’t have an account. }}
www.npmjs.com/signup
@ladyleet@ladyleet
Material Design{{ Edit your package.json before you publish. }}
@ladyleet@ladyleet
Add author & MIT license.
Add version.
Change description.
Change repository to the proper git repository.
Editing your package.json.
@ladyleet
Material Design
{{ Publishing your add-on! }}
$ git add . $ git commit -m “your message here” $ git push $ npm publish
@ladyleet@ladyleet
Material Design{{ Then, install your add-on in an app! }}
@ladyleet@ladyleet
Material Design$ cd {app-name} $ ember install {{rainbow-tail}}
@ladyleet@ladyleet
@ladyleet
What the add-on looks like in your code.
@ladyleet
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.
Material Design<em> But wait, there’s more… </em>
@ladyleet@ladyleet
@ladyleet
@ladyleet
@ladyleet
@ladyleet
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
{{ Tracy Lee }}
@ladyleet github.com/ladyleet modern-web.org [email protected]
@ladyleet
Thank you! See you online :)