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

45
Android т Android Lessons Creating a JavaScript Framework Stephan Haux Director Product Management Netbiscuits March 10, 2012 © Netbiscuits GmbH 2012 1

description

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

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

Android Android

Lessons Creating a JavaScript Framework

Stephan HauxDirector Product ManagementNetbiscuits

March 10, 2012 © Netbiscuits GmbH 2012 1

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

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

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

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

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

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

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

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.

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

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.

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

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.

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

Problem no.1

Differences in browsers and the patchy HTML5 support

March 10, 2012 © Netbiscuits GmbH 2012 8

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

Everything Except Green is a Problem!

March 10, 2012 © Netbiscuits GmbH 2012 9

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

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/

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

"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

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

Problem no.2

Designing for a world with multiple device categories

March 10, 2012 © Netbiscuits GmbH 2012 12

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

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

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

Designing for Multiple Screens

March 10, 2012 © Netbiscuits GmbH 2012 14

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

Frameworks

HTML, JavaScript, SDK?

March 10, 2012 © Netbiscuits GmbH 2012 15

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

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

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

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

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

Problem No.3

Let's go Multi-device Shopping

March 10, 2012 © Netbiscuits GmbH 2012 18

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

Problems 1 & 2 Create Problem No.3

The technology spaghettiScreensContent TypesDifferent CodeFeatures & FunctionsBusiness LogicMaintenance & Support

March 10, 2012 © Netbiscuits GmbH 2012 19

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

Problem No.4

Tablet: More than Screen factor

March 10, 2012 © Netbiscuits GmbH 2012 20

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

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

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

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

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

Chekov’s Console – The Parallel Experience

March 10, 2012 © Netbiscuits GmbH 2012 23

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

March 10, 2012 © Netbiscuits GmbH 2012 24

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

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

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

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

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

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

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

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!

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

A Closer Look at Tactile

March 10, 2012 © Netbiscuits GmbH 2012 29

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

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

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

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

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

Re-think Your Development Time

© Netbiscuits GmbH 2012

Big features, small code…

March 10, 2012 32

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

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

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

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 …

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

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

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

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

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

Toyota

March 10, 2012 © Netbiscuits GmbH 2012 37

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

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

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

The Daily Show Digest

March 10, 2012 © Netbiscuits GmbH 2012 39

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

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

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

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

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

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

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

BMW

March 10, 2012 © Netbiscuits GmbH 2012 43

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

"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

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

Thank You

March 10, 2012 © Netbiscuits GmbH 2012 45

Stephan HauxDirector Product [email protected]@sthaux See Tactile in Action

Netbiscuitshttp://m.netbiscuits.com