SlideShare a Scribd company logo

Integrating React.js Into a PHP Application: Dutch PHP 2019

This document discusses integrating React.js into a PHP application. It provides an overview of React.js and its benefits for building user interfaces. It then covers different approaches to server-side rendering (SSR) with React in a PHP application, including using the V8Js PHP extension to run JavaScript, making requests from PHP to a Node.js service, and making requests from Node.js to PHP. It emphasizes that React.js and PHP can complement each other and discusses frameworks like Next.js that support SSR. The key takeaways are that React.js can enhance PHP applications, there are different SSR architectures to integrate them, and giving React.js a try can help modernize app views.

1 of 60
Integrating React.js Into a PHP Application
Slides online at:
@AndrewRota | Dutch PHP Conference 2019
What is React.js?
“A JavaScript library for
building user interfaces”
https://reactjs.org/
React.js has, by far, the greatest
market share of any frontend
framework
Laurie Voss, npm and the future of JavaScript (2018)
...and it’s still growing
Laurie Voss, npm and the future of JavaScript (2018)
Among developers, use of both
PHP and React.js are correlated
Stack Overflow, Developer Survey Results 2019
As developers, as want to build the best interfaces
for our users, and React is arguably one of the best
tools for building modern web UIs.

Recommended

Deep dive into Vue.js
Deep dive into Vue.jsDeep dive into Vue.js
Deep dive into Vue.js선협 이
 
Integrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationIntegrating React.js Into a PHP Application
Integrating React.js Into a PHP ApplicationAndrew Rota
 
How to create sliding window hamburger menu style in Powerbuilder
How to create sliding window hamburger menu style in PowerbuilderHow to create sliding window hamburger menu style in Powerbuilder
How to create sliding window hamburger menu style in Powerbuilderzulmach .
 
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Fabio Biondi
 
Telerik Kendo UI Overview
Telerik Kendo UI OverviewTelerik Kendo UI Overview
Telerik Kendo UI OverviewEd Musters
 
Service Worker Presentation
Service Worker PresentationService Worker Presentation
Service Worker PresentationKyle Dorman
 

More Related Content

What's hot

Consumer-Driven Contract Testing
Consumer-Driven Contract TestingConsumer-Driven Contract Testing
Consumer-Driven Contract TestingPaulo Clavijo
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJSBrainhub
 
letswift22_권은빈_비전공자 개발자로 살아남기.pdf
letswift22_권은빈_비전공자 개발자로 살아남기.pdfletswift22_권은빈_비전공자 개발자로 살아남기.pdf
letswift22_권은빈_비전공자 개발자로 살아남기.pdfssuserf55636
 
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularFullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularLoiane Groner
 
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신Sungchul Park
 
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020Johnny Sung
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injectionEyal Vardi
 
Git and GitHub for Documentation
Git and GitHub for DocumentationGit and GitHub for Documentation
Git and GitHub for DocumentationAnne Gentle
 
1. Типы данных. Операции. Ввод и вывод C#
1. Типы данных. Операции. Ввод и вывод C#1. Типы данных. Операции. Ввод и вывод C#
1. Типы данных. Операции. Ввод и вывод C#Olga Maksimenkova
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染Sheng-Han Su
 
dominocamp2022.t1s1.dde.pptx
dominocamp2022.t1s1.dde.pptxdominocamp2022.t1s1.dde.pptx
dominocamp2022.t1s1.dde.pptxUlrich Krause
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Kyoung Up Jung
 
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...Amazon Web Services
 
Service workers
Service workersService workers
Service workersjungkees
 
그래서 테스트 코드는 어떻게 작성하나요?.pdf
그래서 테스트 코드는 어떻게 작성하나요?.pdf그래서 테스트 코드는 어떻게 작성하나요?.pdf
그래서 테스트 코드는 어떻게 작성하나요?.pdftokijh
 
SwiftUI와 TCA로 GitHub Search앱 만들기
SwiftUI와 TCA로 GitHub Search앱 만들기SwiftUI와 TCA로 GitHub Search앱 만들기
SwiftUI와 TCA로 GitHub Search앱 만들기규영 허
 
Behaviour Driven Development (BDD) With Apex on Force.com
Behaviour Driven Development (BDD) With Apex on Force.comBehaviour Driven Development (BDD) With Apex on Force.com
Behaviour Driven Development (BDD) With Apex on Force.comSalesforce Developers
 
