the phonegap architecture
Post on 01-Jun-2015
1.002 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
Introduction
Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Notifications
Storage
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 3
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
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 !!!
Phase 12009 - 2010
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 6
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
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
Creating a business, phase 1
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 9
Phase 22010 - 2011
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 10
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
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
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
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
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
Creating a business, phase 2
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 16
600 000+ downloads
Phase 32011 - …
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 17
Creating a business, phase 3
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 18
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
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
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
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
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
Current status
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 24
100 000+
downloads / month
REMARKS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 25
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
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
Find partners
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 28
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
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
top related