SlideShare a Scribd company logo
Hell is other browsers - Sartre


HTML5 apps on
 Samsung bada
               (and other platforms)


              Peter-Paul Koch (ppk)
            http://quirksmode.org
            http://twitter.com/ppk
 Samsung bada dev day, 3 June 2010
Creating applications
Modern smartphone users want
applications; bada users will not be
different.

Two options:
1) native apps
2) HTML5 apps
Creating applications
Native apps will be discussed in
detail in other sessions.

This session concentrates on HTML5
apps.
Differences
Native apps are written in C++,
compiled, and installed on the phone.

Pros:
1) Excellent performance, especially
   when it comes to graphics and
   animations
2) Access to device APIs
3) IDE
Differences
Native apps are written in Java,
compiled, and installed on the phone.

Cons:
1) Only available for bada; what if your
   target audience is larger than that?
Differences
HTML5 apps are written with web
standards, zipped, and installed on the
phone, where they run in the browser.

Pros:
1) Available on any device with a
   modern browser and W3C Widget
   support
Differences
HTML5 apps are written with web
standards, zipped, and installed on the
phone, where they run in the browser.

Cons:
1) Less beautiful UX
2) No (or little) access to device
   functionality such as camera, address
   book, or voice.
Which one to choose?
A) It's important that my app has the
   best UX possible, and that it can
   access phone functionality



B) It's important that my app runs on
   any platform.
Which one to choose?
A) It's important that my app has the
   best UX possible, and that it can
   access phone functionality
   => Native apps

B) It's important that my app runs on
   any platform.
Which one to choose?
A) It's important that my app has the
   best UX possible, and that it can
   access phone functionality

- Games
- Apps that tie in with the mobile
  platform (as opposed to the web at
  large)
Which one to choose?
A) It's important that my app has the
   best UX possible, and that it can
   access phone functionality



B) It's important that my app runs on
   any platform.
   => HTML5 apps
Which one to choose?
B) It's important that my app runs on
   any platform.

- Social media clients
- More in general: any app that
  facilitates easy communication with
  anyone (also non-bada users)
HTML5 apps
What is an HTML5 app?

- One core app written in HTML, CSS,
  and JavaScript
- Deployed to several mobile platforms
- If it can't be deployed it's still a
  web app. (This includes desktop
  browsers.)
HTML5 apps
Deployment

- W3C Widget (bada, Vodafone, Opera)
- Palm webOS app
- iPhone appcached site
- Apple Dashboard widgets and old
  Nokia widgets
- And if nothing works, it's still a
  website.
HTML5 apps
Deployment

- W3C Widgets will become default;
  work on bada, while Nokia and
  BlackBerry are switching
- We need a lot of other formats.
- Automated deployment. Upload web
  core to application, which returns all
  the different formats you need.
HTML5 apps
W3C Widgets are local applications
written in HTML, CSS, and JavaScript.

They run in a browser (Opera, Samsung
WebKit).

They can do Ajax requests for more
data.
Creating HTML5 apps
- Create 1 HTML page with the CSS,
  JavaScript, and images you need.
- Add an icon and a config.xml
- Zip the lot
- Change extension to .wgt
- Upload to a widget-capable phone
- It Just Works
HTML5 apps
In addition to bada they work in:

- Vodafone Widget Manager (Symbian,
  Android)
- any phone with Opera Mobile 9.51+
- Windows Mobile 6.5
- future Symbians (native)
- future BlackBerrys (with Java wrapper)
HTML5 apps
Besides...

If I have a W3C Widget on my S60 phone
and you have a Windows Mobile phone
I can send the widget via Bluetooth
and It Just Works

