SlideShare a Scribd company logo
1 of 9
Download to read offline
JavaScript Templating in
WordPress
Rakesh Lawaju
racase.com.np
Digamber Pradhan
digamberpradhan.com.np
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
“JavaScript templating refers to the client side
data binding method implemented with the
JavaScript language.
-Wikipedia
WHAT IS JAVASCRIPT
TEMPLATING?
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?
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
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
JS Template
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.**
Thank you!

More Related Content

What's hot

Tm CMS Tool | TM CMS Tool development company in bangalore.
Tm CMS Tool |  TM CMS Tool development company in bangalore.Tm CMS Tool |  TM CMS Tool development company in bangalore.
Tm CMS Tool | TM CMS Tool development company in bangalore.NS Web Technology
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stackPraveen Gubbala
 
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 Final
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 FinalCaching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 Final
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 FinalM Asif Rahman
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stackNicholas McClay
 
Web development processes
Web development processesWeb development processes
Web development processesSutrisno Yao
 
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Dat Hoang
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To DjangoTuan Anh Tran
 
Html5 aavaas gajurel techmela
Html5  aavaas gajurel techmelaHtml5  aavaas gajurel techmela
Html5 aavaas gajurel techmelaAavaas Gajurel
 
UXPA Norfolk - Working with Developers
UXPA Norfolk - Working with DevelopersUXPA Norfolk - Working with Developers
UXPA Norfolk - Working with Developersryanlward
 
2 myroslava garasym - competence development- cheat sheet for beginners
2   myroslava garasym - competence development- cheat sheet for beginners2   myroslava garasym - competence development- cheat sheet for beginners
2 myroslava garasym - competence development- cheat sheet for beginnersIevgenii Katsan
 
Wordpress e commerce solution , wordpress e-commerce solution development com...
Wordpress e commerce solution , wordpress e-commerce solution development com...Wordpress e commerce solution , wordpress e-commerce solution development com...
Wordpress e commerce solution , wordpress e-commerce solution development com...NS Web Technology
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Octavio Andrés Cifuentes
 
MEAN Stack
MEAN StackMEAN Stack
MEAN StackDotitude
 
Magento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSMagento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSBartek Igielski
 

What's hot (20)

Tm CMS Tool | TM CMS Tool development company in bangalore.
Tm CMS Tool |  TM CMS Tool development company in bangalore.Tm CMS Tool |  TM CMS Tool development company in bangalore.
Tm CMS Tool | TM CMS Tool development company in bangalore.
 
The MEAN Stack
The MEAN StackThe MEAN Stack
The MEAN Stack
 
Introduction to mean stack
Introduction to mean stackIntroduction to mean stack
Introduction to mean stack
 
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 Final
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 FinalCaching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 Final
Caching and Optimization By M Asif Rahman @ WordCamp Orlando 2012 Final
 
Get MEAN! Node.js and the MEAN stack
Get MEAN!  Node.js and the MEAN stackGet MEAN!  Node.js and the MEAN stack
Get MEAN! Node.js and the MEAN stack
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Web development processes
Web development processesWeb development processes
Web development processes
 
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
Going Global with WordPress Multilingual (WordCamp Denpasar 2016)
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
bootstrap
bootstrap bootstrap
bootstrap
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To Django
 
Html5 aavaas gajurel techmela
Html5  aavaas gajurel techmelaHtml5  aavaas gajurel techmela
Html5 aavaas gajurel techmela
 
Django 101
Django 101Django 101
Django 101
 
UXPA Norfolk - Working with Developers
UXPA Norfolk - Working with DevelopersUXPA Norfolk - Working with Developers
UXPA Norfolk - Working with Developers
 
2 myroslava garasym - competence development- cheat sheet for beginners
2   myroslava garasym - competence development- cheat sheet for beginners2   myroslava garasym - competence development- cheat sheet for beginners
2 myroslava garasym - competence development- cheat sheet for beginners
 
Wordpress e commerce solution , wordpress e-commerce solution development com...
Wordpress e commerce solution , wordpress e-commerce solution development com...Wordpress e commerce solution , wordpress e-commerce solution development com...
Wordpress e commerce solution , wordpress e-commerce solution development com...
 
Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016Themes that perform short: WordCamp Antwerp 2016
Themes that perform short: WordCamp Antwerp 2016
 
MEAN Stack
MEAN Stack MEAN Stack
MEAN Stack
 
MEAN Stack
MEAN StackMEAN Stack
MEAN Stack
 
