WHO WE ARE

Alexander Wilhelm – ‘Alex’ alex@cinemacraft.tv Manager Client Engineering | UI/UX Designer

Using Sencha since 2008 (ExtJS 2.x+) and developed apps as consultant from late 2010 mainly with Sencha Touch (0.8b+)

Hiroyuki Fukuhara – ‘Hiro’ hiro@cinemacraft.tv Video Engineering (Founding Team)

Veteran in the video industry and works on the native iOS components (Player, Capture, Plugins etc.) of Videogram, Mediaglyphics and everything else that’s needed.

CINEMACRAFT (THAT’S WHERE WE WORK)

O V E R V I E W

ü  Established 2010

ü  Offices in Tokyo & LA

ü  Currently 8 employees

Don’t be afraid, visit us:

www.cinemacraft.tv

P R O D U C T S

1.  Videogram (Flagship) www.videogram.com

2.  Qixshr www.qixshr.com

investors

TOPICS FOR YOU TODAY

ü  Videogram Product Overview ü  Pros & Cons of why we chose ‘Sencha Touch’ ü  Our integration (Web and Mobile Apps) ü  Our Development Process ü  Performance Tips, Pitfalls etc. ü  Q&A

WHAT IS VIDEOGRAM?

“Videogram converts video into an interactive pictorial summary giving a user multiple entry points and allowing video to be browsed and discovered with the same simplicity as photos. It uses a proprietary algorithm that takes into account

variables including motion, light, color, and clip duration.

Our service enables users to share clips and comment on video at the frame level, providing for much more context and in turn higher engagement.”

- Marketing Pitch

BUT WHAT DOES THAT MEAN?

ONLINE VIDEO IS BROKEN

A N D H E R E I S W H Y …

ü  Only one thumbnail… is the video relevant to me?

ü  Videos are very time intensive to consume or check

ü  Commenting on videos out of context to the video – difficult to interact

THE SALVATION!

ü  Browse through videos as quickly as photos

ü  scales according to screen size (completely responsive – Phone, Tablet, Mobile Web, Desktop Web)

ü  Every aspect of the video is visible, shareable and inter actable

ü  Can utilize new user navigation paradigms (e.g. Leap Motion, Kinect etc.)

ü  We offer libraries for white-labeling solutions (use Videogram in your apps!)

VIDEOGRAM EMBEDS ARE LEAP ENABLED Any Publisher Using videogram embeds will automatically allow consumers with Leap

technology to benefit – visit www.videogram.com to try it out!

https://www.leapmotion.com/

ü  Videogram core library was already built on web technologies (JS & HTML5)

ü  Cross platform support out of the box

ü  Native mobile look & feel and hardware access possible via Adobe PhoneGap (Cordova) + extensive theming possibilities

ü  Flexibility for quicker iterations across platforms

ü  Resource constraints… two developers can build for 4 different platforms at the same time

ü  AR, Games in general (2D/3D)

ü  Very high performance, low latency apps (finance, equalizers etc.)

ü  Already a mature and proven formula in place

ü  Mobile Web or cross-platform strategy not a focus

ü  If you have to support Android < 4.0 (incl. 3.0 which is not supported)

WHY ADOBE PHONEGAP? ü  PhoneGap offers standardized cross-platform for direct-access to hardware components

(e.g. camera, upload, Facebook SDK etc.)

ü  Great Community with lots of native plugins incl. social sharing, push notifications, SMS/web components etc.

ü  JavaScript code can be standardized to call web components and native counterparts alike (e.g. Facebook integration – web & native components)

ü  Most ‘alternatives’ are built on top of PhoneGap (Steroids.JS, Iceanium, etc.)

ü  Completely open source (Apache Cordova project)

ü  NEW! Sencha Touch features PhoneGap integration via SenchaCMD

Overall the best solution to natively package HTML5 apps as hybrid-solutions

PHONEGAP – WHAT TO LOOK OUT FOR THOUGH

ü  UIWebViews often behave differently than mobile browser counterparts

ü  Major version releases tend to break Plugins/Plugin Architecture – which can be time consuming on project updates (e.g. having Facebook, Twitter, Push Notifications plugins as a central part of the app)