(Really; I've done it)
HTML5 apps
That does mean monetisation is going
to change:

- Pay for content instead of app
- Payments go through operators
  (simplest possible way)
HTML5 apps
Problems with HTML5 apps:
- Animations. JavaScript gets better and
  better, but animations remain a weak
  spot relative to other languages
- Access to phone functionality such as
  geolocation, the address book, the
  camera, and the file system
Device APIs
Context!

In order to serve the mobile context we
need to access phone functionality from
W3C Widgets.
Enter JavaScript device APIs
device.phone.call(
device.addressBook.entries['mom'].number)
Device APIs
- JIL (Vodafone, China Mobile)
- W3C Device API Working Group (just
  started)
- BONDI <-- bada
- WAC
- PhoneGap (iPhone, Android,
  Blackberry); temporary solution
Device API Security
Besides, there's a security problem.

If someone sends me a widget via
Bluetooth,
how am I going to know it isn't going to
steal my address book?

Serious problem. No real solution yet.
Mobile browsers
HTML5 apps run in the system
browser,
which in case of Samsung bada is
the Samsung WebKit.

We need to briefly talk about mobile
browsers.
Mobile browsers
-   Samsung WebKit   -   Iris
-   Opera Mobile     -   Bolt
-   NetFront         -   Skyfire
-   Safari           -   Obigo
-   Android WebKit   -   Fennec
-   Blackberry       -   Teashark
-   S60 WebKit       -   Ozone
-   IE Mobile        -   Opera Mini
-   Palm WebKit
You may groan now.
Mobile browsers
-   Samsung WebKit        -   Iris
-   Opera Mobile          -   Bolt
-   NetFront              -   Skyfire
-   Safari                -   Obigo
-   Android WebKit        -   Fennec
-   Blackberry            -   Teashark
-   S60 WebKit            -   Ozone
-   IE Mobile             -   Opera Mini
-   Palm
These are all WebKit browsers.
WebKit Mobile
There is no WebKit on Mobile.
There's Samsung WebKit,
and Safari iPhone
and Android WebKit (v3 and v5)
and Symbian WebKit
and Iris, which was bought by Blackberry
and Bolt, Ozone, Teashark, and a few more


These WebKits are all different.
There is no WebKit on Mobile.
Exhibit A: http://quirksmode.org/m
Mobile browsers
The main battle on mobile is now
between “WebKit” and Opera.

WebKit is free, but that means
everybody creates his own version.

Opera costs money (for vendors), but
there's some central planning, and
therefore less differences.
Mobile browsers
The practical offshoot is that you have
to test your HTML5 app in several
browsers.
Mobile browsers
Focus on (roughly in this order):
- Samsung WebKit
- Opera Mobile
- iPhone Safari
- Android WebKit
- Symbian WebKit
- (upcoming: BlackBerry WebKit)
Testing
Initially you can test in any browser;
an HTML5 app is just web
technology, after all.

Still, it makes sense to test in a
WebKit browser (Safari or Chrome),
as well as Opera.
Testing
When a test version of your widget
is finished, zip it up and test it in
Opera desktop, which also runs
widgets.

There is a Samsung WebKit
emulator in the SDK.
Testing
Finally, upload it to a Samsung bada
phone and test it there.

Do not skip this step!

Widgets may run well on desktop,
but fail on mobile devices,
for instance because of the screen
size.
Thank you!
      Questions?
http://quirksmode.org
http://twitter.com/ppk

More Related Content

What's hot

PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
Ryan Stewart
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
Vince Aggrippino
 
Mobile HTML5 websites and Hybrid Apps with AngularJS
Mobile HTML5 websites and Hybrid Apps with AngularJSMobile HTML5 websites and Hybrid Apps with AngularJS
Mobile HTML5 websites and Hybrid Apps with AngularJS
Carlo Bonamico
 
Native vs. Hybrid Apps
Native vs. Hybrid AppsNative vs. Hybrid Apps
Native vs. Hybrid Apps
Visual Net Design
 
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UX
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UXMobile Web Evolution - Rich Mobile Applications and Real-time Web UX
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UXPaul Golding
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy Apigee | Google Cloud
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
Senthil Kumar Kaliathan
 
Hybrid mobile app development
Hybrid mobile app developmentHybrid mobile app development
Hybrid mobile app development
Chamil Madusanka
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
Ashish Saxena
 
PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologia
lorinbeer
 
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersDebugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Troy Miles
 
Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3
Johannes Ippen
 
An introduction to mobile app development and investing
An introduction to mobile app development and investingAn introduction to mobile app development and investing
An introduction to mobile app development and investing
Brandon Na
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
Nick Landry
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
Effective
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
Monaca
 
Chat bots101 - practical insights on the business of bots
Chat bots101 - practical insights on the business of botsChat bots101 - practical insights on the business of bots
Chat bots101 - practical insights on the business of bots
BAM
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
Quang Minh Dao
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Developmentshikishiji
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileEric Overfield
 

What's hot (20)

PhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JSPhoneGap: Building Mobile Applications with HTML/JS
PhoneGap: Building Mobile Applications with HTML/JS
 
Mobile web application development
Mobile web application developmentMobile web application development
Mobile web application development
 
Mobile HTML5 websites and Hybrid Apps with AngularJS
Mobile HTML5 websites and Hybrid Apps with AngularJSMobile HTML5 websites and Hybrid Apps with AngularJS
Mobile HTML5 websites and Hybrid Apps with AngularJS
 
Native vs. Hybrid Apps
Native vs. Hybrid AppsNative vs. Hybrid Apps
Native vs. Hybrid Apps
 
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UX
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UXMobile Web Evolution - Rich Mobile Applications and Real-time Web UX
Mobile Web Evolution - Rich Mobile Applications and Real-time Web UX
 
HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy HTML5: The Apps, the Frameworks, the Controversy
HTML5: The Apps, the Frameworks, the Controversy
 
Native vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App DevelopmentNative vs hybrid approach Mobile App Development
Native vs hybrid approach Mobile App Development
 
Hybrid mobile app development
Hybrid mobile app developmentHybrid mobile app development
Hybrid mobile app development
 
Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps   Progressive Web Apps –The Future of Apps
Progressive Web Apps –The Future of Apps
 
PhoneGap: a brief history and apologia
PhoneGap: a brief history and apologiaPhoneGap: a brief history and apologia
PhoneGap: a brief history and apologia
 
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web BrowsersDebugging and Tuning Mobile Web Sites with Modern Web Browsers
Debugging and Tuning Mobile Web Sites with Modern Web Browsers
 
Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3Designing Mobile Apps with HTML5 & CSS3
Designing Mobile Apps with HTML5 & CSS3
 
An introduction to mobile app development and investing
An introduction to mobile app development and investingAn introduction to mobile app development and investing
An introduction to mobile app development and investing
 
The Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App DevelopmentThe Great Mobile Debate: Native vs. Hybrid App Development
The Great Mobile Debate: Native vs. Hybrid App Development
 
Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?Pick Your Poison – Mobile Web, Native or Hybrid?
Pick Your Poison – Mobile Web, Native or Hybrid?
 
Cordova and PhoneGap Insights
Cordova and PhoneGap InsightsCordova and PhoneGap Insights
Cordova and PhoneGap Insights
 
Chat bots101 - practical insights on the business of bots
Chat bots101 - practical insights on the business of botsChat bots101 - practical insights on the business of bots
Chat bots101 - practical insights on the business of bots
 
Introduction to PhoneGap
Introduction to PhoneGapIntroduction to PhoneGap
Introduction to PhoneGap
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
Shape SharePoint 2013 for Mobile
Shape SharePoint 2013 for MobileShape SharePoint 2013 for Mobile
Shape SharePoint 2013 for Mobile
 

Viewers also liked

Bada familiar foundations
Bada  familiar foundationsBada  familiar foundations
Bada familiar foundations
jlansdell
 
samsung apps for bada
samsung apps for badasamsung apps for bada
samsung apps for bada
Samsung
 
Bada challenge Introduction
Bada challenge IntroductionBada challenge Introduction
Bada challenge Introduction
SteelMedia
 
bada platform & Samsung’s multi-platform strategy [IndicThreads Mobile Appli...
bada platform & Samsung’s multi-platform strategy  [IndicThreads Mobile Appli...bada platform & Samsung’s multi-platform strategy  [IndicThreads Mobile Appli...
bada platform & Samsung’s multi-platform strategy [IndicThreads Mobile Appli...
IndicThreads
 
Toozla for Samsung Wave mock-up
Toozla for Samsung Wave mock-upToozla for Samsung Wave mock-up
Toozla for Samsung Wave mock-up
Tomcat Toozla
 
RENOVATOR (Eng)
RENOVATOR (Eng)RENOVATOR (Eng)
RENOVATOR (Eng)
PR Holding
 
Samsung and bada mobile
Samsung and bada mobileSamsung and bada mobile
Samsung and bada mobile
vivienchi
 

Viewers also liked (7)

Bada familiar foundations
Bada  familiar foundationsBada  familiar foundations
Bada familiar foundations
 
samsung apps for bada
samsung apps for badasamsung apps for bada
samsung apps for bada
 
Bada challenge Introduction
Bada challenge IntroductionBada challenge Introduction
Bada challenge Introduction
 
bada platform & Samsung’s multi-platform strategy [IndicThreads Mobile Appli...
bada platform & Samsung’s multi-platform strategy  [IndicThreads Mobile Appli...bada platform & Samsung’s multi-platform strategy  [IndicThreads Mobile Appli...
bada platform & Samsung’s multi-platform strategy [IndicThreads Mobile Appli...
 
Toozla for Samsung Wave mock-up
Toozla for Samsung Wave mock-upToozla for Samsung Wave mock-up
Toozla for Samsung Wave mock-up
 
RENOVATOR (Eng)
RENOVATOR (Eng)RENOVATOR (Eng)
RENOVATOR (Eng)
 
Samsung and bada mobile
Samsung and bada mobileSamsung and bada mobile
Samsung and bada mobile
 

Similar to Samsung

Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobile
Peter-Paul Koch
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
Dominopoint - Italian Lotus User Group
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeCaridy Patino
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
Peter-Paul Koch
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
Nathan Smith
 
Hybrid mobile app
Hybrid mobile appHybrid mobile app
Hybrid mobile app
Palani Kumar
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
Peter-Paul Koch
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
Jonathan Jeon
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
MrJ1971
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
Maximiliano Firtman
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
360|Conferences
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiencesBen Mantooth
 
Native Mobile Application Using Java Script
Native  Mobile  Application  Using  Java ScriptNative  Mobile  Application  Using  Java Script
Native Mobile Application Using Java Script
Borey Lim
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Shane Church
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionBelen Barros Pena
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
Christian Heindel
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
Caridy Patino
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
St. Petersburg College
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Tom Deryckere
 

Similar to Samsung (20)

Google presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobileGoogle presentation: The Open Web goes mobile
Google presentation: The Open Web goes mobile
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - RecifeThe challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
The challenges of building mobile HTML5 applications - FEEC Brazil 2012 - Recife
 
The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009The Mobile Web - Fronteers 2009
The Mobile Web - Fronteers 2009
 
HTML5 Can't Do That
HTML5 Can't Do ThatHTML5 Can't Do That
HTML5 Can't Do That
 
Hybrid Mobile App
Hybrid Mobile AppHybrid Mobile App
Hybrid Mobile App
 
Hybrid mobile app
Hybrid mobile appHybrid mobile app
Hybrid mobile app
 
JSON over SMS
JSON over SMSJSON over SMS
JSON over SMS
 
Future of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App StoreFuture of Mobile Web Application and Web App Store
Future of Mobile Web Application and Web App Store
 
HTML5 and the Mobile Web
HTML5 and the Mobile WebHTML5 and the Mobile Web
HTML5 and the Mobile Web
 
Mobile Widgets Development
Mobile Widgets DevelopmentMobile Widgets Development
Mobile Widgets Development
 
Inside Mobile Widgets Publish
Inside Mobile Widgets PublishInside Mobile Widgets Publish
Inside Mobile Widgets Publish
 
Best practices for delivering quality web experiences
Best practices for delivering quality web experiencesBest practices for delivering quality web experiences
Best practices for delivering quality web experiences
 
Native Mobile Application Using Java Script
Native  Mobile  Application  Using  Java ScriptNative  Mobile  Application  Using  Java Script
Native Mobile Application Using Java Script
 
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
Pick Your Poison – Mobile Web, Native, or Hybrid? - Denver Startup Week - Oct...
 
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fictionFragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
 
Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5Mobile applications for SharePoint using HTML5
Mobile applications for SharePoint using HTML5
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web FragmentationOpen Source to the Rescue of Mobile App and Mobile Web Fragmentation
Open Source to the Rescue of Mobile App and Mobile Web Fragmentation
 

More from Peter-Paul Koch

Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile webPeter-Paul Koch
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
Peter-Paul Koch
 
The future of the mobile web
The future of the mobile webThe future of the mobile web
The future of the mobile webPeter-Paul Koch
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser worldPeter-Paul Koch
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpoPeter-Paul Koch
 
The touch events
The touch eventsThe touch events
The touch events
Peter-Paul Koch
 
State of the Mobile Browsers
State of the Mobile BrowsersState of the Mobile Browsers
State of the Mobile Browsers
Peter-Paul Koch
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
Peter-Paul Koch
 
Voices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsVoices That Matter: JavaScript Events
Voices That Matter: JavaScript Events
Peter-Paul Koch
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The Browsers
Peter-Paul Koch
 
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScriptAn Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
Peter-Paul Koch
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
Peter-Paul Koch
 

More from Peter-Paul Koch (13)

Rethinking the mobile web
Rethinking the mobile webRethinking the mobile web
Rethinking the mobile web
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
The future of the mobile web
The future of the mobile webThe future of the mobile web
The future of the mobile web
 
The mobile browser world
The mobile browser worldThe mobile browser world
The mobile browser world
 
The touch events
The touch eventsThe touch events
The touch events
 
The touch events - WebExpo
The touch events - WebExpoThe touch events - WebExpo
The touch events - WebExpo
 
The touch events
The touch eventsThe touch events
The touch events
 
State of the Mobile Browsers
State of the Mobile BrowsersState of the Mobile Browsers
State of the Mobile Browsers
 
Vodafone Widget Camp
Vodafone Widget CampVodafone Widget Camp
Vodafone Widget Camp
 
Voices That Matter: JavaScript Events
Voices That Matter: JavaScript EventsVoices That Matter: JavaScript Events
Voices That Matter: JavaScript Events
 
The Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The BrowsersThe Ajax Experience: State Of The Browsers
The Ajax Experience: State Of The Browsers
 
An Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScriptAn Event Apart Boston: Principles of Unobtrusive JavaScript
An Event Apart Boston: Principles of Unobtrusive JavaScript
 
Yahoo presentation: JavaScript Events
Yahoo presentation: JavaScript EventsYahoo presentation: JavaScript Events
Yahoo presentation: JavaScript Events
 

Recently uploaded

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
Safe Software
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
Product School
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
UiPathCommunity
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 

Recently uploaded (20)

Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Essentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with ParametersEssentials of Automations: Optimizing FME Workflows with Parameters
Essentials of Automations: Optimizing FME Workflows with Parameters
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...How world-class product teams are winning in the AI era by CEO and Founder, P...
How world-class product teams are winning in the AI era by CEO and Founder, P...
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 

Samsung

  • 1. Hell is other browsers - Sartre HTML5 apps on Samsung bada (and other platforms) Peter-Paul Koch (ppk) http://quirksmode.org http://twitter.com/ppk Samsung bada dev day, 3 June 2010
  • 2. Creating applications Modern smartphone users want applications; bada users will not be different. Two options: 1) native apps 2) HTML5 apps
  • 3. Creating applications Native apps will be discussed in detail in other sessions. This session concentrates on HTML5 apps.
  • 4. Differences Native apps are written in C++, compiled, and installed on the phone. Pros: 1) Excellent performance, especially when it comes to graphics and animations 2) Access to device APIs 3) IDE
  • 5. Differences Native apps are written in Java, compiled, and installed on the phone. Cons: 1) Only available for bada; what if your target audience is larger than that?
  • 6. Differences HTML5 apps are written with web standards, zipped, and installed on the phone, where they run in the browser. Pros: 1) Available on any device with a modern browser and W3C Widget support
  • 7. Differences HTML5 apps are written with web standards, zipped, and installed on the phone, where they run in the browser. Cons: 1) Less beautiful UX 2) No (or little) access to device functionality such as camera, address book, or voice.
  • 8. Which one to choose? A) It's important that my app has the best UX possible, and that it can access phone functionality B) It's important that my app runs on any platform.
  • 9. Which one to choose? A) It's important that my app has the best UX possible, and that it can access phone functionality => Native apps B) It's important that my app runs on any platform.
  • 10. Which one to choose? A) It's important that my app has the best UX possible, and that it can access phone functionality - Games - Apps that tie in with the mobile platform (as opposed to the web at large)
  • 11. Which one to choose? A) It's important that my app has the best UX possible, and that it can access phone functionality B) It's important that my app runs on any platform. => HTML5 apps
  • 12. Which one to choose? B) It's important that my app runs on any platform. - Social media clients - More in general: any app that facilitates easy communication with anyone (also non-bada users)
  • 13. HTML5 apps What is an HTML5 app? - One core app written in HTML, CSS, and JavaScript - Deployed to several mobile platforms - If it can't be deployed it's still a web app. (This includes desktop browsers.)
  • 14. HTML5 apps Deployment - W3C Widget (bada, Vodafone, Opera) - Palm webOS app - iPhone appcached site - Apple Dashboard widgets and old Nokia widgets - And if nothing works, it's still a website.
  • 15. HTML5 apps Deployment - W3C Widgets will become default; work on bada, while Nokia and BlackBerry are switching - We need a lot of other formats. - Automated deployment. Upload web core to application, which returns all the different formats you need.
  • 16. HTML5 apps W3C Widgets are local applications written in HTML, CSS, and JavaScript. They run in a browser (Opera, Samsung WebKit). They can do Ajax requests for more data.
  • 17. Creating HTML5 apps - Create 1 HTML page with the CSS, JavaScript, and images you need. - Add an icon and a config.xml - Zip the lot - Change extension to .wgt - Upload to a widget-capable phone - It Just Works
  • 18. HTML5 apps In addition to bada they work in: - Vodafone Widget Manager (Symbian, Android) - any phone with Opera Mobile 9.51+ - Windows Mobile 6.5 - future Symbians (native) - future BlackBerrys (with Java wrapper)
  • 19. HTML5 apps Besides... If I have a W3C Widget on my S60 phone and you have a Windows Mobile phone I can send the widget via Bluetooth and It Just Works (Really; I've done it)
  • 20. HTML5 apps That does mean monetisation is going to change: - Pay for content instead of app - Payments go through operators (simplest possible way)
  • 21. HTML5 apps Problems with HTML5 apps: - Animations. JavaScript gets better and better, but animations remain a weak spot relative to other languages - Access to phone functionality such as geolocation, the address book, the camera, and the file system
  • 22. Device APIs Context! In order to serve the mobile context we need to access phone functionality from W3C Widgets. Enter JavaScript device APIs device.phone.call( device.addressBook.entries['mom'].number)
  • 23. Device APIs - JIL (Vodafone, China Mobile) - W3C Device API Working Group (just started) - BONDI <-- bada - WAC - PhoneGap (iPhone, Android, Blackberry); temporary solution
  • 24. Device API Security Besides, there's a security problem. If someone sends me a widget via Bluetooth, how am I going to know it isn't going to steal my address book? Serious problem. No real solution yet.
  • 25. Mobile browsers HTML5 apps run in the system browser, which in case of Samsung bada is the Samsung WebKit. We need to briefly talk about mobile browsers.
  • 26. Mobile browsers - Samsung WebKit - Iris - Opera Mobile - Bolt - NetFront - Skyfire - Safari - Obigo - Android WebKit - Fennec - Blackberry - Teashark - S60 WebKit - Ozone - IE Mobile - Opera Mini - Palm WebKit You may groan now.
  • 27. Mobile browsers - Samsung WebKit - Iris - Opera Mobile - Bolt - NetFront - Skyfire - Safari - Obigo - Android WebKit - Fennec - Blackberry - Teashark - S60 WebKit - Ozone - IE Mobile - Opera Mini - Palm These are all WebKit browsers.
  • 28. WebKit Mobile There is no WebKit on Mobile. There's Samsung WebKit, and Safari iPhone and Android WebKit (v3 and v5) and Symbian WebKit and Iris, which was bought by Blackberry and Bolt, Ozone, Teashark, and a few more These WebKits are all different.
  • 29. There is no WebKit on Mobile. Exhibit A: http://quirksmode.org/m
  • 30. Mobile browsers The main battle on mobile is now between “WebKit” and Opera. WebKit is free, but that means everybody creates his own version. Opera costs money (for vendors), but there's some central planning, and therefore less differences.
  • 31. Mobile browsers The practical offshoot is that you have to test your HTML5 app in several browsers.
  • 32. Mobile browsers Focus on (roughly in this order): - Samsung WebKit - Opera Mobile - iPhone Safari - Android WebKit - Symbian WebKit - (upcoming: BlackBerry WebKit)
  • 33. Testing Initially you can test in any browser; an HTML5 app is just web technology, after all. Still, it makes sense to test in a WebKit browser (Safari or Chrome), as well as Opera.
  • 34. Testing When a test version of your widget is finished, zip it up and test it in Opera desktop, which also runs widgets. There is a Samsung WebKit emulator in the SDK.
  • 35. Testing Finally, upload it to a Samsung bada phone and test it there. Do not skip this step! Widgets may run well on desktop, but fail on mobile devices, for instance because of the screen size.
  • 36. Thank you! Questions? http://quirksmode.org http://twitter.com/ppk