Apps World 2015: Secrets to Building a Great Looking Universal App

Building a great looking universal application is more than just responsive design. Developers and designers need to consider how to achieve the best user experience for each device type. Join us as we share a real world example of a great looking universal application for playing music that was built by Lee Boonstra, an engineer at Sencha, using Ext JS 6

Transcript

1. Secrets to Building a Great Looking Universal App Lee Boonstra
2. We provide tools and frameworks for developers, to build apps!
3. About me Lee Boonstra Sales Engineer @ Sencha Twitter: @ladysign - lee@sencha.com http://www.ladysign-apps.com
4. I want to make an app! I like music, so I will make a music app…
5. Spotifinder Listen to Spotify all the time, without searching for songs with your keyboard. search with your keyboard for music… :/
6. My app idea… Spotifinder Listen to Spotify all the time, without searching for songs with your keyboard.
7. Sencha Touch 2.0 (2012) MVC Pattern iOS look & feel Smooth scrolling list HTML5 technology
8. This idea is so great. Let’s share it with the world.
9. Reviews in Google Web Store “What a weird looking interface.” “I can’t use my mousewheel to scroll the list?!”
10. I need a desktop version too!
11. Ext JS 4 (2011) MVC Pattern Fast performing grid HTML5 technology Ext JS 5 (2014) MVVM Pattern Tablet support
12. The problem… • 2 code bases to maintain: Sencha Touch & Ext JS • Although the code is similar I can’t share code. • A desktop version with responsive design is not an option. I don’t want the user to download too much code.
14. The solution! • Ext JS 6, universal apps! • The merge of both frameworks via toolkits • One code base • Beyond just “responsive design” • Optimized experience for each device
15. What we will do today… • About Universal apps • Demo • Project Organization • MVVM Pattern • Look & Feel • Builds • Why Sencha
16. Universal Apps, beyond just responsive design
17. Responsive (web) design • Fluid Design • Relative Units • CSS3 Media queries / breakpoints • reordering contents • show/hide content
18. Responsive Design (in CSS)
19. The previous solution is great for websites. Not so much for serious web applications.
20. The bad… • Low network connectivity + expensive data plan and downloading un-used code. • Non-Optimised data; large texts to read • Non-Used additional device features • Components not optimized for touch. • It doesn’t look like native.
21. The Sencha way • Universal Apps (before loading sdk) • Device Specific StyleSheets (before loading sdk) • Device Profiles (on app launch) • Responsive Design with JavaScript (runtime) • Responsive Design with CSS (runtime) Serve the best experience for each device.
22. Universal Apps • The micro loader will detect your device, OS or browser, and serve the right component set for you, by loading a build profile. • You can attach a theme to this profile. • Not only different views. Also different behaviour, assets or data could be loaded.
23. on a desktop on a phone
24. Device Specific Stylesheets Device specific Stylesheets for: • iOS • Android • Windows Phone
25. Device Profiles Based on a device profile, load different (combination) of views, behaviour or data.
26. gmail on a tablet gmail on a phone
27. Responsive Design • Respond to certain conditions (like screen size), on runtime. • With JavaScript you can create any custom condition you like, and you can let anything respond. • Traditional CSS responsive design is possible too.
29. Dive into a real world app
30. Classic Components Toolkit Contains the rich components great for desktops (or tablets). Has support for legacy browsers.
32. lots of unique classic views an own view controller for classic component event listeners
33. Modern Components Toolkit Great for phones & tablets. Contains lightweight components, great for low performance devices. Contains components designed for touch usage.
35. just 3 modern touch views an own view controller for modern component event listeners
36. One single code base The rest of the code will be all shared across toolkits. This includes: (framework, data layer, business logics)
37. a global controller, for routing singleton classes with business logics data models stores singleton class with app settings view folders with shared view controllers and view models
38. Microloader The Sencha microloader can detect on which environment it is running, and serve the right experience.
40. Build Profiles profile component set theme package
41. Platform Tags
42. index.html assign profile platformTags serve profile for testing purposes
43. MVVM Pattern • V - all components on your screen • VC - logics for a view • VM - for binding data to a view • data model - structure of your entity • data record - the actual data • data store - client-side cache
44. Views can be nested and so it’s view models and view controllers. V viewport V tabpanel V artists V albums V tracks VM VC VM VC V detail
45. Databinding Do more, with less coding. You can bind component states, or view model data to other components. We call that data binding.
47. Benefits of a pattern • Code is easy to read and maintain • Consistent file structure for your code and classes • Facilitates code reuse • Easy to add your app logic to your view controllers
48. Theming It’s possible to create very quickly beautiful Stylesheets. Themes are Sass packages, with the new compilation technique in Ext JS 6 (Fashion), you can compile Sass to CSS (on top of JavaScript). Super fast!
49. My classic component set is using this theme Triton Base Theme Sass theme with many variables to configure flat design no images, just CSS3 & font-icons
50. Cupertino (iOS) MountainView (Android) Configurable With a small effort, create your own device theme My mobile component sets are using these themes
51. Builds Create a production build package. One single JavaScript file, all minified. sencha app build [testing] ext/src/ Own JS Ext JS Own Sass Ext Theme theme package app css app.js
52. Build folder, with separate folders for modern & classic toolkits
53. How to go live? • Host production build on a server • Deploy as hybrid/native app with Cordova/PhoneGap • Deploy with Sencha Web Application Manager
54. Conclusion
55. Why Ext JS vs. an open source solution With Ext JS 6, you choose for an all-in-one solution. You don’t need to maintain various dependencies and have the knowledge of many different technologies, that all need to work together.
56. Ext JS 6 Example Open Source solution Sencha Class System ECMAScript 6 Border Layout JS + CSS MVVM Architecture Angular JS Desktop App Bootstrap / Responsive CSS Mobile App jQuery Mobile / Ionic Promises ECMAScript 6 Grids jQuery Plugin Touch gestures / Events JS Routing Angular JS plugin Offline Chaching HTML5 / JS Theming Sass/CSS Sencha Cmd Grunt + Yeoman + Bower My application is a simple app, if I would use open source technologies, I would need at least 10 dependencies. What about an enterprise app, that’s 50x bigger code-wise? no IE support a lot of effort everyone downloads the same code not half as good, performance?
57. Thank you! ladysign