Railway Oriented Programming
Railway Oriented ProgrammingRailway Oriented Programming
Railway Oriented ProgrammingScott Wlaschin
 

What's hot (20)

Consumer-Driven Contract Testing
Consumer-Driven Contract TestingConsumer-Driven Contract Testing
Consumer-Driven Contract Testing
 
Introduction to RxJS
Introduction to RxJSIntroduction to RxJS
Introduction to RxJS
 
letswift22_권은빈_비전공자 개발자로 살아남기.pdf
letswift22_권은빈_비전공자 개발자로 살아남기.pdfletswift22_권은빈_비전공자 개발자로 살아남기.pdf
letswift22_권은빈_비전공자 개발자로 살아남기.pdf
 
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularFullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
 
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신Beyond Java: 자바 8을 중심으로 본 자바의 혁신
Beyond Java: 자바 8을 중심으로 본 자바의 혁신
 
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
與 Sign in with Apple 的愛恨情仇 @ iPlayground2020
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
 
Git and GitHub for Documentation
Git and GitHub for DocumentationGit and GitHub for Documentation
Git and GitHub for Documentation
 
1. Типы данных. Операции. Ввод и вывод C#
1. Типы данных. Операции. Ввод и вывод C#1. Типы данных. Операции. Ввод и вывод C#
1. Типы данных. Операции. Ввод и вывод C#
 
Vue js for beginner
Vue js for beginner Vue js for beginner
Vue js for beginner
 
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
從改寫後台 jQuery 開始的 Vue.js 宣告式渲染
 
dominocamp2022.t1s1.dde.pptx
dominocamp2022.t1s1.dde.pptxdominocamp2022.t1s1.dde.pptx
dominocamp2022.t1s1.dde.pptx
 
Async js
Async jsAsync js
Async js
 
Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.Django, 저는 이렇게 씁니다.
Django, 저는 이렇게 씁니다.
 
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...
Authentication & Authorization in GraphQL with AWS AppSync (MOB402) - AWS re:...
 
Service workers
Service workersService workers
Service workers
 
그래서 테스트 코드는 어떻게 작성하나요?.pdf
그래서 테스트 코드는 어떻게 작성하나요?.pdf그래서 테스트 코드는 어떻게 작성하나요?.pdf
그래서 테스트 코드는 어떻게 작성하나요?.pdf
 
SwiftUI와 TCA로 GitHub Search앱 만들기
SwiftUI와 TCA로 GitHub Search앱 만들기SwiftUI와 TCA로 GitHub Search앱 만들기
SwiftUI와 TCA로 GitHub Search앱 만들기
 
Behaviour Driven Development (BDD) With Apex on Force.com
Behaviour Driven Development (BDD) With Apex on Force.comBehaviour Driven Development (BDD) With Apex on Force.com
Behaviour Driven Development (BDD) With Apex on Force.com
 
Railway Oriented Programming
Railway Oriented ProgrammingRailway Oriented Programming
Railway Oriented Programming
 

Similar to Integrating React.js Into a PHP Application: Dutch PHP 2019

Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm
 
Is Vue catching up with React.pdf
Is Vue catching up with React.pdfIs Vue catching up with React.pdf
Is Vue catching up with React.pdfMindfire LLC
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Applicationadityakumar2080
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSPratik Majumdar
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]GDSC UofT Mississauga
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperEdureka!
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developerEdureka!
 
Nodejs Intro - Part2 Introduction to Web Applications
Nodejs Intro - Part2 Introduction to Web ApplicationsNodejs Intro - Part2 Introduction to Web Applications
Nodejs Intro - Part2 Introduction to Web ApplicationsBudh Ram Gurung
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementZach Lendon
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Zach Lendon
 
Review on React JS
Review on React JSReview on React JS
Review on React JSijtsrd
 
React, Flux and more (p1)
React, Flux and more (p1)React, Flux and more (p1)
React, Flux and more (p1)tuanpa206
 
Combining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applicationsCombining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applicationsKaty Slemon
 
You Got React.js in My PHP
You Got React.js in My PHPYou Got React.js in My PHP
You Got React.js in My PHPTaylor Lovett
 

Similar to Integrating React.js Into a PHP Application: Dutch PHP 2019 (20)

Reactjs Basics
Reactjs BasicsReactjs Basics
Reactjs Basics
 
Isomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master ClassIsomorphic JavaScript: #DevBeat Master Class
Isomorphic JavaScript: #DevBeat Master Class
 
