Java script templating in wordpress
- 1. JavaScript Templating in WordPress Rakesh Lawaju racase.com.np Digamber Pradhan digamberpradhan.com.np
- 2. Speakers Rakesh Lawaju Co-founder/ CTO WEN Solutions iamracaseracase Digamber Pradhan Team Lead, Sr. WordPress Developer Web Experts Nepal digamberpradhandigamberpradhan racase.com.np digamberpradhan.com.np
- 3. “JavaScript templating refers to the client side data binding method implemented with the JavaScript language. -Wikipedia WHAT IS JAVASCRIPT TEMPLATING?
- 4. WHY TO USE JAVASCRIPT TEMPLATING?Just think about it. Wouldn’t it be better and fast if just raw data like in JSON format is sent from server and display it in HTML on the client side? And that pain in appending data in HTML!! How about reducing this pain?
- 5. PROS: ➤ Data generation is separate from presentation code, so good code organization ➤ Web server load is reduced ➤ Output generation is more expressive (template syntax doesn't require a sea of string concatenation) ➤ Working with Web Designers CONS: ➤ Users with JavaScript disabled, will very likely not be able to use it. ➤ Search Engines will not be able to index your page. ➤ Not widely used and well documented for WordPress
- 6. HOW TO IMPLEMENT JAVASCRIPT TEMPLATING IN WORDPRESS? wp.template() is used to load template. Template system is based on Underscore.js. WordPress also has done some modification to use Mustache " {{ }} " instea “wp-util” should be enqueued to use templating. {{ var }} is used for HTML-escaped data. {{{ var }}} is used for raw data (not escaped). <# some_code() #> allows you to evaluate any JavaScript code. “data” is the name of the object that holds all the data passed to the templat “tmpl-“ has to be prefixed on each template id
- 7. JS Template
- 8. https://github.com/codearryaas/wp-js-templating-trial Demo Code https://github.com/digamber89/wp-js-templating ** These are just sample code. Do not use for production.**
- 9. Thank you!