Droidcon - Unify Insights
7 likes2,125 views
The document discusses the challenges of fragmentation in mobile platforms and the development of a unified application framework by Deutsche Telekom AG. It highlights the need for powerful hardware and modern web standards to create effective mobile applications, utilizing technologies like PhoneGap and qooxdoo. Additionally, it details various components of the framework, including application structure, event management, and scrolling issues, emphasizing a seamless user experience across devices.
Droidcon - Unify Insights
- 1. unify INSIGHTS Bernhard Hochstätter & Sebastian Werner Deutsche Telekom AG Droidcon Berlin – May 27th 2010
- 2. SPEAKER Bernhard Hochstätter Sebastian Werner Team Lead Widgets Software Developer Deutsche Telekom AG Deutsche Telekom AG Native & Unify Development JavaScript Specialist
- 3. INTRODUCTION
- 5. FRAGMENTATION ISSUE Apple Google Nokia Microsoft RIM Samsung HP not a single small company
- 6. Realistically at least four major platforms THERE WILL BE MORE THAN ONE PLATFORM
- 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. 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. OUR GOAL Real Applications not just Better Websites
- 10. UNSUPPORTED Legacy Browsers: Thin Clients: Mobile IE Opera Mini Symbian S60 Bold BlackBerry Browser Skyfire Netfront
- 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. FAN APP 2010 Download your copy today http://bit.ly/cVEdyu
- 13. YEP, ANDROID VERSION IS IN THE WORKS
- 15. Object-oriented JavaScript + Build System + UI Framework
- 16. PHONEGAP App Stores + Additional JavaScript APIs + Open Source
- 17. SASS + + Mixins, Image CSS++ Variables & Embedding Includes
- 18. ADOBE AIR Desktop Widgets + Additional JavaScript APIs + Widespread Technology
- 19. ARCHITECTURE
- 20. RUNTIME
- 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. Client Server Application Service 1 Unify Service n qooxdoo Browser Engine Browser Adobe AIR PhoneGap Operating System Hardware
- 23. PhoneGap Adobe AIR Operating System Native Application Native Runtime Web View Application Container Unify Application Unify Application
- 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. CODE
- 26. APPLICATION STRUCTURE + Desktop Interface Desktop Application Business Layer Utilities Mobile Interface Mobile Application
- 27. STYLES Functional Core Unify Platform Styles Color Scheme Resource Images Sass Engine style.css View Styles App Components Resource Images
- 28. FEATURES
- 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. BASICS
- 31. StatusBar Back TitleBar Refresh ScrollView Overlay TabBar
- 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. 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. 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. 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. CORE
- 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. 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. 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. 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. 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. APPLICATION • Registers views in ViewManager • Initializes optional TabBar • Establish delegates for click handling • Toggles CSS classes on orientation change
- 44. EVENTS Touch • Newhandlers for Gesture qooxdoo‘s event system Transition • Touchevents are emulated on non-touch devices Orientation
- 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. SCROLLING
- 47. NATIVE SCROLLING Unpainted Content Peep Hole Application Content
- 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. 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. 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. 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. 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. PAGING StatusBar Back TitleBar Refresh Pager Berlin Frankfurt 18° sunny 23° sunny TabBar
- 54. PAGING StatusBar Back TitleBar Refresh Pager Berlin Frankfurt Mailand 18° sunny 23° sunny 25° cloudy TabBar
- 55. PAGING StatusBar Back TitleBar Refresh Pager Frankfurt Mailand Paris 23° sunny 25° cloudy 24° sunny TabBar
- 56. PAGING StatusBar Back TitleBar Refresh Pager Mailand Paris 25° cloudy 24° sunny TabBar
- 57. MORE
- 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. 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. 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. THANK YOU
Editor's Notes
- #5: 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?
- #6: Interesting market with a lot of competetion. Good for the customer. Bad for the developer.
- #7: Even 6 are imaginable... oops
- #8: Pause...
- #10: 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.
- #11: 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.
- #16: We use it for JavaScript OO, event system etc. on mobile and for widgets on desktops
- #17: Enhancing the feature set of web applications on mobile devices.
- #18: Supercharged CSS
- #19: The standard for building desktop web applications.
- #22: Thanks to T-Labs for their help to bring BONDI standards to PhoneGap.
- #30: Let‘s focus on the Unify specific features here...
- #32: 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.
- #33: 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.
- #34: 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.
- #35: Each layer which has a parent also comes with a back button (or close button on modal layers)
- #37: 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.
- #39: The ViewManager controls the visible view/layer. The LayerManager manages state changes between layers (controls animations, zIndex, etc.) Each view has one exclusive layers.
- #42: 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.
- #54: Ever used the wheather app on the iPhone?