SlideShare a Scribd company logo
1
WordPress
And Client Side
Applications
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WordPress developer at
Disney
and the co-founder of
My first install of WordPress was
0.7 and been a user &
developer since
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
Who is this guy?
Why build Web Applications
with WordPress?
Why not?
How to use
WP as a faux
MVC to build a
Client-Side
S.P.A powered by
WP-API

Recommended for you

WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016

This document discusses considerations for creating multilingual WordPress sites. It covers content-related considerations like original content versus translation and using in-house versus external translators. Developer considerations include localizing everything and following WordPress codex guidelines. Structural considerations involve UI language, plugins/themes, and URL structure. Different solutions for multilingual WordPress are presented, such as using separate installations for each language or having all languages in a single post. The document recommends checking plugin/theme compatibility and consulting support if unsure about the right solution for a given site.

Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips

Talk about general profiling & performance for Hybrid Applications, as well as some Ember specific tips. For Cordova + PhoneGap. Presented on Jan 29 2016 at PhoneGap Day in Salt Lake City.

javascriptphonegapember.js
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages

Extending on some of the themes of front-end heavy application development, this session covered the higher order themes of development workflow automation, revolving around the concepts of modern web app development from a full stack perspective.

mwlugdominoxpages
WP
Very nice!
WP as a MVC?
MODEL -
Deals with the database (save data)
VIEW -
Deals with what people see (view data)
CONTROLLER -
Deals with logic in between (data logic)
Decoupling the functionality from the view
Client Side?
Client = Browser / Visitor
POP QUIZ
What is the fastest file a web server
can serve?
PHP is the language behind WordPress and
most themes you see use it exclusively,
but PHP renders HTML server-side
SERVERCLIENT
Client: Sends request for index.php
Server: Processes PHP code turning it into HTML.
Returns full HTML

Recommended for you

ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear

Out of the box, ASP.NET can do a lot of amazing things. The tools and framework have grown to make mundane tasks, such as minification, simple to implement. Many times by using the framework as we were taught, opportunities to optimize pass us by. The reality is that underneath the covers, there is a whole world of easy tweaks we can implement to help ASP.NET perform at its peak. In this presentation, we will walk through a slew of tweaks used to make ASP.NET perform in the best way possible. You will leave with a checklist of tasks that will instantly improve the performance of your web application!

asp.netweb developmentweb dev
Welcome to the World of WordPress
Welcome to the World of WordPressWelcome to the World of WordPress
Welcome to the World of WordPress

An overview of the WordPress ecosystem for new users that includes a discussion of wordpress.com and wordpress.org, how plugins fit in, Coder Talk DeCoded: A guide for humans and two bonus slides - questions to ask your WordPress developer and resources for more information.

wordpressnashvilledigital marketing
Using WordPress as a Headless CMS
Using WordPress as a Headless CMSUsing WordPress as a Headless CMS
Using WordPress as a Headless CMS

In this presentation, I'll show you how to use WordPress' REST API to unlock WordPress' hidden potential by using it as a Headless CMS and connect it to a React front-end. React out at: https://adamrasheed.com

wordpressreactweb development
What if you could pass the rendering
process to the client?
SERVERCLIENT
Client: Sends request for template.html
Server: Returns template.html
Client: Renders & Displays template.html
While rendering request to server for data (JSON)
Benefits of Loading Client Side
Less load on the server
Can handle more visitors simultaneously
CDN all template files
Easier to cache JS and HTML
VERY Scalable
AJAX - can transform your UI
Single Page Application
S.P.A's allow you to change views and load data, without
actually refreshing the page.
Utilizing AJAX, you can load pages on the fly seamlessly.
Code Example: Server Side Loop
<?php
//list all posts - this is PHP & HTML
while ( have_posts() ) : the_post();
?>
<article class="postWrapper">
<h3 class="page_title text-center">
<a href=“<?php the_permalink(); ?>” class="content">
<?php the_title(); ?>
</a>
</h3>
<?php the_content(); ?>
</article>
<?php
endwhile;
?>

Recommended for you

ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up

