the power, and pain, of cordova plugins

The Power, and Pain, of Cordova PluginsPaul Fischer, Intel CorporationSoftware and Services GroupTechnical Consulting Engineer

[email protected]@xmnboy

abstract

2014 October 20 HTML5 DevConf - Power & Pain of Cordova Plugins 2

An explosion in the number and variety of Cordova (pronounced /fōn•gap/) plugins are invading hybrid HTML5 mobile apps.

Cordova plugins provide the extra ingredient that distinguishes a “vanilla” web app from a “mint chocolate chip” hybrid web app.

Where do plugins come from?

How do I use them with my HTML5 app?

Which ones are okay and which are not?

How do I debug an app that contains plugins?

Hybrid HTML5 App Advantage Native Apps Advanced UI interactions

Smoothest performance

App store distribution

Single

Platform

Partial

Capabilities

Multiple

Platforms

Full

Capabilities

Web Apps Web developer skills

Instant updates

Unrestricted distribution

Hybrid HTML5 Apps Web developer skills

Access to native platform

App store distribution


Mobile HTML5 Web App Block Diagram

Device Libraries

Mobile Device OS

HTML5 Web App

Mobile Browser


Mobile Hybrid HTML5 WebView App Block Diagram

Device Libraries

Mobile Device OS

Native WebView

HTML5

WebView App

Hybrid Extension

Bridge


Web vs. Hybrid vs. HTML5 Applications

Web Applimited

sensor input

Hybrid Appfull

sensor input

HTML5 Appfull

device access

Runs w/o network Yes Yes Yes

Flexible Layout Yes Yes Yes

Device APIs Limited Mostly Complete

Distribution URL Native Binary URL/WGT

Cross Platform Yes Yes & No Yes

Runs in Web Browser Yes No No

Runs in Web Runtime No Yes Yes

TomorrowToday


The HTML5 standard is evolving to include device APIs

Just think of hybrid as a tasty “Black and Tan”

(if you’re Irish or don’t like beer, think of it as an “Arnold Palmer”)

Web App Stuff(stout)

Native App Stuff(pale ale)

/fōn•gap/

stuff


p.s. it’s spelled “Cordova” but pronounced /fōn•gap/

…with a dash of Cordova Plugins…




/fōn•gap/

stuff


p.s. it’s spelled “Cordova” but pronounced /fōn•gap/file

access

sta

tus b

ar

..but I’m thirsty, so more Cordova Plugins…




/fōn•gap/

stuff



file

access

sta

tus b

ar

cam

era

motion

..it’s hot outside, need more Cordova Plugins…




/fōn•gap/

stuff



file

access

sta

tus b

ar

cam

era

motion

ad

vert

isem

ents

push

Where do I get Cordova Plugins?


Which author?

Which version?

What platform?

Most popular?

How much?

Which do I use?


Which version should I use?


https://github.com/brodysoft/Cordova-SQLitePlugin

https://github.com/brodysoft/Cordova-SQLitePlugin

https://github.com/phonegap-build/PushPlugin

https://github.com/phonegap-build/PushPlugin

https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin

https://github.com/EddyVerbruggen/Flashlight-PhoneGap-Plugin

Which platforms does my plugin support?


http://plugins.cordova.io/#/search?search=push

http://plugins.cordova.io/#/search?search=push

Too Many Plugins to Choose From!


Insert Amazing Demo Here!…well, maybe just an interesting demo…


Hybrid App Debug Options

Desktop Browser Standard HTML5 APIs

No device APIs

Emulate device viewport

No WebView capability emulation

Device Simulator or Emulator Visual rendering close to real device

Many device APIs not present

Some device APIs poorly simulated

Chrome Browser + Ripple Adds many (not all) standard device APIs

Overly optimistic device and API representation

Weinre + Real Device Accurate rendering

Accurate features and device API

No JavaScript debug

Fragile debug connection

Remote Web Inspector or Remote Chrome Dev Tools

Accurate rendering

Accurate features and device API

Full debug features

Includes JavaScript debug


Inside a Browser vs. Inside a WebView

Desktop Browser Mobile Browser Native WebView


Weinre Remote Debug -- Elements


Weinre Remote Debug -- Console


23

HTML5 Cross-platform Development Environment

http://XDK.Intel.com

Intel® XDK is a free download for Windows*, OS X*, and Ubuntu* Linux

2014 October 20 HTML5 DevConf - Power & Pain of Cordova Plugins

http://xdk.intel.com/

Intel® Developer Zone

Free tools and code samples

Technical articles, forums and tutorials

Connect with Intel and industry experts

Get development support

Tools. Knowledge. Community.

software.intel.com

Debug and Test Tools

• HTML5 Brackets* Editor

• App Designer Layout Editor

• Ripple* Cordova* Emulator

• Intel App Preview Debugger

• Remote Chrome* DevTools*

• “weinre” Remote Inspector

• On Device Live Preview

Services and Content

thru APIs and Plugins

Mashery* (et al)

Multiple Form Factors

and Platforms

• iOS* iPhone* and iPad*

• Android* x86 and ARM*

• Crosswalk* x86 and ARM

• Windows* 8 Store “Metro” UI

• Windows 8 Phone

• HTML5 Packaged Web Apps:

- Tizen*, Firefox* and Chrome

Intel® XDK: Hybrid HTML5 Mobile App Development


Download App Preview onto Your Device

Android*

bit.ly/1i8VEgl

iOS*

bit.ly/1a3W7Bk

Trouble scanning? Try using Google* Goggles or RedLaser* Barcode.

Windows* 8

bit.ly/1j8rxdJ


http://bit.ly/1i8VEgl

http://bit.ly/1a3W7Bk

http://bit.ly/1j8rxdJ

Hybrid HTML5 Apps…

…allow developers to build apps using these skills and tools…

…that can be distributedin native app stores.


Intel® XDK Handles (fōn•gap) Cordova!

The Intel® XDK facilitates the development of hybrid HTML5

applications for iOS*, Android*, Windows* 8 and other mobile devices.

Visit the Intel Developer Zone xdk.intel.com


Intel XDK Emulate and On-Device Debug

29

Intel® XDK Emulator Preview in various phone and tablet formats iPhone*, iPad*, Android* devices, Windows* 8 tablet…

Simulate device-specific features accelerometer, compass, GPS, vibrate, orientation…

Debug using standard Chrome DevTools (CDT) Simulation of intel.xdk and cordova APIs Intel XDK 4.0.0 and Cordova 2.9.0 API levels

App Preview On-Device Previewer Quickly load and run projects directly on real devices Access to indel.xdk and cordova device APIs

App Debugger On-Device Remote Debug Remote access to device JavaScript console (aka CDT)

2014 October 20 HTML5 DevConf - Power & Pain of Cordova Plugins

the power, and pain, of cordova plugins

Technology