Initiation & hands-on Moovweb 5's new feature

  • 85 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
85
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Getting Started With Moovweb paul.edwards@moovweb.com
  • 2. [2] A Quick Poll1
  • 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] Moovweb Overview2
  • 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] 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]
  • 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] A First Transform3
  • 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] 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] 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] play.tritium.io
  • 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] If all went well, we should have… Notice how content just flows through?
  • 16. [16] Using the SDK4
  • 17. [17]File download: http://is.gd/VKUg9o Transforming Reddit
  • 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]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]File download: http://is.gd/VKUg9o Reddit Zurb test reddit.com Libraries and Helpers
  • 21. [21]File download: http://is.gd/VKUg9o Let’s make a Zurb site!
  • 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]File download: http://is.gd/VKUg9o Mixer.lock Full language specification and definition of mixers: http://www.tritium.io/
  • 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]File download: http://is.gd/VKUg9o Main.ts
  • 26. [26]File download: http://is.gd/VKUg9o html.ts
  • 27. [27]File download: http://is.gd/VKUg9o fixorigin.ts
  • 28. [28]File download: http://is.gd/VKUg9o Loading Foundation and Struts
  • 29. [29]File download: http://is.gd/VKUg9o Transforming Common Page Areas
  • 30. [30]File download: http://is.gd/VKUg9o Transforming a Specific Page
  • 31. [31]File download: http://is.gd/VKUg9o Some Styling
  • 32. [32]File download: http://is.gd/VKUg9o Sprites
  • 33. [33]File download: http://is.gd/VKUg9o Variables
  • 34. [34] Advanced Use Case5
  • 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]File download: http://is.gd/VKUg9o config.json Full language specification and definition of mixers: http://www.tritium.io/
  • 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]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]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]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]File download: http://is.gd/VKUg9o @optional (2) – assuming mobile layer @optional “@/main.ts” expanded to: /mobile/main.ts
  • 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]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]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] Further Reading6
  • 46. [46] Developer.moovweb.com University.moovweb.com
  • 47. Thank You Paul.edwards@moovweb.com