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

Android Android
Lessons Creating a JavaScript Framework

Stephan Haux
Director Product Management
Netbiscuits

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

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

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>


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.


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.


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


Problem no.1
Differences in browsers and the patchy HTML5 support


Everything Except Green is a Problem!


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/


"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


Problem no.2
Designing for a world with multiple device categories


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


Designing for Multiple Screens


Frameworks
HTML, JavaScript, SDK?


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!


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


Problem No.3
Let's go Multi-device Shopping


Problems 1 & 2 Create Problem No.3

The technology spaghetti
Screens
Content Types
Different Code
Features & Functions
Business Logic
Maintenance & Support


Problem No.4
Tablet: More than Screen factor


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!


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


Chekov’s Console – The Parallel Experience


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.

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.


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


Ease of Development

Tactile Mark-up,
only 70 lines.

The same page written
with HTML and CSS,
over 300 lines!


A Closer Look at Tactile


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


Tactile Events & Effects

http://www.lukew.com/touch/TouchGestureCards.pdf
* Items with grey background are part of the beta and already abstracted


Re-think Your Development Time
Big features, small code…


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


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


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


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


Toyota


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


The Daily Show Digest


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


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


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


BMW


"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


Thank You

Stephan Haux
Director Product Management
s.haux@netbiscuits.com
@sthaux See Tactile in Action
Netbiscuits
http://m.netbiscuits.com


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

Recommended

Recommended

More Related Content

What's hot

What's hot (6)

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

Similar to Netbiscuits @ SXSW Interactive: Android ≠ Android: Lessons Creating a JS Framework (20)

Recently uploaded

Recently uploaded (20)

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