This document discusses server-side rendering (SSR) of React components with Symfony. It begins with an overview of the problems SSR addresses like slow page loads. It then covers key React concepts like components, state, and rendering. Finally, it discusses integrating React and Symfony through tools like React on Rails, React Router for routing, and extracting meta tags from components. It also briefly mentions using an external JavaScript server to render components on the server-side.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Tutorial Videos: https://www.youtube.com/playlist?list=PLD8nQCAhR3tQ7KXnvIk_v_SLK-Fb2y_k_
Day 1 : Introduction to React, Babel and Webpack
Prerequisites of starting the workshop ( Basic understanding of Node & Express )
What is Virtual DOM?
What is React and why should we use it?
Install and set up React:
a-Using create-react-app
b-From scratch using Babel and Webpack. We will use Webpack Dev Server.
Day 2 : React Basic Concepts
Types of Components: Class-based and Functional based Components
Use of JSX
Parent, Child, and Nested Components
Difference between State and Props
Create and Handle Routes
Component Lifecycle Methods
Create a form and handling form inputs
Use of arrow functions and Spread Operator
Day 3: Advanced Concepts in React
Use of Refs
What are Higher Order Components( HOC )?
How to use HOC
Understanding Context in React
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...Edureka!
This Edureka ReactJS Tutorial For Beginners will help you in understanding the fundamentals of ReactJS and help you in building a strong foundation in React framework. Below are the topics covered in this tutorial:
1. Why ReactJS?
2. What Is ReactJS?
3. Advantages Of ReactJS
4. ReactJS Installation and Program
5. ReactJS Fundamentals
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...Edureka!
This Angular 4 tutorial will introduce you to the Angular Data Binding concept.
To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
All Things Open 2014 - Day 2
Thursday, October 23rd, 2014
James Pearce
Head of Open Source with Facebook
Front Dev 1
An Introduction to ReactJS
Find more by James here: https://speakerdeck.com/jamesgpearce
ReactJS Tutorial For Beginners | ReactJS Redux Training For Beginners | React...Edureka!
This Edureka ReactJS Tutorial For Beginners will help you in understanding the fundamentals of ReactJS and help you in building a strong foundation in React framework. Below are the topics covered in this tutorial:
1. Why ReactJS?
2. What Is ReactJS?
3. Advantages Of ReactJS
4. ReactJS Installation and Program
5. ReactJS Fundamentals
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Angular 4 Data Binding | Two Way Data Binding in Angular 4 | Angular 4 Tutori...Edureka!
This Angular 4 tutorial will introduce you to the Angular Data Binding concept.
To watch the YouTube videos in this Angular 4 tutorial playlist, click here: https://www.youtube.com/watch?v=R4wGCHzn6-Q&list=PL9ooVrP1hQOF4aDuqaWYWSuj1isPF6HHg.
Http Service will help us fetch external data, post to it, etc. We need to import the http module to make use of the http service. Let us consider an example to understand how to make use of the http service.
Node.js Tutorial for Beginners | Node.js Web Application Tutorial | Node.js T...Edureka!
This Edureka "Node.js tutorial" will help you to learn the Node.js fundamentals and how to create an application in Node.js. Node.js is an open-source, cross-platform JavaScript runtime environment for developing a diverse variety of server tools and applications. Below are the topics covered in this tutorial:
1) Client Server Architecture
2) Limitations of Multi-Threaded Model
3) What is Node.js?
4) Features of Node.js
5) Node.js Installation
6) Blocking Vs. Non – Blocking I/O
7) Creating Node.js Program
8) Node.js Modules
9) Demo – Grocery List Web Application using Node.js
s React.js a library or a framework? In any case, it is a new way of working that represents a revolution in the way of building web projects. It has very particular characteristics that allow us, for instance, to render React code from the server side, or to include React components from Twig tags. During this talk we will present React.js, we will explore how to take advantage of it from PHP projects and we will give answers to practical problems such as universal (isomorphical) rendering and the generation of React.js forms from Symfony forms without duplication of efforts.
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
Presentations includes following topics :-
Introduction of ReactJS.
Component workflow.
State management and useful life-cycles.
React hooks.
Server Side Rendering.
The complexity of frontend applications over the years led to the creation of more robust solutions, where data logic won’t be messed up at scale. A shift took place from the traditional services approach, in which data is tightly coupled to the Views of their Components, towards more composable and shareable solutions. Each of these solutions is what we call a "state-manager".
Goal of this presentation is the comparative analysis between different react frontend state managers such as Redux, MobX, Recoil and React-Query. State Machines will also be presented, showing a completely different perception of how state can be orchestrated. Different mental models of the aforementioned state managers along with their different technical implementations will be presented to the audience. Ultimately, the audience can use this presentation for future reference on faster deciding which state-manager fits their own projects. Before delving into the comparison there will be a description of the main data flow in the browser. Concepts like reactivity, immutability, predictability, concurrency and performance will be detected on the main flow and will act as our comparison metrics among the state-managers.
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 13:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2470.html
Паразитизм — форма взаимоотношений между организмами различных видов, из которых один (паразит — aka Angular 4+) использует другого (хозяина — aka React) в качестве среды обитания и источника питания, нанося ему вред, но при этом не убивая.
Паразитоид — организм, который проводит значительную часть своей жизни (в личиночной стадии), проживая на или внутри своего единственного хозяина, которого он постепенно убивает в процессе.
...
In this talk we will explore how to organize component-centric code splitting with server side rendering and universal data fetching in React, when your application becomes large enough.
Talk description: When you have a large enough application, a single large bundle with all of your code becomes a problem for startup time. You need to start breaking your app into separate bundles and load them dynamically when needed.
How to split a single bundle into multiple is a well-solved problem with tools like Browserify and Webpack.
But now you need to find places in your application where you can decide to split off into another bundle and load it asynchronously. You also need a way to communicate between server and client, and organize server side rendering and implement universal data fetching for your application.
Even React Router team failed with this task
“We’ve tried and failed a couple of times”(https://reacttraining.com/react-router/web/guides/code-splitting/code-splitting-server-rendering)
I will show you how to solve this problem, we will use a great library called React Loadable.
Also, we will look at some solutions which you can achieve with React Router v4 and why they are not the best one.
For this talk, you will need some knowledge in React, Babel (ES6), Node, Webpack 2, Redux, and little bit React Router v4.
React for Re-use: Creating UI Components with Confluence ConnectAtlassian
Using React to create reusable components for Confluence extension points saves time and allows for a richer user experience. Join Matt Jensen, an Atlassian developer for over 10 years, for a session on using React to modularise the UI layer of your Confluence add-on, then bringing it together to take advantage of the common components. Matt will demonstrate the benefits of React for UI elements like macros, pages, and dialogs.
Matthew Jensen, Development Team Lead, Atlassian
React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile application
At Lia Infraservice we create Dynamic Websites. Become a front-end React JS developer and be a part of our tech-savvy Web App Development Company in Chennai.
Organizations focus process optimization of
Data Tier
Application Tier
Presentation Tier is usually ignored.
Presentation Tier is responsible for more than 30% of Client/Server application performance.
Similar to Server side rendering with React and Symfony (20)
Talk delivered at the Munich PHP User Group. An overview of the features of Elixir that may be more interesting for a PHP developer, so we focus in the platform, the cheap processes of the Erlang Virtual Machine, the philosophy of Let It Crash and how to model problems with trees of processes, and possible use cases.
Server Side Rendering of JavaScript in PHPIgnacio Martín
What is SSR, which problems does it solve, why do it in PHP, what options do we have for it, libraries that are available and tips and tricks. Practical code examples for Symfony and React.js, but the fundamental points can be taken away to use in other stacks like Vue and Laravel.
Redux is a powerful tool to manage our state. Can we use the same concepts in the server side so we can share the same store with users using our app at the same time in games or collaborative apps? We will see how to connect our Redux store to stores in the server side written in Node.js and Elixir OTP GenServers, and how to extend this perspective beyond particular implementations.
Talk presented in AgentConf'18
Supporting slides of my introductory workshop about React Native in React Alicante 2017.
Source code & Exercises: https://github.com/Limenius/workshop-react-native
Los JSON Web Tokens son una forma muy práctica de asegurar nuestras APIs.
En esta charla veremos cuáles son sus propiedades fundamentales, cómo trabajar con ellos y qué opciones tenemos en Symfony, tanto con librerías, como con LexikJWTAuthenticationBundle y su uso del componente Guard.
Redux saga: managing your side effects. Also: generators in es6Ignacio Martín
Explanation of redux-saga for its use in React and React Native. Contains an explanation about ES6 generators, used in sagas, with emphasis in generators to manage async code.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Integrando React.js en aplicaciones Symfony (deSymfony 2016)Ignacio Martín
Introducción a React.js + técnicas y conceptos útiles, como aplicaciones universales (isomórficas) o cómo usar json schema para facilitarnos la vida al trabajar con formularios.
Talk presented at Codemotion 2015.
Although the Request/Response pattern has allowed to build applications that were inconceivable when HTTP was invented, there is an increasing demand of solutions that require to push information to browsers or mobile clients as soon as it is available, using technologies like WebSockets. This has applications in messaging, notifications, games, IoT and collaborative apps, among others.
In this talk we will present the solutions available like socket.io, Faye, Pusher, PubNub or Carotene, how to integrate such services with existent or new codebases, its advantages, the challenges we will find and how to succeed bringing realtime communications to the table.
We describe the deployment and use of Globus Compute for remote computation. This content is aimed at researchers who wish to compute on remote resources using a unified programming interface, as well as system administrators who will deploy and operate Globus Compute services on their research computing infrastructure.
How to Position Your Globus Data Portal for Success Ten Good PracticesGlobus
Science gateways allow science and engineering communities to access shared data, software, computing services, and instruments. Science gateways have gained a lot of traction in the last twenty years, as evidenced by projects such as the Science Gateways Community Institute (SGCI) and the Center of Excellence on Science Gateways (SGX3) in the US, The Australian Research Data Commons (ARDC) and its platforms in Australia, and the projects around Virtual Research Environments in Europe. A few mature frameworks have evolved with their different strengths and foci and have been taken up by a larger community such as the Globus Data Portal, Hubzero, Tapis, and Galaxy. However, even when gateways are built on successful frameworks, they continue to face the challenges of ongoing maintenance costs and how to meet the ever-expanding needs of the community they serve with enhanced features. It is not uncommon that gateways with compelling use cases are nonetheless unable to get past the prototype phase and become a full production service, or if they do, they don't survive more than a couple of years. While there is no guaranteed pathway to success, it seems likely that for any gateway there is a need for a strong community and/or solid funding streams to create and sustain its success. With over twenty years of examples to draw from, this presentation goes into detail for ten factors common to successful and enduring gateways that effectively serve as best practices for any new or developing gateway.
Experience our free, in-depth three-part Tendenci Platform Corporate Membership Management workshop series! In Session 1 on May 14th, 2024, we began with an Introduction and Setup, mastering the configuration of your Corporate Membership Module settings to establish membership types, applications, and more. Then, on May 16th, 2024, in Session 2, we focused on binding individual members to a Corporate Membership and Corporate Reps, teaching you how to add individual members and assign Corporate Representatives to manage dues, renewals, and associated members. Finally, on May 28th, 2024, in Session 3, we covered questions and concerns, addressing any queries or issues you may have.
For more Tendenci AMS events, check out www.tendenci.com/events
Check out the webinar slides to learn more about how XfilesPro transforms Salesforce document management by leveraging its world-class applications. For more details, please connect with sales@xfilespro.com
If you want to watch the on-demand webinar, please click here: https://www.xfilespro.com/webinars/salesforce-document-management-2-0-smarter-faster-better/
Top Features to Include in Your Winzo Clone App for Business Growth (4).pptxrickgrimesss22
Discover the essential features to incorporate in your Winzo clone app to boost business growth, enhance user engagement, and drive revenue. Learn how to create a compelling gaming experience that stands out in the competitive market.
Globus Compute wth IRI Workflows - GlobusWorld 2024Globus
As part of the DOE Integrated Research Infrastructure (IRI) program, NERSC at Lawrence Berkeley National Lab and ALCF at Argonne National Lab are working closely with General Atomics on accelerating the computing requirements of the DIII-D experiment. As part of the work the team is investigating ways to speedup the time to solution for many different parts of the DIII-D workflow including how they run jobs on HPC systems. One of these routes is looking at Globus Compute as a way to replace the current method for managing tasks and we describe a brief proof of concept showing how Globus Compute could help to schedule jobs and be a tool to connect compute at different facilities.
Large Language Models and the End of ProgrammingMatt Welsh
Talk by Matt Welsh at Craft Conference 2024 on the impact that Large Language Models will have on the future of software development. In this talk, I discuss the ways in which LLMs will impact the software industry, from replacing human software developers with AI, to replacing conventional software with models that perform reasoning, computation, and problem-solving.
Quarkus Hidden and Forbidden ExtensionsMax Andersen
Quarkus has a vast extension ecosystem and is known for its subsonic and subatomic feature set. Some of these features are not as well known, and some extensions are less talked about, but that does not make them less interesting - quite the opposite.
Come join this talk to see some tips and tricks for using Quarkus and some of the lesser known features, extensions and development techniques.
Unleash Unlimited Potential with One-Time Purchase
BoxLang is more than just a language; it's a community. By choosing a Visionary License, you're not just investing in your success, you're actively contributing to the ongoing development and support of BoxLang.
AI Pilot Review: The World’s First Virtual Assistant Marketing SuiteGoogle
AI Pilot Review: The World’s First Virtual Assistant Marketing Suite
👉👉 Click Here To Get More Info 👇👇
https://sumonreview.com/ai-pilot-review/
AI Pilot Review: Key Features
✅Deploy AI expert bots in Any Niche With Just A Click
✅With one keyword, generate complete funnels, websites, landing pages, and more.
✅More than 85 AI features are included in the AI pilot.
✅No setup or configuration; use your voice (like Siri) to do whatever you want.
✅You Can Use AI Pilot To Create your version of AI Pilot And Charge People For It…
✅ZERO Manual Work With AI Pilot. Never write, Design, Or Code Again.
✅ZERO Limits On Features Or Usages
✅Use Our AI-powered Traffic To Get Hundreds Of Customers
✅No Complicated Setup: Get Up And Running In 2 Minutes
✅99.99% Up-Time Guaranteed
✅30 Days Money-Back Guarantee
✅ZERO Upfront Cost
See My Other Reviews Article:
(1) TubeTrivia AI Review: https://sumonreview.com/tubetrivia-ai-review
(2) SocioWave Review: https://sumonreview.com/sociowave-review
(3) AI Partner & Profit Review: https://sumonreview.com/ai-partner-profit-review
(4) AI Ebook Suite Review: https://sumonreview.com/ai-ebook-suite-review
Cyaniclab : Software Development Agency Portfolio.pdfCyanic lab
CyanicLab, an offshore custom software development company based in Sweden,India, Finland, is your go-to partner for startup development and innovative web design solutions. Our expert team specializes in crafting cutting-edge software tailored to meet the unique needs of startups and established enterprises alike. From conceptualization to execution, we offer comprehensive services including web and mobile app development, UI/UX design, and ongoing software maintenance. Ready to elevate your business? Contact CyanicLab today and let us propel your vision to success with our top-notch IT solutions.
Paketo Buildpacks : la meilleure façon de construire des images OCI? DevopsDa...Anthony Dahanne
Les Buildpacks existent depuis plus de 10 ans ! D’abord, ils étaient utilisés pour détecter et construire une application avant de la déployer sur certains PaaS. Ensuite, nous avons pu créer des images Docker (OCI) avec leur dernière génération, les Cloud Native Buildpacks (CNCF en incubation). Sont-ils une bonne alternative au Dockerfile ? Que sont les buildpacks Paketo ? Quelles communautés les soutiennent et comment ?
Venez le découvrir lors de cette session ignite
How Recreation Management Software Can Streamline Your Operations.pptxwottaspaceseo
Recreation management software streamlines operations by automating key tasks such as scheduling, registration, and payment processing, reducing manual workload and errors. It provides centralized management of facilities, classes, and events, ensuring efficient resource allocation and facility usage. The software offers user-friendly online portals for easy access to bookings and program information, enhancing customer experience. Real-time reporting and data analytics deliver insights into attendance and preferences, aiding in strategic decision-making. Additionally, effective communication tools keep participants and staff informed with timely updates. Overall, recreation management software enhances efficiency, improves service delivery, and boosts customer satisfaction.
Climate Science Flows: Enabling Petabyte-Scale Climate Analysis with the Eart...Globus
The Earth System Grid Federation (ESGF) is a global network of data servers that archives and distributes the planet’s largest collection of Earth system model output for thousands of climate and environmental scientists worldwide. Many of these petabyte-scale data archives are located in proximity to large high-performance computing (HPC) or cloud computing resources, but the primary workflow for data users consists of transferring data, and applying computations on a different system. As a part of the ESGF 2.0 US project (funded by the United States Department of Energy Office of Science), we developed pre-defined data workflows, which can be run on-demand, capable of applying many data reduction and data analysis to the large ESGF data archives, transferring only the resultant analysis (ex. visualizations, smaller data files). In this talk, we will showcase a few of these workflows, highlighting how Globus Flows can be used for petabyte-scale climate analysis.
SOCRadar Research Team: Latest Activities of IntelBrokerSOCRadar
The European Union Agency for Law Enforcement Cooperation (Europol) has suffered an alleged data breach after a notorious threat actor claimed to have exfiltrated data from its systems. Infamous data leaker IntelBroker posted on the even more infamous BreachForums hacking forum, saying that Europol suffered a data breach this month.
The alleged breach affected Europol agencies CCSE, EC3, Europol Platform for Experts, Law Enforcement Forum, and SIRIUS. Infiltration of these entities can disrupt ongoing investigations and compromise sensitive intelligence shared among international law enforcement agencies.
However, this is neither the first nor the last activity of IntekBroker. We have compiled for you what happened in the last few days. To track such hacker activities on dark web sources like hacker forums, private Telegram channels, and other hidden platforms where cyber threats often originate, you can check SOCRadar’s Dark Web News.
Stay Informed on Threat Actors’ Activity on the Dark Web with SOCRadar!
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I ...Juraj Vysvader
In 2015, I used to write extensions for Joomla, WordPress, phpBB3, etc and I didn't get rich from it but it did have 63K downloads (powered possible tens of thousands of websites).
top nidhi software solution freedownloadvrstrong314
This presentation emphasizes the importance of data security and legal compliance for Nidhi companies in India. It highlights how online Nidhi software solutions, like Vector Nidhi Software, offer advanced features tailored to these needs. Key aspects include encryption, access controls, and audit trails to ensure data security. The software complies with regulatory guidelines from the MCA and RBI and adheres to Nidhi Rules, 2014. With customizable, user-friendly interfaces and real-time features, these Nidhi software solutions enhance efficiency, support growth, and provide exceptional member services. The presentation concludes with contact information for further inquiries.
Understanding Globus Data Transfers with NetSageGlobus
NetSage is an open privacy-aware network measurement, analysis, and visualization service designed to help end-users visualize and reason about large data transfers. NetSage traditionally has used a combination of passive measurements, including SNMP and flow data, as well as active measurements, mainly perfSONAR, to provide longitudinal network performance data visualization. It has been deployed by dozens of networks world wide, and is supported domestically by the Engagement and Performance Operations Center (EPOC), NSF #2328479. We have recently expanded the NetSage data sources to include logs for Globus data transfers, following the same privacy-preserving approach as for Flow data. Using the logs for the Texas Advanced Computing Center (TACC) as an example, this talk will walk through several different example use cases that NetSage can answer, including: Who is using Globus to share data with my institution, and what kind of performance are they able to achieve? How many transfers has Globus supported for us? Which sites are we sharing the most data with, and how is that changing over time? How is my site using Globus to move data internally, and what kind of performance do we see for those transfers? What percentage of data transfers at my institution used Globus, and how did the overall data transfer performance compare to the Globus users?
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...Shahin Sheidaei
Games are powerful teaching tools, fostering hands-on engagement and fun. But they require careful consideration to succeed. Join me to explore factors in running and selecting games, ensuring they serve as effective teaching tools. Learn to maintain focus on learning objectives while playing, and how to measure the ROI of gaming in education. Discover strategies for pitching gaming to leadership. This session offers insights, tips, and examples for coaches, team leads, and enterprise leaders seeking to teach from simple to complex concepts.
Gamify Your Mind; The Secret Sauce to Delivering Success, Continuously Improv...
Server side rendering with React and Symfony
1. SSR of React with Symfony Workshop
Bits of theory
Nacho Martin
2. Nacho Martín
I write code at Limenius.
We build tailor-made projects,
and provide consultancy and formation.
We are very happy with React, and have been
dealing with how to integrate with PHP for
some time now & publishing libraries about it.
3. What is the problem that
Server Side Rendering
addresses?
4. A long time ago in a galaxy far, far away
Server
5. A long time ago in a galaxy far, far away
Server
HTML
</>
HTML
</> Client
13. DOM Manipulation
This happens in the Browser
Element
<body>
Element
<div id=“grid”>
Element
<h1>
Text
“Hi there”
API
$.get( “api/page2.json“,
function(data) {
$(“#grid”).html(renderPage(data));
}
);
14. DOM Manipulation
This happens in the Browser
Element
<body>
Element
<div id=“grid”>
Element
<h1>
Text
“Hi there”
…
Element
<div>
Element
<div>
API
$.get( “api/page2.json“,
function(data) {
$(“#grid”).html(renderPage(data));
}
);
15. This means that the first thing the user sees is this
…and also crawlers :(
16. Slow page loads in mobile users
https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
• Average load time over 3G: 19 seconds.
• 53% of sites that take longer than 3s are abandoned.
• Going from 19s to 5s means:
• 25% more impressions of ads.
• 70% longer sessions.
• 35% lower bounce race.
• 2x ad revenue.
17. When are these problems worse
Apps. Bearable.
Content pages. Probably unbearable.
34. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple Not efficient
35. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
Complex
Not efficient
36. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
EfficientComplex
Not efficient
37. Options
2: Find in the DOM where to
insert elements, what to move,
what to remove…
1: Re-render everything. Simple
EfficientComplex
Not efficient
React allows us to do 1, although it does 2 behind the scenes
38. Fundamental premise
Give me a state and a render() method that depends
on it and forget about how and when to render.
46. Working with state
constructor(props) {
super(props);
this.state = {count: 1};
}
Initial state
this.setState({count: this.state.count + 1});
Assign state
47. render() and JSX
It is not HTML, it is JSX.
React transforms it internally to HTML elements.
Good practice: make render() as clean as possible, only a return.
render() {
return (
<div className="App">
<button onClick={this.tick.bind(this)}>Clícame!</button>
<span>Clicks: {this.state.count}</span>
</div>
);
}
57. SSR in React. 2) insert in our template
<html>
…
<body>
<div id=“root”>
<div data-reactroot="">
This is some <span>server-generated</span> <span>HTML.</span>
</div>
</div>
…
61. JS side part: React on Rails
https://github.com/shakacode/react_on_rails
Used among others by
62. JS side part: React on Rails
import ReactOnRails from 'react-on-rails';
import RecipesApp from './RecipesAppServer';
ReactOnRails.register({ RecipesApp });
JavaScript:
72. Then in Twig
{% set movie = react_component_array('MoviesApp', {'props': props}) %}
{% block title %}
{{ movie.title is defined ? movie.title | raw : '' }}
{% endblock title %}
{% block body %}
{{ movie.componentHtml | raw }}
{% endblock %}
Use members of the array