Alex Zirbel
Using Ember since 2012!
Keeping up to date
bower install --save ember-table
bower install --save ember-table
...Doesn't seem to be working.
Ah, console claims EmberTable is not found
Include ember-table.js in index.html/app.js
Fix erroneous include order
...Hmm, doesn't look quite right
Include CSS files
...Functionality seems broken
Install and include all dependencies, some undocumented
Works!
ember new app-name
ember server
ember install
app/
dist/
public/
tests/
vendor/
Brocfile.js
bower.json
package.json
app/
addon/
blueprints/
tests/
vendor/
Brocfile.js
package.js
index.js
app/
Merged with app's namespace
addon/
Addon's namespace
addon-side export default SelectComponent app-side import SelectComponent from 'select-component/components/select'
bower.json "dependencies": {"some-library": "1.1"} index.js module.exports = { included: function(app) { app.import(app.bowerDirectory + '/some-library/lib.js'); } }
Old Way
dist/ folder
New Way: Broccoli
minification
LESS/SASS compilation
Coffeescript compilation
package.json "keywords": [ "ember-addon", ... ] www.emberaddons.com
ember install:addon addon-name
app/
dist/
gh_pages/
tests/
src/
vendor/
Gruntfile.js
bower.json
package.json
<!-- Note that you need antiscroll CSS to support ember-table -->
<link rel="stylesheet" href="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<link rel="stylesheet" href="http://rawgit.com/Addepar/ember-table/v0.4.0/dist/ember-table.css">
<!-- Ember and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.js"></script>
<script src="http://builds.emberjs.com/tags/v1.4.0/ember.js"></script>
<!-- Ember Table and dependencies -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.js"></script>
<script src="http://rawgit.com/LearnBoost/antiscroll/master/antiscroll.js"></script>
<script src="http://rawgit.com/Addepar/ember-table/v0.4.0/dist/ember-table.js"></script>
ember addon ember-table
{
"name": "ember-table",
"version": "0.2.3",
"dependencies": {
"handlebars": "~1.3.0",
"jquery": "^1.11.1",
"ember": "1.7.0",
},
"devDependencies": {
"ember-table": "0.2.3"
}
}
bower.json
module.exports = {
// Hack for previous versions of Ember CLI
normalizeEntityName: function() {},
afterInstall: function(options) {
return this.addBowerPackageToProject('ember-table');
}
};
blueprints/ember-table/index.js
'use strict';
module.exports = {
name: 'ember-table',
included: function(app) {
this._super.included(app);
app.import(app.bowerDirectory + '/antiscroll/antiscroll.js');
app.import(app.bowerDirectory + '/antiscroll/antiscroll.css');
app.import(app.bowerDirectory + '/jquery-ui/ui/jquery-ui.custom.js');
app.import(app.bowerDirectory + '/jquery-mousewheel/jquery.mousewheel.js');
app.import(app.bowerDirectory + '/ember-table/dist/ember-table.js');
app.import(app.bowerDirectory + '/ember-table/dist/ember-table.css');
}
};
index.js
export default Ember.Table.ColumnDefinition;
addon/column-definition.js
export default Ember.Table.EmberTableComponent;
app/components/ember-table.js
ember install:addon ember-table
# Which does:
npm install --save ember-table
ember generate ember-table
app/
dist/
gh_pages/
tests/
src/
vendor/
Gruntfile.js
bower.json
package.json
app/
addon/
blueprints/
tests/
dummy/
app/
config/
public/
vendor/
Brocfile.js
package.js
index.js
app/
dist/
gh_pages/
tests/
src/
vendor/
Gruntfile.js
bower.json
package.json
app/
addon/
blueprints/
tests/
dummy/
app/
config/
public/
vendor/
Brocfile.js
package.js
index.js
app/
dist/
gh_pages/
tests/
src/
vendor/
Gruntfile.js
bower.json
package.json
app/
addon/
blueprints/
tests/
dummy/
app/
config/
public/
vendor/
Brocfile.js
package.js
index.js
import TableComponent from 'ember-table/components/table-component';
export default TableComponent;
app/components/ember-table.js
Optionally, re-export in the app namespace
import TableComponent from 'ember-table/components/table-component';
import ColumnDefinition from 'ember-table/column-definition';
...
Ember.Table.EmberTableComponent = TableComponent;
Ember.Table.ColumnDefinition = ColumnDefinition;
...
globals/ember-table.js
Optionally, add a globals build
Publish to NPM
(For ember-table - coming soon!)
ember install:addon ember-table
This presentation
Addepar