Initiation & hands-on Moovweb 5's new feature

Getting Started With Moovweb [email protected]

[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


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)


Creating our Moovweb Project

start our server:

We should see the Moovweb Developer Dashboard:

Cool! Let’s create a project


Reddit Zurb test reddit.com

Libraries and Helpers


Let’s make a Zurb site!


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


Mixer.lock

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


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



Main.ts


html.ts


fixorigin.ts


Loading Foundation and Struts


Transforming Common Page Areas


Transforming a Specific Page


Some Styling


Sprites


Variables

[34]

Advanced Use Case 5


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


config.json



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


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


Helper puts current layer at top of

browser

Project Flow (3) - shared

3

Defined in /functions/main.ts


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.


@optional (2) – assuming mobile layer

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


@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


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


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

[email protected]

Data & Analytics

Initiation & hands-on Moovweb 5's new feature