Architecture evolution

1. Case study
PhoneGap / Cordova
Jolien Coenraets
Jolien.coenraets@intec.ugent.be
www.ibcn.intec.ugent.be
Internet 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
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 2

3. Introduction
Accelerometer
Camera
Compass
Contacts
File
Geolocation
Media
Network
Notifications
Storage
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 3

4. Need
Lots of differences:
•Programming languages
•Screen sizes, resolutions
•Performance
•Behavior
•Buttons
Different codebases
Java = hard to maintain
Java C# Objective C
1 thing in common: a browser
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 4

5. Vision
One code base to rule them all!
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 !!!
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 5

6. 2009 - 2010
Phase 1
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 6

7. Building the architecture, phase 1
Requirements
Cross-platform
Access native functions from within a webkit view
No native code needed for developers of apps
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) 7

8. Building the architecture, phase 1
HTML CSS Your app
JavaScript
JavaScript JavaScript JavaScript JavaScript PG
Android iOS WPhone BlackBerry Java
PG code PG code PG code PG code
Script
Native Native Native Native PG
Android iOS WPhone BlackBerry
PG code
Native
PG code PG code PG code
OS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 8

9. Creating a business, phase 1
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 9

10. 2010 - 2011
Phase 2
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 10

11. The community grows
They wanted this
But they got this
Problem
Adjusting the code resulted in conflicts and made it
impossible to merge the code
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 11

12. 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
Modifiability
Add plugins for extra functionality
Create internal components
Binding at runtime
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 12

13. Building the architecture, phase 2
PhoneGap PhoneGap
code code
Camera Camera
Storage Facebook
Storage
Accelerometer PayPal
Accelerometer
Device
Device Adds
Notification Notification Twitter
Media
Media
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 13

14. Building the architecture, phase 2
HTML CSS Your app
JavaScript
Android PG iOS PG WP PG BB PG PG
Java
Script
Android PG iOS PG WP PG BB PG PG
Native
OS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 14

15. Building the architecture, phase 2
HTML CSS Your app
JavaScript
Android PG iOS PG WP PG BB PG PG
Java
Script
Android PG iOS PG WP PG BB PG PG
Native
OS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 15

16. Creating a business, phase 2
600 000+
downloads
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 16

17. 2011 - …
Phase 3
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 17

18. Creating a business, phase 3
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 18

19. The community grows
New people join the community, looking for an easy
solution
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
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 19

20. Building the architecture, phase 3
Requirements
Easier workflow (create, develop, build)
Lower learning curve
Consistent API between platforms
Usability
Improve documentation
Improve build process
Improve PG JS source code
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 20

21. Building the architecture, phase 2
Media
PhoneGap
code Camera
Camera
Facebook Facebook
PhoneGap code
Storage PayPal
PayPal
Accelerometer Storage
Device Adds Adds
Notification Twitter
Twitter
Accelerometer
Media
Device
Notification
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 21

22. Building the architecture, phase 3
HTML CSS Your app
JavaScript
PG
Java
Android iOS PG WP PG BB PG Script
PG
Android PG iOS PG WP PG BB PG PG
Native
OS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 22

23. Building the architecture, phase 3
HTML CSS Your app
JavaScript
PhoneGap JavaScript PG
Java
Android iOS PG WP PG BB PG Script
PG
Android PG iOS PG WP PG BB PG PG
Native
OS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 23

24. Current status
100 000+
downloads / month
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 24

25. REMARKS
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 25

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

27. 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 changes
Find and replace ‘Phonegap’ to ‘Cordova’
Developer’s nightmare
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 27

28. Find partners
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 28

29. No silver bullet
≠ platform that every app should use
Advantages: Disadvantages:
 Quick  Javascript debugging
 Scripting languages  Performance
 Phonegap build  ‘Almost’ native
Department of Information Technology – Internet Based Communication Networks and Services (IBCN) 29

30. Questions ?
Jolien Coenraets
jolien.coenraets@intec.ugent.be
www.ibcn.intec.ugent.be
Internet 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)