unify
         INSIGHTS


Bernhard Hochstätter & Sebastian Werner
         Deutsche Telekom AG
    Droidcon Berlin – May 2...
SPEAKER




Bernhard Hochstätter         Sebastian Werner
Team Lead Widgets            Software Developer
Deutsche Telekom...
INTRODUCTION
FRAGMENTATION ISSUE
FRAGMENTATION ISSUE

Apple   Google   Nokia   Microsoft   RIM   Samsung   HP




            not a single small company
Realistically at least four
                   major platforms




      THERE WILL BE
MORE THAN ONE PLATFORM
WHAT A CONSTRAST
    The future promises more operating
       system fragmentation, not less


                          ...
CONVERGING WEB

                                       Microsoft       +Opera +Mozilla




Webkit   Apple        Google   ...
OUR GOAL

Real Applications
     not just
 Better Websites
UNSUPPORTED

Legacy Browsers:     Thin Clients:

Mobile IE            Opera Mini
Symbian S60          Bold
BlackBerry Brow...
REQUIREMENTS
  Hardware
                       +      Software

                           Modern Browser / SDK
 Powerful ...
FAN APP 2010   Download your copy today
                  http://bit.ly/cVEdyu
YEP,
ANDROID VERSION
   IS IN THE WORKS
STRONG
FOUNDATION
Object-oriented
  JavaScript      +   Build System
                                     +   UI Framework
PHONEGAP

App Stores
             +      Additional
                 JavaScript APIs   +   Open Source
SASS


        +                 +
              Mixins,
                                Image
CSS++       Variables &
   ...
ADOBE AIR

Desktop
Widgets   +      Additional
              JavaScript APIs   +   Widespread
                            ...
ARCHITECTURE
RUNTIME
NATIVE ACCESS


• Access   to hardware and system software is restricted

• Different   upcoming standards like JIL, BONDI...
Client                      Server
            Application                 Service 1


               Unify               ...
PhoneGap                Adobe AIR
Operating System

  Native Application       Native Runtime

     Web View              ...
Web Browser



                                              One
                                            Codebase     ...
CODE
APPLICATION STRUCTURE



                 +
                     Desktop Interface   Desktop Application
Business Layer
  ...
STYLES
        Functional Core
Unify


        Platform Styles

         Color Scheme

        Resource Images
           ...
FEATURES
qooxdoo                              Unify                 PhoneGap

 JavaScript    Desktop-class      Mobile             ...
BASICS
StatusBar

Back    TitleBar    Refresh


       ScrollView



        Overlay




        TabBar
StatusBar




Layer




TabBar
StatusBar


          Timeline        Refresh   Timeline   Status    Refresh   Sta



Trying out a new bar...             ...
StatusBar


          Timeline        Refresh   Timeline   Status      Refresh   Status       User      Refresh   U



Try...
StatusBar

sh   Timeline   Status    Refresh   Status       User       Refresh   User        Timeline           Refresh


...
StatusBar

sh   Status       User      Refresh   User        Timeline           Refresh



         @hermann              ...
CORE
I am the Boss



                                ViewManager
                                                         I am...
VIEWS
• Singletons   (instantiated as required)

• Have   a unique ID (mail-view)

• May   have a parameter (emailId, ...)...
VIEW ID
                           Convention over Configuration




Class-Name                          View-ID           ...
attaches to touch events
Application                            manages pressed state buttons / items


       delegates a...
NAVIGATION
              file://mobile.html#mail-list/mail:1234/attachments


• Based   on native browser‘s history managme...
APPLICATION

• Registers     views in ViewManager

• Initializes   optional TabBar

• Establish     delegates for click ha...
EVENTS
  Touch

                • Newhandlers for
 Gesture
                 qooxdoo‘s event system
Transition      • Touch...
NEW TOUCH EVENTS
Tap vs. Click           Hold / Release
  Touch Start                  Touch Start


                     ...
SCROLLING
NATIVE SCROLLING


                          Unpainted Content
Peep Hole



                           Application Content
SCROLL ISSUE #1
                              No fixed objects
                       Oops: Invisible title bar and back bu...
SCROLL ISSUE #2
                    Unreliable scroll event

Andreas Baumann       0px   Andreas Baumann    Event reports ...
SCROLL ISSUE #3
Different layers with different dimensions

Andreas Baumann
Michael Rose
Claudia Menowitz
Rosa Raumhall
Rü...
OUR SOLUTION
StatusBar




            •   100% sized layout (using the full viewport)

            •   A custom scroll vi...
