Initiation & hands-on Moovweb 5's new feature

Getting Started With Moovweb paul.edwards@moovweb.com

[2]

A Quick Poll 1

[3]

Who has heard of Moovweb?

Who has heard of Tritium?

Who has heard of Sass?

Who has downloaded the Moovweb SDK?

[4]

Moovweb Overview 2

[5]

RWD Performance versus Experience

“8k – 10k man hours to get a homepage load time of 26s on Smartphone”

50 elements, 500KB on 4G/LTE 30 elements, 300KB on 4G 10 element, 100KB on 3G

Page weight is increasing:

End 2013: 1,701KB End 2012: 1,286KB

Source: http://www.sitepoint.com/average-page-weights-increase-32-2013/

Retailers wanting a fast performing mobile optimised site should limit pages to:

Development is not easy:

Conversion demands more engagement:

Consumers are demanding Contextual experiences:

Consumers are demanding faster Response times:

Flat UI Micro UX Less Text

Minimalist Navigation Bigger Better Imagery

Richer Content Single Page Experience

Varied Typograhy Monochromatic Design

Cards and Tiles

source: Keynote / Internet Retailer

source: eBags.com

[6]

RWD Performance is Poor

http://www.internetretailer.com/2014/06/02/ugly-truth-about-responsive-design-and-how-fix-it?p=1

1s delay in page load times typically equates to -7% conversion

A 3.15s Desktop Page load time can equate to 18.24s on Smartphone

Your RWD site could be costing you 73% of potential conversions

[7]

[8]

Traffic Flow

Request to m., t. or single domain

Request forwarded to Origin site

Origin site response

t. engine transforms response as defined in the Moovweb Project

Response forwarded to client

Client Origin

~100mS

[9]

A First Transform 3

[10]

Tritium

“Tritium is a simple scripting language for efficiently transforming structured data.”

Tritium

HTML, JSON, XML

HTML, JSON, XML

Selector (css or xpath)

function

Tritium Libraries (known as Mixers) add specific functionality to your project. Mixers in Tritium are like RubyGems in Ruby or NPM Modules in NodeJS.

[11]

Tritium Selectors (Xpath)

