• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework
 

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

on

  • 2,526 views

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

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.

Statistics

Views

Total Views
2,526
Views on SlideShare
2,459
Embed Views
67

Actions

Likes
1
Downloads
31
Comments
0

4 Embeds 67

http://lanyrd.com 59
http://www.verious.com 5
http://bo.lt 2
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Android Android Lessons Creating a JavaScript Framework Stephan Haux Director Product Management NetbiscuitsMarch 10, 2012 © Netbiscuits GmbH 2012 1
    • Agenda Who is Netbiscuits HTML5 2010 – Beginning the Next Generation"If you look at 100 2011 – The Hard Work Got Harderdifferent devices, Looking at the Problemsyou’ll find 100 1. Differences in Browsers and the Patchy HTML5 Supportdifferent versions" 2. Designing for a World With Multiple Device Categories 3. Lets go Multi-device Shopping 4. Tablet: More than Screen factor Brett Taylor, CTO of Facebook, talking about HTML5 on mobile devices The Parallel Experience February 27, 2012 Netbiscuits Tactile March 10, 2012 © Netbiscuits GmbH 2012 Slide 2
    • Who is Netbiscuits?Community of over 15,000 ME Awards 2011, won for the second time since 2009 Best Mobile Web Publishing Platform 9.6 developers120 Gartner 2011 MCAP Magic Quadrant ranks Netbiscuits billion Visionary with highest ability to executemillion Videos delivered/month Pages & content items delivered/month Frost & Sullivan European Best Practice Awards 2011 Best Mobile Apps Deployment Platform27,000Sites & apps live and Doubled in the last 12 monthsgrowing by 500/month CBS.com mobile site built on Netbiscuits Platform wins Meffys & Eppy Awards Best Mobile Site8,000+Device profiles in our database 8 4 Global Mobile Awards at Mobile World Congress 2012 offices on Shortlisted Best Cloud-Based Technology continents March 10, 2012 © Netbiscuits GmbH 2012 3
    • What do we do? - biscuitML HMTL Output (Delivered to device) <div class=" slider nbslideshow " id="nb-joif2detable" style="position: relative; "> <table style=" border-spacing: 0px; margin-left: auto; margin-right: auto;"> Biscuit ML <tr id="nb-joif2detr0"> <GALLERY id="nb-joif2de"> <td id="nb-joif2deitem1"> <headline/> <span class="" style="display:block;"> </span> <table style="margin:auto; width:auto !important; border-spacing:0px;"> <items> <tr><td style="vertical-align:top"> <item> <div class=" nbsliderimg "> <img src="pics/redbox.png"/> <img src="img/ic?width=216&height=240&fsize= </item> 999000&format=jpg&url=pics%2Fredbox.png" alt="" id="nb-joif2deitem1img"> <item> </div></td></tr></table> <span class="" style="display:block;"></span><a></a></td> <img src="pics/yellowbox.png"/> </item> <td id="nb-joif2deitem2"> <item> <span class="" style="display:block;"></span> <img src="pics/greenbox.png"/> <table style="margin:auto; width:auto !important; border-spacing:0px;"> </item> <tr><td style="vertical-align:top"> <div class=" nbsliderimg "> <item> <img src="img/ic?width=216&height=240&fsize= <img src="pics/purplebox.png"/> 999000&format=jpg&url=pics%2Fyellowbox.png" alt="" id="nb-joif2deitem2img"> </item> </div></td></tr></table> </items> <span class="" style="display:block;"></span><a></a></td> <view position="top"/> <td id="nb-joif2deitem3"> <settings> <span class="" style="display:block;"> </span> <slider> … <arrows/> <slideshow/> <indicator/> </slider> Plus other mark-up languages including </settings> WML, cHTML (iMode), HDML, XHTML </GALLERY> March 10, 2012 © Netbiscuits GmbH 2012 4
    • 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 2012 5
    • 2011 – The Hard Work Got Harder We introduced Rich UI capabilities Our customers were thrilled…but naturally asked for more! More flexibility with Scripts More 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 devices eBay launched their mobile site with swiping galleries, overlay menus & more. March 10, 2012 © Netbiscuits GmbH 2012 6
    • 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 browser Interactive options beyond simple form fields Ability to design beyond size and colour In theory HTML + DOM Manipulation via JavaScript should make all this possible, but… HTML5 feature support patchy and inconsistent HTML + DOM manipulation is tedious with existing JavaScript Frameworks Effectively impossible for sites spanning multiple device categories March 10, 2012 © Netbiscuits GmbH 2012 7
    • Problem no.1 Differences in browsers and the patchy HTML5 supportMarch 10, 2012 © Netbiscuits GmbH 2012 8
    • Everything Except Green is a Problem! March 10, 2012 © Netbiscuits GmbH 2012 9
    • HTML5 <video> The 3 main challenges: 1. Video Codecs 2. Device HTML5 support 3. Device capabilities when handling video "There is no single combination of containers and codecs that works in all HTML5 (supported) browsers" Source (Professor Markup: http://diveintohtml5.info/video.htmlv) Source: http://www.expertisemobile.com/2011/10/28/html5-video- and-audio-tags-support-on-mobile-device-real-world-feedback/ March 10, 2012 © Netbiscuits GmbH 2012 10
    • "You can’t detect HTML5 support, because that doesn’t 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
    • Problem no.2 Designing for a world with multiple device categoriesMarch 10, 2012 © Netbiscuits GmbH 2012 12
    • Its all About Width & Height In the beginning it …then came more …and old players was simple… strong players bring even more! Smartphone Screen Size 1 X X X Smartphone Screen Size 2 X X Smartphone Screen Size 3 X Tablet Screen Size 1 X X X Tablet Screen Size 2 X X Tablet Screen Size 3 X X Tablet Screen Size 4 X PC X IPTV ? ? ? March 10, 2012 © Netbiscuits GmbH 2012 13
    • Designing for Multiple Screens March 10, 2012 © Netbiscuits GmbH 2012 14
    • Frameworks HTML, JavaScript, SDK?March 10, 2012 © Netbiscuits GmbH 2012 15
    • 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 2012 16
    • 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 Services March 10, 2012 © Netbiscuits GmbH 2012 17
    • Problem No.3 Lets go Multi-device ShoppingMarch 10, 2012 © Netbiscuits GmbH 2012 18
    • Problems 1 & 2 Create Problem No.3 The technology spaghetti Screens Content Types Different Code Features & Functions Business Logic Maintenance & Support March 10, 2012 © Netbiscuits GmbH 2012 19
    • Problem No.4 Tablet: More than Screen factorMarch 10, 2012 © Netbiscuits GmbH 2012 20
    • A Quick Recap"If you look at 100 different devices, you’ll 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
    • Melting Pot: Tablets1+1=3 Web: 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 2012 22
    • Chekov’s Console – The Parallel Experience March 10, 2012 © Netbiscuits GmbH 2012 23
    • March 10, 2012 © Netbiscuits GmbH 2012 24
    • Tactile Core Features Tactile Mark-up Mark-up replaces a large portion of JavaScript reducing size and complexity of code without compromising on user experience. Effects & Events Large number of cross platform optimized out-of-the-box effects and events enable rich display and behavior. Device Information Services Device Information Services provide device characteristics from the device and from our Testing Intelligence to all touch points of a web application: At the edge enhancing redirection decisions, at the backend systems allowing for device class specific computing (ie. Security, Device specific offerings) and at the client side for native like user experiences HTML5 Framework Tactile HTML5 framework is extendable in nature. It allows developers to extend the JavaScript library at all layers – from kernel to the UI components or use the CSS Preprocessor capabilities. March 10, 2012 © Netbiscuits GmbH 2012 25
    • 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
    • Using Tactile - Smart Development Work faster and smarter using less lines of code with intelligent mark-up, while reducing cost 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 2012 27
    • Ease of Development Tactile Mark-up, only 70 lines. The same page written with HTML and CSS, over 300 lines! March 10, 2012 © Netbiscuits GmbH 2012 28
    • A Closer Look at TactileMarch 10, 2012 © Netbiscuits GmbH 2012 29
    • Tactile Mark-Up Tactile uses core mark-up to define layout and content Use powerful tags including <Layout>, <View> and <Item> to define screen behaviour, content display and interactive features Easy, simple to define parameters for full control of effects March 10, 2012 © Netbiscuits GmbH 2012 30
    • Tactile Events & Effectshttp://www.lukew.com/touch/TouchGestureCards.pdf* Items with grey background are part of the beta and already abstracted March 10, 2012 © Netbiscuits GmbH 2012 31
    • Re-think Your Development TimeBig features, small code… March 10, 2012 © Netbiscuits GmbH 2012 32
    • Tactile Multi-device LayoutsStandard Mobile Site top down approach transforms into Tactile Layouts Device screens are divided into different layout sections Root Layout is defined by Screen.width and Screen.height Resize or orientation change is handled via intelligent event chain from parent to children. Each Layout element calculates the top, left, width and height coordinates in relation to the parent element. Default values are defined within BiscuitML for landscape and portrait Default values can be overwritten or fully customized through JavaScript at any time March 10, 2012 © Netbiscuits GmbH 2012 33
    • Introduction ViewsWrappers for Biscuits View 2 Views ScrollView MultiView … Each Layout element needs at least one child element derived from UIContainer (layout, view, multiview, flexview). Views are very similar to layout element. It is not absolute positioned by default It can be vertical, horizontal or in both directions scrollable. (ScrollView) It can be linked into the resize event chain and use the same coordinates to calculate it‘s position in relation to it‘t parent element. They can be nested March 10, 2012 © Netbiscuits GmbH 2011 34
    • View Intended to hold your contents such as Biscuits, HTML 5 & HTML Tags Views could be designed to fit an entire page or only a small area of the screens Views can be nested Multiple parameters (visible, position, overflow, opacity etc.) control the look & feel and behavoir View can be extended with scrolling functionality (horizizontal, vertical, both) View ScrollView March 10, 2012 © Netbiscuits GmbH 2011 35
    • MultiView Only one View within MultiView is visible at each time. MultiView provides methods to switch between Views. Views can be page like (large) or content like (smaller) The onSwitch event can be used to get notified when the current view has changed. MultiView March 10, 2012 © Netbiscuits GmbH 2011 36
    • Toyota March 10, 2012 © Netbiscuits GmbH 2012 37
    • FlexView FlexViews define FlexItems that can have either one flexible dimension (height or width) FlexViews can change their flexible dimension depended on screen size or orientation Contents are encapsulated in FlexItems Width is fixed; height is flexible Height is fixed; width is flexible March 10, 2012 © Netbiscuits GmbH 2011 38
    • The Daily Show Digest March 10, 2012 © Netbiscuits GmbH 2012 39
    • GridView GridView arrange items in rows & columns much like a table GridViews can be used to achieve responsive layouts easily and quickly. Each GridView can be extended with optional parameters like „gap“ GridItems can contain any sort of contents or content groups GridView March 10, 2012 © Netbiscuits GmbH 2011 40
    • Tactile Overlays Create overlays and multi-layered layouts Show and hide overlays using pre-defined, yet editable events Use conditions to enable device specific layers and behavour March 10, 2012 © Netbiscuits GmbH 2012 41
    • Tactile Layouts with Engaging UI Components Layout Manager Overlay MultiView MultiView Create layouts of any kind and with any level of complexity Deliver pages with multiple layouts Specify overlapping layout regions. Slide out menus for example Use MultiView in combination with swipe events to create galleries Enhance viewing experience with blind, fade and slide effects March 10, 2012 © Netbiscuits GmbH 2012 42
    • BMW March 10, 2012 © Netbiscuits GmbH 2012 43
    • "If you look at 100 different devices, you’ll find 100 different versions" Brett Taylor, CTO of Facebook, talking about HTML5 on mobile devices February 27, 2012March 10, 2012 © Netbiscuits GmbH 2012 44
    • Thank You Stephan Haux Director Product Management s.haux@netbiscuits.com @sthaux See Tactile in Action Netbiscuits http://m.netbiscuits.com March 10, 2012 © Netbiscuits GmbH 2012 45