Is Vue catching up with React.pdf
Is Vue catching up with React.pdfIs Vue catching up with React.pdf
Is Vue catching up with React.pdf
 
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web ApplicationReact Js vs Node Js_ Which Framework to Choose for Your Next Web Application
React Js vs Node Js_ Which Framework to Choose for Your Next Web Application
 
GDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJSGDSC NITS Presents Kickstart into ReactJS
GDSC NITS Presents Kickstart into ReactJS
 
Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]Full Stack React Workshop [CSSC x GDSC]
Full Stack React Workshop [CSSC x GDSC]
 
Web summit.pptx
Web summit.pptxWeb summit.pptx
Web summit.pptx
 
Node js
Node jsNode js
Node js
 
AFTAB AHMED.pptx
AFTAB AHMED.pptxAFTAB AHMED.pptx
AFTAB AHMED.pptx
 
Nodejs vs react js converted
Nodejs vs react js convertedNodejs vs react js converted
Nodejs vs react js converted
 
Nodejs
NodejsNodejs
Nodejs
 
Day In A Life Of A Node.js Developer
Day In A Life Of A Node.js DeveloperDay In A Life Of A Node.js Developer
Day In A Life Of A Node.js Developer
 
Day in a life of a node.js developer
Day in a life of a node.js developerDay in a life of a node.js developer
Day in a life of a node.js developer
 
Nodejs Intro - Part2 Introduction to Web Applications
Nodejs Intro - Part2 Introduction to Web ApplicationsNodejs Intro - Part2 Introduction to Web Applications
Nodejs Intro - Part2 Introduction to Web Applications
 
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer ReplacementMidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
MidwestJS 2014 Reconciling ReactJS as a View Layer Replacement
 
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
Reconciling ReactJS as a View Layer Replacement (MidwestJS 2014)
 
Review on React JS
Review on React JSReview on React JS
Review on React JS
 
React, Flux and more (p1)
React, Flux and more (p1)React, Flux and more (p1)
React, Flux and more (p1)
 
Combining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applicationsCombining react with node js to develop successful full stack web applications
Combining react with node js to develop successful full stack web applications
 
You Got React.js in My PHP
You Got React.js in My PHPYou Got React.js in My PHP
You Got React.js in My PHP
 

More from Andrew Rota

Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)Andrew Rota
 
Getting Started with GraphQL && PHP
Getting Started with GraphQL && PHPGetting Started with GraphQL && PHP
Getting Started with GraphQL && PHPAndrew Rota
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPAndrew Rota
 
Building a GraphQL API in PHP
Building a GraphQL API in PHPBuilding a GraphQL API in PHP
Building a GraphQL API in PHPAndrew Rota
 
Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performanceAndrew Rota
 
Component Based UI Architectures for the Web
Component Based UI Architectures for the WebComponent Based UI Architectures for the Web
Component Based UI Architectures for the WebAndrew Rota
 
Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)Andrew Rota
 
Effectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side PerformanceEffectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side PerformanceAndrew Rota
 
UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at WayfairAndrew Rota
 
Better PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.jsBetter PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.jsAndrew Rota
 
Tungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular FrameworkTungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular FrameworkAndrew Rota
 
Why Static Type Checking is Better
Why Static Type Checking is BetterWhy Static Type Checking is Better
Why Static Type Checking is BetterAndrew Rota
 
An Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our OwnAn Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our OwnAndrew Rota
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web ComponentsAndrew Rota
 
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationWeb Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationAndrew Rota
 
Web Components and Modular CSS
Web Components and Modular CSSWeb Components and Modular CSS
Web Components and Modular CSSAndrew Rota
 

More from Andrew Rota (17)

Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)Performant APIs with GraphQL and PHP (Dutch PHP 2019)
Performant APIs with GraphQL and PHP (Dutch PHP 2019)
 
Getting Started with GraphQL && PHP
Getting Started with GraphQL && PHPGetting Started with GraphQL && PHP
Getting Started with GraphQL && PHP
 
Tutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHPTutorial: Building a GraphQL API in PHP
Tutorial: Building a GraphQL API in PHP
 
Building a GraphQL API in PHP
Building a GraphQL API in PHPBuilding a GraphQL API in PHP
Building a GraphQL API in PHP
 
Ten practical ways to improve front-end performance
Ten practical ways to improve front-end performanceTen practical ways to improve front-end performance
Ten practical ways to improve front-end performance
 
