Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


JavaScript is indispensable for even moderate mobile web apps as only scripts enable user interaction and integrate on device capabilities like location, camera, onboard storage or database. But while the SDKs for Google™ Android™ or Apple™ iOS™ look like a single definition with the ability to adjust to different devices – reality is not that simple. The increasing importance of JavaScript adds a whole new layer of complexity to the yet excessive fragmentation in the mobile space. In this presentation Netbiscuits shows its experiences with developing high end – and still multi device – mobile web apps providing rich user experience. We constantly enhance our cloud software service to enable rich user experience for mobile web apps cross-platform. Many of our lessons learned during the research for our rich mobile UX framework will be shared in this session. Based on (code) examples attendees will get to learn about the power and limits of a framework, the pitfalls in architecture and design and the challenges of testing and QA in mobile. Furthermore, you will receive clear guidelines for deciding server- or client-side, which to use when. This presentation also introduces Netbiscuits Tactile, a new HTML5 efficient design and development framework that utilizes today’s web standards to enable the seamless creation and delivery of engaging mobile web experiences.

Transcript of Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework

  • 1. Android Android Lessons Creating a JavaScript Framework Stephan Haux Director Product Management NetbiscuitsMarch 10, 2012 Netbiscuits GmbH 2012 1

2. AgendaWho is Netbiscuits HTML52010 Beginning the Next Generation"If you look at 100 2011 The Hard Work Got Harderdifferent devices,Looking at the Problemsyoull find 100 1. Differences in Browsers and the Patchy HTML5 Supportdifferent versions" 2. Designing for a World With Multiple Device Categories3. Lets go Multi-device Shopping4. Tablet: More than Screen factor Brett Taylor, CTO of Facebook, talking about HTML5 on mobile devicesThe Parallel Experience February 27, 2012Netbiscuits Tactile March 10, 2012 Netbiscuits GmbH 2012 Slide 2 3. Who is Netbiscuits?Community of over 15,000 ME Awards 2011, won for the second time since 2009Best Mobile Web Publishing Platform9.6developers120 Gartner 2011 MCAP Magic Quadrant ranks NetbiscuitsbillionVisionary with highest ability to executemillion Videos delivered/month Pages & content itemsdelivered/month Frost & Sullivan European Best Practice Awards 2011Best Mobile Apps Deployment Platform27,000Sites & apps live andDoubled in the last 12 monthsgrowing by 500/ mobile site built on Netbiscuits Platform winsMeffys & Eppy Awards Best Mobile Site8,000+Device profiles in our database8 4Global Mobile Awards at Mobile World Congress 2012offices onShortlisted Best Cloud-Based TechnologycontinentsMarch 10, 2012 Netbiscuits GmbH 2012 3 4. What do we do? - biscuitML HMTL Output (Delivered to device)

