November 2, 2016
  • All
  • Built With
  • Ionic

Built with Ionic: Joule, a Sous Vide Cooking Tool and Companion App

Katie Ginder-Vogel

Built with Ionic: Joule by ChefSteps
Our friends at ChefSteps have a cool new cooking tool! Joule is an immersion circulator that allows you to use the sous vide cooking method, in which food is placed in airtight plastic bags, then heated in precisely controlled, low-temperature water. Because the food can never get hotter than the water, it’s almost impossible to under- or overcook it, guaranteeing some of the most amazing steak, fish or chicken you have ever had. Joule’s companion app is built with Ionic.

“Anyone can download the app today and check out the many sous vide guides we provide, even if you don’t own a Joule,” says Ryan Miller, a mobile engineer at ChefSteps. “The app talks to Joule via Bluetooth, if you’re in close proximity, or over WiFi, which is useful if you’re at the supermarket.”

Joule sous vide cooking tool and app

Miller and his team used EvoThings’ cordova-ble library to help the app and circulator to communicate and HTML5 WebSockets to handle WiFi communications.

“Ionic forms the bedrock of the Joule app,” says Miller. “At a fundamental level, we rely on the $ionicPlatform, $ionicHistory, and many ngCordova services to handle platform eccentricities and the state management of what is now a very complex app. We also leverage $ionicPopup, ion-slides, and a handful of other UI directives, though we’ve gone over them with a completely custom theme. Ionic’s seamless integration with Crosswalk has also been a tremendous help.”

To get a user’s attention when needed, the team customized $ionicPopup into their own alert service, with three main types of alerts/popups denoted by bold header colors and icons.

Additional customization included customizing EvoThings’ cordova-ble library and a custom video player.

“Even with EvoThings’ cordova-ble library, we had to customize its source code (Objective C and Java) to fit our needs,” says developer Jiamin Zhu.

“We also wrote our own custom video player, as we just couldn’t find a library that behaved well enough in an app environment for our needs,” adds Miller. “There are so many oddities across iOS and Android video element integrations, and we had to tackle them all.”

cooking with Joule

In terms of cross-platform differentiation, the team’s biggest challenge was handling the difference in how the platforms manage the back button.

“The Android ecosystem has access to a hardware back button, while iOS relies totally on the UI for this functionality,” explains Miller. “We made some UI affordances to handle this, but otherwise, you can expect a consistent experience across both iOS and Android.”

creme brulee with Joule

Performance was naturally a focus of the team, especially given the size of the Joule app.

“The Ionic team lent us a hand in tuning up some of our animation and view-switching infrastructure, which made a big impact,” says Miller. “The Ionic team has built an incredible platform for mobile app development, and we’re excited to see Ionic 2 land.”

Katie Ginder-Vogel