Component Based UI Architectures for the Web
Component Based UI Architectures for the WebComponent Based UI Architectures for the Web
Component Based UI Architectures for the Web
 
Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)Client-Side Performance Monitoring (MobileTea, Rome)
Client-Side Performance Monitoring (MobileTea, Rome)
 
Effectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side PerformanceEffectively Monitoring Client-Side Performance
Effectively Monitoring Client-Side Performance
 
UI Rendering at Wayfair
UI Rendering at WayfairUI Rendering at Wayfair
UI Rendering at Wayfair
 
Better PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.jsBetter PHP-Frontend Integration with Tungsten.js
Better PHP-Frontend Integration with Tungsten.js
 
Tungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular FrameworkTungsten.js: Building a Modular Framework
Tungsten.js: Building a Modular Framework
 
Why Static Type Checking is Better
Why Static Type Checking is BetterWhy Static Type Checking is Better
Why Static Type Checking is Better
 
An Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our OwnAn Exploration of Frameworks – and Why We Built Our Own
An Exploration of Frameworks – and Why We Built Our Own
 
The Complementarity of React and Web Components
The Complementarity of React and Web ComponentsThe Complementarity of React and Web Components
The Complementarity of React and Web Components
 
Web Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing CombinationWeb Components + Backbone: a Game-Changing Combination
Web Components + Backbone: a Game-Changing Combination
 
Bem methodology
Bem methodologyBem methodology
Bem methodology
 
Web Components and Modular CSS
Web Components and Modular CSSWeb Components and Modular CSS
Web Components and Modular CSS
 

Recently uploaded

Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Kaya Weers
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowNaoki (Neo) SATO
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System AdministratorsGlobus
 
Best Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusBest Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusGlobus
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsSprings
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentThierry Gayet
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Dmitry Zinoviev
 
From Software Development To Branding through Digital Marketing, IT Services
From Software Development To Branding through Digital Marketing, IT ServicesFrom Software Development To Branding through Digital Marketing, IT Services
From Software Development To Branding through Digital Marketing, IT ServicesAnisha Agarwal
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfssuser82c38d
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flinkconfluent
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...syedfaisal759877
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio, Inc.
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash CourseRohan Chandane
 
Managing multicast/igmp stream on Docker
Managing multicast/igmp stream on DockerManaging multicast/igmp stream on Docker
Managing multicast/igmp stream on DockerThierry Gayet
 
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارانتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارsohilww
 
Building Research Applications with Globus PaaS
Building Research Applications with Globus PaaSBuilding Research Applications with Globus PaaS
Building Research Applications with Globus PaaSGlobus
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCIOWomenMagazine
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleAmir Moghimi
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019VICTOR MAESTRE RAMIREZ
 

Recently uploaded (20)

Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024Design pattern talk by Kaya Weers - 2024
Design pattern talk by Kaya Weers - 2024
 
LLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flowLLMOps with Azure Machine Learning prompt flow
LLMOps with Azure Machine Learning prompt flow
 
Globus for System Administrators
Globus for System AdministratorsGlobus for System Administrators
Globus for System Administrators
 
Best Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using GlobusBest Practices for Data Sharing Using Globus
Best Practices for Data Sharing Using Globus
 
Open Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and ConsOpen Source vs Closed Source LLMs. Pros and Cons
Open Source vs Closed Source LLMs. Pros and Cons
 
Passbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managmentPassbolt Introduction and Usage for secret managment
Passbolt Introduction and Usage for secret managment
 
Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)Machine Learning Basics for Dummies (no math!)
Machine Learning Basics for Dummies (no math!)
 
From Software Development To Branding through Digital Marketing, IT Services
From Software Development To Branding through Digital Marketing, IT ServicesFrom Software Development To Branding through Digital Marketing, IT Services
From Software Development To Branding through Digital Marketing, IT Services
 
killing camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdfkilling camp 주차장 나누기-2 topology sort.pdf
killing camp 주차장 나누기-2 topology sort.pdf
 
Workshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con FlinkWorkshop híbrido: Stream Processing con Flink
Workshop híbrido: Stream Processing con Flink
 
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...CSS Notes in PDF, Easy to understand. For beginner to advanced.              ...
CSS Notes in PDF, Easy to understand. For beginner to advanced. ...
 
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
Alluxio Monthly Webinar | Why a Multi-Cloud Strategy Matters for Your AI Plat...
 
