Skillwise Dust JS Template
•
0 j'aime•313 vues
Dust JS is a JavaScript templating engine that separates presentation from logic. It allows for cleaner coding through logic-less templates and features like blocks, partials, and helpers. Dust runs on both client-side and server-side. Popular companies like LinkedIn and PayPal use Dust due to its active development, battle testing, and community support. Dust's data referencing allows accessing data outside of loops through features like {@eq} and {@size}. Templates are populated with JSON data through a three step process: 1) Dust templates for markup, 2) JSON data, 3) JavaScript rendering engine.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Skillwise Dust JS Template
Similaire à Skillwise Dust JS Template (20)
Plus de Skillwise Group
Plus de Skillwise Group (20)
Dernier
Dernier (20)
Skillwise Dust JS Template
- 3. How to Dust…? • Dust is a JavaScript templating engine designed to provide a clean seperation between presentation and logic without sacrificing the ease of use. • A pure javascript libraries, Dust runs in both browser-side and server-side environments.
- 4. What is Dust…? • Dust is a templating language. • Its gonna go logic less.
- 5. • JS Templating App Development, Simplified
- 6. What is an App…? • Not just mobile • Web • Mobile • Desktop
- 7. Goal of App Development…? • Presentation • Meats • Content
- 8. Why JavaScript Templating…? • Faster • Cheaper • Easier
- 9. Leading Template Engines…? • Logic-Less Templates • Jade(Node template Engine) • Hogan.js • EJS <%Emdedded js%>
- 10. • Dust
- 11. There are atleast a Dozen more…
- 12. Differences…? • Logic • Syntax • Helpers
- 13. The case for Dust.js…?
- 14. Reason#1 • Easy to use • Well documented • Clear Syntax • Rich Features
- 15. <div class=“control-group”> <label class=“control-label”> RDI office:</label> <div class=“controls”> <select name=“” class=“select-2”> {#offices} <option value=“{office code}”> {office notation}</option> {offices} </select></div></div>
- 16. Reason#2 • LinkedIn • Paypal • Actively Developed • Battle Tested • Community Support
- 18. <form-class=“form-horizontal”> <legend> job listening request</legend> <fieldset> <div class=“row”> <div class=“span7”> {>office/} {>priority/} {>notes/} </div></div></fieldset></form>
- 19. Blocks…? • 1. Define blocks <div class=“page”> <h1>{+pageHeader} our Awesome App {/pageHeader}</h1> <div class=“body content”> <+body content/} </div> </div>
- 20. 2.Add Content {>”base-template”/} {<body content} <p> All About RDI </p> <ul> <li>abc</li> <li>xyz</li> </ul> {/body content}
- 21. Many ways to keep your app lean & clean
- 22. Reason#4 • Data Referencing • Bottom up • All your JSON • Sets Dust Apart • Doctivity.io Tried out • Handle Bars.js • Dust.js
- 23. The problem is: • Nested data references
- 24. • What is your partial needs access to data • Outside the loop…?
- 25. { team:{id:1234, name:”team demo”}, Items:[ {id:678, name:”marry.jpg”, thumbnail=“assets/678/x90.png”} {id:679, name:”john.jpg”, thumbnail:”assets/679/x90.png} ] }
- 26. • {@eq} key equals {@key= role value=“bm”} <a href=“#job-request” class=“btn btn-danger”> </div> {/eq}
- 28. <span class=“jobs count”> {@size key=items} {/size} Total jobs </span> Several more helpers (or) Write your own!
- 29. How it works…? 1.Dust for mark up 2.JSON for data -t =“Hello{name}! Json= { You have {count} new “name”: “james”, Messages from “count”:2, {#people} “people” : [{“name”: “jim” {name}, “distance” : “2” {/people} }, {“name”: “eran”, “distance”: “1”}] }
- 30. 3. java script for render Dust.render(-t.json, function(error,data) { $(“mydiv”).html(data); } 4. HTML Hello james. You have 2 new messages From jim,eran