More Related Content Similar to Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework (20) Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework1. Android Android
Lessons Creating a JavaScript Framework
Stephan Haux
Director Product Management
Netbiscuits
March 10, 2012 © Netbiscuits GmbH 2012 1
2. Agenda
Who is Netbiscuits
HTML5 2010 – Beginning the Next Generation
"If you look at 100 2011 – The Hard Work Got Harder
different devices, Looking at the Problems
you’ll find 100 1. Differences in Browsers and the Patchy
HTML5 Support
different versions" 2. Designing for a World With Multiple Device
Categories
3. Let's 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
3. 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
developers
120 Gartner 2011 MCAP Magic Quadrant ranks Netbiscuits
billion
Visionary with highest ability to execute
million
Videos delivered/month Pages & content items
delivered/month Frost & Sullivan European Best Practice Awards 2011
Best Mobile Apps Deployment Platform
27,000
Sites & apps live and
Doubled in the last 12 months
growing by 500/month CBS.com mobile site built on Netbiscuits Platform wins
Meffys & Eppy Awards Best Mobile Site
8,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
4. 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
5. 2010 – Beginning the Next Generation
Mobile Web Success
Netbiscuits very successful with mobile websites
Going Mainstream
Smartphones became mainstream and phones
were divided into Feature and Smartphones
Scripts for the Small Screen
Increasing number of projects included scripting
with smaller screens supporting interactive
features
The 3rd Design Dimension: Interacting
We started to think about the 3rd Design CBS launched their mobile
Dimension, going beyond layout and pages site with rich video
playback, drop-down menu
& more.
March 10, 2012 © Netbiscuits GmbH 2012 5
6. 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 standard
So we decided to further develop our platform to
support 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
7. Problem Solved, Problems Created
To 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
8. Problem no.1
Differences in browsers and the patchy HTML5 support
March 10, 2012 © Netbiscuits GmbH 2012 8
10. 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
11. "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.info
March 10, 2012 © Netbiscuits GmbH 2012 11
12. Problem no.2
Designing for a world with multiple device categories
March 10, 2012 © Netbiscuits GmbH 2012 12
13. It's 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
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 2012 16
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
Services
March 10, 2012 © Netbiscuits GmbH 2012 17
18. Problem No.3
Let's go Multi-device Shopping
March 10, 2012 © Netbiscuits GmbH 2012 18
19. 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
20. Problem No.4
Tablet: More than Screen factor
March 10, 2012 © Netbiscuits GmbH 2012 20
21. 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 Parallel
Web + Smartphone doesn't equal Tablet
We've lived in a sequential world… Smartphone and PC is sequential,
but now we have an added dimension. Tablets are the parallel world
to the sequential world we know!
March 10, 2012 © Netbiscuits GmbH 2012 21
22. Melting Pot: Tablets
1+1=3
Web: Layout and real estate on screen
+ Smartphone: Multi dimensional User Experience
= Subset of Tablet
Endless vs Limited Real Estate
Tablet
Horizontal and vertical one finger swipe makes 1024 x 768 an endless
canvas enabling parallel experiences
Smartphone
The same is difficult to replicate on a multi touch smartphone as a
users hand hides display meaning it can only offer a sequential
experience
March 10, 2012 © Netbiscuits GmbH 2012 22
25. 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
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 today's connected
world.
March 10, 2012 © Netbiscuits GmbH 2012 26
27. 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
28. 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
29. A Closer Look at Tactile
March 10, 2012 © Netbiscuits GmbH 2012 29
30. 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
31. Tactile Events & Effects
http://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
33. Tactile Multi-device Layouts
Standard 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
34. Introduction Views
Wrappers 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
35. 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
36. 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
38. 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
40. 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
41. 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
42. 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
44. "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, 2012
March 10, 2012 © Netbiscuits GmbH 2012 44
45. 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