Date post: | 11-Nov-2014 |
Category: |
Technology |
Upload: | kenneth-rohde-christiansen |
View: | 4,251 times |
Download: | 0 times |
Connecting Technologyfor Great Experiences
Kenneth Rohde ChristiansenBossa Conference, Manaus, March 2010
TRYING TO STEER UP SOME DISCUSSION
TRYING TO STEER UP SOME DISCUSSION
WHO AM I?
TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN
TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER
TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKIT
TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKITAPP DEVELOPMENT USING DECLARATIVE LANGUAGE
2+ YEARS WORKING WITH
TRYING TO STEER UP SOME DISCUSSION
WHO AM I? KENNETH R. CHRISTIANSEN WEBKIT REVIEWER1+ YEAR WORKING WITH WEBKITAPP DEVELOPMENT USING DECLARATIVE LANGUAGE
2+ YEARS WORKING WITHNOKIA
TECHNOLOGY INSTITUTE, INdT
WHEREI COME FROM
Been working with fluid interfaces for a long timeFlexibility, rapid development
Lots of prototyping, had to develop fastExample of a Media player
Experiments with Web, Qt, Declarative UIOur interfaces have all been canvas based
Targeting different display, input devicesTypes of display, resolution vs. dimension, keyboard vs. touch.
Lessons learnedHow we learned to design our applications
Clear Model/View/Controllerseparation is an advantage
Two types of controllers:
One handling interactionbetween Model and Viewand one handling user input
Declarative UI languagemakes it possible to make the interface a “theme”, thatcan easily be adapted perper device, by a designer
The input handling can bepart of that theme:
Click area size is a goodexample.
TRENDSWHY WE CARE
Some of the current trendsThe background for the applications of today
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
SOCIAL NETWORKING,
ALWAYS CONNECTED
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
ACCESS TO WHAT MATTERS TO ME
SOCIAL NETWORKING,
ALWAYS CONNECTED
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
IMPORTANT PERSONAL DATA
ONLINE
ACCESS TO WHAT MATTERS TO ME
SOCIAL NETWORKING,
ALWAYS CONNECTED
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
IMPORTANT PERSONAL DATA
ONLINE
ACCESS TO WHAT MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
ACCESS TO WHAT MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
ACCESS TO WHAT MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
TECHNOLOGY SHOULD NOT BE A DISTRACTION
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
TECHNOLOGY SHOULD NOT BE A DISTRACTIONBUT AN ENABLER
Some of the current trendsThe background for the applications of today
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
So Web is the future?The state of the Web
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
So Web is the future?The state of the Web
IN SOME AREAS, THE WEB IS NOT THERE TODAY
DESIGN/FASHION ORIENTED
IMPORTANT PERSONAL DATA
ONLINE
TECHNOLOGY IS NOT JUST A TOOL, BUT A WAY OF LIFEACCESS TO WHAT
MATTERS TO ME
FLUID INTERFACES
SOCIAL NETWORKING,
ALWAYS CONNECTED
PERSONAL
WEB IS EVERYWHERE!
So Web is the future?The state of the Web
IN SOME AREAS, THE WEB IS NOT THERE TODAY
BUT CAN IT BE?
DOES IT MAKES SENSE?
IS A MIXTURE / A HYBRID POSSIBLE?
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
Designed for contents (text, images, data...)
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
Designed for contents (text, images, data...)
Very flexible layouting
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
Designed for contents (text, images, data...)
Very flexible layouting
Zero-deployment / update-ability
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
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.
THE WEB IS VERY POWERFUL
Understanding the tools, filling the gapsThe power of Web as a technology
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
What is the catch?Why are we not all just using Web
It was designed for contents, patched for Web apps
What is the catch?Why are we not all just using Web
It was designed for contents, patched for Web apps
Expensive DOM manipulation
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
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...
But is it possible at all?Why are we not all just using Web
Yes! Google has many apps already, Palm WebOS isan even better example, providing:
DESIGN/FASHION ORIENTED INTERFACE
FLUID INTERFACES
PERSONALIZATION
But is it possible at all?Why are we not all just using Web
Yes! Google has many apps already, Palm WebOS isan even better example, providing:
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.
DESIGN/FASHION ORIENTED INTERFACE
FLUID INTERFACES
PERSONALIZATION
So does it make sense?
It does! in some situations
Remember:
So does it make sense?
It does! in some situations
Remember:
ACCESS TO WHAT MATTERS TO ME
So does it make sense?
It does! in some situations
Remember:
ACCESS TO WHAT MATTERS TO ME
ALWAYS CONNECTED
So does it make sense?
It does! in some situations
Remember:
PERSONAL DATA ONLINEACCESS TO WHAT
MATTERS TO ME
ALWAYS CONNECTED
So does it make sense?
It does! in some situations
Remember:
PERSONAL DATA ONLINEACCESS TO WHAT
MATTERS TO ME
ALWAYS CONNECTED
+ A LOT OF OTHER REASONS
The case of the established protocol
So why not just make a native app, Qt has QNetwork... + B + C
Access to online data is all about services
The case of the established protocol
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
Access to online data is all about services
The case of the established protocol
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
Access to online data is all about services
HTML + CSSJAVASCRIPTHTTP
A Web app is the protocol itself:
The case of the established protocol
This makes it possible for the service providerto change the inner workings of the app+service at any point, transparent to the user. The app lives online, but can have offline capabilities.
HTML + CSSJAVASCRIPTHTTP
Access to online data is all about services
For a Web application the protocol is:
Great integration with existing Web Services
Stocks, News feed, Weather forecast, Social Networking
There is so much out there, in use by our target group
Flickr, Twitter, Ovi Services....
So where does the Web failIdentifying some of the problems
- Hard to make fluid interfaces not designed for it
So where does the Web failIdentifying some of the problems
- Hard to make fluid interfaces not designed for it
- Extra care for making things work offline
So where does the Web failIdentifying 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
So where does the Web failIdentifying 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
So where does the Web failIdentifying 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
So where does the Web failIdentifying 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
But that can all be fixed, right?Searching for solutions
- Qt makes it easy to expose native API’s to JS
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
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
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
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
BACK TOTHE NATIVE SIDE
Let’s leave the Web for a while and have a look at QML
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT:
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
“End of the Widgets”
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
Easy to grasp, use and yet very flexible
“End of the Widgets”High Reuse
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT 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
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
JavaScript scripting, JSON like format
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT ANIMATION
JavaScript scripting, JSON like format
Embed QML in QML (even with HTTP, or so I’ve heard)
COOL STUFF DECLARATIVE INTERFACE LANGUAGE FOR QT
ALL ‘BOUT: FLUID INTERFACES PERSONALIZATION UI RAPIDDEVELOPMENT 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 ViewUse images from HTTP etc
Wow, that sounds too good to be trueBut you better believe it
Downsides?
Wow, that sounds too good to be trueBut you better believe it
Downsides?
It is not a standard
Wow, that sounds too good to be trueBut you better believe it
Downsides?
It is not a standard
You cannot target the iPhone, Android, Nokia ... etc
Wow, that sounds too good to be trueBut 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...?
Wow, that sounds too good to be trueBut 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
Wow, that sounds too good to be trueBut 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
WRT+QML Complementing Power
A look at use cases for both technologies
Online Widgets with offline abbilitiesGive the services more control
Get layout + contentsfrom a service
Make it work offline
Personalization
Good for widgets,
Social integration
Powerful layoutRemember Word vs. Pagemaker?
Make a lot of sense for text+images
QML has some support for this,
but it is not nearly as powerful
is powerful combinationCSS +HTML
Sometimes Web just doesn’t make senseLet’s consider a video player
When the app needs raw speed, lots of user interaction,
depends on native anyway, etc...
Native and Web working togetherUnited we are strong
How can we join the technologies
Native and Web working togetherUnited we are strong
How can we join the technologies
Manipulate / show iframes insteadof Webpages in QML
Native and Web working togetherUnited we are strong
How can we join the technologies
Manipulate / show iframes insteadof Webpages in QML
Enable cross iframe communication
Native and Web working togetherUnited we are strong
How can we join the technologies
Manipulate / show iframes insteadof Webpages in QML
Enable cross iframe communication
Less resources
Native and Web working togetherUnited we are strong
How can we join the technologies
Manipulate / show iframes insteadof Webpages in QML
Enable cross iframe communication
Less resources
Do a QML list with each item beingan iframe or a web element,can it get more hybrid that that? ;-)
Native and Web working togetherUnited we are strong
How can we join the technologies
Manipulate / show iframes insteadof Webpages in QML
Shared JS runtime, bind QML propsto iframe properties
Enable cross iframe communication
Less resources
Do a QML list with each item beingan iframe or a web element,can it get more hybrid that that? ;-)
Thanks for listening
KENNETH ROHDE CHRISTIANSENext-kenneth.christiansen@[email protected]
Understanding the tools, we fill the gaps
I hope that I have provided you with some new inputand steered up some discussion.