$(Text %xpath){ #Now we are in a scope and can do something with it… }

$(“//div”){ #We have selected all divs… }

[12]

Tritium Selectors (css)

$$(Text %css_selector){ #Now we are in a scope and can do something with it… }

$$("#one"){ #Now we have selected all divs with an ID of one… }

Note: the $$ converts the CSS selector to an XPath-style selector. It converts it into a local deep search, so could potentially be slower than an XPath selector. For

example, the selector $$("#one") will be converted into $(".//*[id='one']"). The double-forward-slash deep search could affect performance.

[13]

play.tritium.io

[14]

Let’s write some code… Goto play.tritium.io and load the hacker news example

(Ycombinator)

$$(".title:first-child"){ text("") insert("img",src: "https://s3.amazonaws.com/moovweb-apollo/logo.png") }

.title > img { width: 100px; }

Tritium

CSS

[15]

If all went well, we should have…

Notice how content just flows through?

[16]

Using the SDK 4

[17] File download: http://is.gd/VKUg9o

Transforming Reddit

[18] File download: http://is.gd/VKUg9o

http://developer.moovweb.com/quickstart

Toolkit: http://developer.moovweb.com/downloads/moovweb_toolkit (gives logging and debugging tools inside chrome)

Syntax Highlighting:

http://developer.moovweb.com/downloads/syntax_files (check out Sublime Text)

[19] File download: http://is.gd/VKUg9o

Creating our Moovweb Project

start our server:

We should see the Moovweb Developer Dashboard:

Cool! Let’s create a project

[20] File download: http://is.gd/VKUg9o

Reddit Zurb test reddit.com

Libraries and Helpers

[21] File download: http://is.gd/VKUg9o

Let’s make a Zurb site!

[22] File download: http://is.gd/VKUg9o

Project Anatomy

Images, JavaScript and styling that we are injecting into our project

Reusable functions

Transformation Scripts

Domain mapping Tritium Mixers that are we including

[23] File download: http://is.gd/VKUg9o

Mixer.lock

Full language specification and definition of mixers: http://www.tritium.io/

[24] File download: http://is.gd/VKUg9o

Some Tritium Mixers Core-rewriter: Rewrites JS and Links to the correct domain Stdlib: Standard Tritium functions needed for every project Jsonlib: Convert HTML to JSON Jquery-mobile: Helpers to implement JQM Perf: Optimize images and JavaScript Assert: Test your Tritium to monitor for breaks Cache: Enable caching to improve site performance

Full language specification and definition of mixers: http://www.tritium.io/

[25] File download: http://is.gd/VKUg9o

Main.ts

[26] File download: http://is.gd/VKUg9o

html.ts

[27] File download: http://is.gd/VKUg9o

fixorigin.ts

[28] File download: http://is.gd/VKUg9o

Loading Foundation and Struts

[29] File download: http://is.gd/VKUg9o

Transforming Common Page Areas

[30] File download: http://is.gd/VKUg9o

Transforming a Specific Page

[31] File download: http://is.gd/VKUg9o

Some Styling

[32] File download: http://is.gd/VKUg9o

Sprites

[33] File download: http://is.gd/VKUg9o

Variables

[34]

Advanced Use Case 5

[35] File download: http://is.gd/VKUg9o

Base UX Layer – Common attributes applied to all devices

Touch UX Layer – Touch Enabled Changes

Smartphone UX Layer Tablet UX Layer Desktop UX Layer

Variation 1 Variation 2 Smartphone Perf Layer

Base Performance Layer

Non-touch Layer Geo Layer

Variation 1 Variation 2

systems of record

.js

.js

.js

endpoint optimised

responsive html + js

endpoint optimised

sprites

Modes and Layers

[36] File download: http://is.gd/VKUg9o

config.json

Full language specification and definition of mixers: http://www.tritium.io/

[37] File download: http://is.gd/VKUg9o

Project Flow (1)

1

@import: A Layer that will be imported @optional: A Layer that may be imported

@optional “@/main.ts” expands out to e.g. mobile/main.ts

[38] File download: http://is.gd/VKUg9o

Project Flow (2) - shared

2

Defined in /functions/main.ts

Match: http://www.tritium.io/current#match(Text

%20%25match_target)%20Text

If the Origin server responds with html, we’ll import html.ts

[39] File download: http://is.gd/VKUg9o

Helper puts current layer at top of

browser

Project Flow (3) - shared

3

Defined in /functions/main.ts

[40] File download: http://is.gd/VKUg9o

Going back to main.ts and looking at @optional (1)

1

Will route if the UA passes the regex defined in the control center for that mode

https://console.moovweb.com/igadgetcommerce/production/settings

Note: Requires an Enterprise Project to deploy or manage.

[41] File download: http://is.gd/VKUg9o

@optional (2) – assuming mobile layer

@optional “@/main.ts” expanded to: /mobile/main.ts

[42] File download: http://is.gd/VKUg9o

@optional (2) – assuming mobile layer

Make links, scripts and img’s point to the correct domain

Clean meta tags and inject mobile ones

Dump CSS and remove html comments

Add layer specific SCSS, JS, fav-icon, touchicons

Move css above scripts

Transform Header and Footer

Decide if we need a page specific transform

[43] File download: http://is.gd/VKUg9o

That’s great but what about styling?

Site wide styles go here

Useful mixins and classes

Variables for: Color scheme, basic styles for fonts, borders,

gradients and headers

[44] File download: http://is.gd/VKUg9o

Images and Sprites

Images go in here

Generated sprites

Associated style sheet generated here

Don’t forget to import the scss into assets/stylesheets/layers/

mobile/mobile.scss

[45]

Further Reading 6

[46]

Developer.moovweb.com University.moovweb.com

Thank You

Paul.edwards@moovweb.com