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.
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.
- /components – the Ember.Component derived classes here
- /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
Clone this repo into your new project folder, then follow these steps:
git clone firstname.lastname@example.org:moonlight-labs/ember-component-library-template.git my-component-lib
- Install NPM, included in the NodeJS package
- cd into your new project directory
- Install grunt & dependencies
- Build the project
- 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.
- Add Your Own Components
Follow the locations, file naming and structural conventions of the HelloWorldComponent
- Rebuild the project using your new namespace and components
- Test your components using the simple Ember Test app in /test/index.html
Ember Component Libraries Using this Template
- Ember Form Components via @garth – Validated input, password strength, email input, and more.
- Email us to get your project listed here