Getting Started With Moovweb
paul.edwards@moovweb.com
[2]
A Quick Poll1
[3]
Who has heard of Moovweb?
Who has heard of Tritium?
Who has heard of Sass?
Who has downloaded the Moovweb
SDK?
[4]
Moovweb Overview2
[5]
RWD Performance versus Experience
“8k – 10k man hours to get a homepage load time of
26s on Smartphone”
50 elements, 5...
[6]
RWD Performance is Poor
http://www.internetretailer.com/2014/06/02/ugly-truth-about-responsive-design-and-how-fix-it?p...
[7]
[8]
Traffic Flow
Request to m., t.
or single domain
Request
forwarded to
Origin site
Origin site
response
t. engine transf...
[9]
A First Transform3
[10]
Tritium
“Tritium is a simple scripting language for
efficiently transforming structured data.”
Tritium
HTML, JSON, XM...
[11]
Tritium Selectors (Xpath)
$(Text %xpath){
#Now we are in a scope and can do something with it…
}
$(“//div”){
#We have...
[12]
Tritium Selectors (css)
$$(Text %css_selector){
#Now we are in a scope and can do something with it…
}
$$("#one"){
#N...
[13]
play.tritium.io
[14]
Let’s write some code…
Goto play.tritium.io and load the hacker news example
(Ycombinator)
$$(".title:first-child"){
...
[15]
If all went well, we should have…
Notice how content just flows through?
[16]
Using the SDK4
[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/downl...
[19]File download: http://is.gd/VKUg9o
Creating our Moovweb Project
start our server:
We should see the Moovweb Developer ...
[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 proje...
[23]File download: http://is.gd/VKUg9o
Mixer.lock
Full language specification and definition of
mixers: http://www.tritium...
[24]File download: http://is.gd/VKUg9o
Some Tritium Mixers
Core-rewriter: Rewrites JS and Links to the correct domain
Stdl...
[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 Case5
[35]File download: http://is.gd/VKUg9o
Base UX Layer – Common attributes applied to all devices
Touch UX Layer – Touch Ena...
[36]File download: http://is.gd/VKUg9o
config.json
Full language specification and definition of
mixers: http://www.tritiu...
[37]File download: http://is.gd/VKUg9o
Project Flow (1)
1
@import: A Layer that will be imported
@optional: A Layer that m...
[38]File download: http://is.gd/VKUg9o
Project Flow (2) - shared
2
Defined in /functions/main.ts
Match:
http://www.tritium...
[39]File download: http://is.gd/VKUg9o
Helper puts current
layer at top of
browser
Project Flow (3) - shared
3
Defined in ...
[40]File download: http://is.gd/VKUg9o
Going back to main.ts and looking at @optional (1)
1
Will route if the UA passes th...
[41]File download: http://is.gd/VKUg9o
@optional (2) – assuming mobile layer
@optional “@/main.ts” expanded to: /mobile/ma...
[42]File download: http://is.gd/VKUg9o
@optional (2) – assuming mobile layer
Make links, scripts and img’s point to the
co...
[43]File download: http://is.gd/VKUg9o
That’s great but what about styling?
Site wide styles go here
Useful mixins and
cla...
[44]File download: http://is.gd/VKUg9o
Images and Sprites
Images go in here
Generated sprites
Associated style sheet
gener...
[45]
Further Reading6
[46]
Developer.moovweb.com
University.moovweb.com
Thank You
Paul.edwards@moovweb.com	
  
Upcoming SlideShare
Loading in...5
×

Initiation & hands-on Moovweb 5's new feature

286

Published on

"Initiation & hands-on Moovweb 5's new feature" by Paul Edwards Lead Sales Engineer at Moovweb

Published in: Data & Analytics, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
286
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Initiation & hands-on Moovweb 5's new feature

  1. 1. Getting Started With Moovweb paul.edwards@moovweb.com
  2. 2. [2] A Quick Poll1
  3. 3. [3] Who has heard of Moovweb? Who has heard of Tritium? Who has heard of Sass? Who has downloaded the Moovweb SDK?
  4. 4. [4] Moovweb Overview2
  5. 5. [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,701KBEnd 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. 6. [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. 7. [7]
  8. 8. [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. 9. [9] A First Transform3
  10. 10. [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. 11. [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. 12. [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. 13. [13] play.tritium.io
  14. 14. [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. 15. [15] If all went well, we should have… Notice how content just flows through?
  16. 16. [16] Using the SDK4
  17. 17. [17]File download: http://is.gd/VKUg9o Transforming Reddit
  18. 18. [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. 19. [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. 20. [20]File download: http://is.gd/VKUg9o Reddit Zurb test reddit.com Libraries and Helpers
  21. 21. [21]File download: http://is.gd/VKUg9o Let’s make a Zurb site!
  22. 22. [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. 23. [23]File download: http://is.gd/VKUg9o Mixer.lock Full language specification and definition of mixers: http://www.tritium.io/
  24. 24. [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. 25. [25]File download: http://is.gd/VKUg9o Main.ts
  26. 26. [26]File download: http://is.gd/VKUg9o html.ts
  27. 27. [27]File download: http://is.gd/VKUg9o fixorigin.ts
  28. 28. [28]File download: http://is.gd/VKUg9o Loading Foundation and Struts
  29. 29. [29]File download: http://is.gd/VKUg9o Transforming Common Page Areas
  30. 30. [30]File download: http://is.gd/VKUg9o Transforming a Specific Page
  31. 31. [31]File download: http://is.gd/VKUg9o Some Styling
  32. 32. [32]File download: http://is.gd/VKUg9o Sprites
  33. 33. [33]File download: http://is.gd/VKUg9o Variables
  34. 34. [34] Advanced Use Case5
  35. 35. [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 2Smartphone 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. 36. [36]File download: http://is.gd/VKUg9o config.json Full language specification and definition of mixers: http://www.tritium.io/
  37. 37. [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. 38. [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. 39. [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. 40. [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. 41. [41]File download: http://is.gd/VKUg9o @optional (2) – assuming mobile layer @optional “@/main.ts” expanded to: /mobile/main.ts
  42. 42. [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. 43. [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. 44. [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. 45. [45] Further Reading6
  46. 46. [46] Developer.moovweb.com University.moovweb.com
  47. 47. Thank You Paul.edwards@moovweb.com  
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×