1. Connecting Technology
for Great Experiences
Kenneth Rohde Christiansen
Bossa Conference, Manaus, March 2010

2. TRYING TO STEER UP SOME DISCUSSION

3. TRYING TO STEER UP SOME DISCUSSION
WHO AM I?

4. TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN

5. TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER

6. TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
1+ YEAR WORKING WITH WEBKIT

7. TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
1+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH
APP DEVELOPMENT USING DECLARATIVE LANGUAGE

8. TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
1+ YEAR WORKING WITH WEBKIT 2+ YEARS WORKING WITH
APP DEVELOPMENT USING DECLARATIVE LANGUAGE NOKIA
TECHNOLOGY INSTITUTE, INdT

9. WHERE
I COME FROM

10. Been working with fluid interfaces for a long time
Flexibility, rapid development

11. Lots of prototyping, had to develop fast
Example of a Media player

12. Experiments with Web, Qt, Declarative UI
Our interfaces have all been canvas based

13. Targeting different display, input devices
Types of display, resolution vs. dimension, keyboard vs. touch.

14. Lessons learned
How we learned to design our applications
Clear Model/View/Controller
separation is an advantage
Two types of controllers:
One handling interaction
between Model and View
and one handling user input
Declarative UI language
makes it possible to make
the interface a “theme”, that
can easily be adapted per
per device, by a designer
The input handling can be
part of that theme:
Click area size is a good
example.

15. TRENDS
WHY WE CARE

16. Some of the current trends
The background for the applications of today

17. Some of the current trends
The background for the applications of today
WEB IS
EVERYWHERE!

18. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED

19. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
ACCESS TO WHAT
MATTERS TO ME

20. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT
PERSONAL DATA
ONLINE
ACCESS TO WHAT
MATTERS TO ME

21. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT
PERSONAL DATA
ONLINE
ACCESS TO WHAT
MATTERS TO ME
FLUID
INTERFACES

22. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
ACCESS TO WHAT
MATTERS TO ME
FLUID
INTERFACES

23. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
PERSONAL
ACCESS TO WHAT
MATTERS TO ME
FLUID
INTERFACES

24. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT BUT A WAY OF LIFE
MATTERS TO ME
FLUID
INTERFACES

25. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT BUT A WAY OF LIFE
MATTERS TO ME
FLUID
INTERFACES TECHNOLOGY SHOULD
NOT BE A DISTRACTION

26. Some of the current trends
The background for the applications of today
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT BUT A WAY OF LIFE
MATTERS TO ME
FLUID
INTERFACES TECHNOLOGY SHOULD
NOT BE A DISTRACTION
BUT AN ENABLER

27. So Web is the future?
The state of the Web
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA ORIENTED
ONLINE
TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT BUT A WAY OF LIFE
MATTERS TO ME
FLUID
INTERFACES

28. So Web is the future?
The state of the Web
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA IN SOME AREAS,
ORIENTED THE WEB IS
ONLINE
NOT THERE TODAY
TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT BUT A WAY OF LIFE
MATTERS TO ME
FLUID
INTERFACES

29. So Web is the future?
The state of the Web
SOCIAL
NETWORKING,
WEB IS ALWAYS
EVERYWHERE! CONNECTED
IMPORTANT DESIGN/FASHION
PERSONAL DATA IN SOME AREAS,
ORIENTED THE WEB IS
ONLINE
NOT THERE TODAY
BUT CAN IT BE? TECHNOLOGY IS
PERSONAL NOT JUST A TOOL,
ACCESS TO WHAT DOES IT MAKES SENSE? LIFE
BUT A WAY OF
MATTERS TO ME
IS A MIXTURE / A HYBRID
FLUID POSSIBLE?
INTERFACES

30. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL

31. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL
Designed for contents (text, images, data...)

32. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL
Designed for contents (text, images, data...)
Very flexible layouting

33. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL
Designed for contents (text, images, data...)
Very flexible layouting
Zero-deployment / update-ability

34. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL
Designed for contents (text, images, data...)
Very flexible layouting
Zero-deployment / update-ability
Lots of existing Web contents out there,
and that is not going to go away.

35. Understanding the tools, filling the gaps
The power of Web as a technology
THE WEB IS VERY
POWERFUL
Designed for contents (text, images, data...)
Very flexible layouting
Zero-deployment / update-ability
Lots of existing Web contents out there,
and that is not going to go away.
Indexability, searching

