The goal of the Emberella Component Blueprint project is to streamline the process of creating individual Ember components, modules, or "micro-projects."

It is intended as a starting point (or project template) for developers to build their own fully-tested, modular Ember Components.

Please report any issues you encounter while using the instructions provided here.

$ git clone [email protected]:realityendshere/emberella-component-blueprint.git

$ cd emberella-component-blueprint

$ npm install

reinitializing Git.

$ rm -R .git; git init

$ npm init

Follow the prompts to setup your project for NPM. Default values are in (parentheses).

name: (emberella-component-blueprint)
version: (0.0.0)
git repository:
keywords:
author:
license: (ISC)
Is this ok? (yes)

$ bower init

Follow the prompts to setup your project for Bower. Default values are in (parentheses).

Notes:

• You can probably leave "main file" blank.
• For module types, select amd and globals.

[?] name: (emberella-component-blueprint)
[?] version: (0.0.0)
[?] description:
[?] main file:
[?] what types of modules does this package expose?
[?] keywords:
[?] authors:
[?] license: (MIT)
[?] homepage:
[?] set currently installed components as dependencies? (y/N)
[?] add commonly ignored files to ignore list? (Y/n)
[?] would you like to mark this package as private which prevents it from being accidentally published to the registry? (y/N)
[?] Looks good? (Y/n)

Open the output.js file and provide your project with a global namespace and a package name.

// Replace with your own global namespace.
var MY_JS_GLOBAL_NAMESPACE = 'GlobalNamespace';

// Replace with your own package name.
var MY_JS_PACKAGE_NAME = 'replace-me';

Note: you will need to restart test'em (if it is running) for tests to pickup any changes to the global namespace

To begin development and testing of your component:

$ ./testem

With the testing server running, view the example component to see your component in a browser.

Your tests and component page will reload automatically when you save changes to your code.

To prepare your module for distribution:

$ ./grunt dist

My goal is ultimately to make Ember module and component development more ergonomic, approachable, and fun. By suggesting some guidelines and best practices for micro-project development, I hope the Ember community as a whole benefits from a broader ecosystem of well-built modules and components.

Other projects, like Ember CLI exist to jumpstart app development. If your goal is to create a reusable, fully-tested module for Ember, then a tool like Ember CLI seems like overkill. Wrangling the newest build tools to work together to develop, test, build, and release a small bit of code turned out to be a bigger challenge than I anticipated. This project will help you and others to get started building awesome components more rapidly.

Ember Components appear poised to empower developers to build modular, reusable bits of user interface. For example, IC Tabs provides WAI-ARIA accessible tabs for your Ember.js applications. It's relatively easy to consume the ic-tabs component using Bower ($ bower install ic-tabs), but developing or contributing to open source components like ic-tabs is slightly more challenging, often requiring multiple terminal screens.

I intend (not promise) to convert much of my own Ember code library, Emberella, into smaller modules to be consumed individually as desired by the Ember community. I want to use the latest build and testing tools (e.g. Grunt, Broccoli, and Test'em). I also want to make developing components as easy as possible for myself and anyone who feels they can contribute.

To me, running a single command, ./testem, to begin development work is the ideal scenario. In this one command:

• A Broccoli server will start and rebuild when it detects code changes
• Test'em will run tests and automatically re-run the tests each time Broccoli attempts to build
• The component becomes available at http://localhost:7357/examples/index.html and will automatically reload each time Broccoli builds

Similarly, one command, ./grunt dist, will build and test the component for distribution. In this one command:

• Broccoli will build the component for testing
• Test'em will run tests in multiple browsers
• Broccoli will build the component for distribution in AMD, Named AMD, CJS, and Global module formats (thanks to Ryan Florence's broccoli-dist-es6-module)

This strategy is all experimental. After all, Broccoli may change, ports may clash, and errors may occur outside the golden path. Even so, I hope you find this component template offers some inspiration in your own micro-projects.

This article by Addy Osmani provides some excellent advice on building excellent web components.

Jo Liss

Ryan Florence

And all the folks who've built or contributed to the dependencies for this project.