para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación...
Transcript of para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación...
![Page 1: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/1.jpg)
React frontends para WordPresscon FrontityPablo Postigo · @iamposti
DESARROLLO
#Som
osW
CC
O
![Page 2: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/2.jpg)
#Som
osW
CC
O
Pablo Postigo · @iampostiIngeniero Informático, emprendedor & Foodie.
Frontity CEO & Co-fundadorFacilitar la creación de interfaces modernas para WordPress
![Page 3: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/3.jpg)
#Som
osW
CC
O
Tema 1 - Frontity PRO
Tema 2 - Headless WordPress
Tema 3 - React
Tema 4 - Frontity Framework
Tema 5 - Comparación con Gatsby
![Page 4: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/4.jpg)
Frontity PRO2017 - Los orígenes de Frontity.
#Som
osW
CC
O
![Page 5: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/5.jpg)
Frontity PRO
#Som
osW
CC
O
Una red de blogs nos contactó con una peticiónMejorar la UX mobile de sus WordPress.
Creamos un theme mobile usando Reactinstant navigation & swipe.
![Page 6: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/6.jpg)
#Som
osW
CC
O
https://blog.gudog.com
![Page 7: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/7.jpg)
#Som
osW
CC
O
150% Páginas vistas
Excelentes resultados
88% Incremento de tráfico orgánico (SEO)
80% Incremento de tiempo de sesión
66% Incremento en adquisición de usuarios
![Page 8: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/8.jpg)
Frontity Framework2019 - Salto al Open Source.
#Som
osW
CC
O
![Page 9: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/9.jpg)
El framework de React para WordPress
Frontity es la mejor herramienta para crear webs combinando WordPress y React.
#Som
osW
CC
O
![Page 10: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/10.jpg)
Headless WordPress
![Page 11: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/11.jpg)
Ventajas de usar React
● Componentes reutilizables
#Som
osW
CC
O
![Page 12: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/12.jpg)
Componentes & Hooks
![Page 13: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/13.jpg)
Componentes & Hooks
![Page 14: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/14.jpg)
Componentes & Hooks
![Page 15: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/15.jpg)
Componentes & Hooks
![Page 16: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/16.jpg)
Ventajas de usar React
● Componentes reutilizables
● Código declarativo
#Som
osW
CC
O
![Page 17: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/17.jpg)
Imperative Code
![Page 18: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/18.jpg)
Imperative Code
![Page 19: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/19.jpg)
Declarative Code
![Page 20: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/20.jpg)
Ventajas de usar React
● Componentes reutilizables
● Código declarativo
● Single codebase
#Som
osW
CC
O
![Page 21: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/21.jpg)
Single Codebase
![Page 22: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/22.jpg)
Single Codebase
![Page 23: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/23.jpg)
Ventajas de usar React
Developer Experience
#Som
osW
CC
O
● Componentes reutilizables
● Código declarativo
● Single codebase
![Page 24: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/24.jpg)
Developer Experience
#Som
osW
CC
O
Mejores websMenos tiempoMenor coste
WordPressRevolucionó la Developer Experience
![Page 25: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/25.jpg)
#Som
osW
CC
O
Mejor UX
Mejor rendimiento
Mejor mantenimiento
Menor coste
![Page 26: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/26.jpg)
#Som
osW
CC
O
La mejor Developer Experience para el equipo técnicoGracias a React
El mejor CMS para el equipo de contenidoGracias a WordPress
La mejor UI & UXpara el lectorGracias a React
![Page 27: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/27.jpg)
Frontity FrameworkPrimeros pasos
#Som
osW
CC
O
![Page 28: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/28.jpg)
Primeros pasos
#Som
osW
CC
O
● frontity.org
● community.frontity.org
● docs.frontity.org
![Page 29: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/29.jpg)
Primeros pasos
#Som
osW
CC
O
docs.frontity.org/getting-started/quick-start-guide
Quick Start Guide:
![Page 30: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/30.jpg)
Primeros pasos
#Som
osW
CC
O
● test.frontity.org
● yoursite.com
● yoursite.wp.com
![Page 31: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/31.jpg)
Frontity FrameworkFuncionalidades principales
#Som
osW
CC
O
![Page 32: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/32.jpg)
#Som
osW
CC
O
Zero setup SEO Friendly
Extensible Battle tested
Babel, Webpack, Routing… Server Side Rendering
Temas y extensiones Frontity PRO, millones de PV
Frontity Framework
![Page 33: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/33.jpg)
#Som
osW
CC
O
WordPress.com & WordPress.orgSoporte para ambas APIs
Frontity Framework
![Page 34: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/34.jpg)
GatsbyJSPrincipales diferencias
#Som
osW
CC
O
![Page 35: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/35.jpg)
#Som
osW
CC
O
![Page 36: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/36.jpg)
#Som
osW
CC
O
100% enfocado en WP
Opinionated
Renderizado Dinámico
Extensibilidad
State Manager
![Page 37: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/37.jpg)
Nuestra Visión
#Som
osW
CC
O
![Page 38: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/38.jpg)
#Som
osW
CC
O
React + WordPressPermanecer en WP
Headless WordPressMás RobustoPreparado para el futuro
![Page 39: para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación de interfaces modernas ... Frontity PRO #SomosWCCO Una red de blogs nos contactó](https://reader035.fdocuments.in/reader035/viewer/2022062610/6120745e654b8677bd5340d5/html5/thumbnails/39.jpg)
GRACIAS!
@iamposti @frontity
#Som
osW
CC
O