SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
Building Mobile Apps
with PhoneGap and
Backbone
10 November 2013
Who am I?
Hi, I am Troy. I have fun as a full stack programmer. I
develop using ASP.NET MVC or Node.js on the backend
and the web or mobile up front. 	

!

I can be reached at: rockncoder@gmail.com
Who are you?
I am assuming you are familiar with web programming
and have some knowledge of JavaScript.
The End of HTML5 as a
Platform?
• Facebook mobile apps on iOS and Android
were originally using HTML5	


• Users complained about performance	

• In 2012, Facebook switch to native apps	

• The pundits announced the end of HTML5
as a mobile platform
The Pieces
• PhoneGap	

• Backbone.js	

• jQuery Mobile
PhoneGap
“PhoneGap is an open source solution for
building cross-platform mobile apps with
standards-based Web technologies like
HTML, JavaScript, CSS.” 

http://phonegap.com/about/faq/
Backbone.js
“Backbone.js gives structure to web
applications by providing models with keyvalue binding and custom events, collections
with a rich API of enumerable
functions,views with declarative event
handling, and connects it all to your existing
API over a RESTful JSON interface.”

http://documentcloud.github.io/backbone/

jQuery Mobile
“A unified, HTML5-based user interface
system for all popular mobile device
platforms, built on the rock-solid jQuery and
jQuery UI foundation. Its lightweight code is
built with progressive enhancement, and has
a flexible, easily themeable design.”

http://jquerymobile.com/

PhoneGap
PhoneGap vs. Cordova
• Adobe owns the name PhoneGap	

• They open-sourced the project to the
Apache Foundation as Cordova	


• For most cases Cordova is pronounced
PhoneGap
PhoneGap is not...
• a turnkey system for turning websites into
mobile apps	


• a way for non-developers to make mobile
apps	


• a way to bypass any mobile app store	

• easy
PhoneGap is not the
web

• The HTML, CSS, and JavaScript files are all
on the device	


• PhoneGap apps use the web mainly to
upload/download data
Commands
• cordova create - create your app’s folder	

• cordova platform add - add a device	

• cordova build - creates the project folders	

• cordova run - compile & deploy 

(Android only)
Source Code
• www - base source code	

• plugins - PhoneGap plugins	

• merges - device specific differences	

• platforms - generated device specific files
PhoneGap wrapper
• Initializes itself	

• Creates a full screen browser view	

• Loads/executes the index.html file	

• Provides a “deviceready” event to HTML	

• Provides a way for HTML to bridge gap
separating it from the device side
Backbone.js
JavaScript Sucks
• Has objects but no classes	

• No information hiding facilities 	

• No structure	

• jQuery made things worse, not better	

• Backbone brings order to chaos
Order from chaos
• Backbone is a MV* framework	

• M - models	

• V - views	

• * - other stuff like collections and router	

• but no controller
Backbone Pieces
• models	

• collections 	

• views	

• router
Models
• The basic data object	

• Very flexible 	

• Built in functions
Collections
• Collections of model objects	

• Events for changes	

• Accepts a URL for RESTful API
3rd Party Collection
• Often you need data from a 3rd party	

• Backbone makes this simple	

• In many cases you can only implement the
GET verb	


• Use the parse() method to intercept the
call and clean the data
Views
• Render data the page	

• We use templates not string 	

• Backbones has templating engine built in	

• but we Handlebars.js
The router
• URL based routes	

• Not for bookmarking but for state
maintenance	


• One router per app
jQuery Mobile
No UI Framework
• PhoneGap uses HTML/CSS for UI	

• Makes building app difficult	

• jQuery Mobile is one possible solution	

• jqMobi, Sencha, iUI, etc.
A UI Framework
• jQuery Mobile is a misunderstood project	

• Built on top of jQuery 	

• Like jQuery UI, but for mobile	

• Mobile/touch friendly website
The Router Problem
• Backbone is being used to handle routing	

• jQuery Mobile by default handles routing	

• This is a problem	