36. What is the catch?
Why are we not all just using Web
It was designed for contents, patched for Web apps

37. What is the catch?
Why are we not all just using Web
It was designed for contents, patched for Web apps
Expensive DOM manipulation

38. What is the catch?
Why are we not all just using Web
It was designed for contents, patched for Web apps
Expensive DOM manipulation
Extremely flexible - a monster doing more that you
normally need. Can lead to unresponsiveness,
battery drain

39. What is the catch?
Why are we not all just using Web
It was designed for contents, patched for Web apps
Expensive DOM manipulation
Extremely flexible - a monster doing more that you
normally need. Can lead to unresponsiveness,
battery drain
Summarized: You need to understand the inner working
of the Web engine in order to make a responsive, nice
application
What triggeres a relayout? etc...

40. But is it possible at all?
Why are we not all just using Web
Yes! Google has many apps already, Palm WebOS is
an even better example, providing:
DESIGN/FASHION
ORIENTED
FLUID
INTERFACE
INTERFACES
PERSONALIZATION

41. But is it possible at all?
Why are we not all just using Web
Yes! Google has many apps already, Palm WebOS is
an even better example, providing:
DESIGN/FASHION
ORIENTED
FLUID
INTERFACE
INTERFACES
PERSONALIZATION
But, the developer experience is still lacking, and if you
look at their hardware (comparable to N900, iPhone 3GS)
the interface seems slow and unresponsive.

42. So does it make sense?
It does! in some situations
Remember:

43. So does it make sense?
It does! in some situations
Remember:
ACCESS TO WHAT
MATTERS TO ME

44. So does it make sense?
It does! in some situations
Remember:
ALWAYS
CONNECTED
ACCESS TO WHAT
MATTERS TO ME

45. So does it make sense?
It does! in some situations
Remember:
ALWAYS
CONNECTED
PERSONAL
ACCESS TO WHAT DATA ONLINE
MATTERS TO ME

46. So does it make sense?
It does! in some situations
Remember:
ALWAYS
CONNECTED
PERSONAL
ACCESS TO WHAT DATA ONLINE
MATTERS TO ME
+ A LOT OF OTHER REASONS

47. The case of the established protocol
Access to online data is all about services
So why not just make a native app, Qt has
QNetwork... + B + C

48. The case of the established protocol
Access to online data is all about services
So why not just make a native app, Qt has
QNetwork... + B + C
Connecting a native app with a server requires a
communication protocol, that should preferrable to easy
to use and extensive. Defining and maintaining such one
can be expensive

49. The case of the established protocol
Access to online data is all about services
So why not just make a native app, Qt has
QNetwork... + B + C
Connecting a native app with a server requires a
communication protocol, that should preferrable to easy
to use and extensive. Defining and maintaining such one
can be expensive
A Web app is the protocol itself:
HTML + CSS
HTTP JAVASCRIPT

50. The case of the established protocol
Access to online data is all about services
For a Web application the protocol is:
HTML + CSS
HTTP JAVASCRIPT
This makes it possible for the service provider
to change the inner workings of the app+service at any
point, transparent to the user. The app lives online, but
can have offline capabilities.

51. Great integration with existing Web Services
There is so much out there, in use by our target group
Flickr, Twitter, Ovi Services....
Stocks, News feed, Weather
forecast, Social Networking

52. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it

53. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline

54. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline
- Limited native integration device + ui

55. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline
- Limited native integration device + ui
- Depends on connectivity speed, server downtime

56. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline
- Limited native integration device + ui
- Depends on connectivity speed, server downtime
- Increased security ricks js injection

57. So where does the Web fail
Identifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline
- Limited native integration device + ui
- Depends on connectivity speed, server downtime
- Increased security ricks js injection
- Memory / battery usage

58. But that can all be fixed, right?
Searching for solutions
- Qt makes it easy to expose native API’s to JS

59. But that can all be fixed, right?
Searching for solutions
- Qt makes it easy to expose native API’s to JS
- Offline is a bit part of HTML5, but not out of the box

60. But that can all be fixed, right?
Searching for solutions
- Qt makes it easy to expose native API’s to JS
- Offline is a bit part of HTML5, but not out of the box
- Web Runtime makes it possible to run apps locally

