Ivan AmilKey

CRUD with Ember (+ Data)

Ember's official documentation describes a number of low-level APIs, but doesn't talk much about how to put them together. As a result, a simple task such as creating a simple CRUD application is not obvious to a newcomer.

Ember Best Practices

Some thoughts and ideas on best practices building Ember apps after 2 years building and maintaining 6+ apps. This is less about the obvious best practices, like use ember-cli, and more along the lines of when to use what technique. As with every best practice there are exceptions to every rule.

Ember data

Ember data relationships

Routing

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

Data Down / Actions Up
- http://emberjs.jsbin.com/nayaho/edit?html,js - Interdependent select boxes. No observers.
- http://ember-twiddle.com/2d7246875098d0dbb4a4 - One Way Input
Plain JSBin's
- http://rwjblue.jsbin.com/pixeki/edit?html,js,output
Ember Version Base JSBin's
- 1.0 - http://emberjs.jsbin.com/juluje/edit?html,js,output
1.1 - http://emberjs.jsbin.com/cofufo/edit?html,js,output

Ember Router Async Facelift

The Ember router is getting number of enhancements that will greatly enhance its power, reliability, predictability, and ability to handle asynchronous loading logic (so many abilities), particularly when used in conjunction with promises, though the API is friendly enough that a deep understanding of promises is not required for the simpler use cases.

Update 6/14/13

see https://gist.github.com/machty/5723945 for the latest API (unlikely to change from now on)
latest Ember build: https://machty.s3.amazonaws.com/ember/ember-async-routing-10.js

Router Facelift Examples

Guide to latest API enhancements router.js PR Ember PR

	import Ember from 'ember';

	export default Ember.Controller.extend({
	appName:'Ember Twiddle',

	vehicleIndex: 0,

	vehicle: Ember.computed('vehicleIndex', function() {
	return this.get('vehicles')[this.get('vehicleIndex')];
	}),

	var ENV = {
	modulePrefix: 'frontend',
	environment: environment,
	baseURL: '/',
	locationType: 'auto',
	EmberENV: {
	FEATURES: {
	// Here you can enable experimental features on an ember canary build
	// e.g. 'with-controller': true
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.3/moment.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.8.1/ember.js"></script>

	git branch -m old_branch new_branch # Rename branch locally
	git push origin :old_branch # Delete the old branch
	git push --set-upstream origin new_branch # Push the new branch, set local branch to track the new remote