• To solve, we turn off JQM’s router
The Ready Problem
• A PhoneGap app shouldn’t start until the
“deviceready” event is received	


• A jQuery Mobile app shouldn’t start until
the “pageinit” event is received	


• A PhoneGap/jQuery Mobile app needs to
wait for both
Look & Feel
• jQuery Mobile looks iOS 6-ish	

• Not everyone likes that look	

• You can customize via ThemeRoller	

• Or use a canned look & feel	

• The merges directory is best spot to device
specific files
Resources

Contenu connexe

Plus de Troy Miles

Intro to React
Intro to ReactIntro to React
Intro to ReactTroy Miles
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN StackTroy Miles
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application TestingTroy Miles
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?Troy Miles
 
Angular Weekend
Angular WeekendAngular Weekend
Angular WeekendTroy Miles
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN StackTroy Miles
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScriptTroy Miles
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in ClojureTroy Miles
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-upTroy Miles
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You KnewTroy Miles
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Troy Miles
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutesTroy Miles
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEANTroy Miles
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveXTroy Miles
 
JavaScript Foundations Day1
JavaScript Foundations Day1JavaScript Foundations Day1
JavaScript Foundations Day1Troy Miles
 
AngularJS Beginner Day One
AngularJS Beginner Day OneAngularJS Beginner Day One
AngularJS Beginner Day OneTroy Miles
 
AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkTroy Miles
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsTroy Miles
 
Cross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-jsCross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-jsTroy Miles
 

Plus de Troy Miles (20)

Intro to React
Intro to ReactIntro to React
Intro to React
 
React Development with the MERN Stack
React Development with the MERN StackReact Development with the MERN Stack
React Development with the MERN Stack
 
Angular Application Testing
Angular Application TestingAngular Application Testing
Angular Application Testing
 
ReactJS.NET
ReactJS.NETReactJS.NET
ReactJS.NET
 
What is Angular version 4?
What is Angular version 4?What is Angular version 4?
What is Angular version 4?
 
Angular Weekend
Angular WeekendAngular Weekend
Angular Weekend
 
From MEAN to the MERN Stack
From MEAN to the MERN StackFrom MEAN to the MERN Stack
From MEAN to the MERN Stack
 
Functional Programming in JavaScript
Functional Programming in JavaScriptFunctional Programming in JavaScript
Functional Programming in JavaScript
 
Functional Programming in Clojure
Functional Programming in ClojureFunctional Programming in Clojure
Functional Programming in Clojure
 
MEAN Stack Warm-up
MEAN Stack Warm-upMEAN Stack Warm-up
MEAN Stack Warm-up
 
The JavaScript You Wished You Knew
The JavaScript You Wished You KnewThe JavaScript You Wished You Knew
The JavaScript You Wished You Knew
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
Build a Game in 60 minutes
Build a Game in 60 minutesBuild a Game in 60 minutes
Build a Game in 60 minutes
 
Quick & Dirty & MEAN
Quick & Dirty & MEANQuick & Dirty & MEAN
Quick & Dirty & MEAN
 
A Quick Intro to ReactiveX
A Quick Intro to ReactiveXA Quick Intro to ReactiveX
A Quick Intro to ReactiveX
 
JavaScript Foundations Day1
JavaScript Foundations Day1JavaScript Foundations Day1
JavaScript Foundations Day1
 
AngularJS Beginner Day One
AngularJS Beginner Day OneAngularJS Beginner Day One
AngularJS Beginner Day One
 
AngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic FrameworkAngularJS on Mobile with the Ionic Framework
AngularJS on Mobile with the Ionic Framework
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
 
Cross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-jsCross Platform Game Programming with Cocos2d-js
Cross Platform Game Programming with Cocos2d-js
 

Dernier

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Juan Carlos Gonzalez
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"DianaGray10
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Dernier (20)

Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?Governance in SharePoint Premium:What's in the box?
Governance in SharePoint Premium:What's in the box?
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
UiPath Clipboard AI: "A TIME Magazine Best Invention of 2023 Unveiled"
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Building Mobile Apps with PhoneGap and Backbone

  • 1. Building Mobile Apps with PhoneGap and Backbone 10 November 2013
  • 2. Who am I? Hi, I am Troy. I have fun as a full stack programmer. I develop using ASP.NET MVC or Node.js on the backend and the web or mobile up front. ! I can be reached at: rockncoder@gmail.com
  • 3. Who are you? I am assuming you are familiar with web programming and have some knowledge of JavaScript.
  • 4. The End of HTML5 as a Platform? • Facebook mobile apps on iOS and Android were originally using HTML5 • Users complained about performance • In 2012, Facebook switch to native apps • The pundits announced the end of HTML5 as a mobile platform
  • 5. The Pieces • PhoneGap • Backbone.js • jQuery Mobile
  • 6. PhoneGap “PhoneGap is an open source solution for building cross-platform mobile apps with standards-based Web technologies like HTML, JavaScript, CSS.” 
 http://phonegap.com/about/faq/
  • 7. Backbone.js “Backbone.js gives structure to web applications by providing models with keyvalue binding and custom events, collections with a rich API of enumerable functions,views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.”
 http://documentcloud.github.io/backbone/

  • 8. jQuery Mobile “A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”
 http://jquerymobile.com/

  • 10. PhoneGap vs. Cordova • Adobe owns the name PhoneGap • They open-sourced the project to the Apache Foundation as Cordova • For most cases Cordova is pronounced PhoneGap
  • 11. PhoneGap is not... • a turnkey system for turning websites into mobile apps • a way for non-developers to make mobile apps • a way to bypass any mobile app store • easy
  • 12. PhoneGap is not the web • The HTML, CSS, and JavaScript files are all on the device • PhoneGap apps use the web mainly to upload/download data
  • 13. Commands • cordova create - create your app’s folder • cordova platform add - add a device • cordova build - creates the project folders • cordova run - compile & deploy 
 (Android only)
  • 14. Source Code • www - base source code • plugins - PhoneGap plugins • merges - device specific differences • platforms - generated device specific files
  • 15. PhoneGap wrapper • Initializes itself • Creates a full screen browser view • Loads/executes the index.html file • Provides a “deviceready” event to HTML • Provides a way for HTML to bridge gap separating it from the device side
  • 17. JavaScript Sucks • Has objects but no classes • No information hiding facilities • No structure • jQuery made things worse, not better • Backbone brings order to chaos
  • 18. Order from chaos • Backbone is a MV* framework • M - models • V - views • * - other stuff like collections and router • but no controller
  • 19. Backbone Pieces • models • collections • views • router
  • 20. Models • The basic data object • Very flexible • Built in functions
  • 21. Collections • Collections of model objects • Events for changes • Accepts a URL for RESTful API
  • 22. 3rd Party Collection • Often you need data from a 3rd party • Backbone makes this simple • In many cases you can only implement the GET verb • Use the parse() method to intercept the call and clean the data
  • 23. Views • Render data the page • We use templates not string • Backbones has templating engine built in • but we Handlebars.js
  • 24. The router • URL based routes • Not for bookmarking but for state maintenance • One router per app
  • 26. No UI Framework • PhoneGap uses HTML/CSS for UI • Makes building app difficult • jQuery Mobile is one possible solution • jqMobi, Sencha, iUI, etc.
  • 27. A UI Framework • jQuery Mobile is a misunderstood project • Built on top of jQuery • Like jQuery UI, but for mobile • Mobile/touch friendly website
  • 28. The Router Problem • Backbone is being used to handle routing • jQuery Mobile by default handles routing • This is a problem • To solve, we turn off JQM’s router
  • 29. The Ready Problem • A PhoneGap app shouldn’t start until the “deviceready” event is received • A jQuery Mobile app shouldn’t start until the “pageinit” event is received • A PhoneGap/jQuery Mobile app needs to wait for both
  • 30. Look & Feel • jQuery Mobile looks iOS 6-ish • Not everyone likes that look • You can customize via ThemeRoller • Or use a canned look & feel • The merges directory is best spot to device specific files