SlideShare a Scribd company logo

[2015/2016] Apache Cordova

•
•
Ivano Malavolta
Ivano Malavolta

The Cordova framework Recurrent app architecture Cordova CLI Debugging Cordova applications My development environment This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016. http://www.ivanomalavolta.com

Related slideshows

Phonegap/Cordova vs Native Application
Phonegap/Cordova vs Native ApplicationPhonegap/Cordova vs Native Application
Phonegap/Cordova vs Native Application
 
Android - Anroid Pproject
Android - Anroid PprojectAndroid - Anroid Pproject
Android - Anroid Pproject
 
AFNetworking
AFNetworking AFNetworking
AFNetworking
 
1 of 47
Download to read offline
Gran Sasso Science Institute Ivano Malavolta Apache Cordova
Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
PhoneGap VS Cordova Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation à wider audience and contributors à transparent governance Better documentation à easier contributionsfor companies Apache Licensing There was only one problem.... trademark ambiguity à CORDOVA PhoneGap is a distribution of Apache Cordova
Cordova You develop your app using the usual three guys You use the same web view of the native OS • iOS = UIWebView • Android = android.webkit.WebView http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/
Cordova The UI layer is a web browser view • 100% width • 100% height Headless web browser • No URL bar • No decorations • No zooming • No text selection
Can I use HTML5, JS and CSS libraries I use everyday?
How does Cordova work?
Features coverage
When Cordova API is not enough... Sometimes Cordova is not enough as is for our purposes • unsupported feature • heavyweight data processing is faster in native code ex. images manipulation • background processing is better handled natively ex. files sync • complex business logic à You can develop a Cordova plugin
Cordova plugins Purpose: To expose a Phone native functionalityto the browser This is done by developing • a custom Native Component it will be different for each platform • a custom JavaScript API it should be always the same Mobile Web app JavaScript Plugin A JavaScript Plugin B iOS Plugin A iOS Plugin B Native Platform
Examples of available plugins
[2015/2016] Apache Cordova
Cordova architecture
Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
Recurrent app architecture The app acts as a client for user interaction The app communicates with an application server to receive data The application server handles business logic and communicates with a back-end data repository App Application server Data repository
The app It generally uses the single-page application model • the application logic is inside a single HTML page • this page is never unloaded from memory • data will be displayed by updating the HTML DOM • data is retrieved from the application server usingAjax
The server It is a classical web server • server-side scripting language such as Java, .NET, PHP, etc… • communication can be based on: - RESTful services (XML, JSON, etc.) - SOAP • it performs business logic, and generally gets or pushes data from a separate repository
The data repository It may be: • a standard DB (even deployed in the same machine of the application server) • an external API Both application server and back-end repository can be provided as a service à BaaS
Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
Cordova CLI The main tool to use for the cross-platform workflow It allows you to: • create new projects • add platforms • build a project w.r.t. different platforms • emulate a project on platform-specific emulators • run a project on device • include specific plugins into a project CLI = Command-Line Interface If you prefer to use platform- specific SDKs, you can still use it to initialize your project
Creates template project • PATH the folder that will contain your project • ID package identifier in reverse-domain style (optional) • NAME display name of the app (optional) Project creation
The create command creates a predefined project structure • hooks special Node.js scripts that are executed before/after other Cordova-specific commands • platforms platform specific projects (ex. an Eclipse project for Android,XCode for iOS) • plugins installed plugins (both JS files and native resources) • www contains your HTML, JS, CSS files Project structure config.xml contains core Cordova API features, plugins, and platform-specific settings. See here for the iOS values: http://goo.gl/wjvjst https://github.com/apache/cordova-app-hello- world/blob/master/hooks/README.md https://github.com/apache/cordova-app-hello- world/blob/master/hooks/README.md
With this command you add a target platform of your project. The platform will appear as subfolder of platforms containingthe platform-specific project mirroringthe www folder • PLATFORM_NAME the name of the platform (e.g., ios, android, wp8) Add platforms If you do something like this: cordova platform remove ios you are removing a specific platform You can use an SDK such as Eclipse or Xcode to open the project you created
The emulate command will run the app on a platform-specific emulator The run command will run the app on a previously setup device (e.g., connected via USB and configured for being used as device for testing purposes) • PLATFORM_NAME the name of the platform to be built (e.g., ios, android, wp8) emulate/run the app
This generates platform-specific code within the project's platforms subdirectory • PLUGIN_ID the id of the repository containingthe source code of the plugin to be added to the project add plugins A list of plugins can be found here http://plugreg.com If the plugin you want to add is not in the cordova.io registry, you can directly refer to the URL of his GitHub repository
Sometimes it may happen to need different JavaScript code, CSS stylesheets or generic assets for a specific platform ex. Android-specific CSS stylesheet iOS-specific assets for managing the back button graphics ... In these cases you can put the platform-specific assets into the merges/PLATFORM_NAME folder Cordova’s build command will take care of integrating them in your deployed app for the specific platform Platform custom code
After buildingthe Androidand iOS projects: • the Android application will contain both app.js and android.js • the iOS application will only contain an app.js, and it will be the one from merges/ios/app.js, overridingthe "common" app.js located inside www/ Example of custom code
Other useful commands
Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
The killer app! • Check console • Breakpoints • Update the DOM at run-time • Access to all local DBs • Network profiling • CPU and memory profiling • Monitor event listeners • Monitor elements’ rendering time
Desktop Browser • very quick • very handy functions • see Chrome’s Web Development Tools • Breakpoints PRO • browsers’ small differences and bugs • cannot test all Cordova’s specific functionalities • you need Phonegap shims CONS
Desktop Browser
Chrome Security Restriction If you need to test your JSON calls from a local web app, you need to relax Chrome’s security policies with respect to local files access and cross-domain resources access • OSX open -a Google Chrome.app --args “ --disable-web-security“ • Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!
Simulator • Officially supported by platform vendors • You use the “real” device’s browser PRO • device’s performance is not considered • this is iOS-specific • Android’semulator is a joke CONS
On device • accurate • still handy • real performance tests • real browser tests PRO • Deployment takes some time (~6 seconds for iOS) CONS
Ripple • very quick • can use Chrome’s Web Development Tools • You can test Cordova’s API from the Desktop • browsers’ small differences and bugs • cannot test the interaction with external apps PRO CONS It is based on Ripple, a Chrome plugin for mobile dev from Cordova 3.0.0, you need to use the Ripple available at Apache npm install -g ripple-emulator ripple emulate
Apache Ripple
Remote Debugging From iOS 6, Apple provided Mobile Safari with a remote web inspector à You can debug your app by using the classical web inspector of Desktop Safari It can connect both to • The iOS emulator • The real device Since Android 4.4, this feature is available via Chrome’s web dev kit
Debugging reference table Make a favor to yourself, don’t debug craftsman way: console.log() + alert() iOS Android Desktop Browser Ripple Device/simulator Safari Web Inspector X Chrome Web Inspector X
Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment and workflow
My development environment Atom https://atom.io/ Installed plugins (as of today)
My development workflow 1. Code & test using Chrome (very quick) Quick sketch of layout and complete business logic 2. Run and debug in the XCode simulator (handy & accurate) Complete the UI for iOS devices and ~99%confidence about business logic 3. Run and debug on devices (complete control & confidence) Complete the UI for Android too and ~99%confidence about business logic
Remarks These are MY development environment and development workflow There are many tools and IDEs out there • for example: https://atom.io/ à Consider this as a starting point & feel free to use the ones that fit well with your attitude
Alternative IDE: Jboss Hybrid Mobile Tools http://docs.jboss.org/tools/4.1.x.Final/en/User_Guide/html/chap-Hybrid_Mobile_Tools_and_CordovaSim.html
Versioning systems (e.g., GitHub) In your repository you will push only: • the www/ folder • the config.xml file • the hooks/ folder, if needed It is recommended not to check in platforms/ and plugins/ directories into version control as they are considered a build artifact.
References http://cordova.apache.org/docs/en/edge
Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@gssi.infn.it www.ivanomalavolta.com