This document provides an overview of ASP.NET MVC from the ground up by Kevin Griffin. It introduces Kevin and his background, outlines the agenda which includes explaining what MVC is, its core components like controllers, views and models, and demonstrates building an MVC application from scratch. The presentation also discusses MVC routing, action results, adding views, HTML helpers and using models to bind data to views.

aspnetbeginnermvc
[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design

The document discusses best practices for designing URLs for web APIs. It recommends using nouns in plural form for resources, HTTP methods as verbs, and embedding the major version number in the URL for versioning. It also suggests using "me" or "self" for authenticated user resources, and specifying the data format using query parameters or HTTP headers rather than file extensions. The document emphasizes that API design should follow REST principles when possible but also consider practical solutions. Well-designed URLs can make APIs more usable and intuitive for developers.

startupgeektalkphp
Client Vs. Server Rendering
Client Vs. Server RenderingClient Vs. Server Rendering
Client Vs. Server Rendering

Client or Server Rendering Showing the newest trend of hybrid rendering polymorphic like react.js phantom.js, single page application, David Amend

servernode.jsclient
Living on the client side
Code Example: Client Side Loop
(using AngularJS)
//list all posts - this is HTML
<article class="postWrapper" ng-repeat="post in posts” >
<h3 class="page_title text-center">
<a href=“/coh/#/post/{{post.ID}}” class="content">
{{post.title}}
</a>
</h3>
{{post.content}}
</article>
AngularJS - the important bits
<article class="postWrapper" ng-repeat="post in posts” >
…
</article>
{{post.XXXXXX}}
The NG-REPEAT repeats through posts and lets you use the post object
Use the post object contains all the individual post data, and you
display it with {{..}}
AngularJS - the important bits
<?php the_title(); ?>
PHP AngularJS Template
{{post.title}}
<?php the_content(); ?> {{post.title}}
<?php the_permalink(); ?> {{post.link}}

Recommended for you

Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta

Getting seo performance in angular meteor with ngmeta Advance SEO with Client Side Rendering. Learn basic SEO components that tie into Javascript crawability. Enjoy! https://atmospherejs.com/mkslt04/ngmeta

javascriptmetadataseo
1 pluginable laravel cms
1 pluginable laravel cms1 pluginable laravel cms
1 pluginable laravel cms

This presentation for Pluginable Laravel CMS​ is presented by Amarin Boonkirt (Ta), DevOps Engineer at Netway Communication​, to introduce Laravel and RVsitebuilder to Thai Developers. Free license is available for Developers, at dev.rvsitebuilder.com. IF you would like to learn more, please visit www.rvsitebuilder.com

rvsitebuilderlaraveldeveloper
Way of the Future
Way of the FutureWay of the Future
Way of the Future

With the performance gains promised by HHVM and PHP 7, WordPress site admins are living in pretty exciting times. The PHP world at large is in a proverbial space race, and every WordPress site will (eventually) benefit. But early adopters and folks who manage their own servers shouldn’t be the only ones who get early access to these face melting bumps in speed. In this talk, I’ll be introducing you to things you can do to get your code ready for these next generation hosting environments. And we’ll cover where you can host your code once it’s ready. If you’re interested in attending this talk, a passing familiarity with the command line helps, but isn’t a hard requirement.

wordpresshhvmphp 7
// Factory
app.factory('Posts', function($resource){
return $resource(MyAjax.resturl+’/posts/:id, {
update: {method: 'PUT'}
});
});
// Controller
function ListCtrl($scope, $http, Posts){
$scope.posts = Posts.query();
});
Powering the Angular
WP-API Response Example
/posts
{
ID: 1
content: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>',
title: 'Hello world!',
status: 'publish',
author : {..},
...
},
{
ID: 10,
content: '<p>Testing Another Post! Yay!</p>',
title: 'I don't know',
...
}...
WordPress and Client Side Web Applications WCTO
Case Study: CodingOfficeHours.com

Recommended for you

ASP.NET Core
ASP.NET CoreASP.NET Core
ASP.NET Core

ASP.NET Core introduces a new project structure that is totally modular, uses Bower for package management, and allows for a faster development cycle. It runs on a new .NET Execution Environment and is cross-platform, supporting non-Windows environments. ASP.NET Core also chooses editors and tools, improves on MVC and Web API, uses inversion of control, and allows developing web applications on Mac and Linux.