ü  Sometimes default shipped components are a bit unevenly implemented. (e.g. camera returns more/different values than camera roll selection when video is recorded or selected)

ü  Writing or integrating native plugins can be difficult for pure web-developers as it handles with native code per platform (Objective-C, Java, C#)

ü  Project Upgrades to newer PhoneGap version can be time consuming

PROBLEMS THAT WILL COME UP, I PROMISE!!! Both iOS & Android use Webkit and theoretically Sencha Touch should run equally, right? NO! Implementations of Webkit vary greatly not only by platform but by OS subversions and even between the default Mobile Browser

& the supplied native WebView.

Native app and Webapp should run at the same speed, right? NO! See above (different WebKit versions!) and on iOS the WebView does not support (yet) JIT compilation… or also known as Nitro™.

This means that the WebApp will always run significantly faster in Mobile Safari compared to the compiled Phonegap/Cordova app.

Should I update to the newer versions?

YES/NO! This depends on your use case. Many times Sencha Touch updates are more akin to beta versions or introduce code breaking changes (the same goes for PhoneGap as well). Updates can become time consuming and often don’t bring any benefits or sometimes even degrade performance.

Everything is standardized, right? NO! HTML5 is still in its infancy and Frameworks (incl. Sencha Touch) are cutting edge. There will be inconsistencies of

implementations (PhoneGap Media handlers, Upload functionality) and quick deprecation that can test your patience.

OUR IMPLEMENTATION

Web (mobile & desktop)

Native (iOS & Android)

JS L

ibra

ries

Nat

ive

Plug

ins

(iOS

& A

ndro

id)

DEVELOPMENT PROCESS

Dev. & Testing in browser via local Webserver (vhosts) for mobile

debugging Follow Up testing/live testing with Ripple (mobile simulator – Chrome Extension)

Testing on actual devices via PhoneGap (for proper

hardware access)!

TEST, TEST, TEST!!!!

(YOUR FUTURE VACATION GEAR)

!  Limit shadows, gradients and CSS3 effects (especially in lists and on Android!)

!  Try not to use width/height in percentage (computational very expensive)

!  Destroy objects that are not used (free up DOM/memory)

!  Compress pictures (iOS web view has a limited amount of memory for pictures in web view.. If you exceed this amount UIWebView/Safari will crash)

!  Avoid network access – use local caching whenever possible (LocalStorage, Database, File)

!  Limit items in stores – avoid memory bloat

<!-- Talk to Xenophy to get a deal on a training session! -->

!  Buttons improve touch interaction sensitivity JS: eventPublishers: {

touchGesture: {

// incr. responsivness of buttons

moveThrottle: 5,

}

},

launch: function() {...

!  Use hardware accelerated transitions where possible (but don’t overdo it!!!)

CSS: transform: translate3D(100%, 0, 0);

<!-- Talk to Xenophy to get a deal on a training session! -->

NATIVE COMPONENTS

and problems we faced during the development & integration process

How to communicate with Sencha Touch in UIWebView (native packaged app): 1.  PhoneGap Plugin

Standardized for all Platforms (http://docs.phonegap.com)

2.   Intercept UIWebview request via custom URL scheme hook Needs adaption from platform to platform e.g. iOS, Android, Windows Phone e.g. result://views:get@success:0/2M

3.   Integration of custom share view controller for Facebook Necessary to share under app name ‘Videogram’ and not ‘iOS’

WHY USE DIFFERENT APPROACHES

PhoneGap Plugin is the proper way to integrate native functionality but it is more time consuming

ü  Plugins allow easy sharing of code base with other projects/developers

ü  Are easier Integrate able and upgrade able down the road

Hooks directly into UIWebView

ü  allow for quick prototyping and iteration

ü  Necessity of functions to be in the public namespace in JS e.g. obj.getComments = function() …

TIME TO RELEASE

IT HELPS WAITING FOR APPROVAL J

OH, AND BY THE WAY…

!!! WE ARE HIRING !!! (don’t be shy, we only bite a little)