Get started building your own custom components for Ember
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
app
test
.gitignore
Gruntfile.js
LICENSE
README.textile
package.json

README.textile

Ember Component Library Template

This template provides you with the basic project structure, build configuration and instructions to build your own custom component libraries for Ember.

Ember 1.0 finalized a new construct based on the upcoming Web Components standard called simply ‘Components’. Unlike traditional Ember Route-Controller-View interactions, an Ember Component is standalone and completely decoupled from the rest of the application. This decoupling is a critical attribute for building reusable components and large-scale, maintainable applications. It is a design pattern familiar to many who have built user interfaces in other languages and frameworks.

With Ember Components now available, we wanted to create a simple template for creating component libraries. Component libraries can be built to wrap non-ember Javascript components, extend the functionality of Ember Views, and provide collections of controls which have some common/shared interaction.

However, if you want to reuse your components between projects, you’ll need to extract your components into a distinct project, and have enough build infrastructure in place so that your library can be built, exported and made accessible by dependent applications. We scoured for an existing minimal template to provide this structure, but could not find it, so we built a barebones version ourselves.

Thanks to the Bootstrap for Ember team for providing us with a great starting point.

Project Structure

  • /app
    • /scripts
      • /components – the Ember.Component derived classes here
    • /templates
      • /components – handlebars or other templates providing the UI for your components (if needed)
  • /build – where the final minified version of JS library will end up
  • /test – create test containers/apps/pages for your ember components here

Getting Started

Clone this repo into your new project folder, then follow these steps:

git clone git@github.com:moonlight-labs/ember-component-library-template.git my-component-lib
  1. Install NPM, included in the NodeJS package
  2. cd into your new project directory
    cd my-component-lib
  3. Install grunt & dependencies
    npm install
  4. Build the project
    grunt
  5. Configure a Namespace for your components
    Find & replace all instances of ‘EmberComponentLibraryTemplate’ to ‘MyComponents’ or something similar that you want to use as the prefix for your components.
  6. Add Your Own Components
    Follow the locations, file naming and structural conventions of the HelloWorldComponent
  7. Rebuild the project using your new namespace and components
    grunt
  8. Test your components using the simple Ember Test app in /test/index.html

Ember Component Libraries Using this Template

  1. Ember Form Components via @garth – Validated input, password strength, email input, and more.
  2. Email us to get your project listed here

Credits