SlideShare une entreprise Scribd logo
1  sur  25
Télécharger pour lire hors ligne
Universal JavaScript - React
_AGENDA
_AGENDA
CZĘŚĆ 00 _INTRO
CZĘŚĆ 01 _CZYM JEST UNIVERSAL JAVASCRIPT
CZĘŚĆ 02 _UNIVERSAL JAVASCRIPT I REACT
CZĘŚĆ 03 _TRANSMIT
CZĘŚĆ 04 _REDUX
CZĘŚĆ 05 _ZAGROŻENIA I PROBLEMY
- Projekty dla międzynarodowych marek - innowacje, software, web apps
- Prawie 4 lata na rynku, 40 osób na pokładzie
- Zwycięzcy Hacksummit() Global Hackathon
_INTRO
CZYM JEST
UNIVERSAL
JAVASCRIPT?
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
_UNIVERSAL SPA
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
_ZALETY
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- Poprawa SEO w przypadku przeglądarek nie wspierających analizy JavaScript
(Yandex, Baidu, Bing, Yahoo)
- Przyśpieszenie czasu ładowania strony
- Zapobieganie FOUC (Flash of Unstyled Content)
_TECHNOLOGIE
_CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
- React
- Transmit
- Redux
- Universal Angular 2
UNIVERSAL
JAVASCRIPT
I REACT
_WSPARCIE ZE STRONY REACT
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
- Virtual DOM
- react-dom/server
- Reużywanie aplikacji
_RENDEROWANIE CLIENT-SIDE
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
import ReactDOM from 'react-dom';
import App from './app';
const reactRoot = window.document.getElementById
('react-root');
ReactDOM.render(<App/>);
_RENDEROWANIE SERVER-SIDE
_CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT
import {Server} from 'hapi';
import ReactDOM from 'react-dom/server';
import App from './App';
const server = new Server();
server.connection({ host: 'localhost', port: '8080'});
server.ext('onPreResponse', (requst, reply) => {
reply(`<html>
<head></head>
<body>
<div id="react-root">${ReactDOM.renderToString(< App/>)}</div>
</body>
</html>`);
});
TRANSMIT
_TRANSMIT CONTAINER
_CZĘŚĆ 03: TRANSMIT
import Transmit from 'transmit';
import React, {Component} from 'react';
class App extends Component {
render() {
return <div>Hello {this.props.user}!</div>;
}
}
export default Transmit.createContainer (App, {
fragments: {
user: Promise.resolve('John Smith')
}
});
_TRANSMIT RENDER
_CZĘŚĆ 03: TRANSMIT
Transmit.render(<App/>);
Transmit.renderToString (<App/>);
REDUX
_FETCH COMPONENT DATA
_CZĘŚĆ 04: REDUX
function fetchComponentData(dispatch, components, params) {
const needs = components. reduce((prev, current) => {
return current ? (current. needs || []).concat(prev) : prev;
}, []);
const promises = needs.map(need => dispatch(need(params)));
return Promise.all(promises);
}
_PROMISE MIDDLEWARE
_CZĘŚĆ 04: REDUX
function promiseMiddleware() {
return next => action => {
const {promise, type, ...rest} = action;
if (!promise) return next(action);
const SUCCESS = type;
const REQUEST = type + '_REQUEST';
const FAILURE = type + '_FAILURE';
next({... rest, type: REQUEST});
return promise
.then(res => {next({... rest, res, type: SUCCESS}); return true;})
. catch(error => {next({... rest, error, type: FAILURE}); return false;});
};
}
_COMPONENT
_CZĘŚĆ 04: REDUX
class App extends Component {
render() {
return (
< div>Hello world!</ div>
);
}
static needs = [
someAction
];
}
_RENDEROWANIE SERVER-SIDE
_CZĘŚĆ 04: REDUX
import {Server} from 'hapi';
import ReactDOM from 'react-dom/server';
import App from './App';
import store from './store';
const server = new Server();
server.connection({ host: 'localhost', port: '8080'});
server.ext('onPreResponse', (requst, reply) => {
reply(`<html>
<head></head>
<body>
<div id="react-root">${ReactDOM.renderToString(< App/>)}</div>
</body>
<script>window.__INITIAL_STATE__ = ${JSON.stringify(store.getState())}
</script>
</html>`);
});
PROBLEMY I
ZAGROŻENIA
_ZAGROŻENIA I PROBLEMY
_CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY
- Zwiększenie skomplikowania architektury aplikacji
- Brak window, document, etc. po stronie serwera aplikacji
- Trudniejsze debugowanie
- Niespójność wyrenderowanych aplikacji
_ZAGROŻENIA I PROBLEMY
_CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY
PYTANIA?
DZIĘKUJĘ ZA UWAGĘ

