BrianSipple

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

rauschma

How are classes different from traditional functions?

ES6 introduced a new protocol for constructing instances, but its features (incl. new.target) work in both classes and traditional functions. These are the differences between traditional functions and classes:

• Traditional functions can’t make superconstructor calls via super(). That means that they are always base classes. In ES5, superconstructors are called as functions.

• The prototype of traditional functions and base classes is Function.prototype. The prototype of a derived class is its superclass.

• Classes can’t be function-called. An exception is thrown if you do.

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

hjdivad

Ember-QUnit Testing With Vim

It can be tedious (and slow) to go from a test in your editor to running that test in the browser. This is a process to speed this up slightly. When it's set up you'll be able to run an individual test by:

1. put your cursor inside a test body
2. hit T
3. switch to chrome
4. type 'test ' (sans quotes), paste your clipboard and hit enter

bobbygrace

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

---

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

wycats

A small sampling of external projects initially built for Ember use but designed to be used standalone:

• Handlebars - templating engine
• simple-html-tokenizer - an HTML5 tokenizer
• HTMLBars - alternate HTML-aware Handlebars backend
• morph - text-node placeholders for data binding systems
• RSVP - fast, lightweight promise library
• route-recognizer - just the recognition part of a router
• router.js - hierarchical states and transition-based router
• dag-map - graph library

samselikoff

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.

kristianmandrup

Converting libraries to Ember CLI addons

In this guide we will cover two main cases:

• Ember specific library
• vendor library

Ember library

The Ember library will assume that Ember has already ben loaded (higher in the loading order) and thus will assume it has access to the Ember API.

taras

import Ember from 'ember';

var get = Ember.get;
var keys = Ember.keys;
var isNone = Ember.isNone;

/**
 * Computed Property Macro returns computed property that evaluates to result of validation.
 *
 * It accepts rules hash which property name as keys and validation functions as values.