jamesarosen

I looked around for a good popover library for Ember. I couldn't find one I liked (and was compatible with Ember 1.13 and Glimmer), so I whipped up a little ditty:

{{!-- app/pop-over/template.hbs --}}
{{yield}}

// app/pop-over/component.js
import $ from "jquery";

jamesarosen

I have a project that's been happily chugging along on Travis for a while. Its .travis.yml looks something like

script:
  - node_modules/ember-cli/bin/ember test

I wanted to add a second parallel build that did something very different. I didn't want to run ember test with a different Ember version or some other flag. I wanted to run a completely different command. Specifically, I wanted to run LicenseFinder's audit.

Travis has great docs on customizing parallel builds, but nothing describes how to do two completely different commands.

jamesarosen

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

jamesarosen

1. You find yourself asking, "I need to arrange some interactions. What should I call the players and the interaction?"
2. For each interaction
3. Ask "What message do I want to send?"
4. Ask "To whom should I send it?" Be as specific as possible. changePassword goes to the PasswordChanger.
5. Ask "Is there already another recipient that is enough like this one that I am comfortable combining them?" If so, do.

I'm considering refactoring a number Ember.Components that have API interactions to use one or more API service objects. I'm concerned with the layer violation: making API calls in the view layer.

1. "change password"
2. changePassword(old, new) -> Promise

jamesarosen

Background

I have an domain, api.example.com, that handles all API requests for my service. There are a select set of domains, [ www.example.com, *.www.example.com ], from which I wish to allow browser access. In addition to this, authorized clients should be able to access the API with non-browser clients (e.g. cURL). I have enabled CORS protections as best I can to allow www.example.com and *.www.example.com to make cross-origin requests to api.example.com.

Problem Statement

I wish to enable as much Cross-Site-Forgery-Request protection as possible on api.example.com while still allowing access from protected domains.

Traditional Solution

jamesarosen

I'm having trouble with Ember.HTMLBars.makeBoundHelper. I ran ember g helper format-date, which emitted app/helpers/format-date.js (see below). Note that it uses Ember.HTMLBars.makeBoundHelper. The helper function expects a Date and a format String.

When I render the template (see below), the helper receives instead

1. an Array of the form [ Sat Feb 28 2015 16:00:00 GMT-0800 (PST), "MMMM YYYY" ]
2. an empty Object
3. an Object of the form { morph: Morph }
4. an Object of the form { data: Object, dom: DOMHelper, helpers, Object, hooks: Object, useFragmentCache: true: view: undefined }

If I change Ember.HTMLBars.makeBoundHelper to Ember.Handlebars.makeBoundHelper, the helper function receives

jamesarosen

This post is one in a series on converting a Backbone app to Ember. See also Ember-Data Notes.

Recently, our team has been trying to get Ember-Data to work with an API that does not conform to the json:api standard. The experience has been mostly good, but we've really struggled with the relationships. We have a Customer model that has many pastInvoices and a single monthToDateInvoice. The URL for past invoices is /billing/invoice?explicit_customer_id={{customerId}}; for month-to-date, it's /billing?no_list=true&explicit_customer_id={{customerId}}. The JSON that the API returns for a customer does not include any link to those URLs.

First Attempt: InvoiceAdapter

Our first attempt was to create an InvoiceAdapter that understood how to fetch invoices from those URLs:

// app/billing/invoices/adapter.js:

jamesarosen

Dear Chris Henn,

I loved your talk at EmberConf this year. Thanks so much for sharing that with us!

I had recently spiked on replacing our graphing library with some components and happened upon a very similar solution to what you described. What I didn't know is that there was an existing grammar for these concepts. I knew a few terms like axes and series, so those became nouns (or components) in my world. My template looks like this:

{{#viz-chart as |d|}}
  {{viz-xaxis dimensions=d}}
 {{viz-yaxis dimensions=d}}

jamesarosen

I upgraded a small app from ember-cli from 0.1.11 to 0.2.0 today. It took a couple hours. Here are some notes.

Prep

First, I read the release notes.

ember init

I recommend committing your changes right before running ember init. That way, you can accept all the overwrites and easily discard the ones you don't want. kellyselden maintains a repo called ember-cli-output that tracks the changes in what ember init generates over time. You can find the v0.2.0 changes here.

jamesarosen

Ember Data Notes

A Little Background

These are some notes on the workings of Ember-Data. They written from the perspective of migrating a Backbone app to Ember. Below, "Sierra" is the Backbone app, while "Tango" is its successor.

Store

• central clearinghouse of data
• singleton