SlideShare a Scribd company logo
Smart Phone Development
Using Web Technologies
Apple Cupcakes


Apple have 250,000 apps. 6.5 billion downloads
Android have 30,000 apps
Upcoming: Windows 7 Phone
Толку многу јазици, толку
малку време
iPhone: Objective C
Android: Java
Nokia: C++
Windows 7: .NET
Palm Pre: HTML + CSS + JS
I already know how to do
HTML, CSS and JavaScript
PhoneGap
PhoneGap


Runs on iPhone, iPad, Android, Palm Pre, Nokia and
Blackberry
Loads embedded web browser (Usually Webkit)
Adds JS bridge
PhoneGap APIs

Accelerometer
Camera
Contacts
Geolocation
Advantages


Fast to develop
  70-80% done in a browser
  Use existing development tools
Disadvantages
Much slower than native
Harder to look native
Can’t access everything (yet)
No position:
fixed support

No debugger!
File system support is limited
Lifecycle

                                               e
       Start Up                            vic !
                                         De dy
                                             a
                                          Re


                  Load Web
                   Browser
             Load HTML         Load JS
                      Load CSS
Webkit or go home
HTML 5 + CSS 3
 SQLite
 Hardware accelerated animations
 Use your favourite framework
   jQuery
   ExtJS
Frameworks


jqTouch (jQuery based)
SenchaTouch (ExtJS + jqTouch + Raphaël)
iScroll 3.0
jqTouch

Combination of HTML, CSS and JavaScript libraries
Designed to emulate native look and feel
HTML + CSS kind of clunky
Worth it for the JS
SenchaTouch

Combination of HTML, CSS and JavaScript libraries
Uses ExtJS (better for app development)
Better performance than jqTouch
Weird license
iScroll

 Not a full framework
 Fixes the scroll problem
 Uncanny valley problem
 Author working on full framework (GhostTouch)
Go Speed Racer!
Image loading is slow
Rendering a gradient, makes an image (use canvas)
Accelerated CSS animations
  opacity
  translate3d (NOT translate)
Use native touch events
Pretending to go Native
 Input fields have
 additional types (email,
 phone, search)
 Turn on/off auto
 correction and auto
 capitalize
 Notification API
 provides alert, confirm
In the Wild

 Memory and CPU are an issue
 There is some arbitrary 10Mb image limit
 Only handles text files (base64 FTW)
 Working Asynchronously is hard
Titanium
Actually go native


 Compiles JavaScript down to symbols
 Symbols link to either Obj-C libraries or Java classes
 Effectively running natively
Wait!
Apple vs. Adobe


Flash CS5 was supposed to do something similar
Apple EULA changed to stop 3rd party compilers
It’s now OK!
Development not as we
know it

Even though it's JavaScript, it's still Desktop*
development
No HTML or CSS. Just JavaScript.
Advantages

Uses native UI widgets
Much faster than WebKit
No crazy square bracket notation
Pretty good abstractions
APIs


Much bigger API than PhoneGap
Mainly generic, some platform specific
Threaded UI means file & database functions return
synchronously
What it looks like
Disadvantages
Documentation is a little lacking. (Though forums are
pretty good)
Structuring code is less defined than on the web
Again, no debugger
Code - Build - Crash cycle much slower than Code -
Refresh cycle
Unit testing is hard
Conclusion


PhoneGap better for non-native UIs, fast prototyping,
simple apps, and web based apps
Titanium better for native UIs. Nice gateway drug for
those of use that don't understand C-pointers
Thanks

More Related Content

What's hot

jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
dmethvin
 

What's hot (20)

BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
The Onion
The OnionThe Onion
The Onion
 
Sfk13
Sfk13Sfk13
Sfk13
 
jQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript TestingjQuery Chicago 2014 - Next-generation JavaScript Testing
jQuery Chicago 2014 - Next-generation JavaScript Testing
 
Selenium testing
Selenium testingSelenium testing
Selenium testing
 
Web dev syllabus
Web dev syllabusWeb dev syllabus
Web dev syllabus
 
Solutions to Every WordPress Problem Imaginable!
Solutions to Every WordPress Problem Imaginable!Solutions to Every WordPress Problem Imaginable!
Solutions to Every WordPress Problem Imaginable!
 
Ember Overview in 5 Minutes
Ember Overview in 5 MinutesEmber Overview in 5 Minutes
Ember Overview in 5 Minutes
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Setting up your development environment
Setting up your development environmentSetting up your development environment
Setting up your development environment
 
Doing More with LESS for CSS
Doing More with LESS for CSSDoing More with LESS for CSS
Doing More with LESS for CSS
 
How to customise Joomla
How to customise JoomlaHow to customise Joomla
How to customise Joomla
 
FITC - Here Be Dragons: Advanced JavaScript Debugging
FITC - Here Be Dragons: Advanced JavaScript DebuggingFITC - Here Be Dragons: Advanced JavaScript Debugging
FITC - Here Be Dragons: Advanced JavaScript Debugging
 
Building Desktop RIAs with JavaScript and PHP - ZendCon09
Building Desktop RIAs with JavaScript and PHP - ZendCon09Building Desktop RIAs with JavaScript and PHP - ZendCon09
Building Desktop RIAs with JavaScript and PHP - ZendCon09
 
jQuery Conference 2012 keynote
jQuery Conference 2012 keynotejQuery Conference 2012 keynote
jQuery Conference 2012 keynote
 
BBS Selenium & Docker
BBS Selenium & Docker BBS Selenium & Docker
BBS Selenium & Docker
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
Maven Tutorial for Beginners | Edureka
Maven Tutorial for Beginners | EdurekaMaven Tutorial for Beginners | Edureka
Maven Tutorial for Beginners | Edureka
 
