Screencast: Create a Touch Menu Component in Ember.js

This post will be short because the content is a screencast (with 2 parts), in which I cover how to create a a slider menu for mobile web apps, using several components that are animated synchronously.

I’ve been working the last 6 months in The App Bussiness, which as you can imagine is a company fully dedicated to create mobile apps, for iOS and Android. During this time I’ve learnt a bit about the practices that make a UX a pleasure to use with your fingers. A lot of DOs and DONTs.

There is many curated resources to learn that, but I’d say that 99% are focused on native apps, and this is kind of sad. There is very few mobile web apps that really take advantage of touch gestures, but there is not technical reason for that.

We can build very nice touch UXs in HTML5, and Ember.js is as good as any other technology to help us manage the complexity of those interfaces, so I’ve made a tutorial of how to create the (probably) most widespead mobile UX pattern: The touch lateral slider menu:

Note: The first part of the screencast is also available in Spanish here, but translate the screencast seemed too much work, so the second part is only available in English.

Part I:

Part II:

The code is available here: https://github.com/cibernox/mobile-patterns. I case you want to collaborate, or you have an UX in mind you don’t know how to implement using Ember, don’t hesitate and open an issue/PR.