Agile & Scrum, Certified Scrum Master! Crash Course
Agile & Scrum,  Certified Scrum Master! Crash CourseAgile & Scrum,  Certified Scrum Master! Crash Course
Agile & Scrum, Certified Scrum Master! Crash Course
 
Managing multicast/igmp stream on Docker
Managing multicast/igmp stream on DockerManaging multicast/igmp stream on Docker
Managing multicast/igmp stream on Docker
 
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزارانتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
انتزاع و هزینه - انتزاع و تاثیرات آن در توسعه و نگهداری نرم‌افزار
 
Building Research Applications with Globus PaaS
Building Research Applications with Globus PaaSBuilding Research Applications with Globus PaaS
Building Research Applications with Globus PaaS
 
2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning2024 Trends Transforming Enterprise Resource Planning
2024 Trends Transforming Enterprise Resource Planning
 
Cybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdfCybersecurity Measures For Remote Workers.pdf
Cybersecurity Measures For Remote Workers.pdf
 
How AI is preventing account fraud at web scale
How AI is preventing account fraud at web scaleHow AI is preventing account fraud at web scale
How AI is preventing account fraud at web scale
 
Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019Implementing Docker Containers with Windows Server 2019
Implementing Docker Containers with Windows Server 2019
 

Integrating React.js Into a PHP Application: Dutch PHP 2019

  • 1. Integrating React.js Into a PHP Application Slides online at: @AndrewRota | Dutch PHP Conference 2019
  • 2. What is React.js? “A JavaScript library for building user interfaces” https://reactjs.org/
  • 3. React.js has, by far, the greatest market share of any frontend framework Laurie Voss, npm and the future of JavaScript (2018)
  • 4. ...and it’s still growing Laurie Voss, npm and the future of JavaScript (2018)
  • 5. Among developers, use of both PHP and React.js are correlated Stack Overflow, Developer Survey Results 2019
  • 6. As developers, as want to build the best interfaces for our users, and React is arguably one of the best tools for building modern web UIs.
  • 8. Agenda ● ⚛ Lightning Introduction to React.js ● 🎨 Getting Started with Client-Side Rendered React ● ⚙ Server-Side Rendering Architectures ■ V8Js PHP Extension ■ PHP Requests to a Node.js Service ■ Node.js Requests to PHP ● ✨ Future of React.js SSR ● 💡Takeaways
  • 9. What can React.js add to a PHP web application?
  • 10. How can we integrate React.js into a PHP web application?
  • 11. PHP and React.js can complement each other in a web application
  • 12. Make views a first-class aspect of your web application
  • 15. Flexibility to support “single-page application” experiences
  • 16. Frontend frameworks can unlock new interaction patterns
  • 17. React.js makes it easy (and fun) to create and manage rich view logic
  • 18. What is React.js? “A JavaScript library for building user interfaces”
  • 19. Declarative ‣ Design views as “components” which accept props and return React elements ‣ React will handle rendering and re-rendering the DOM when data changes function Hello(props) { return <h1>Hello, {props.name}</h1>; }
  • 20. Composable ‣ In addition to DOM nodes, components can also render other components ‣ You can also render child components for more generic “box” components using props.children. function Hello(props) { return <h2>My name is, {props.name}</h2>; } function NameBadge(props) { return (<div> Welcome to {props.conf} Conference.<br /> {props.children} </div>) } function App() { return (<div> <NameBadge conf={'Dutch PHP 2019'}> <Hello name={'Andrew'} /> </NameBadge> </div>) }
  • 21. Encapsulate State ‣ Components can manage their own encapsulated state ‣ When state is shared across components, a common pattern is to lift that state up to a common ancestor ‣ Libraries such as Redux or MobX can help with more complex state management import {Component} from "react"; class App extends Component { state = {count: 0}; handleClick = () => { this.setState(state => { return {count: state.count + 1} }); }; render() { return <div> <span>Count: {this.state.count} </span> <button onClick={this.handleClick}>+</button> </div>; } }
  • 22. Adding React.js to your PHP site: the easy way… 100% Client-Side Rendering
  • 23. Render a React App ‣ Start with the root element on a page, and use ReactDOM.render to start the application const root = document.getElementById('root'); const App = <h1>Hello, world</h1>; ReactDOM.render(App, root);
  • 24. Initial page load is blank JavaScript loads Client-Side Rendered
  • 25. Incremental Adoption ‣ A 100% react application would have a single react root. ‣ Use ReactDOM.render() to create multiple roots when converting an application ‣ In general, convert components from the “bottom up” of the view tree
  • 26. But we’ve only partially integrated React.js into our site... Enter Server-Side Rendering
  • 27. What is server-side rendering (SSR)? Constructing the HTML for your view on the server-side of the web request.
  • 29. Why server-side render? ‣ Performance ‣ Search engine optimization ‣ Site works without JavaScript
  • 30. React has built-in support for SSR with ReactDOMServer
  • 31. Render a React App (Server Side) ‣ Running on the server, ReactDOMServer.renderToString() will return a string of HTML ‣ Running on the client, ReactDOM.hydrate() will attach the event listeners, and pick up subsequent rendering client-side // Shared const App = <h1>Hello, world</h1>; // Server side ReactDOMServer.renderToString(App); // Client side ReactDOM.hydrate(App, root);
  • 32. Universal JavaScript: The same application code (components) is run on both client and server. (sometimes also referred to as Isomorphic JavaScript)
  • 33. For universal JavaScript we need a way to execute JavaScript on the server.
  • 34. Let’s look at a few different possible architectures.
  • 35. 1. V8Js → running JavaScript from PHP 2. Node.js → requests to a standalone JS service a. Web requests go to PHP, which then makes requests to Node.js service for HTML b. Web requests go to Node.js, which then makes requests to PHP for data
  • 36. SSR with V8Js extension in PHP
  • 37. What is V8Js? A PHP extension which embeds the V8 JavaScript engine
  • 38. A PHP extension which embeds the V8 JavaScript engine 1. Install V8Js ○ Try the V8Js Docker image or a pre-built binary ○ Or compile latest version yourself 2. Enable the extension in php (extension=v8js.so)
  • 40. Execute JS in PHP ‣ With V8js, JS can be executed from PHP ‣ From this starting point, we could build a PHP class to consume JS modules, and output the result as HTML <?php $v8 = new V8Js(); $js = "const name = 'World';"; $js .= "const greeting = 'Hello';"; $js .= "function printGreeting(str) {"; $js .= " return greeting + ‘, ' + str + '!';"; $js .= "}"; $js .= "printGreeting(name);"; echo($v8->executeString($js));
  • 41. Using the V8Js Extension + No additional service calls need to be made - Builds can be difficult to maintain - No built-in Node.js libraries or tooling available Client V8js
  • 42. SSR with requests to Node.js from PHP
  • 43. What is Node.js? A JavaScript runtime built on the V8 engine.
  • 44. A JavaScript runtime built on the V8 engine. 1. Install node.js as a standalone service; can be on same host, or another. 2. Your web host may already support it ○ See official Docker images ○ Or install yourself
  • 45. PHP requests to Node.js + Full Node.js support + PHP can still handle routing, and partial view rendering - Additional service to manage Client
  • 46. Hypernova: a Node.js service for server-side rendering JavaScript views Hypernova ‣ Airbnb open sourced a standalone Node.js service for rendering React components: airbnb/hypernova ‣ Wayfair open sourced a PHP client for Hypernova: wayfair/hypernova-php
  • 47. SSR with in Node.js with data requests to PHP
  • 48. Node.js requests to PHP + Full Node.js support + Both views and routes live in Node.js - May be difficult to incrementally migrate to - PHP is essentially just a data access layer Client
  • 49. Next.js: SSR framework for React.js ‣ Next.js is a complete framework for server-side rendered react in Node.js, with out-of-the-box support for features like routing, code splitting, caching, and data fetching.
  • 51. JS Loads Hydrate all at onceStreaming Server Side Rendering React now supports streaming using ReactDOMServer.renderToNodeStream() . We can use HTML Chunked Encoding to flush content as its rendered ready (e.g., PHP’s ob_flush() ). Streaming SSR
  • 52. Load JS incrementally for progressive hydration Streaming Server Side Rendering Streaming SSR w/ Partial Hydration
  • 53. Continued Investment in React.js Server-Side Rendering
  • 55. Easiest way to get started with React.js is 100% client-side rendering
  • 56. React.js has solid server-side rendering support
  • 57. Think about how you’re architecting the view layer of your application
  • 58. React.js + SSR can help make the view layer a first class piece of your web architecture
  • 59. Give it a try!
  • 60. Dank je wel! Andrew Rota @AndrewRota