We recently released a major upgrade to Canvas’s calendar. Although the primary objective was adding an agenda view and other accessibility tools, we also took the opportunity to update its visual design, including the color coding that links events and calendars. We’ve released this new color code generator as a Bower package at github/instructure/color-slicer. Here’s why we switched.

We engineers at Instructure love Ember. We also love to learn about other frameworks and know which tools are the best for the job at hand. One of the newer frameworks to come out is React.

React is Facebook’s new JavaScript library for building user interfaces. I’m excited to see another player in the game of front-end JS frameworks. When we have so much mind share going to a similar problem, we all win.

On the home page (screenshot), there are a few examples of how React can be used. I thought it might be fun to show how each of these can be done using Ember.

We recently released a new version of our mobile app for Android. Although it was a huge improvement from previous installments in terms of features, design, and usability, there was one nagging issue in the back of our minds: speed. There are times when the app isn’t as snappy as we’d like it to be. After some profiling, benchmarks, and common sense, we determined that retrieving data from the API (the networking) was the bottleneck.

The Old Way: AsyncTasks

As of the latest version, we use the built-in AsyncTasks to retrieve data from Canvas’ servers. A quick Google search will explain the numerous issues with our approach: no orientation-change support, no ability to cancel network calls, as well as no easy way to make API calls in parallel. With the exception of Froyo and Gingerbread, AsyncTasks (by default) run in a serialized fashion. In a practical sense, this means that only one AsyncTask is running at any given time. Views that require multiple API calls (the DashBoard currently has 7) run extremely slow; sometimes taking multiple seconds to load.

At Instructure, we’re moving more and more of our app to the client with technologies like Ember.js. While it and other JavaScript frameworks have made this transition easier, they’ve also introduced new challenges around keeping our content accessible.

The old advice we’ve all heard about using semantic markup, headers, and alt attributes on <img /> tags is still true, but it doesn’t address how we can best develop accessible content in a rich client application. Despite rumors to the contrary, rich content can be accessible if we pay attention to a few basics.

Welcome to our new blog! Instructure is a technology company. And we have some pretty killer technologists who have opinions. This blog is an outlet for them to talk about stuff.

Feel free to join in the discussion. If you disagree, don’t be a wimp—speak up.

Look forward to talking more!

Joel CTO