asp.net
Ember
EmberEmber
Ember

Ember.js is a JavaScript framework for building single-page web applications using MVC architecture. It allows developers to build applications with less code through features like handlebars templates. Ember.js makes building JavaScript apps simple by handling tasks like routing and simplifying common patterns. Developers can learn to use Ember.js through their comprehensive guides on the website, which cover everything from basics to advanced concepts. The framework is open source, free to use, and can be downloaded from their website.

How to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesHow to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutes

Robert gave a talk about how LightSwitch can help developers build mobile APIs and HTML5 apps faster by automating common development tasks and boring code, allowing them to focus on adding unique value. LightSwitch is a tool that streamlines creating the technical requirements for apps so they can be developed more quickly, connecting to data sources like SQL Server and exposing them through OData for mobile and HTML5 clients.

visual studio 2013visual studiovisual studio lightswitch
CodingOfficeHours.com
WordPress for:
User Creation

User Authentication

Custom Post Types

Data Storage
S.P.A for:
WebRTC - Video

Firebase - Text Chat

User Dashboard

User Profiles
Awesome Resources
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
WP-API on GitHub
https://github.com/WP-API/WP-API
CodingOfficeHours
http://www.codingofficehours.com
AngularJS WP Theme
http://www.roysivan.com/angular-wordpress-theme
AngularJS For WP Plugin
http://www.roysivan.com/angularjs-for-wordpress
Community Built WP App with AngularJS
http://www.roysivan.com/blog
Thank You
Find me online:
Twitter: @royboy789
Github: @royboy789
CodingOfficeHours.com
Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com

More Related Content

What's hot

Introduction to WordPress REST API
Introduction to WordPress REST APIIntroduction to WordPress REST API
Introduction to WordPress REST API
Simone D'Amico
 
Web application intro
Web application introWeb application intro
Web application intro
Tobias Pfeiffer
 
Creating SmartPhone Apps Using WordPress
Creating SmartPhone Apps Using WordPressCreating SmartPhone Apps Using WordPress
Creating SmartPhone Apps Using WordPress
codebangla
 
WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016
Octavio Andrés Cifuentes
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Alex Blom
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
edm00se
 
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
Kevin Griffin
 
Welcome to the World of WordPress
Welcome to the World of WordPressWelcome to the World of WordPress
Welcome to the World of WordPress
Content Connects, Nashville
 
Using WordPress as a Headless CMS
Using WordPress as a Headless CMSUsing WordPress as a Headless CMS
Using WordPress as a Headless CMS
Adam Rasheed
 
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
Kevin Griffin
 