Contenu connexe

Dernier

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 

Dernier (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 

Universal JavaScript with React

  • 2. _AGENDA _AGENDA CZĘŚĆ 00 _INTRO CZĘŚĆ 01 _CZYM JEST UNIVERSAL JAVASCRIPT CZĘŚĆ 02 _UNIVERSAL JAVASCRIPT I REACT CZĘŚĆ 03 _TRANSMIT CZĘŚĆ 04 _REDUX CZĘŚĆ 05 _ZAGROŻENIA I PROBLEMY
  • 3. - Projekty dla międzynarodowych marek - innowacje, software, web apps - Prawie 4 lata na rynku, 40 osób na pokładzie - Zwycięzcy Hacksummit() Global Hackathon _INTRO
  • 5. _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
  • 6. _UNIVERSAL SPA _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT
  • 7. _ZALETY _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT - Poprawa SEO w przypadku przeglądarek nie wspierających analizy JavaScript (Yandex, Baidu, Bing, Yahoo) - Przyśpieszenie czasu ładowania strony - Zapobieganie FOUC (Flash of Unstyled Content)
  • 8. _TECHNOLOGIE _CZĘŚĆ 01: CZYM JEST UNIVERSAL JAVASCRIPT - React - Transmit - Redux - Universal Angular 2
  • 10. _WSPARCIE ZE STRONY REACT _CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT - Virtual DOM - react-dom/server - Reużywanie aplikacji
  • 11. _RENDEROWANIE CLIENT-SIDE _CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT import ReactDOM from 'react-dom'; import App from './app'; const reactRoot = window.document.getElementById ('react-root'); ReactDOM.render(<App/>);
  • 12. _RENDEROWANIE SERVER-SIDE _CZĘŚĆ 02: UNIVERSAL JAVASCRIPT I REACT import {Server} from 'hapi'; import ReactDOM from 'react-dom/server'; import App from './App'; const server = new Server(); server.connection({ host: 'localhost', port: '8080'}); server.ext('onPreResponse', (requst, reply) => { reply(`<html> <head></head> <body> <div id="react-root">${ReactDOM.renderToString(< App/>)}</div> </body> </html>`); });
  • 14. _TRANSMIT CONTAINER _CZĘŚĆ 03: TRANSMIT import Transmit from 'transmit'; import React, {Component} from 'react'; class App extends Component { render() { return <div>Hello {this.props.user}!</div>; } } export default Transmit.createContainer (App, { fragments: { user: Promise.resolve('John Smith') } });
  • 15. _TRANSMIT RENDER _CZĘŚĆ 03: TRANSMIT Transmit.render(<App/>); Transmit.renderToString (<App/>);
  • 16. REDUX
  • 17. _FETCH COMPONENT DATA _CZĘŚĆ 04: REDUX function fetchComponentData(dispatch, components, params) { const needs = components. reduce((prev, current) => { return current ? (current. needs || []).concat(prev) : prev; }, []); const promises = needs.map(need => dispatch(need(params))); return Promise.all(promises); }
  • 18. _PROMISE MIDDLEWARE _CZĘŚĆ 04: REDUX function promiseMiddleware() { return next => action => { const {promise, type, ...rest} = action; if (!promise) return next(action); const SUCCESS = type; const REQUEST = type + '_REQUEST'; const FAILURE = type + '_FAILURE'; next({... rest, type: REQUEST}); return promise .then(res => {next({... rest, res, type: SUCCESS}); return true;}) . catch(error => {next({... rest, error, type: FAILURE}); return false;}); }; }
  • 19. _COMPONENT _CZĘŚĆ 04: REDUX class App extends Component { render() { return ( < div>Hello world!</ div> ); } static needs = [ someAction ]; }
  • 20. _RENDEROWANIE SERVER-SIDE _CZĘŚĆ 04: REDUX import {Server} from 'hapi'; import ReactDOM from 'react-dom/server'; import App from './App'; import store from './store'; const server = new Server(); server.connection({ host: 'localhost', port: '8080'}); server.ext('onPreResponse', (requst, reply) => { reply(`<html> <head></head> <body> <div id="react-root">${ReactDOM.renderToString(< App/>)}</div> </body> <script>window.__INITIAL_STATE__ = ${JSON.stringify(store.getState())} </script> </html>`); });
  • 22. _ZAGROŻENIA I PROBLEMY _CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY - Zwiększenie skomplikowania architektury aplikacji - Brak window, document, etc. po stronie serwera aplikacji - Trudniejsze debugowanie - Niespójność wyrenderowanych aplikacji
  • 23. _ZAGROŻENIA I PROBLEMY _CZĘŚĆ 05: ZAGROŻENIA I PROBLEMY