Videogram overview and advice, tips&tricks, pros&cons for building a product line in Sencha Touch.

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

3. CINEMACRAFT (THAT’S WHERE WE WORK)
OVERVIEW
PRODUCTS
ü Established 2010
1. Videogram (Flagship)
www.videogram.com
ü Offices in Tokyo & LA
ü Currently 8 employees
2. Qixshr
www.qixshr.com
Don’t be afraid, visit us:
www.cinemacraft.tv
investors

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

5. 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?

6. ONLINE VIDEO IS BROKEN
AND HERE IS WHY…
ü 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

7. 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!)

9. 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/

11. ü 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

12. ü 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)

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

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

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

17. Native Plugins (iOS & Android)
JS Libraries
OUR IMPLEMENTATION
Web
Native
(mobile & desktop)
(iOS & Android)

18. DEVELOPMENT PROCESS
Dev. & Testing in browser
via local Webserver
(vhosts) for mobile
debugging
Testing on actual devices
via PhoneGap (for proper
hardware access)!
Follow Up testing/live testing with Ripple
(mobile simulator – Chrome Extension)

19. TEST, TEST, TEST!!!!
(YOUR FUTURE VACATION GEAR)

20. <!-- Talk to Xenophy to get a deal on a training session! -->
!
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

21. <!-- 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);

23. 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’

24. 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() …

26. TIME TO RELEASE
IT HELPS WAITING FOR APPROVAL J

27. OH, AND BY THE WAY…
!!! WE ARE HIRING !!!
(don’t be shy, we only bite a little)