Android Android
Lessons Creating a JavaScript Framework
Stephan HauxDirector Product ManagementNetbiscuits
March 10, 2012 © Netbiscuits GmbH 2012 1
Agenda
Who is Netbiscuits2010 – Beginning the Next Generation2011 – The Hard Work Got HarderLooking at the Problems
1. Differences in Browsers and the PatchyHTML5 Support
2. Designing for a World With Multiple DeviceCategories
3. Let's go Multi-device Shopping4. Tablet: More than Screen factor
The Parallel ExperienceNetbiscuits Tactile
March 10, 2012 © Netbiscuits GmbH 2012 Slide 2
HTML5"If you look at 100different devices,you’ll find 100different versions"
Brett Taylor, CTO of Facebook, talkingabout HTML5 on mobile devicesFebruary 27, 2012
Who is Netbiscuits?
March 10, 2012 © Netbiscuits GmbH 2012 3
9.6billionPages & content itemsdelivered/month
Doubled in the last 12 months
120millionVideos delivered/month
15,000Community of over
developers
27,000Sites & apps live andgrowing by 500/month
8 offices on 4 continents
8,000+Device profiles in our database
ME Awards 2011, won for the second time since 2009Best Mobile Web Publishing Platform
Gartner 2011 MCAP Magic Quadrant ranks NetbiscuitsVisionary with highest ability to execute
Frost & Sullivan European Best Practice Awards 2011Best Mobile Apps Deployment Platform
CBS.com mobile site built on Netbiscuits Platform winsMeffys & Eppy Awards Best Mobile Site
Global Mobile Awards at Mobile World Congress 2012Shortlisted Best Cloud-Based Technology
Biscuit ML<GALLERY id="nb-joif2de"><headline/><items>
<item><img src="pics/redbox.png"/>
</item><item>
<img src="pics/yellowbox.png"/></item><item>
<img src="pics/greenbox.png"/></item><item>
<img src="pics/purplebox.png"/></item>
</items><view position="top"/><settings>
<slider><arrows/><slideshow/><indicator/>
</slider></settings></GALLERY>
What do we do? - biscuitML
March 10, 2012 © Netbiscuits GmbH 2012 4
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;"><tr id="nb-joif2detr0"><td id="nb-joif2deitem1"><span class="" style="display:block;"> </span><table style="margin:auto; width:auto !important; border-spacing:0px;"><tr><td style="vertical-align:top"><div class=" nbsliderimg "><img src="img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics%2Fredbox.png" alt="" id="nb-joif2deitem1img"></div></td></tr></table><span class="" style="display:block;"></span><a></a></td>
<td id="nb-joif2deitem2"><span class="" style="display:block;"></span><table style="margin:auto; width:auto !important; border-spacing:0px;"><tr><td style="vertical-align:top"><div class=" nbsliderimg "><img src="img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics%2Fyellowbox.png" alt="" id="nb-joif2deitem2img"></div></td></tr></table><span class="" style="display:block;"></span><a></a></td>
<td id="nb-joif2deitem3"><span class="" style="display:block;"> </span>…
Plus other mark-up languages includingWML, cHTML (iMode), HDML, XHTML
2010 – Beginning the Next Generation
Mobile Web SuccessNetbiscuits very successful with mobile websites
Going MainstreamSmartphones became mainstream and phoneswere divided into Feature and Smartphones
Scripts for the Small ScreenIncreasing number of projects included scriptingwith smaller screens supporting interactivefeatures
The 3rd Design Dimension: InteractingWe started to think about the 3rd DesignDimension, going beyond layout and pages
March 10, 2012 © Netbiscuits GmbH 2012 5
CBS launched their mobilesite with rich video
playback, drop-down menu& more.
2011 – The Hard Work Got Harder
We introduced Rich UI capabilities
Our customers were thrilled…but naturallyasked for more!
More flexibility with ScriptsMore control on layout and functionality.More features as standard
So we decided to further develop our platform tosupport the next stage in development for multi-touch, multi-platform connected devices
March 10, 2012 © Netbiscuits GmbH 2012 6
eBay launched their mobilesite with swiping galleries,
overlay menus & more.
Problem Solved, Problems Created
Rich User Interfaces opened up more possibilities and increasedthe 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 allthis possible, but…
HTML5 feature support patchy and inconsistentHTML + DOM manipulation is tedious with existing JavaScript FrameworksEffectively impossible for sites spanning multiple device categories
March 10, 2012 © Netbiscuits GmbH 2012 7
To solve the biggest problem, we had to solve all the little problems too.
Problem no.1
Differences in browsers and the patchy HTML5 support
March 10, 2012 © Netbiscuits GmbH 2012 8
Everything Except Green is a Problem!
March 10, 2012 © Netbiscuits GmbH 2012 9
HTML5 <video>
"There is no single combinationof containers and codecs thatworks in all HTML5 (supported)browsers" Source (Professor Markup:http://diveintohtml5.info/video.htmlv)
March 10, 2012 © Netbiscuits GmbH 2012 10
The 3 main challenges:
1. Video Codecs
2. Device HTML5 support
3. Device capabilities whenhandling video
Source: http://www.expertisemobile.com/2011/10/28/html5-video-and-audio-tags-support-on-mobile-device-real-world-feedback/
"You can’t detect 'HTML5 support',because that doesn’t make anysense. But you can detect support forindividual features, like canvas,video, or geolocation"
Source: http://diveintohtml5.info
March 10, 2012 © Netbiscuits GmbH 2012 11
Problem no.2
Designing for a world with multiple device categories
March 10, 2012 © Netbiscuits GmbH 2012 12
In the beginning itwas simple…
…then came morestrong players
…and old playersbring even more!
Smartphone Screen Size 1 X X XSmartphone Screen Size 2 X XSmartphone Screen Size 3 X
Tablet Screen Size 1 X X XTablet Screen Size 2 X XTablet Screen Size 3 X XTablet Screen Size 4 X
PC XIPTV ? ? ?
It's all About Width & Height
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 werepredominantly Smartphone focused,in fact many still are which issurprising given that Tablets gainedtraction in 2010/11
Frameworks are not supported byestablished and integrated devicedatabases with device informationservices
This is the root cause of manyheadaches when developing formultiple screens – develop once, test10x 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 complicatesdevelopment
IDEs & cross OS Compilers notaddressing the Screen sizecontinuum
Ignore Multi Device Users
Barely linking Front-end and CloudServices
March 10, 2012 © Netbiscuits GmbH 2012 17
Problem No.3
Let's go Multi-device Shopping
March 10, 2012 © Netbiscuits GmbH 2012 18
Problems 1 & 2 Create Problem No.3
The technology spaghettiScreensContent TypesDifferent CodeFeatures & FunctionsBusiness LogicMaintenance & Support
March 10, 2012 © Netbiscuits GmbH 2012 19
Problem No.4
Tablet: More than Screen factor
March 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 SupportProblem 2: Multiple ScreensProblem 3: Creating Multi-Screen UX ConsistencyNext we find Problem 4: Sequential to Parallel
Web + Smartphone doesn't equal TabletWe've 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: Tablets
Web: Layout and real estate on screen+ Smartphone: Multi dimensional User Experience= Subset of Tablet
Endless 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
1 + 1 = 3
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-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 experiences
HTML5 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 2012 25
Tactile Technical Components
Tactile contains a comprehensive set of technologycomponents enabling the creation and delivery of richcross device multi-touch user experiences.
HTML5 UI ElementsCSS / CSS3 PreprocessorJavaScript LibraryDevice Information Services
These technologies, enriched through our establishedmobile Cloud Platform, empower next generation userexperiences in an affordable way for today's connectedworld.
March 10, 2012 © Netbiscuits GmbH 2012 26
Using Tactile - Smart Development
Work faster and smarter using less lines ofcode with intelligent mark-up, while reducingcost and risk.
March 10, 2012 © Netbiscuits GmbH 2012 27
• 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
Ease of Development
March 10, 2012 © Netbiscuits GmbH 2012 28
Tactile Mark-up,only 70 lines.
The same page writtenwith HTML and CSS,over 300 lines!
A Closer Look at Tactile
March 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 definescreen 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 & Effects
March 10, 2012 © Netbiscuits GmbH 2012 31
http://www.lukew.com/touch/TouchGestureCards.pdf* Items with grey background are part of the beta and already abstracted
Re-think Your Development Time
© Netbiscuits GmbH 2012
Big features, small code…
March 10, 2012 32
Tactile Multi-device Layouts
Device screens are divided intodifferent layout sections
Root Layout is defined byScreen.width and Screen.height
Resize or orientation change ishandled via intelligent eventchain from parent to children.
March 10, 2012 © Netbiscuits GmbH 2012 33
Standard Mobile Site 'top down' approach transforms into Tactile Layouts
Each Layout element calculates the top, left,width and height coordinates in relation to theparent element.
Default values are defined within BiscuitML forlandscape and portrait
Default values can be overwritten or fullycustomized through JavaScript at any time
Introduction Views
March 10, 2012 © Netbiscuits GmbH 2011 34
Wrappers for Biscuits
View ScrollView MultiView
Each Layout element needs at least one child element derived fromUIContainer (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 tocalculate it‘s position in relation to it‘t parent element.They can be nested
2 Views …
View
March 10, 2012 © Netbiscuits GmbH 2011 35
Intended to hold your contents such as Biscuits,HTML 5 & HTML TagsViews could be designed to fit an entire page oronly a small area of the screensViews can be nestedMultiple parameters (visible, position, overflow,opacity etc.) control the look & feel and behavoirView can be extended with scrolling functionality(horizizontal, vertical, both)
View ScrollView
MultiView
March 10, 2012 © Netbiscuits GmbH 2011 36
Only one View within MultiView is visible at eachtime.MultiView provides methods to switch betweenViews.Views can be page like (large) or content like(smaller)The onSwitch event can be used to get notified whenthe current view has changed.
MultiView
Toyota
March 10, 2012 © Netbiscuits GmbH 2012 37
FlexView
March 10, 2012 © Netbiscuits GmbH 2011 38
FlexViews define FlexItems that can have either oneflexible dimension (height or width)FlexViews can change their flexible dimensiondepended on screen size or orientationContents are encapsulated in FlexItems
Width is fixed;height is flexible
Height is fixed;width is flexible
The Daily Show Digest
March 10, 2012 © Netbiscuits GmbH 2012 39
GridView
March 10, 2012 © Netbiscuits GmbH 2011 40
GridView arrange items in rows & columns much like atableGridViews can be used to achieve responsive layoutseasily and quickly.Each GridView can be extended with optionalparameters like „gap“GridItems can contain any sort of contents or contentgroups
GridView
Tactile Overlays
Create overlays and multi-layeredlayouts
Show and hide overlays usingpre-defined, yet editable events
Use conditions to enable devicespecific layers and behavour
March 10, 2012 © Netbiscuits GmbH 2012 41
Tactile Layouts with Engaging UI Components
Create layouts of any kind and with any level of complexityDeliver pages with multiple layoutsSpecify overlapping layout regions. Slide out menus for exampleUse MultiView in combination with swipe events to create galleriesEnhance viewing experience with blind, fade and slide effects
March 10, 2012 © Netbiscuits GmbH 2012 42
Layout Manager
MultiView
MultiView
Overlay
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 devicesFebruary 27, 2012
March 10, 2012 © Netbiscuits GmbH 2012 44
Thank You
March 10, 2012 © Netbiscuits GmbH 2012 45
Stephan HauxDirector Product [email protected]@sthaux See Tactile in Action
Netbiscuitshttp://m.netbiscuits.com