Repo as a blueprint (boilerplate) for authoring components to distribute

1

Anyone interested in building components for sharing? It would be awesome to have a common set of tools and common way to distribute Ember Components. I think we would all benefit from shared resources for building applications.

Emberella Component Blueprint: A recipe for creating structured, tested, reusable,Ember components https://github.com/realityendshere/emberella-component-blueprint (by Dana Franklin)

  • Simple Install
  • Start development/testing cycle easily
  • Build package for (amd, cjs, global) distribution easily

Component example https://github.com/realityendshere/emberella-cube-component …built with emberella-component-blueprint (test/build friendly tools) Also, using these tools a microlib (service + components): https://github.com/pixelhandler/ember-bucket

From the emberella-component-blueprint README:

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 agree with… “Whenever the component packaging for #emberjs gets figured out: game over.” –Brian Cardarella, CEO of DockYard https://twitter.com/bcardarella/status/456864844554452992 I hope the blueprint project helps reach the goal of common component packaging.

5 Likes
2

I would definitely be interested in this. I saw on an Ember Weekly email a few months back that someone had been building a site where Ember components could be shared, but I’m not sure how that turned out. In any case, I don’t think it was geared towards actual distribution like you’re suggesting, mostly just code samples.

3

What I like about this blueprint is that it makes me happy to have tooling for:

  • a test runner using testem,
  • setup for using ember-qunit,
  • an example component using a custom container for testing
  • live reload
  • simple setup, install with npm install
  • broccoli setup for distributing amd, cjs, global versions using ./grunt dist
  • broccoli setup for using sass, coffee too
  • simple to launch, ./testem kicks off, and reloads when broccoli rebuilds, uses broccoli watcher for app changes and testem watched test files
  • an example app to share working demo served on same port as testem
  • tests execute on http://localhost:7357/
  • example app at http://localhost:7357/examples/index.html
  • authoring with es6 modules
  • using ic-styles
  • Travis CI works using ./node_modules/.bin/testem ci

I used the blueprint for this project https://github.com/pixelhandler/ember-bucket and I was very happy developing a micro lib with this blueprint setup.

My questions for anyone creating and sharing Ember components are:

  • Are you using a custom tagname for your component?
  • How about using ic-styles for the css?
  • Travis ci setup?
  • How about using testem to drive the tests?
  • How about distributing amd, cjs, along with global?

As a community if we come up with a strong boilerplate for authoring and distributing Ember Components we are all better off.

2 Likes