Why ember addons?

Ember components have been widely used since the beginning to separate out independent functionality and use it again at different places.

Why are components useful?

  • Reuse code in apps
  • Modular structure
  • Share with ember community

But there can be problems like:

  • Using components in apps
  • Global Namespacing
  • Dependencies
  • Compilation
  • Discovery

 

But we are lucky to have ember addon now.

ember addon demo-addon // creates ember addon with the name demo-addon

There is difference between normal ember app and ember addon.

App file structure:

app/

dist/

public/

tests/

vendor/

Brocfile.js

Package.json

Bower.json

 

Addon file structure:

app/

addon/

blueprints/

tests/

vendor/

Brocfile.js

package.js

index.js

 

There are 2 folders in ember addon: app and addon. app folder is not same as in app file structure.

We can put library code for our apps in both app and addon folder.

The difference is if we put code in addon folder, it will be part of addon namespace. If we put code in app folder, then when someone installs our library, all of that code will be merged with the application namespace which basically means that user won’t have to use the include statement to get at our code whereas if we put it in addon folder, they have to include from component library specifically.

Blueprint folder is a place that we put code that will help our addon install. So, when somebody wants to use our library, they will install it and should be like a single command and then our addon should do bunch of work to set up everything it needs to do and so, we can put code that does that in blueprints.

Tests folder is a place to put our dummy application.

 

How ember addon solves our problem?

GlobalNamespacing

The global namespacing problem is solved by putting relevant code in app or addon folder.

App -> merged with app’s namespace

Addon -> addon’s namespace

Addon side:

export default SelectComponent

App side:

import SelectComponent from select-component/components/select

 

Dependencies

bower.json

“dependencies”: {“some-library”: “1.1”}

We can spececify dependencies we have here in bower.json.

 

index.js

module.exports = {

  included: function(app){

    app.import(app.bowerDirectory + ‘/some-library/lib.js’);

  }

}

 

index.js is entry point for our add on. We have included hook where we can specify to host app, the library to be installed.

The reason we have to do this is that ember addons are installed by npm and they are not really aware of bower. So, to tell our hosts app, that it needs to have something installed for our bower, it’s available via included hook.

 

Compilation

Old way: dist/ folder

New way: brocolli which has an edge because:

  • Minification
  • LESS/SASS compilation
  • Coffeescript compilation
  • Discovery

 

package.json

“keywords”: [

  “ember-addon”,

  ...

]

 

www.emberaddons.com

 

ember install:addon addon-name // this is new command that does npm install.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s