Biscuit ML
999000&format=jpg&url=pics%2Fyellowbox.png" alt="" id="nb-joif2deitem2img">
Plus other mark-up languages including WML, cHTML (iMode), HDML, XHTML March 10, 2012 Netbiscuits GmbH 2012 4 5. 2010 Beginning the Next GenerationMobile Web SuccessNetbiscuits very successful with mobile websitesGoing MainstreamSmartphones became mainstream and phoneswere divided into Feature and SmartphonesScripts for the Small ScreenIncreasing number of projects included scriptingwith smaller screens supporting interactivefeaturesThe 3rd Design Dimension: InteractingWe started to think about the 3rd Design CBS launched their mobileDimension, going beyond layout and pages site with rich video playback, drop-down menu & more.March 10, 2012 Netbiscuits GmbH 20125 6. 2011 The Hard Work Got Harder We introduced Rich UI capabilities Our customers were thrilledbut naturally asked for more!More flexibility with ScriptsMore control on layout and functionality.More features as standardSo we decided to further develop our platform tosupport the next stage in development for multi-touch, multi-platform connected deviceseBay launched their mobilesite with swiping galleries,overlay menus & more.March 10, 2012 Netbiscuits GmbH 2012 6 7. Problem Solved, Problems CreatedTo solve the biggest problem, we had to solve all the little problems too. Rich User Interfaces opened up more possibilities and increased the demand for more:Native features within the browserInteractive options beyond simple form fieldsAbility to design beyond size and colour In theory HTML + DOM Manipulation via JavaScript should make all this possible, butHTML5 feature support patchy and inconsistentHTML + DOM manipulation is tedious with existing JavaScript FrameworksEffectively impossible for sites spanning multiple device categoriesMarch 10, 2012 Netbiscuits GmbH 20127 8. Problem no.1 Differences in browsers and the patchy HTML5 supportMarch 10, 2012 Netbiscuits GmbH 20128 9. Everything Except Green is a Problem! March 10, 2012 Netbiscuits GmbH 2012 9 10. HTML5 The 3 main challenges: 1. Video Codecs 2. Device HTML5 support 3. Device capabilities whenhandling video "There is no single combination of containers and codecs that works in all HTML5 (supported) browsers" Source (Professor Markup: 10, 2012 Netbiscuits GmbH 201210 11. "You cant detect HTML5 support, because that doesnt make any sense. But you can detect support for individual features, like canvas, video, or geolocation" Source: http://diveintohtml5.infoMarch 10, 2012 Netbiscuits GmbH 2012 11 12. Problem no.2 Designing for a world with multiple device categoriesMarch 10, 2012 Netbiscuits GmbH 201212 13. Its all About Width & HeightIn the beginning it then came more and old players was simple strong players bring even more! Smartphone Screen Size 1 X XX Smartphone Screen Size 2 XX Smartphone Screen Size 3X Tablet Screen Size 1 X XX Tablet Screen Size 2 XX Tablet Screen Size 3 XX Tablet Screen Size 4XPC XIPTV? ?? March 10, 2012 Netbiscuits GmbH 201213 14. Designing for Multiple Screens March 10, 2012 Netbiscuits GmbH 2012 14 15. Frameworks HTML, JavaScript, SDK?March 10, 2012 Netbiscuits GmbH 2012 15 16. Mid 2011: State of Frameworks Existing frameworks were predominantly Smartphone focused, in fact many still are which is surprising given that Tablets gained traction in 2010/11 Frameworks are not supported by established and integrated device databases with device information services This is the root cause of many headaches when developing for multiple screens develop once, test 10x and develop again and again!March 10, 2012 Netbiscuits GmbH 201216 17. Frameworks in General Miss some vital pieces of the puzzle Continued separation of Markup, Styles and Scripts complicates development IDEs & cross OS Compilers not addressing the Screen size continuum Ignore Multi Device Users Barely linking Front-end and Cloud ServicesMarch 10, 2012 Netbiscuits GmbH 201217 18. Problem No.3 Lets go Multi-device ShoppingMarch 10, 2012 Netbiscuits GmbH 2012 18 19. Problems 1 & 2 Create Problem No.3 The technology spaghettiScreensContent TypesDifferent CodeFeatures & FunctionsBusiness LogicMaintenance & SupportMarch 10, 2012 Netbiscuits GmbH 2012 19 20. Problem No.4 Tablet: More than Screen factorMarch 10, 2012 Netbiscuits GmbH 2012 20 21. A Quick Recap"If you look at 100 different devices, youll find 100 different versions" Problem 1: HTML5 Support Problem 2: Multiple Screens Problem 3: Creating Multi-Screen UX Consistency Next we find Problem 4: Sequential to ParallelWeb + Smartphone doesnt equal TabletWeve lived in a sequential world Smartphone and PC is sequential,but now we have an added dimension. Tablets are the parallel worldto the sequential world we know!March 10, 2012 Netbiscuits GmbH 2012 21 22. Melting Pot: Tablets1+1=3Web: Layout and real estate on screen+ Smartphone: Multi dimensional User Experience= Subset of TabletEndless vs Limited Real EstateTabletHorizontal and vertical one finger swipe makes 1024 x 768 an endlesscanvas enabling parallel experiencesSmartphoneThe same is difficult to replicate on a multi touch smartphone as ausers hand hides display meaning it can only offer a sequentialexperience March 10, 2012 Netbiscuits GmbH 201222 23. Chekovs Console The Parallel Experience March 10, 2012 Netbiscuits GmbH 2012 23 24. March 10, 2012 Netbiscuits GmbH 2012 24 25. Tactile Core FeaturesTactile Mark-upMark-up replaces a large portion of JavaScript reducing size andcomplexity of code without compromising on user experience.Effects & EventsLarge number of cross platform optimized out-of-the-box effects andevents enable rich display and behavior.Device Information ServicesDevice Information Services provide device characteristics from the deviceand from our Testing Intelligence to all touch points of a web application:At the edge enhancing redirection decisions, at the backend systemsallowing for device class specific computing (ie. Security, Device specificofferings) and at the client side for native like user experiencesHTML5 FrameworkTactile HTML5 framework is extendable in nature. It allows developers toextend the JavaScript library at all layers from kernel to the UIcomponents or use the CSS Preprocessor capabilities. March 10, 2012 Netbiscuits GmbH 201225 26. Tactile Technical Components Tactile contains a comprehensive set of technology components enabling the creation and delivery of rich cross device multi-touch user experiences. HTML5 UI Elements CSS / CSS3 Preprocessor JavaScript Library Device Information Services These technologies, enriched through our established mobile Cloud Platform, empower next generation user experiences in an affordable way for todays connected world.March 10, 2012 Netbiscuits GmbH 2012 26 27. Using Tactile - Smart DevelopmentWork faster and smarter using less lines ofcode with intelligent mark-up, while reducingcost and risk. Ramping Up: Large initial and on-going investments, learning time and costs Development: Productivity (Cost per Page) Flexibility: Cost of changes (minor and major ones) Maintenance: Revisiting/updating code. Adding new device and browser support (USP Netbiscuits Testing Team) Operations: Running the services (benefits of a cloud platform) All these cost elements are reduced with Tactile and Smart Development March 10, 2012 Netbiscuits GmbH 201227 28. Ease of Development Tactile Mark-up, only 70 lines.The same page writtenwith HTML and CSS,over 300 lines!March 10, 2012 Netbiscuits GmbH 2012 28 29. A Closer Look at TactileMarch 10, 2012 Netbiscuits GmbH 2012 29 30. Tactile Mark-Up Tactile uses core mark-up to define layout and content Use powerful tags including , and to define screen behaviour, content display and interactive features Easy, simple to define parameters for full control of effectsMarch 10, 2012 Netbiscuits GmbH 201230 31. Tactile Events & Effects* Items with grey background are part of the beta and already abstractedMarch 10, 2012 Netbiscuits GmbH 2012 31 32. Re-think Your Development TimeBig features, small codeMarch 10, 2012 Net