Magento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASSMagento 2 Community Project - Moving from LESS to SASS
Magento 2 Community Project - Moving from LESS to SASS
 

Viewers also liked

WordPress: Doing Simply & Effectively
WordPress: Doing Simply & EffectivelyWordPress: Doing Simply & Effectively
WordPress: Doing Simply & Effectivelyarryaas
 
WordPress Plugin development useful links
WordPress Plugin development useful linksWordPress Plugin development useful links
WordPress Plugin development useful linksarryaas
 
WordPress beginners course part 1
WordPress beginners course part 1WordPress beginners course part 1
WordPress beginners course part 1Naomi Klein
 
Why Drupal Should Be More Like WordPress
Why Drupal Should Be More Like WordPressWhy Drupal Should Be More Like WordPress
Why Drupal Should Be More Like WordPressJen Lampton
 
8 Ways to Hack a WordPress website
8 Ways to Hack a WordPress website8 Ways to Hack a WordPress website
8 Ways to Hack a WordPress websiteSiteGround.com
 
Using WordPress for a Course Website
Using WordPress for a Course WebsiteUsing WordPress for a Course Website
Using WordPress for a Course WebsiteJeremy Boggs
 
WordCamp Ireland - 40 tips for WordPress Optimization
WordCamp Ireland - 40 tips for WordPress OptimizationWordCamp Ireland - 40 tips for WordPress Optimization
WordCamp Ireland - 40 tips for WordPress OptimizationJoost de Valk
 
Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS Harish Ganesan
 
WordPress SEO & Optimisation
WordPress SEO & OptimisationWordPress SEO & Optimisation
WordPress SEO & OptimisationJoost de Valk
 
Designing WordPress - Heart&Sole2011
Designing WordPress - Heart&Sole2011Designing WordPress - Heart&Sole2011
Designing WordPress - Heart&Sole2011John O'Nolan
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPressEunus Hosen
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developerChris Sherry
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonSara Cannon
 
The Future of Education is Digital
The Future of Education is DigitalThe Future of Education is Digital
The Future of Education is DigitalPaul Brown
 
"Past Present and Future of Entrepreneurship Education" presentation at USASB...
"Past Present and Future of Entrepreneurship Education" presentation at USASB..."Past Present and Future of Entrepreneurship Education" presentation at USASB...
"Past Present and Future of Entrepreneurship Education" presentation at USASB...Massachusetts Institute of Technology
 
7 Ways Soft-Skills Power Organizational Performance
7 Ways Soft-Skills Power Organizational Performance7 Ways Soft-Skills Power Organizational Performance
7 Ways Soft-Skills Power Organizational PerformanceBambooHR
 

Viewers also liked (17)

WordPress: Doing Simply & Effectively
WordPress: Doing Simply & EffectivelyWordPress: Doing Simply & Effectively
WordPress: Doing Simply & Effectively
 
WordPress Plugin development useful links
WordPress Plugin development useful linksWordPress Plugin development useful links
WordPress Plugin development useful links
 
WordPress beginners course part 1
WordPress beginners course part 1WordPress beginners course part 1
WordPress beginners course part 1
 
Why Drupal Should Be More Like WordPress
Why Drupal Should Be More Like WordPressWhy Drupal Should Be More Like WordPress
Why Drupal Should Be More Like WordPress
 
8 Ways to Hack a WordPress website
8 Ways to Hack a WordPress website8 Ways to Hack a WordPress website
8 Ways to Hack a WordPress website
 
Using WordPress for a Course Website
Using WordPress for a Course WebsiteUsing WordPress for a Course Website
Using WordPress for a Course Website
 
WordCamp Ireland - 40 tips for WordPress Optimization
WordCamp Ireland - 40 tips for WordPress OptimizationWordCamp Ireland - 40 tips for WordPress Optimization
WordCamp Ireland - 40 tips for WordPress Optimization
 
Building a Website The Easy Way With Wordpress
Building a Website The Easy Way With WordpressBuilding a Website The Easy Way With Wordpress
Building a Website The Easy Way With Wordpress
 
Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS Architecting an Highly Available and Scalable WordPress Site in AWS
Architecting an Highly Available and Scalable WordPress Site in AWS
 
WordPress SEO & Optimisation
WordPress SEO & OptimisationWordPress SEO & Optimisation
WordPress SEO & Optimisation
 
