Videogram - Building a product with Sencha Touch
1 like1,197 views
Cinemacraft is a video technology company established in 2010 with offices in Tokyo and LA. Their flagship product is Videogram, which allows users to browse and interact with videos in a similar way as photos. It uses algorithms to break videos down into frames that can be commented on individually. They chose to develop Videogram and their other products using Sencha Touch for its cross-platform capabilities. Their development process involves initial testing in the browser followed by testing on actual devices using PhoneGap.
Videogram - Building a product with 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)