Exploring the Future Potential of AI-Enabled Smartphone Processors
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
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
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
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
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
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
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
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
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
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
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.