Designing WordPress - Heart&Sole2011
Designing WordPress - Heart&Sole2011Designing WordPress - Heart&Sole2011
Designing WordPress - Heart&Sole2011
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
WordPress for the modern PHP developer
WordPress for the modern PHP developerWordPress for the modern PHP developer
WordPress for the modern PHP developer
 
WordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp LondonWordPress & User Experience - WordCamp London
WordPress & User Experience - WordCamp London
 
The Future of Education is Digital
The Future of Education is DigitalThe Future of Education is Digital
The Future of Education is Digital
 
"Past Present and Future of Entrepreneurship Education" presentation at USASB...
"Past Present and Future of Entrepreneurship Education" presentation at USASB..."Past Present and Future of Entrepreneurship Education" presentation at USASB...
"Past Present and Future of Entrepreneurship Education" presentation at USASB...
 
7 Ways Soft-Skills Power Organizational Performance
7 Ways Soft-Skills Power Organizational Performance7 Ways Soft-Skills Power Organizational Performance
7 Ways Soft-Skills Power Organizational Performance
 

Similar to Java script templating in wordpress

Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Aaron Gustafson
 
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...Katy Slemon
 
Why Use Server Side Rendering To Boost Performance and User Experience?
Why Use Server Side Rendering To Boost Performance and User Experience?Why Use Server Side Rendering To Boost Performance and User Experience?
Why Use Server Side Rendering To Boost Performance and User Experience?TOPS Infosolutions
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentAjeet Singh
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...Shelly Megan
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Todaybretticus
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptmartinlippert
 
SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019Razvan Stoenescu
 
Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Katy Slemon
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?Netlight Consulting
 
Architectures For Scaling Ajax
Architectures For Scaling AjaxArchitectures For Scaling Ajax
Architectures For Scaling Ajaxwolframkriesing
 
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de SitesCaelum
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptmartinlippert
 
Java Developer Resume | Edureka
Java Developer Resume | EdurekaJava Developer Resume | Edureka
Java Developer Resume | EdurekaEdureka!
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance Dave Olsen
 
Boosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsBoosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsAlyss Noland
 
Everything you need to know about mern stack programming
Everything you need to know about mern stack programmingEverything you need to know about mern stack programming
Everything you need to know about mern stack programmingJAMESJOHN130
 

Similar to Java script templating in wordpress (20)

Ajax World West
Ajax World WestAjax World West
Ajax World West
 
Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]Fundamental Progressive Enhancement [Web Design World Boston 2008]
Fundamental Progressive Enhancement [Web Design World Boston 2008]
 
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...
Client-side Rendering Vs. Server-side Rendering Vs. Pre-Rendering for Web App...
 
Why Use Server Side Rendering To Boost Performance and User Experience?
Why Use Server Side Rendering To Boost Performance and User Experience?Why Use Server Side Rendering To Boost Performance and User Experience?
Why Use Server Side Rendering To Boost Performance and User Experience?
 
Top 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App DevelopmentTop 5 Javascript Frameworks for Web and Mobile App Development
Top 5 Javascript Frameworks for Web and Mobile App Development
 
What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...What is Server-side Rendering? How to Render Your React App on the Server-sid...
What is Server-side Rendering? How to Render Your React App on the Server-sid...
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
 
SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019SSR with Quasar Framework - JSNation 2019
SSR with Quasar Framework - JSNation 2019
 
Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...Proven ways to improve your website performance optimizing front end and back...
Proven ways to improve your website performance optimizing front end and back...
 
What is a good technology stack today?
What is a good technology stack today?What is a good technology stack today?
What is a good technology stack today?
 
Architectures For Scaling Ajax
Architectures For Scaling AjaxArchitectures For Scaling Ajax
Architectures For Scaling Ajax
 
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScript
 
What is Next js.pdf
What is Next js.pdfWhat is Next js.pdf
What is Next js.pdf
 
Asp.Net Tips
Asp.Net TipsAsp.Net Tips
Asp.Net Tips
 
Java Developer Resume | Edureka
Java Developer Resume | EdurekaJava Developer Resume | Edureka
Java Developer Resume | Edureka
 
Measuring Web Performance
Measuring Web Performance Measuring Web Performance
Measuring Web Performance
 
Boosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvementsBoosting your conversion rate through web performance improvements
Boosting your conversion rate through web performance improvements
 
Everything you need to know about mern stack programming
Everything you need to know about mern stack programmingEverything you need to know about mern stack programming
Everything you need to know about mern stack programming
 

Recently uploaded

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 

Recently uploaded (20)

Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 

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