Initiation & hands-on Moovweb 5's new feature


Published on

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

Published in: Data & Analytics, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Initiation & hands-on Moovweb 5's new feature

  1. 1. Getting Started With Moovweb
  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: 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:
  6. 6. [6] RWD Performance is Poor 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]
  14. 14. [14] Let’s write some code… Goto and load the hacker news example (Ycombinator) $$(".title:first-child"){ text("") insert("img",src: " 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: Transforming Reddit
  18. 18. [18]File download: Toolkit: (gives logging and debugging tools inside chrome) Syntax Highlighting: (check out Sublime Text)
  19. 19. [19]File download: 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: Reddit Zurb test Libraries and Helpers
  21. 21. [21]File download: Let’s make a Zurb site!
  22. 22. [22]File download: 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: Mixer.lock Full language specification and definition of mixers:
  24. 24. [24]File download: 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:
  25. 25. [25]File download: Main.ts
  26. 26. [26]File download: html.ts
  27. 27. [27]File download: fixorigin.ts
  28. 28. [28]File download: Loading Foundation and Struts
  29. 29. [29]File download: Transforming Common Page Areas
  30. 30. [30]File download: Transforming a Specific Page
  31. 31. [31]File download: Some Styling
  32. 32. [32]File download: Sprites
  33. 33. [33]File download: Variables
  34. 34. [34] Advanced Use Case5
  35. 35. [35]File download: 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: config.json Full language specification and definition of mixers:
  37. 37. [37]File download: 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: Project Flow (2) - shared 2 Defined in /functions/main.ts Match: %20%25match_target)%20Text If the Origin server responds with html, we’ll import html.ts
  39. 39. [39]File download: Helper puts current layer at top of browser Project Flow (3) - shared 3 Defined in /functions/main.ts
  40. 40. [40]File download: 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 Note: Requires an Enterprise Project to deploy or manage.
  41. 41. [41]File download: @optional (2) – assuming mobile layer @optional “@/main.ts” expanded to: /mobile/main.ts
  42. 42. [42]File download: @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: 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: 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]
  47. 47. Thank You  
  1. A particular slide catching your eye?

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