5 Cool Ember Functions

NOTE: As I’ve found too many interesting methods, this will be a two parter, with five more methods to come.

One of the biggest challenges of learning Ember (or any framework really) is familiarising yourself with all the tools it provides. Sometimes I’ve needed a tool and not known that there’s a specific function baked in that does what I need. Of course there are great resources out there like Stack Overflow and the excellent Ember community Slack channel, but even then sometimes it’s tricky to find what you’re looking for.

ES2015 and Destructuring Assignment

This blog is a simple one - I just wanted to write a bit about a neat technique in ES2015 for declaring and assigning variables that I was heretofore unfamiliar with: destructuring assignment.

Recently, while reading a blog post on implementing drag and drop functionality in Ember.js with HTML5, I noticed a method of variable declaration in JavaScript that was new to me. In the code for a specific component, I saw this:

Query Params, Metadata and Pagination in Ember.js

A little earlier this year, I was reading an organisation’s style guide for working with Ember.js, when I encountered reference to the use of ‘query params’ in a controller. At the time, still relatively new to Ember, I had no idea what this meant. In the intervening time, though I’ve learned a lot. Basically, query params allow for certain application states to be serialised into the URL that wouldn’t be otherwise possible through the regular use of routes. In this blog post, I’m going to explain the role of query params, and how they can be used in your Ember app to provide some neat functionality. I’ll be using a sample Ember.js front-end app, with a Rails API on the back-end.

Creating page-specific JavaScript and CSS in Rails

The Rails Asset Pipeline is a really great tool that improves performance by compressing and minifying assets, as well as compiling JS and CSS assets written in other languages, like CoffeeScript and SASS. When compiled, the files in your app/assets/javascripts/ folder get processed and minified into a single application.js file. In many cases, this is great - all of the views in your app have access to this file at all times, and it cuts down on the number of server requests made by the browser. But what happens if you want to dynamicaly scope JavaScript functions to specific pages in your app, like a function that only fires when an object view page is loaded?