61. But that can all be fixed, right?
Searching for solutions
- Qt makes it easy to expose native API’s to JS
- Offline is a bit part of HTML5, but not out of the box
- Web Runtime makes it possible to run apps locally
- Sandboxing

62. But that can all be fixed, right?
Searching for solutions
- Qt makes it easy to expose native API’s to JS
- Offline is a bit part of HTML5, but not out of the box
- Web Runtime makes it possible to run apps locally
- Sandboxing
Still a lot of work to do.
and remember, we want
a nice Developer Experience

63. BACK TO
THE NATIVE SIDE
Let’s leave the Web for a while and have a look at QML

64. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT

65. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT:

66. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES

67. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION

68. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI

69. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT

70. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION

71. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible

72. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
“End of the Widgets”

73. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
“End of the Widgets”
High Reuse

74. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
“End of the Widgets”
High Reuse
Themability / Change input methods
with theme / Adapt for different devices

75. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
JavaScript scripting, JSON like format

76. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
JavaScript scripting, JSON like format
Embed QML in QML (even with HTTP, or so I’ve heard)

77. COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPID
DEVELOPMENT ANIMATION
JavaScript scripting, JSON like format
Embed QML in QML (even with HTTP, or so I’ve heard)
Some Web Integration:
You can have a Web View
Use images from HTTP etc

78. Wow, that sounds too good to be true
But you better believe it
Downsides?

79. Wow, that sounds too good to be true
But you better believe it
Downsides?
It is not a standard

80. Wow, that sounds too good to be true
But you better believe it
Downsides?
It is not a standard
You cannot target the iPhone, Android, Nokia ... etc

81. Wow, that sounds too good to be true
But you better believe it
Downsides?
It is not a standard
You cannot target the iPhone, Android, Nokia ... etc
So far unproven, how will it evolve? backward compat...?

82. Wow, that sounds too good to be true
But you better believe it
Downsides?
It is not a standard
You cannot target the iPhone, Android, Nokia ... etc
So far unproven, how will it evolve? backward compat...?
Only basic Web integration: Just a Web view

83. Wow, that sounds too good to be true
But you better believe it
Downsides?
It is not a standard
You cannot target the iPhone, Android, Nokia ... etc
So far unproven, how will it evolve? backward compat...?
Only basic Web integration: Just a Web view
Layout / contents with non-fixed layout

84. WRT+QML Complementing Power
A look at use cases for both technologies

85. Online Widgets with offline abbilities
Give the services more control
Get layout + contents
from a service
Make it work offline
Personalization
Good for widgets,
Social integration

86. Powerful layout
Remember Word vs. Pagemaker?
CSS + is powerful combination
HTML
Make a lot of sense for text+images
QML has some support for this,
but it is not nearly as powerful

87. Sometimes Web just doesn’t make sense
Let’s consider a video player
When the app needs raw speed, lots of user interaction,
depends on native anyway, etc...

88. Native and Web working together
United we are strong
How can we join the technologies

89. Native and Web working together
United we are strong
How can we join the technologies
Manipulate / show iframes instead
of Webpages in QML

90. Native and Web working together
United we are strong
How can we join the technologies
Manipulate / show iframes instead
of Webpages in QML
Enable cross iframe communication

91. Native and Web working together
United we are strong
How can we join the technologies
Manipulate / show iframes instead
of Webpages in QML
Enable cross iframe communication
Less resources

92. Native and Web working together
United we are strong
How can we join the technologies
Manipulate / show iframes instead
of Webpages in QML
Enable cross iframe communication
Less resources
Do a QML list with each item being
an iframe or a web element,
can it get more hybrid that that? ;-)

93. Native and Web working together
United we are strong
How can we join the technologies
Manipulate / show iframes instead
of Webpages in QML
Enable cross iframe communication
Less resources
Do a QML list with each item being
an iframe or a web element,
can it get more hybrid that that? ;-)
Shared JS runtime, bind QML props
to iframe properties

94. Thanks for listening
Understanding the tools, we fill the gaps
I hope that I have provided you with some new input
and steered up some discussion.
KENNETH ROHDE CHRISTIANSEN
ext-kenneth.christiansen@nokia.com
kenneth.christiansen@openbossa.org