More Related Content

[2015/2016] Apache Cordova

  • 1. Gran Sasso Science Institute Ivano Malavolta Apache Cordova
  • 2. Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
  • 3. PhoneGap VS Cordova Adobe/Nitobi donated the PhoneGap codebase to the Apache foundation à wider audience and contributors à transparent governance Better documentation à easier contributionsfor companies Apache Licensing There was only one problem.... trademark ambiguity à CORDOVA PhoneGap is a distribution of Apache Cordova
  • 4. Cordova You develop your app using the usual three guys You use the same web view of the native OS • iOS = UIWebView • Android = android.webkit.WebView http://phonegap.com/blog/2013/06/20/coming-soon-phonegap30/
  • 5. Cordova The UI layer is a web browser view • 100% width • 100% height Headless web browser • No URL bar • No decorations • No zooming • No text selection
  • 6. Can I use HTML5, JS and CSS libraries I use everyday?
  • 9. When Cordova API is not enough... Sometimes Cordova is not enough as is for our purposes • unsupported feature • heavyweight data processing is faster in native code ex. images manipulation • background processing is better handled natively ex. files sync • complex business logic à You can develop a Cordova plugin
  • 10. Cordova plugins Purpose: To expose a Phone native functionalityto the browser This is done by developing • a custom Native Component it will be different for each platform • a custom JavaScript API it should be always the same Mobile Web app JavaScript Plugin A JavaScript Plugin B iOS Plugin A iOS Plugin B Native Platform
  • 14. Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
  • 15. Recurrent app architecture The app acts as a client for user interaction The app communicates with an application server to receive data The application server handles business logic and communicates with a back-end data repository App Application server Data repository
  • 16. The app It generally uses the single-page application model • the application logic is inside a single HTML page • this page is never unloaded from memory • data will be displayed by updating the HTML DOM • data is retrieved from the application server usingAjax
  • 17. The server It is a classical web server • server-side scripting language such as Java, .NET, PHP, etc… • communication can be based on: - RESTful services (XML, JSON, etc.) - SOAP • it performs business logic, and generally gets or pushes data from a separate repository
  • 18. The data repository It may be: • a standard DB (even deployed in the same machine of the application server) • an external API Both application server and back-end repository can be provided as a service à BaaS
  • 19. Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
  • 20. Cordova CLI The main tool to use for the cross-platform workflow It allows you to: • create new projects • add platforms • build a project w.r.t. different platforms • emulate a project on platform-specific emulators • run a project on device • include specific plugins into a project CLI = Command-Line Interface If you prefer to use platform- specific SDKs, you can still use it to initialize your project
  • 21. Creates template project • PATH the folder that will contain your project • ID package identifier in reverse-domain style (optional) • NAME display name of the app (optional) Project creation
  • 22. The create command creates a predefined project structure • hooks special Node.js scripts that are executed before/after other Cordova-specific commands • platforms platform specific projects (ex. an Eclipse project for Android,XCode for iOS) • plugins installed plugins (both JS files and native resources) • www contains your HTML, JS, CSS files Project structure config.xml contains core Cordova API features, plugins, and platform-specific settings. See here for the iOS values: http://goo.gl/wjvjst https://github.com/apache/cordova-app-hello- world/blob/master/hooks/README.md https://github.com/apache/cordova-app-hello- world/blob/master/hooks/README.md
  • 23. With this command you add a target platform of your project. The platform will appear as subfolder of platforms containingthe platform-specific project mirroringthe www folder • PLATFORM_NAME the name of the platform (e.g., ios, android, wp8) Add platforms If you do something like this: cordova platform remove ios you are removing a specific platform You can use an SDK such as Eclipse or Xcode to open the project you created
  • 24. The emulate command will run the app on a platform-specific emulator The run command will run the app on a previously setup device (e.g., connected via USB and configured for being used as device for testing purposes) • PLATFORM_NAME the name of the platform to be built (e.g., ios, android, wp8) emulate/run the app
  • 25. This generates platform-specific code within the project's platforms subdirectory • PLUGIN_ID the id of the repository containingthe source code of the plugin to be added to the project add plugins A list of plugins can be found here http://plugreg.com If the plugin you want to add is not in the cordova.io registry, you can directly refer to the URL of his GitHub repository
  • 26. Sometimes it may happen to need different JavaScript code, CSS stylesheets or generic assets for a specific platform ex. Android-specific CSS stylesheet iOS-specific assets for managing the back button graphics ... In these cases you can put the platform-specific assets into the merges/PLATFORM_NAME folder Cordova’s build command will take care of integrating them in your deployed app for the specific platform Platform custom code
  • 27. After buildingthe Androidand iOS projects: • the Android application will contain both app.js and android.js • the iOS application will only contain an app.js, and it will be the one from merges/ios/app.js, overridingthe "common" app.js located inside www/ Example of custom code
  • 29. Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment
  • 30. The killer app! • Check console • Breakpoints • Update the DOM at run-time • Access to all local DBs • Network profiling • CPU and memory profiling • Monitor event listeners • Monitor elements’ rendering time
  • 31. Desktop Browser • very quick • very handy functions • see Chrome’s Web Development Tools • Breakpoints PRO • browsers’ small differences and bugs • cannot test all Cordova’s specific functionalities • you need Phonegap shims CONS
  • 33. Chrome Security Restriction If you need to test your JSON calls from a local web app, you need to relax Chrome’s security policies with respect to local files access and cross-domain resources access • OSX open -a Google Chrome.app --args “ --disable-web-security“ • Windows chrome.exe --disable-web-security DO IT ONLY FOR DEBUGGING!
  • 34. Simulator • Officially supported by platform vendors • You use the “real” device’s browser PRO • device’s performance is not considered • this is iOS-specific • Android’semulator is a joke CONS
  • 35. On device • accurate • still handy • real performance tests • real browser tests PRO • Deployment takes some time (~6 seconds for iOS) CONS
  • 36. Ripple • very quick • can use Chrome’s Web Development Tools • You can test Cordova’s API from the Desktop • browsers’ small differences and bugs • cannot test the interaction with external apps PRO CONS It is based on Ripple, a Chrome plugin for mobile dev from Cordova 3.0.0, you need to use the Ripple available at Apache npm install -g ripple-emulator ripple emulate
  • 38. Remote Debugging From iOS 6, Apple provided Mobile Safari with a remote web inspector à You can debug your app by using the classical web inspector of Desktop Safari It can connect both to • The iOS emulator • The real device Since Android 4.4, this feature is available via Chrome’s web dev kit
  • 39. Debugging reference table Make a favor to yourself, don’t debug craftsman way: console.log() + alert() iOS Android Desktop Browser Ripple Device/simulator Safari Web Inspector X Chrome Web Inspector X
  • 40. Roadmap • The Cordova framework • Recurrent app architecture • Cordova CLI • Debugging Cordova applications • My development environment and workflow
  • 42. My development workflow 1. Code & test using Chrome (very quick) Quick sketch of layout and complete business logic 2. Run and debug in the XCode simulator (handy & accurate) Complete the UI for iOS devices and ~99%confidence about business logic 3. Run and debug on devices (complete control & confidence) Complete the UI for Android too and ~99%confidence about business logic
  • 43. Remarks These are MY development environment and development workflow There are many tools and IDEs out there • for example: https://atom.io/ à Consider this as a starting point & feel free to use the ones that fit well with your attitude
  • 44. Alternative IDE: Jboss Hybrid Mobile Tools http://docs.jboss.org/tools/4.1.x.Final/en/User_Guide/html/chap-Hybrid_Mobile_Tools_and_CordovaSim.html
  • 45. Versioning systems (e.g., GitHub) In your repository you will push only: • the www/ folder • the config.xml file • the hooks/ folder, if needed It is recommended not to check in platforms/ and plugins/ directories into version control as they are considered a build artifact.
  • 47. Contact Ivano Malavolta | Gran Sasso Science Institute iivanoo ivano.malavolta@gssi.infn.it www.ivanomalavolta.com