How To Train Your Moovweb

Transcript

1. Welcome To Moovweb! A Quick Getting Started Guide
2. How does Moovweb Work?
3. How does Moovweb Work? Moovweb transforms assets from an existing source into something else. In our case, a mobile site.
5. Before
6. After
7. As a developer What do I need to know?
8. Need to know basis • xpath • tritium • Sass • HTML
9. what is xpath? xpath is a document query language based around Treating the document as a tree.
10. //node[@class=‘header’] This is xpath:
11. //node[@class=‘header’] This is xpath: { Select all Child Elements
12. //node[@class=‘header’] This is xpath: { That are of type “node”
13. //node[@class=‘header’] This is xpath: { And whose class is equal to ‘header’
14. //node[@class=‘header’] Select all nodes that have a class attribute equal to header Simply Put:
15. //element[specification] Select all elements that have these specifications Simply Put:
16. select nodes there are many different ways to: ./ .// // /
17. describe nodes there are many different ways to: //div ./div/p .//ol/li ancestor::div
18. refine nodes there are many different ways to: div[contains(@class, ’class’)] nav[@style and ./p]
19. But for now, let’s look at how we use xpath in tritium
20. Tritium takes as input HTML documents and outputs HTML that has been transformed according the rules defined in the Tritium script.
21. Like jQuery, idiomatic Tritium code is structured around selecting a collection of elements via a CSS or XPath selector and then chaining a series of operations on them.
22. input tritium OutpuT Hello World! replace(/Hello/, "Goodbye") Goodbye World!
23. input tritium OutpuT html_fragment() { $("/div/p") { text() { replace(/Hello/, "Goodbye") } } } <div> <p> Hello World! </p> </div> <div> <p> Goodbye World! </p> </div>
24. Let’s tie it all together!
25. INPUT <html> <body> <div class="start"> Starting... </div> </body> </html>
26. tritium html() { $(".//div[@class='start']") { add_class("selected-with-xpath") insert("p", "...Middle...") wrap_text_children("p") } $$(".start") { add_class("selected-with-css") insert("p", "...Ending") } }
27. Output <html> <body> <div class=“start selected-with-xpath selected- with-css”> <p>Starting...</p> <p>...Middle...</p> <p>...Ending</p> </div> </body> </html>
28. Play with some tritium! • http://bit.ly/tritium1 • http://bit.ly/tritium2 • http://bit.ly/tritium3 • http://bit.ly/tritium4
29. Coding Standards: Opening scopes
30. In tritium most standard functions allow you to open a scope. The context of this scope is related to whichever element the function decides to return
31. The most common scope is the $(selector) {} scope. But many others exist, like insert.
32. tritium html() { # <-- scope $(".//section") { # <-- scope insert("div", class:"open-scope here") } }
33. Bad tritium html() { $(".//section") { insert("div", class:"open-scope") $(“./div[@class=‘open-scope’]”) { move_here("//div[@class='other-div']") } } }
34. Bad tritium html() { $(".//section") { insert("div", class:"open-scope") $(“./div[@class=‘open-scope’]”) { move_here("//div[@class='other-div']") } } }
35. good tritium html() { $(".//section") { insert("div", class:"open-scope here") { move_here("//div[@class='other-div']") } } }
36. Coding Standards: Functions
37. If you notice yourself copy- pasting code or doing the same actions all the time, try reusing that functionality in a function!
38. Bad tritium html() { $(".//div[contains(@class,'thing')]") { add_class("thing-again") $("./ul") { add_class("thing-double") $("./li") { add_class("last-thing") } } } }
39. The function in functions/main.ts func XMLNode.add_class_to(Text %xpath, Text %class_name) { $(%xpath) { add_class(%class_name) yield() } }
40. good tritium html() { add_class_to(“.//div[@class='thing']", "thing-again") { add_class_to("./ul", "thing-double") { add_class_to("./li", "last-thing") } } }