101 ways to use

in-repo-addons

in ember-cli

@jakebixby   

@trabus   

Senior Engineer at 

father

ember-cli contributor

tacofarian

Jake Bixby

in-repo-addons?

What are those?

Put simply, they're just addons that leverage your ember-cli project.

How to create them:

// from inside your project
ember g in-repo-addon my-addon

// installs into:
lib/my-addon/*

ember generate in-repo-addon <name>

How are they different from regular addons?

  • They live in your project's `lib` folder
  • No npm publishing
  • Extremely lightweight

Let's focus on a few of my favorite uses.

  • Addon hooks!!!
  • Code organization!
  • Addon prototyping!

Before diving in...

Why would I use an

in-repo-addon over a

regular addon?

Project Specific Use Cases

Addons that are only useful for your project.

Managing Vendor Libraries

Use addon hooks to better manage libraries that you don't control.

Organizing code

Keep your modules together by concern instead of polluting your app

Environmental Dependencies

Bring in dependencies based on environment. Great for stubbing test dependencies!

Quick Addon Prototyping

When you just want to get an idea out. Extract it into an addon later!

Addon Hooks

super powerful,
super useful

Broccoli Tree
Modification

The prescribed way to modify your app post-build with ember-cli

  • postProcessTree
  • treeFor (and direct treeFor hooks)

PreBuild and
PostBuild to Run Tasks

Any tasks you want to take care of pre or post build.

  • copy, move, delete files
  • symlinking
  • triggering task runners outside ember-cli via execSync

Server Middleware

Add Express middleware to your development* server. 

* this should only be used for development. `ember serve` should not be used in production!

Content-for Hook

(Conditionally) Insert your own content into the generated index.html

For instance, using it to stub analytics or environment data during development.

{{content-for 'head'}}
{{content-for 'head-footer'}}
{{content-for 'body'}}
{{content-for 'body-footer'}}

Included Hook

(Conditionally) include libraries in your build with the included hook.

For instance, you can use it to bring in

ember-cli-es5-shim for PhantomJS bind() support only when testing.

Asset Exclusion

postProcessTree provides processed app tree to modify. You can use it to conditionally exclude files from your build using Funnel().

includedCommands for Custom Commands

Lets you write custom commands for ember-cli that you can use in your project.

Code Organization

group the code that belongs together

// lib/navigation/addon/components/breadcrumb-nav.js
// lib/navigation/addon/templates/components/breadcrumb-nav.hbs

// lib/navigation/app/components/navigation/breadcrumb-nav.js

// app/templates/application.hbs
{{navigation/breadcrumb-nav path=path}}

Group like components in your addon(s), then import in a namespace

UI Namespacing

 

Overriding Ember

Compartmentalize your Ember overrides.

// lib/my-addon/addon/route-logger.js
export default Ember.Route.reopen({
  logHistory: Ember.on('activate', function(){
    console.log('ROUTE: ',this.get('routeName'));
  })
});
// app.js
import Ember from 'ember';
import Resolver from 'ember/resolver';
import loadInitializers from 'ember/load-initializers';
import config from './config/environment';
import 'my-addon/route-logger'; //<== your addon

var App;

App = Ember.Application.extend({
...

in-repo-engines?

In a future time, hopefully not

too far away...

Addon Prototyping

Instant addon development.

Refine inside your app

 Experiment and iterate with little to no risk, leverage your existing app for testing.

No npm linking

No need to setup your addon with npm link, it's already in your app.

Learn without exposure

Shy about your code? No problem. 

Extract when ready

 When you're ready to share your addon with the world, you can easily extract the code and drop it into an addon project!

How to create them:

// from inside your project
ember g in-repo-addon my-addon

// installs into:
lib/my-addon/*

ember generate in-repo-addon <name>

How to generate files inside them:

// from inside your project
ember g component foo-bar -ir my-addon

// generates:
lib/my-addon/addon/components/foo-bar.js
lib/my-addon/addon/templates/components/foo-bar.hbs
lib/my-addon/app/components/foo-bar.js

ember generate <blueprint> <name> -ir <addon-name>

Go forth and create!

Example repo at: 

https://github.com/trabus/addon-examples

Thanks for listening!

Questions?

 

@jakebixby

 

github.com/trabus

Made with Slides.com