The Phonegap Architecture
-
Upload
frank-gielen -
Category
Technology
-
view
1.002 -
download
0
description
Transcript of The Phonegap Architecture
![Page 1: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/1.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN)
Case studyPhoneGap / Cordova
Jolien CoenraetsJolien.coenraets@intec.ugent.bewww.ibcn.intec.ugent.beInternet Based Communication Networks and Services (IBCN)Department of Information Technology (INTEC)Ghent University - IBBT
![Page 2: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/2.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 2
Introduction
= open source solution for building
cross-platform mobile native apps with
standards-based Web technologies like HTML, JavaScript, CSS
![Page 3: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/3.jpg)
Introduction
Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Notifications
Storage
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 3
![Page 4: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/4.jpg)
Need
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 4
C# Objective CJava
Java
Different codebases
= hard to maintain
Lots of differences:• Programming languages• Screen sizes, resolutions• Performance• Behavior• Buttons
1 thing in common: a browser
![Page 5: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/5.jpg)
Vision
One code base to rule them all!
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 5
Goal
Make native functions available for web applications
Create Adobe AIR for mobile applications
Business model
Open source platform
Money from training by Nitobi
Proof of concept won several prices continue !!!
![Page 6: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/6.jpg)
Phase 12009 - 2010
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 6
![Page 7: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/7.jpg)
Building the architecture, phase 1
Requirements
Cross-platform
Access native functions from within a webkit view
No native code needed for developers of apps
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 7
Portability (modifiability of the platform)
Layers to hide information
Interface towards app
Restrict communication paths
![Page 8: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/8.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 8
Building the architecture, phase 1
PG
JavaScript
Your app
OS
Native Android PG code
Native iOS
PG code
Native WPhone
PG code
Native
BlackBerry
PG code
PG
Native
JavaScriptAndroid PG code
JavaScript iOS
PG code
JavaScript WPhone PG code
JavaScript BlackBerry PG code
JavaScript
HTML CSS
![Page 9: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/9.jpg)
Creating a business, phase 1
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 9
![Page 10: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/10.jpg)
Phase 22010 - 2011
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 10
![Page 11: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/11.jpg)
The community grows
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 11
They wanted this
But they got this
Problem
Adjusting the code resulted in conflicts and made it impossible to merge the code
![Page 12: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/12.jpg)
Building the architecture, phase 2
Requirements
Developers can create their own extensions
Easily add support for new features
Easily update certain feature without affecting other code
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 12
ModifiabilityAdd plugins for extra functionality
Create internal components
Binding at runtime
![Page 13: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/13.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 13
Building the architecture, phase 2
PhoneGap code
Camera
Notification
Accelerometer
Device
Storage
Media
PhoneGap code
Camera
Notification
Accelerometer
Device
Storage
Media
PayPal
Adds
![Page 14: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/14.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 14
Building the architecture, phase 2
PG
JavaScript
Your app
OS
Android PG iOS PG WP PG BB PG PG
Native
Android PG iOS PG WP PG BB PG
JavaScript
HTML CSS
![Page 15: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/15.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 15
Building the architecture, phase 2
PG
JavaScript
Your app
OS
Android PG iOS PG WP PG BB PG PG
Native
Android PG iOS PG WP PG BB PG
JavaScript
HTML CSS
![Page 16: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/16.jpg)
Creating a business, phase 2
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 16
600 000+ downloads
![Page 17: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/17.jpg)
Phase 32011 - …
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 17
![Page 18: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/18.jpg)
Creating a business, phase 3
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 18
![Page 19: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/19.jpg)
The community grows
New people join the community, looking for an easy solution
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 19
But:
complicated build process, different for each platform
some API’s not consistent between different platforms
little documentation, often outdated
People drop out of the project
Deteriorating reputation of usability and stability
![Page 20: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/20.jpg)
Building the architecture, phase 3
Requirements
Easier workflow (create, develop, build)
Lower learning curve
Consistent API between platforms
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 20
UsabilityImprove documentation
Improve build process
Improve PG JS source code
![Page 21: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/21.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 21
Building the architecture, phase 2
PhoneG
ap code
PhoneGap code
Camera
Notification
Accelerometer
Device
Storage
Media
PayPal
Adds
Camera
Notification
Device
Storage
Media
PayPal
Adds
Accelerometer
![Page 22: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/22.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 22
Building the architecture, phase 3
PG
JavaScript
Your app
OS
Android PG iOS PG WP PG BB PG PG
Native
Android PG
iOS PG WP PG BB PG
JavaScript
HTML CSS
![Page 23: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/23.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 23
Building the architecture, phase 3
PG
JavaScript
Your app
OS
Android PG iOS PG WP PG BB PG PG
Native
Android PG
iOS PG WP PG BB PG
JavaScript
HTML CSS
PhoneGap JavaScript
![Page 24: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/24.jpg)
Current status
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 24
100 000+
downloads / month
![Page 25: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/25.jpg)
REMARKS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 25
![Page 26: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/26.jpg)
Remarks
An architecture can change …
but it is better to have it right the first time.
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 26
![Page 27: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/27.jpg)
Refactors
Different JS files to one
Change project structure = SVN conflicts
Different plugin structure
Outdated plugins, rewrite all your plugins
API changes
Introducing bugs, outdated documentation or information
Name changesFind and replace ‘Phonegap’ to ‘Cordova’
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 27
Developer’s nightmare
![Page 28: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/28.jpg)
Find partners
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 28
![Page 29: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/29.jpg)
No silver bullet
≠ platform that every app should use
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 29
Advantages:
Quick Scripting languages Phonegap build
Disadvantages:
Javascript debugging
Performance ‘Almost’ native
![Page 30: The Phonegap Architecture](https://reader037.fdocuments.us/reader037/viewer/2022102901/556c1a57d8b42a852a8b52f8/html5/thumbnails/30.jpg)
Department of Information Technology – Internet Based Communication Networks and Services (IBCN)
Questions ?
Jolien Coenraetsjolien.coenraets@intec.ugent.bewww.ibcn.intec.ugent.beInternet Based Communication Networks and Services (IBCN)Department of Information Technology (INTEC)Ghent University - IBBT