DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
11 Monitoring and Observability Tools for 2023
Learn more
  1. DZone
  2. Data Engineering
  3. Databases
  4. PhoneGap Explained Visually

PhoneGap Explained Visually

Andrew Trice user avatar by
Andrew Trice
·
Mar. 23, 12 · Interview
Like (0)
Save
Tweet
Share
12.75K Views

Join the DZone community and get the full member experience.

Join For Free

i’ve been “out and about” lately, attending tech conferences, meetup groups, and meeting with developers in their offices, and i am getting great feedback on mobile development & phonegap. there are some common questions that i am often asked, and i hope this post helps everyone understand phonegap better.

phonegap

before i go too far, let me attempt to clearly state what phonegap is… phonegap is an application container technology that allows you to create natively-installed applications for mobile devices using html, css, & javascript.   the core engine for phonegap is also 100% open source, under the apache cordova project.  you can read more about phonegap under my “what is phonegap?” & other common questions post.


phonegap user interface

the user interface for phonegap applications is created using html, css, & javascript.  the ui layer of a phonegap application is a web browser view, which takes up 100% of the device width and 100% of the device height.

think of this as a “headless” web browser.  it renders html content, without the “chrome” or window decoration of a regular web browser.  you build your application to take advantage of this space, and you build navigational/interactive/content elements and application chrome into your html & css based user interface.

the web view used by phonegap is the same web view used by the native operating system.   on ios, this is the objective-c uiwebview class; on android, this is android.webkit.webview.  since there are differences in the web view rendering engines between operating systems, make sure that you account for this in your ui implementation.


phonegap api

phonegap provides an application programming interface (api) that enables you to access native operating system functionality using javascript. you build your application logic using javascript, and the phonegap api handles communication with the native operating system.

you can read about the phonegap api and all of the native functionality it exposes at docs.phonegap.com .

in addition to the “out of the box” functionality, you can also leverage the phonegap’s javascript-to-native communication mechanism to write “native plugins”. phonegap native plugins allow you to write your own custom native classes and corresponding javascript interfaces for use within your phonegap applications.  you can read more about phonegap native plugins at: http://www.tricedesigns.com/2012/03/01/phonegap-native-plugins/ and http://wiki.phonegap.com/w/page/36752779/phonegap%20plugins


phonegap application packaging & distribution

phonegap applications are developed using html, css, & javascript, however the final product of a phonegap application is a binary application archive that can be distributed through standard application ecosystems.

for ios applications the output is an ipa file (ios application archive), for android applications the output is an apk file (android package), for window phone the output is a xap file (application package), etc…  these are the same application packaging formats used by “native” applications, and can be distributed through the appropriate ecosystems (itunes store, android market, amazon market, blackberry app world, windows phone marketplace, etc…)


phonegap high-level application architecture

specific application architectures are going to differ on a case-by-case basis, however most data-driven applications employ the following basic architecture.   the phonegap application acts as a client for the user to interact with.   the phonegap client communicates with an application server to receive data.   the application server handles business logic and communicates with a back-end data repository.

the application server is normally a web server (apache, iis, etc…) and has a server side scripting language such as coldfusion, java, .net, php, etc… phonegap is agnostic of back-end technologies and can work with any application server using standard web protocols.   the application server performs business logic and calculations, and generally retrieves or persists data from a separate data repository – this is normally a relational database, but could be any structure or mechanism for data persistence.

phonegap applications generally do not talk directly to a database; communication is routed through an application server.    the client to application server communication can be based upon standard http requests for html content, rest -ful xml services, json services, or soap (or websockets if your os supports it).  these are the exact same techniques that you would use in an desktop-browser based ajax application.

the client-side architecture generally uses the single-page application model , where the application logic is inside a single html page.  this page is never unloaded from memory.  all data will be displayed by updating the html dom, data is retrieved from the application server using ajax techniques, and variables are kept in-memory within javascript.

multi-page client-side application architectures are supported, but are not recommended because you lose in-memory variables when loading a separate page.

mobile app Application server operating system Database Web Service

Published at DZone with permission of Andrew Trice, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Mission-Critical Cloud Modernization: Managing Coexistence With One-Way Data Sync
  • What’s New in the Latest Version of Angular V15?
  • Keep Your Application Secrets Secret
  • Steel Threads Are a Technique That Will Make You a Better Engineer

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: