The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

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.”

  • Jason Scott

    Really nice app guys. I just downloaded it and the full screen video is a really great addition to the instructions. I’m excited to see so much is possible with Ionic.

  • Young Park

    Very impressive app! Would they be able to show how they did the full screen video. UI seems very smooth.

  • Luca Brunner

    Great Work! I like the smooth transition from splash screen to home screen. Maybe there are “how to” tutorial? 🙂

  • http://ryanseamons.com/ Ryan Seamons

    Awesome. I would love to see apps like this posted in the community to better dig through complicated apps and see how they are built. Sometimes I feel like there aren’t great examples of fully functional apps in the wild.

  • homepokergames

    Great looking app – one of the best yet. I think this is the biggest thing missing from Ionic2 thus far – HOW to make these nice looking themes?!

  • https://www.hackster.io/gusgonnet Gustavo

    Such a beautiful app…
    A masterpiece!

  • Alex Leone

    I love this app