Pender presentation 2.0

30
Cross Platform Hardware Accelerated JavaScript Canvas API for mobile devices Pender

description

Lorin Beer's presentation from the SF PhoneGap Meetup on November 28, 2012. Pender is a cross platform library which offers hardware accelerated graphics through a Canvas API on mobile devices.

Transcript of Pender presentation 2.0

Page 1: Pender presentation 2.0

Cross Platform Hardware Accelerated JavaScript Canvas API for mobile devices

Pender

Page 2: Pender presentation 2.0

Pender is● A Hardware Accelerated Graphics API with

JavaScript Bindings

Page 3: Pender presentation 2.0

Pender is● A Hardware Accelerated Graphics API with

JavaScript Bindings

● PenderCanvas○ hardware accelerated 2D graphics context ○ implements HTML5 Canvas spec○ native implementation○ javascript bindings

Page 4: Pender presentation 2.0

Pender is● A Hardware Accelerated Graphics API with

JavaScript Bindings

● PenderCanvas○ hardware accelerated 2D graphics context ○ implements HTML5 Canvas spec○ native implementation○ javascript bindings○ access to the underlying OpenGL ES 2.0 graphics

context

Page 5: Pender presentation 2.0

Pender is● A DOM-less JS execution environment

○ mobile apps written entirely in javascript○ pure js execution environment through an embedded

js engine

Page 6: Pender presentation 2.0

Pender is

Closing the Native vs HTML5 performance gap

○ faster js execution environment than native webview○ low latency Native-JS bridge○ access to native audio and graphics api's

Page 7: Pender presentation 2.0

Pender is● Cross Platform

○ Android ○ iOS○ BlackBerry ○ Windows Phone7○ Pender-Browser shim allows pender projects to run

in web browser with acceptable graphics performance

Page 8: Pender presentation 2.0

Pender is Open Source● Become a Pender Contributor!● Fame and fortune as a dashing github

secret agent!github.com/lorinbeer/

Page 9: Pender presentation 2.0

Why Pender?

Page 10: Pender presentation 2.0

Why Pender?● Mobile Marketplace is

○ A moving target■ changing software and hardware

Page 11: Pender presentation 2.0

Why Pender?● Mobile Marketplace is

○ A moving target■ changing software and hardware

○ Growing

source: Flurry Analytics http://www.flurry.com/

Page 12: Pender presentation 2.0

The Mobile Marketplace

Page 13: Pender presentation 2.0

Why Pender?● Mobile Marketplace is

○ A moving target■ changing software and hardware

○ Growing■ 2011-2012 app store growth ~ 60%■ increasing phone sales each year

source: Flurry Analytics http://www.flurry.com/

Page 14: Pender presentation 2.0

The Mobile Marketplace

Page 15: Pender presentation 2.0

Why Pender?● Mobile Marketplace is

○ A moving target■ changing software and hardware

○ Growing■ 2011-2012 app store growth ~ 60%■ larger phone sales volume each year■ more active devices each year

source: Flurry Analytics http://www.flurry.com/

Page 16: Pender presentation 2.0

Games For MobileIn which we triumphantly announce our intention to make games for the mobile marketplace!

Page 17: Pender presentation 2.0

Now What?

Page 18: Pender presentation 2.0

Web Standards● common denominator across mobile

platforms○ smartphones have browsers!

● large expert workforce

● low barrier of entry

Page 19: Pender presentation 2.0

Android WebView Bench

Demo

Page 20: Pender presentation 2.0

Existing Solutions● AppMobi's impact.js Engine

Page 21: Pender presentation 2.0

Existing Solutions● proprietary

● subscription based

● not based on open standards

● modest performance gains

Page 22: Pender presentation 2.0

What Pender can do for you!

Page 23: Pender presentation 2.0

Android Pender Demo

Demo

Page 24: Pender presentation 2.0

How does it Pender?

Page 25: Pender presentation 2.0

How does it work?

JS App

JS Codebase

Art Assets

PenderCanvas

PenderJS

PenderJavaScriptRuntime

Your Code

Art Assets

Your App

JS App

NativeApplicationFramework

Page 26: Pender presentation 2.0

Pender & Cordova● Using Cordova to augment Pender

● let Pender drive● Cordova acts as a UI layer

Page 27: Pender presentation 2.0

Pender & Cordova● Use Cordova to augment Pender

○ let Pender drive○ Cordova acts as a UI layer

or

● Use Pender to augment Cordova○ let Cordova drive○ Pender acts as an alternative canvas rendering

target

Page 28: Pender presentation 2.0

Cordova Pender Plugin

Demo

Page 29: Pender presentation 2.0

And maybe later...

we could contribute to pender?

Page 30: Pender presentation 2.0

And maybe later...

check out the code at github

check out prebuilt samples in downloadsgithub.com/lorinbeer/Pender-android/downloads

github.com/lorinbeer/Pender-androidgithub.com/lorinbeer/Pender-iOSgithub.com/lorinbeer/Pender-blackberrygithub.com/lorinbeer/Pender-desktopgithub.com/lorinbeer/Pender-demos