Joomla SEO basics 2016
Joomla SEO basics 2016Joomla SEO basics 2016
Joomla SEO basics 2016
 
Automated testing with Cypress
Automated testing with CypressAutomated testing with Cypress
Automated testing with Cypress
 

Viewers also liked

Animation Restaurant2
Animation Restaurant2Animation Restaurant2
Animation Restaurant2
tunk
 
สร้าง Soap web services ง่ายๆ
สร้าง Soap web services ง่ายๆสร้าง Soap web services ง่ายๆ
สร้าง Soap web services ง่ายๆ
Utain Wongpreaw
 
Dream mx
Dream mxDream mx
Dream mx
phochai
 

Viewers also liked (17)

Handset Design for Digital India Initiative
Handset Design for Digital India Initiative Handset Design for Digital India Initiative
Handset Design for Digital India Initiative
 
Brew up a Rich Web Application with Cappuccino
Brew up a Rich Web Application with CappuccinoBrew up a Rich Web Application with Cappuccino
Brew up a Rich Web Application with Cappuccino
 
Animation Restaurant2
Animation Restaurant2Animation Restaurant2
Animation Restaurant2
 
Web app
Web appWeb app
Web app
 
Java Web Programming [Servlet/JSP] Using GlassFish and NetBeans
Java Web Programming [Servlet/JSP] Using GlassFish and NetBeansJava Web Programming [Servlet/JSP] Using GlassFish and NetBeans
Java Web Programming [Servlet/JSP] Using GlassFish and NetBeans
 
การจัดกิจกรรมการเรียนรู้ใน Web Application : Edmodo
การจัดกิจกรรมการเรียนรู้ใน Web  Application : Edmodoการจัดกิจกรรมการเรียนรู้ใน Web  Application : Edmodo
การจัดกิจกรรมการเรียนรู้ใน Web Application : Edmodo
 
lesson1 JSP
lesson1 JSPlesson1 JSP
lesson1 JSP
 
Hybrid vs Native vs Web Apps
Hybrid vs Native vs Web AppsHybrid vs Native vs Web Apps
Hybrid vs Native vs Web Apps
 
Java Web programming Using NetBeans
Java Web programming Using NetBeansJava Web programming Using NetBeans
Java Web programming Using NetBeans
 
lesson4 JSP
lesson4 JSPlesson4 JSP
lesson4 JSP
 
สร้าง Soap web services ง่ายๆ
สร้าง Soap web services ง่ายๆสร้าง Soap web services ง่ายๆ
สร้าง Soap web services ง่ายๆ
 
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 04
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 04การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 04
การพัฒนาเอกสารออนไลน์ขั้นสูง Lect 04
 
Dream mx
Dream mxDream mx
Dream mx
 
Smart Phone
Smart PhoneSmart Phone
Smart Phone
 
New product development strategy of samsung
New product development strategy of samsungNew product development strategy of samsung
New product development strategy of samsung
 
Web Based Application Development with Open Source
Web Based Application Development with Open SourceWeb Based Application Development with Open Source
Web Based Application Development with Open Source
 
Google Ppt
Google PptGoogle Ppt
Google Ppt
 

Similar to Smart phone development

Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
Kevingo Tsai
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
James Pearce
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
vs4vijay
 

Similar to Smart phone development (20)

Zepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-FrameworksZepto and the rise of the JavaScript Micro-Frameworks
Zepto and the rise of the JavaScript Micro-Frameworks
 
HTML5 Technical Executive Summary
HTML5 Technical Executive SummaryHTML5 Technical Executive Summary
HTML5 Technical Executive Summary
 
Front-End Engineering 101
Front-End Engineering 101Front-End Engineering 101
Front-End Engineering 101
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)HTML5 - The Python Angle (PyCon Ireland 2010)
HTML5 - The Python Angle (PyCon Ireland 2010)
 
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5
 
Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta Workshop HTML5+PhoneGap by Ivano Malavolta
Workshop HTML5+PhoneGap by Ivano Malavolta
 
GWT = easy AJAX
GWT = easy AJAXGWT = easy AJAX
GWT = easy AJAX
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Web II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side developmentWeb II - 01 - Introduction to server-side development
Web II - 01 - Introduction to server-side development
 
From Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holesFrom Flash to Canvas - a penchant for black holes
From Flash to Canvas - a penchant for black holes
 
HTML5 Comprehensive Guide
HTML5 Comprehensive GuideHTML5 Comprehensive Guide
HTML5 Comprehensive Guide
 
An introduction to Titanium
An introduction to TitaniumAn introduction to Titanium
An introduction to Titanium
 
December 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig PresentationDecember 4 SDForum Java Sig Presentation
December 4 SDForum Java Sig Presentation
 
Vaadin intro at GWT.create conference
Vaadin intro at GWT.create conferenceVaadin intro at GWT.create conference
Vaadin intro at GWT.create conference
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
Playframework + Twitter Bootstrap
Playframework + Twitter BootstrapPlayframework + Twitter Bootstrap
Playframework + Twitter Bootstrap
 
DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5DevTeach Ottawa - Silverlight5 and HTML5
DevTeach Ottawa - Silverlight5 and HTML5
 
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
 
HTML5 Presentation
HTML5 PresentationHTML5 Presentation
HTML5 Presentation
 

Recently uploaded

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

Recently uploaded (20)

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
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2UiPath Test Automation using UiPath Test Suite series, part 2
UiPath Test Automation using UiPath Test Suite series, part 2
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
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...
 
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
 
When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...When stars align: studies in data quality, knowledge graphs, and machine lear...
When stars align: studies in data quality, knowledge graphs, and machine lear...
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
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
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
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...
 
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualitySoftware Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
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...
 

Smart phone development

Editor's Notes