This document provides an overview and development details of the Discover Music app. The app was designed to deliver an amazing experience for readers to find radio stations using the NPR API. It leverages Sencha Touch 2 patterns and implements geolocation and audio. The app follows a music magazine layout and uses an MVC architecture with efficient custom views. It prioritizes performance through techniques like a carousel view and local storage. The development team optimized the app using Sencha Command tools and a proxy to reduce data size from the large NPR API.

2. Quick Updates

3. About the app
• Designed to deliver an amazing
experience
• Uses the NPR API
• Helps readers find stations close to
them
• Leverages the best ST 2 patterns
• Implements geolocation, audio
• Really fun to use!

4. Quick demo
discovermusic.senchafy.com

5. Discover Music dev team
Design Development

6. Discover Music dev team
Design Development

7. Discover Music dev team
Design Development

8. Discover Music dev team
Design Development

9. Discover Music dev team
Design Development

10. Discover Music support
Sencha Engineers

11. Discover Music support
Sencha Engineers

12. Discover Music support
Sencha Engineers

13. Discover Music support
Sencha Engineers

14. Discover Music support
Sencha Engineers

15. The Design
• Built along three core engagement themes
• Read
• Listen
• Discover
• Mimics a music magazine layout like that of Rolling Stone
• Cover, Main TOC, Genre sections, articles

16. Pre-production workflow

17. Production workflow
Article Preview
Global Toc
Genre Toc
Articles
Articles
Articles
YES
More Genres?
NO
Favorites
Search

18. Early mockup

19. Near final mockup

20. Building the app
• Heavy utilization of MVC
• Highly efficient custom Views
• Utilize local storage for article data
• Custom SASS theme
• Implement Sencha SDK tools from start to
finish

21. The MVC Architecture
App
Favorites Article
Favorites Favorites Article Articles
Search Main Stations StationDetail
Search Search StationFinder Stations
Main GlobalToc Player ArticlePreview
Genres
Drawer GenreToc

22. The Main controller
• It’s responsible for article data loading
• Serves as the app backbone
• Manages six views
• Handles all “outside” navigation
• Manages the Main View (extends carousel)
• A little over 330 lines

23. Controlling views events

24. Controlling views events

25. Sencha Touch 2 Performance
• Carousel is blazing fast!
• Only 3 items in the DOM at any one time
• 64 child items of the Main View

26. Performance Secret #1
• Setup efficient custom views!

27. Performance Secret #1

28. Performance Secret #2
• Use the SDK Tools!
http://www.sencha.com/blog/behind-sencha-command-and-the-
build-process/.

29. Performance Secret #2
• Reduce data size
• NPR data was really huge
• We used SilkJS to create a proxy
Load Balancer
• Employ localStorage
SilkProd1 SilkProd2
NPR API

30. Questions?
• Contact info:
• twitter:
• @moduscreate
Thank you!
• @_jdg
• jay@moduscreate.com