CUSTOM SCROLLING
Andreas Baumann

Michael Rose
                   Scroll Content
Claudia Menowitz
                        ...
PAGING
         StatusBar

Back     TitleBar    Refresh


          Pager


        Berlin                 Frankfurt

    ...
PAGING
                     StatusBar

            Back     TitleBar    Refresh


                      Pager


 Berlin   ...
PAGING
                     StatusBar

            Back     TitleBar    Refresh


                      Pager


Frankfurt ...
PAGING
                      StatusBar

             Back     TitleBar    Refresh


                       Pager


 Mailan...
MORE
BUSINESS LAYER
• Multiple   service per business layer

• Automatic    managment of load/error events

• Simple   interfac...
BUILD SYSTEM
• Based   on qooxdoo build system

• Integration   of Sass style compiler

• Extended    PhoneGap templates

...
APPLICATION
             DEVELOPMENT
• Application   runs in the browser (Safari preferred)

• No   local server required ...
THANK YOU
Upcoming SlideShare
Loading in …5
×

Droidcon - Unify Insights

5,249 views

Published on

Unify - A framework for cross platform applications. This is the presentation we hold at Droidcon 2010 in Berlin.

Published in: Technology
2 Comments
6 Likes
Statistics
Notes
No Downloads
Views
Total views
5,249
On SlideShare
0
From Embeds
0
Number of Embeds
2,397
Actions
Shares
0
Downloads
70
Comments
2
Likes
6
Embeds 0
No embeds

