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
   

   View Slide

2. We provide tools and frameworks
   for developers, to build apps!
   

   View Slide

3. About me
   Lee Boonstra
   Sales Engineer @ Sencha
   Twitter: @ladysign - lee@sencha.com
   http://www.ladysign-apps.com
   

   View Slide

4. I want to make an app!
   I like music,
   so I will make a music app…
   

   View Slide

5. Spotifinder
   Listen to Spotify all the time,
   without searching for songs with
   your keyboard.
   search with your keyboard for music… :/
   

   View Slide

6. My app idea…
   Spotifinder
   Listen to Spotify all the time,
   without searching for songs with
   your keyboard.
   

   View Slide

7. Sencha Touch 2.0 (2012)
   MVC Pattern
   iOS look & feel
   Smooth scrolling list
   HTML5 technology
   

   View Slide

8. This idea is so great.
   Let’s share it with the world.
   

   View Slide

9. Reviews in Google Web Store
   “What a weird looking interface.”
   “I can’t use my mousewheel to scroll the list?!”
   

   View Slide

10. I need a desktop version too!
    

    View Slide

11. Ext JS 4 (2011)
    MVC Pattern
    Fast performing grid
    HTML5 technology
    Ext JS 5 (2014)
    MVVM Pattern
    Tablet support
    

    View Slide

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.
    

    View Slide

13. View Slide

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
    

    View Slide

15. What we will do today…
    • About Universal apps
    • Demo
    • Project Organization
    • MVVM Pattern
    • Look & Feel
    • Builds
    • Why Sencha
    

    View Slide

16. Universal Apps,
    beyond just
    responsive design
    

    View Slide

17. Responsive (web) design
    • Fluid Design
    • Relative Units
    • CSS3 Media queries / breakpoints
    • reordering contents
    • show/hide content
    

    View Slide

18. Responsive Design (in CSS)
    

    View Slide

19. The previous solution is great for websites.
    Not so much for serious web applications.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

23. on a desktop
    on a phone
    

    View Slide

24. Device Specific Stylesheets
    Device specific Stylesheets for:
    • iOS
    • Android
    • Windows Phone
    

    View Slide

25. Device Profiles
    Based on a device profile, load different
    (combination) of views, behaviour or data.
    

    View Slide

26. gmail on a tablet
    gmail on a phone
    

    View Slide

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.
    

    View Slide

28. View Slide

29. Dive into
    a real world app
    

    View Slide

30. Classic Components Toolkit
    Contains the rich components great for desktops (or tablets).
    Has support for legacy browsers.
    

    View Slide

31. View Slide

32. lots of unique classic views
    an own view controller
    for classic component
    event listeners
    

    View Slide

33. Modern Components Toolkit
    Great for phones & tablets.
    Contains lightweight components, great for low performance devices.
    Contains components designed for touch usage.
    

    View Slide

34. View Slide

35. just 3 modern touch views
    an own view controller
    for modern component
    event listeners
    

    View Slide

36. One single code base
    The rest of the code will be all shared across toolkits.
    This includes: (framework, data layer, business logics)
    

    View Slide

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
    

    View Slide

38. Microloader
    The Sencha microloader can detect
    on which environment it is running,
    and serve the right experience.
    

    View Slide

39. View Slide

40. Build Profiles
    profile
    component set
    theme package
    

    View Slide

41. Platform Tags
    

    View Slide

42. index.html
    assign profile
    platformTags
    serve profile
    for testing purposes
    

    View Slide

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
    

    View Slide

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
    

    View Slide

45. Databinding
    Do more, with less coding.
    You can bind component states, or view model data
    to other components. We call that data binding.
    

    View Slide

46. View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

50. Cupertino (iOS)
    MountainView (Android)
    Configurable
    With a small effort,
    create your own device theme
    My mobile component sets are using these themes
    

    View Slide

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
    

    View Slide

52. Build folder, with separate folders
    for modern & classic toolkits
    

    View Slide

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
    

    View Slide

54. Conclusion
    

    View Slide

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.
    

    View Slide

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?
    

    View Slide

57. Thank you!
    ladysign
    

    View Slide

58. View Slide