[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design
Nexus FrontierTech
 
Client Vs. Server Rendering
Client Vs. Server RenderingClient Vs. Server Rendering
Client Vs. Server Rendering
David Amend
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
Will Haire
 
1 pluginable laravel cms
1 pluginable laravel cms1 pluginable laravel cms
1 pluginable laravel cms
Nareerat Chan
 
Way of the Future
Way of the FutureWay of the Future
Way of the Future
Jason Cosper
 
ASP.NET Core
ASP.NET CoreASP.NET Core
Ember
EmberEmber
How to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesHow to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutes
Robert MacLean
 
Scaffolding in One Asp.Net
Scaffolding in One Asp.NetScaffolding in One Asp.Net
Scaffolding in One Asp.Net
Lohith Goudagere Nagaraj
 
ASP.NET 5 Overview for Apex Systems
ASP.NET 5 Overview for Apex SystemsASP.NET 5 Overview for Apex Systems
ASP.NET 5 Overview for Apex Systems
Shahed Chowdhuri
 

What's hot (20)

Introduction to WordPress REST API
Introduction to WordPress REST APIIntroduction to WordPress REST API
Introduction to WordPress REST API
 
Web application intro
Web application introWeb application intro
Web application intro
 
Creating SmartPhone Apps Using WordPress
Creating SmartPhone Apps Using WordPressCreating SmartPhone Apps Using WordPress
Creating SmartPhone Apps Using WordPress
 
WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016WordPress Multilingual: WordCamp Antwerp 2016
WordPress Multilingual: WordCamp Antwerp 2016
 
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps TipsPhonegap Day 2016: Ember/JS & Hybrid Apps Tips
Phonegap Day 2016: Ember/JS & Hybrid Apps Tips
 
BP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPagesBP101: A Modernized Workflow w/ Domino/XPages
BP101: A Modernized Workflow w/ Domino/XPages
 
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High GearASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
ASP.NET Quick Wins - 20 Tips and Tricks To Shift Your Application into High Gear
 
Welcome to the World of WordPress
Welcome to the World of WordPressWelcome to the World of WordPress
Welcome to the World of WordPress
 
Using WordPress as a Headless CMS
Using WordPress as a Headless CMSUsing WordPress as a Headless CMS
Using WordPress as a Headless CMS
 
ASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground UpASP.NET MVC From The Ground Up
ASP.NET MVC From The Ground Up
 
[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design[GeekTalk#2] Takaaki Mizuno - Api Url Design
[GeekTalk#2] Takaaki Mizuno - Api Url Design
 
Client Vs. Server Rendering
Client Vs. Server RenderingClient Vs. Server Rendering
Client Vs. Server Rendering
 
Getting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmetaGetting SEO performance in Angular Meteor with ngmeta
Getting SEO performance in Angular Meteor with ngmeta
 
1 pluginable laravel cms
1 pluginable laravel cms1 pluginable laravel cms
1 pluginable laravel cms
 
Way of the Future
Way of the FutureWay of the Future
Way of the Future
 
ASP.NET Core
ASP.NET CoreASP.NET Core
ASP.NET Core
 
Ember
EmberEmber
Ember
 
How to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutesHow to build a Mobile API or HTML 5 app in 5 minutes
How to build a Mobile API or HTML 5 app in 5 minutes
 
Scaffolding in One Asp.Net
Scaffolding in One Asp.NetScaffolding in One Asp.Net
Scaffolding in One Asp.Net
 
ASP.NET 5 Overview for Apex Systems
ASP.NET 5 Overview for Apex SystemsASP.NET 5 Overview for Apex Systems
ASP.NET 5 Overview for Apex Systems
 

Similar to WordPress and Client Side Web Applications WCTO

PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
Maarten Balliauw
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
guest60c7659
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
Caldera Labs
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
Tim Stephenson
 
API Technical Writing
API Technical WritingAPI Technical Writing
API Technical Writing
Sarah Maddox
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on Azure
Maarten Balliauw
 
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
ate.douma
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
Himanshu Mendiratta
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
bretticus
 
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010 Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger
 
Web api
Web apiWeb api
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
Matt Raible
 
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
Evan Mullins
 
Crafting APIs
Crafting APIsCrafting APIs
Crafting APIs
Tatiana Al-Chueyr
 
T2 Web Framework
T2 Web FrameworkT2 Web Framework
T2 Web Framework
Shinpei Ohtani
 
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Tom Johnson
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
Michael Ahearn
 
WordCamp Montreal 2016 WP-API + React with server rendering
WordCamp Montreal 2016  WP-API + React with server renderingWordCamp Montreal 2016  WP-API + React with server rendering
WordCamp Montreal 2016 WP-API + React with server rendering
Ziad Saab
 
API Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIsAPI Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIs
Tom Johnson
 
ASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a couple
Alexandre Marreiros
 

Similar to WordPress and Client Side Web Applications WCTO (20)

PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
PHP on Windows
PHP on WindowsPHP on Windows
PHP on Windows
 
Using the new WordPress REST API
Using the new WordPress REST APIUsing the new WordPress REST API
Using the new WordPress REST API
 
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
WordPress as a Platform - talk to Bristol Open Source Meetup, 2014-12-08
 
API Technical Writing
API Technical WritingAPI Technical Writing
API Technical Writing
 
PHP on Windows and on Azure
PHP on Windows and on AzurePHP on Windows and on Azure
PHP on Windows and on Azure
 
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
Integrating Social Apps with Content Driven Sites using Apache Rave and Sprin...
 
Integrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere PortalIntegrate any Angular Project into WebSphere Portal
Integrate any Angular Project into WebSphere Portal
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010 Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
Matt Gauger - Lamp vs. the world - MKE PHP Users Group - December 14, 2010
 
Web api
Web apiWeb api
Web api
 
Front End Development for Back End Developers - Devoxx UK 2017
 Front End Development for Back End Developers - Devoxx UK 2017 Front End Development for Back End Developers - Devoxx UK 2017
Front End Development for Back End Developers - Devoxx UK 2017
 
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
WordCamp Raleigh 2016 - WP API, What is it good for? Absolutely Everything!
 
Crafting APIs
Crafting APIsCrafting APIs
Crafting APIs
 
T2 Web Framework
T2 Web FrameworkT2 Web Framework
T2 Web Framework
 
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
Survival Strategies for API Documentation: Presentation to Southwestern Ontar...
 
State of modern web technologies: an introduction
State of modern web technologies: an introductionState of modern web technologies: an introduction
State of modern web technologies: an introduction
 
WordCamp Montreal 2016 WP-API + React with server rendering
WordCamp Montreal 2016  WP-API + React with server renderingWordCamp Montreal 2016  WP-API + React with server rendering
WordCamp Montreal 2016 WP-API + React with server rendering
 
API Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIsAPI Workshop: Deep dive into REST APIs
API Workshop: Deep dive into REST APIs
 
ASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a coupleASP.NEt MVC and Angular What a couple
ASP.NEt MVC and Angular What a couple
 

More from Roy Sivan

WordPress in Enterprise
WordPress in EnterpriseWordPress in Enterprise
WordPress in Enterprise
Roy Sivan
 
Building Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case StudyBuilding Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case Study
Roy Sivan
 
Building Headless Applications with WordPress & Gutenberg
Building Headless Applications with WordPress & GutenbergBuilding Headless Applications with WordPress & Gutenberg
Building Headless Applications with WordPress & Gutenberg
Roy Sivan
 
Gutenberg & Custom Applications powered by WordPress
Gutenberg & Custom Applications powered by WordPressGutenberg & Custom Applications powered by WordPress
Gutenberg & Custom Applications powered by WordPress
Roy Sivan
 
WordPress SFO Meetup - Gutenberg FAQ
WordPress SFO Meetup - Gutenberg FAQWordPress SFO Meetup - Gutenberg FAQ
WordPress SFO Meetup - Gutenberg FAQ
Roy Sivan
 
WCSD - GutenWhat? A Gutenberg FAQ
WCSD - GutenWhat? A Gutenberg FAQWCSD - GutenWhat? A Gutenberg FAQ
WCSD - GutenWhat? A Gutenberg FAQ
Roy Sivan
 
A Crash Course in WordPress Gutenberg
A Crash Course in WordPress GutenbergA Crash Course in WordPress Gutenberg
A Crash Course in WordPress Gutenberg
Roy Sivan
 
Powering Content Driven Applications with the World’s Most Popular CMS #ngconf
Powering Content Driven Applications with the World’s Most Popular CMS #ngconfPowering Content Driven Applications with the World’s Most Popular CMS #ngconf
Powering Content Driven Applications with the World’s Most Popular CMS #ngconf
Roy Sivan
 
WPCampus Online - The Case for the WordPress REST API
WPCampus Online - The Case for the WordPress REST APIWPCampus Online - The Case for the WordPress REST API
WPCampus Online - The Case for the WordPress REST API
Roy Sivan
 
Angular Remote Conf - Building with Angular & WordPress
Angular Remote Conf - Building with Angular & WordPressAngular Remote Conf - Building with Angular & WordPress
Angular Remote Conf - Building with Angular & WordPress
Roy Sivan
 
The Case for the WordPress REST API | WordCamp Montreal 2016
The Case for the WordPress REST API | WordCamp Montreal 2016The Case for the WordPress REST API | WordCamp Montreal 2016
The Case for the WordPress REST API | WordCamp Montreal 2016
Roy Sivan
 
Building a JavaScript App powered by WordPress & AngularJS
Building a JavaScript App powered by WordPress & AngularJSBuilding a JavaScript App powered by WordPress & AngularJS
Building a JavaScript App powered by WordPress & AngularJS
Roy Sivan
 
Becoming a WordPress Artisan - Developer
Becoming a WordPress Artisan - DeveloperBecoming a WordPress Artisan - Developer
Becoming a WordPress Artisan - Developer
Roy Sivan
 

More from Roy Sivan (13)

WordPress in Enterprise
WordPress in EnterpriseWordPress in Enterprise
WordPress in Enterprise
 
Building Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case StudyBuilding Gutenberg Applications & WebOPS Case Study
Building Gutenberg Applications & WebOPS Case Study
 
Building Headless Applications with WordPress & Gutenberg
Building Headless Applications with WordPress & GutenbergBuilding Headless Applications with WordPress & Gutenberg
Building Headless Applications with WordPress & Gutenberg
 
Gutenberg & Custom Applications powered by WordPress
Gutenberg & Custom Applications powered by WordPressGutenberg & Custom Applications powered by WordPress
Gutenberg & Custom Applications powered by WordPress
 
WordPress SFO Meetup - Gutenberg FAQ
WordPress SFO Meetup - Gutenberg FAQWordPress SFO Meetup - Gutenberg FAQ
WordPress SFO Meetup - Gutenberg FAQ
 
WCSD - GutenWhat? A Gutenberg FAQ
WCSD - GutenWhat? A Gutenberg FAQWCSD - GutenWhat? A Gutenberg FAQ
WCSD - GutenWhat? A Gutenberg FAQ
 
A Crash Course in WordPress Gutenberg
A Crash Course in WordPress GutenbergA Crash Course in WordPress Gutenberg
A Crash Course in WordPress Gutenberg
 
Powering Content Driven Applications with the World’s Most Popular CMS #ngconf
Powering Content Driven Applications with the World’s Most Popular CMS #ngconfPowering Content Driven Applications with the World’s Most Popular CMS #ngconf
Powering Content Driven Applications with the World’s Most Popular CMS #ngconf
 
WPCampus Online - The Case for the WordPress REST API
WPCampus Online - The Case for the WordPress REST APIWPCampus Online - The Case for the WordPress REST API
WPCampus Online - The Case for the WordPress REST API
 
Angular Remote Conf - Building with Angular & WordPress
Angular Remote Conf - Building with Angular & WordPressAngular Remote Conf - Building with Angular & WordPress
Angular Remote Conf - Building with Angular & WordPress
 
The Case for the WordPress REST API | WordCamp Montreal 2016
The Case for the WordPress REST API | WordCamp Montreal 2016The Case for the WordPress REST API | WordCamp Montreal 2016
The Case for the WordPress REST API | WordCamp Montreal 2016
 
Building a JavaScript App powered by WordPress & AngularJS
Building a JavaScript App powered by WordPress & AngularJSBuilding a JavaScript App powered by WordPress & AngularJS
Building a JavaScript App powered by WordPress & AngularJS
 
Becoming a WordPress Artisan - Developer
Becoming a WordPress Artisan - DeveloperBecoming a WordPress Artisan - Developer
Becoming a WordPress Artisan - Developer
 

Recently uploaded

Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
Matthew Sinclair
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
Matthew Sinclair
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
Andrey Yasko
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Chris Swan
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
jackson110191
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
Larry Smarr
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
ScyllaDB
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 

Recently uploaded (20)

Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
20240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 202420240705 QFM024 Irresponsible AI Reading List June 2024
20240705 QFM024 Irresponsible AI Reading List June 2024
 
20240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 202420240704 QFM023 Engineering Leadership Reading List June 2024
20240704 QFM023 Engineering Leadership Reading List June 2024
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
Comparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdfComparison Table of DiskWarrior Alternatives.pdf
Comparison Table of DiskWarrior Alternatives.pdf
 
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
Fluttercon 2024: Showing that you care about security - OpenSSF Scorecards fo...
 
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdfINDIAN AIR FORCE FIGHTER PLANES LIST.pdf
INDIAN AIR FORCE FIGHTER PLANES LIST.pdf
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
The Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive ComputingThe Rise of Supernetwork Data Intensive Computing
The Rise of Supernetwork Data Intensive Computing
 
Measuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at TwitterMeasuring the Impact of Network Latency at Twitter
Measuring the Impact of Network Latency at Twitter
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 

WordPress and Client Side Web Applications WCTO

  • 1. 1 WordPress And Client Side Applications Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com
  • 2. WordPress developer at Disney and the co-founder of My first install of WordPress was 0.7 and been a user & developer since Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com Who is this guy?
  • 3. Why build Web Applications with WordPress? Why not?
  • 4. How to use WP as a faux MVC to build a Client-Side S.P.A powered by WP-API
  • 6. WP as a MVC? MODEL - Deals with the database (save data) VIEW - Deals with what people see (view data) CONTROLLER - Deals with logic in between (data logic) Decoupling the functionality from the view
  • 7. Client Side? Client = Browser / Visitor POP QUIZ What is the fastest file a web server can serve?
  • 8. PHP is the language behind WordPress and most themes you see use it exclusively, but PHP renders HTML server-side SERVERCLIENT Client: Sends request for index.php Server: Processes PHP code turning it into HTML. Returns full HTML
  • 9. What if you could pass the rendering process to the client? SERVERCLIENT Client: Sends request for template.html Server: Returns template.html Client: Renders & Displays template.html While rendering request to server for data (JSON)
  • 10. Benefits of Loading Client Side Less load on the server Can handle more visitors simultaneously CDN all template files Easier to cache JS and HTML VERY Scalable AJAX - can transform your UI
  • 11. Single Page Application S.P.A's allow you to change views and load data, without actually refreshing the page. Utilizing AJAX, you can load pages on the fly seamlessly.
  • 12. Code Example: Server Side Loop <?php //list all posts - this is PHP & HTML while ( have_posts() ) : the_post(); ?> <article class="postWrapper"> <h3 class="page_title text-center"> <a href=“<?php the_permalink(); ?>” class="content"> <?php the_title(); ?> </a> </h3> <?php the_content(); ?> </article> <?php endwhile; ?>
  • 13. Living on the client side
  • 14. Code Example: Client Side Loop (using AngularJS) //list all posts - this is HTML <article class="postWrapper" ng-repeat="post in posts” > <h3 class="page_title text-center"> <a href=“/coh/#/post/{{post.ID}}” class="content"> {{post.title}} </a> </h3> {{post.content}} </article>
  • 15. AngularJS - the important bits <article class="postWrapper" ng-repeat="post in posts” > … </article> {{post.XXXXXX}} The NG-REPEAT repeats through posts and lets you use the post object Use the post object contains all the individual post data, and you display it with {{..}}
  • 16. AngularJS - the important bits <?php the_title(); ?> PHP AngularJS Template {{post.title}} <?php the_content(); ?> {{post.title}} <?php the_permalink(); ?> {{post.link}}
  • 17. // Factory app.factory('Posts', function($resource){ return $resource(MyAjax.resturl+’/posts/:id, { update: {method: 'PUT'} }); }); // Controller function ListCtrl($scope, $http, Posts){ $scope.posts = Posts.query(); }); Powering the Angular
  • 18. WP-API Response Example /posts { ID: 1 content: '<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>', title: 'Hello world!', status: 'publish', author : {..}, ... }, { ID: 10, content: '<p>Testing Another Post! Yay!</p>', title: 'I don't know', ... }...
  • 21. CodingOfficeHours.com WordPress for: User Creation
 User Authentication
 Custom Post Types
 Data Storage S.P.A for: WebRTC - Video
 Firebase - Text Chat
 User Dashboard
 User Profiles
  • 22. Awesome Resources Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com WP-API on GitHub https://github.com/WP-API/WP-API CodingOfficeHours http://www.codingofficehours.com AngularJS WP Theme http://www.roysivan.com/angular-wordpress-theme AngularJS For WP Plugin http://www.roysivan.com/angularjs-for-wordpress Community Built WP App with AngularJS http://www.roysivan.com/blog
  • 23. Thank You Find me online: Twitter: @royboy789 Github: @royboy789 CodingOfficeHours.com Roy Sivan Twitter/Github - @royboy789 roysivan.com | arcctrl.com