No notes for slide



  • Multiple operating systems by a large set of vendors (-> next slide)
    Infact we have the slides for desktop fragmentation as well, but this is a mobile conference, right?
  • Interesting market with a lot of competetion. Good for the customer. Bad for the developer.
  • Even 6 are imaginable... oops
  • Pause...

  • That makes us different from a lot of cross platform web projects.
    We really want the user to not see any difference to native applications.
  • So I like to start with platforms we definitely do not support.
    Infact we excluded these from the very beginning and focused on the modern platforms instead.




  • We use it for JavaScript OO, event system etc. on mobile and for widgets on desktops
  • Enhancing the feature set of web applications on mobile devices.
  • Supercharged CSS
  • The standard for building desktop web applications.


  • Thanks to T-Labs for their help to bring BONDI standards to PhoneGap.







  • Let‘s focus on the Unify specific features here...

  • Here you can take a quick look on some of our components. Basically we do not create components for every single element and wrap every HTML element.

    I guess that would be too expensive. We just wrap elements which have some kind of non-HTML functionality.
  • One thing which was invisible on the previous slide are layers. A layer is basically a DOM element which includes all specific content for the current location in the application.
  • Layers are used to animate from one location to another. This way the user get a feeling of where in the structure of the application he resides.
  • Each layer which has a parent also comes with a back button (or close button on modal layers)

  • Layers are shared. A layer which shows the timeline is only creates once and updated according to the position in the application and/or an optional parameter.

  • The ViewManager controls the visible view/layer.
    The LayerManager manages state changes between layers (controls animations, zIndex, etc.)
    Each view has one exclusive layers.


  • We started with the visible things (controls). Now let‘s get a little bit deeper.

    Layers are managed by the LayerManager which is itself controlled by the ViewManager.











  • Ever used the wheather app on the iPhone?








  • Droidcon - Unify Insights

    1. 1. unify INSIGHTS Bernhard Hochstätter & Sebastian Werner Deutsche Telekom AG Droidcon Berlin – May 27th 2010
    2. 2. SPEAKER Bernhard Hochstätter Sebastian Werner Team Lead Widgets Software Developer Deutsche Telekom AG Deutsche Telekom AG Native & Unify Development JavaScript Specialist
    3. 3. INTRODUCTION
    4. 4. FRAGMENTATION ISSUE
    5. 5. FRAGMENTATION ISSUE Apple Google Nokia Microsoft RIM Samsung HP not a single small company
    6. 6. Realistically at least four major platforms THERE WILL BE MORE THAN ONE PLATFORM
    7. 7. WHAT A CONSTRAST The future promises more operating system fragmentation, not less Jason Grigsby, O‘Reilly Webkit in various forms is how nearly every credible smartphone now “does“ the web. Alex Russel, Google
    8. 8. CONVERGING WEB Microsoft +Opera +Mozilla Webkit Apple Google Nokia RIM Samsung HP Nokia: via Qt as QtWebkit RIM: Webkit based with BlackBerry OS 6.0 in Q3 2010 Samsung: Bada platform uses Webkit
    9. 9. OUR GOAL Real Applications not just Better Websites
    10. 10. UNSUPPORTED Legacy Browsers: Thin Clients: Mobile IE Opera Mini Symbian S60 Bold BlackBerry Browser Skyfire Netfront
    11. 11. REQUIREMENTS Hardware + Software Modern Browser / SDK Powerful CPU and Component 256MB of RAM HTML5 & CSS3 Touch screen with at support least 320x480 resolution JIT Compiler for JavaScript
    12. 12. FAN APP 2010 Download your copy today http://bit.ly/cVEdyu
    13. 13. YEP, ANDROID VERSION IS IN THE WORKS
    14. 14. STRONG FOUNDATION
    15. 15. Object-oriented JavaScript + Build System + UI Framework
    16. 16. PHONEGAP App Stores + Additional JavaScript APIs + Open Source
    17. 17. SASS + + Mixins, Image CSS++ Variables & Embedding Includes
    18. 18. ADOBE AIR Desktop Widgets + Additional JavaScript APIs + Widespread Technology
    19. 19. ARCHITECTURE
    20. 20. RUNTIME
    21. 21. NATIVE ACCESS • Access to hardware and system software is restricted • Different upcoming standards like JIL, BONDI or WAC • Software like PhoneGap or Titanium Mobile
    22. 22. Client Server Application Service 1 Unify Service n qooxdoo Browser Engine Browser Adobe AIR PhoneGap Operating System Hardware
    23. 23. PhoneGap Adobe AIR Operating System Native Application Native Runtime Web View Application Container Unify Application Unify Application
    24. 24. Web Browser One Codebase Web Server Vendor SDK + PhoneGap Adobe AIR SDK Native App Widget Bundle + Adobe AIR Runtime Application Store Desktop Widget
    25. 25. CODE
    26. 26. APPLICATION STRUCTURE + Desktop Interface Desktop Application Business Layer Utilities Mobile Interface Mobile Application
    27. 27. STYLES Functional Core Unify Platform Styles Color Scheme Resource Images Sass Engine style.css View Styles App Components Resource Images
    28. 28. FEATURES
    29. 29. qooxdoo Unify PhoneGap JavaScript Desktop-class Mobile Sass System OO widgets Controls Integration Access Event View PhoneGap Hardware Localization System Managment Integration Access Adobe AIR Ajax Build System Touch Events Integration DOM Business Manipulation Objects
    30. 30. BASICS
    31. 31. StatusBar Back TitleBar Refresh ScrollView Overlay TabBar
    32. 32. StatusBar Layer TabBar
    33. 33. StatusBar Timeline Refresh Timeline Status Refresh Sta Trying out a new bar... Hermann Hanging out on the beach... Working hard on project... Hanging out on the beach with friends... Watching last episode of... TabBar
    34. 34. StatusBar Timeline Refresh Timeline Status Refresh Status User Refresh U Trying out a new bar... Hermann @hermann H New York City, USA Hanging out on the beach... W Working hard on project... Hanging out on the A beach with friends... 34021 Followers Watching last episode of... 3402 Following F 1382 Tweets 12 Favorites TabBar
    35. 35. StatusBar sh Timeline Status Refresh Status User Refresh User Timeline Refresh Hermann @hermann Holiday on Ibiza. Sun is... New York City, USA Wow. Facebooks buys Google Hanging out on the Android market share... beach with friends... 34021 Followers 3402 Following Funny kittens, take a look... 1382 Tweets 12 Favorites TabBar
    36. 36. StatusBar sh Status User Refresh User Timeline Refresh @hermann Holiday on Ibiza. Sun is... New York City, USA Wow. Facebooks buys Google Android market share... 34021 Followers 3402 Following Funny kittens, take a look... 1382 Tweets 12 Favorites TabBar
    37. 37. CORE
    38. 38. I am the Boss ViewManager I am a View Controller View 1 View 2 View 3 communication Layer 1 Layer 2 Layer 3 LayerManager
    39. 39. VIEWS • Singletons (instantiated as required) • Have a unique ID (mail-view) • May have a parameter (emailId, ...) • Have a lifecycle (create->resume->pause) • Rendered normal, modal or full screen
    40. 40. VIEW ID Convention over Configuration Class-Name View-ID CSS-Selector twitter.view.mobile.Timeline timeline #timeline twitter.view.mobile.Status status #status twitter.view.mobile.User user #user
    41. 41. attaches to touch events Application manages pressed state buttons / items delegates actions to elements interacts with browser history NavigationManager recovers application state on launch listens to navigation changes controls life cycle of view instances ViewManager updates parameters on view instances controls the current layer creation and animation of layers LayerManager selection handling & recovery
    42. 42. NAVIGATION file://mobile.html#mail-list/mail:1234/attachments • Based on native browser‘s history managment • Path-like structural navigation after („#“ symbol) • Detection of movement in structure (upwards, ...) • Automatic storage/recovery of path
    43. 43. APPLICATION • Registers views in ViewManager • Initializes optional TabBar • Establish delegates for click handling • Toggles CSS classes on orientation change
    44. 44. EVENTS Touch • Newhandlers for Gesture qooxdoo‘s event system Transition • Touchevents are emulated on non-touch devices Orientation
    45. 45. NEW TOUCH EVENTS Tap vs. Click Hold / Release Touch Start Touch Start +50ms Touch End Touch Hold Tap Touch Move Touch End +300ms Click Touch Release
    46. 46. SCROLLING
    47. 47. NATIVE SCROLLING Unpainted Content Peep Hole Application Content
    48. 48. SCROLL ISSUE #1 No fixed objects Oops: Invisible title bar and back button Layer 1 Layer 2 Contacts Refresh Back Details Refresh Andreas Baumann Michael Rose Claudia Menowitz Peep Hole Claudia Menowitz Bergallee 3 74839 Rüdlingen Rosa Raumhall E-Mail: claudia@web.de Rüdiger Schwefel Homepage: http://claudia.de Mark Follt
    49. 49. SCROLL ISSUE #2 Unreliable scroll event Andreas Baumann 0px Andreas Baumann Event reports 15px Michael Rose 25px Michael Rose Claudia Menowitz Claudia Menowitz Event reports 60px 50px Rosa Raumhall Rosa Raumhall 75px Rüdiger Schwefel Rüdiger Schwefel 100px Mark Follt Mark Follt Hermann Freie 125px Hermann Freie Events fired not often enough. Günther Sieg 150px Günther Sieg Position already changed again Florian Neumann 175px Florian Neumann during event handler Patricia Lein Patricia Lein 200px
    50. 50. SCROLL ISSUE #3 Different layers with different dimensions Andreas Baumann Michael Rose Claudia Menowitz Rosa Raumhall Rüdiger Schwefel Mark Follt Initial solution: Hermann Freie Dynamically scroll up? Günther Sieg Oops Still problematic: Florian Neumann Flickering through white unrendered Patricia Lein areas in shorter layers
    51. 51. OUR SOLUTION StatusBar • 100% sized layout (using the full viewport) • A custom scroll view component Layer • Horizontal & vertical scrolling • Animated (accelerated / decelerated) • Performance optimized
    52. 52. CUSTOM SCROLLING Andreas Baumann Michael Rose Scroll Content Claudia Menowitz • Support for fixed positioned elements Rosa Raumhall Scroll View • Scrolling like native (currently like iPhone) Rüdiger Schwefel Mark Follt • Hardware-accelerated using CSS3 transforms Hermann Freie • No white flickering Günther Sieg Florian Neumann • More CPU/memory intensive Patricia Lein
    53. 53. PAGING StatusBar Back TitleBar Refresh Pager Berlin Frankfurt 18° sunny 23° sunny TabBar
    54. 54. PAGING StatusBar Back TitleBar Refresh Pager Berlin Frankfurt Mailand 18° sunny 23° sunny 25° cloudy TabBar
    55. 55. PAGING StatusBar Back TitleBar Refresh Pager Frankfurt Mailand Paris 23° sunny 25° cloudy 24° sunny TabBar
    56. 56. PAGING StatusBar Back TitleBar Refresh Pager Mailand Paris 25° cloudy 24° sunny TabBar
    57. 57. MORE
    58. 58. BUSINESS LAYER • Multiple service per business layer • Automatic managment of load/error events • Simple interface for authors of views • Both caching and local storage built-in • Integrated XML to JSON converter
    59. 59. BUILD SYSTEM • Based on qooxdoo build system • Integration of Sass style compiler • Extended PhoneGap templates • Eclipse and XCode integration working • Android & iPhone supported at the moment
    60. 60. APPLICATION DEVELOPMENT • Application runs in the browser (Safari preferred) • No local server required - just plain file:// protocol • Save-Reload Workflow • Creating iPhone/Android app is super-simple • Control build process from Eclipse/XCode
    61. 61. THANK YOU

    ×