Chris Masters chrism

Ember Addon Essentials

This document is meant to be a brief "checklist" of things to setup for your Ember addon when beginning development in order to have the best possible architecture and workflow out of the gate. For more comprehensive material, the following are bookshelf-caliber:

Ember CLI's Official Addon Guide
Ember Addon Secrets - Written around the Ember 2.6 era, this article takes a much deeper dive into several of the topics mentioned here.

Filling out `package.json`

Recently, I upgraded from ember-qunit 0.3.1 to 0.3.2. The main reason I wanted to upgrade was to take advantage of a new way of writing component tests.

Previously, there was no way to test how the component was actually used. A component test could instantiate a component and poke at its internals, but that isn't how we use components. We use them declaratively in templates. The old style also meant it was difficult to test block templates and impossible to test block parameters.

I really wanted the new test style, but it wasn't easy to get there. The following are my upgrade notes.

Gotcha: `moduleForComponent` Requires Three Arguments

Many of my old component tests looked like

This post is also on my blog, since Gist doesn't support @ notifications.

Components are taking center stage in Ember 2.0. Here are some things you can do today to make the transition as smooth as possible:

Use Ember CLI
In general, replace views + controllers with components
Only use controllers at the top-level for receiving data from the route, and use Ember.Controller instead of Ember.ArrayController or Ember.ObjectController
Fetch data in your route, and set it as normal properties on your top-level controller. Export an Ember.Controller, otherwise a proxy will be generated. You can use Ember.RSVP.hash to simulate setting normal props on your controller.

	Testing drag-and-drop

	Phil Gengler
	@pgengler
	Ember NYC
	April 28, 2016

	var walkSync = require('walk-sync');
	var recast = require('recast');
	var builders = recast.types.builders;
	var types = recast.types.namedTypes;
	var recast = require('recast');
	var babel = require('babel-core');
	var fs = require('fs');
	var path = require('path');

	console.log('fixing file', process.argv[2]);

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Filtering hasMany Async Relationships in Ember</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://builds.emberjs.com/tags/v2.1.0/ember-template-compiler.js"></script>
	<script src="http://builds.emberjs.com/tags/v2.1.0/ember.js"></script>
	<script type="text/javascript" src="http://builds.emberjs.com/tags/v2.1.0/ember-data.js"></script>

	function scalePathUp(path, num) {
	// make sure num is > 0 and DOM element path has "d" attribute
	if ( num <= 0 \|\| typeof path.getAttribute("d") !== "string" ) {return false;}

	var coords = [],
	fragmentsAr = [],
	idx,
	jdx,
	kdx,
	lettersAr = [],

	# -- mode: ruby --
	# vi: set ft=ruby :
	#
	# Created by Jonathan Jackson
	# ( Special thanks to @pwelch for the help )

	Vagrant.configure(2) do \|config\|
	MEMORY = ENV['VAGRANT_MEMORY'] \|\| '1024'
	CORES = ENV['VAGRANT_CORES'] \|\| '2'

	This requires `brew install jq` which is a command json query.

	I got this from @krisselden

	require 'oauth'
	require 'httpclient'
	require 'json'

	class SimpleTwitter
	def initialize(config)
	@config = config
	@http_client = HTTPClient.new
	end

Chris Masters chrism

Ember Addon Essentials

Filling out package.json

Gotcha: moduleForComponent Requires Three Arguments

Filling out `package.json`

Gotcha: `moduleForComponent` Requires Three Arguments