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
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.
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
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
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