creating your first #emberjs add-on

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 tracy@modern-web.org

@ladyleet

Hello! Nice to meet you!

venturehacked.com

@ladyleet

This is what I do for fun.

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 tracy@modern-web.org @ladyleet@ladyleet

{{ Tracy Lee }}

@ladyleet github.com/ladyleet modern-web.org tracy@modern-web.org

@ladyleet

Thank you! See you online :)