para WordPress DESARROLLO con Frontity React frontends · 2020. 9. 16. · Facilitar la creación...

Preview:

Citation preview

React frontends para WordPresscon FrontityPablo Postigo · @iamposti

DESARROLLO

#Som

osW

CC

O

#Som

osW

CC

O

Pablo Postigo · @iampostiIngeniero Informático, emprendedor & Foodie.

Frontity CEO & Co-fundadorFacilitar la creación de interfaces modernas para WordPress

#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

Frontity PRO2017 - Los orígenes de Frontity.

#Som

osW

CC

O

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.

#Som

osW

CC

O

https://blog.gudog.com

#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

Frontity Framework2019 - Salto al Open Source.

#Som

osW

CC

O

El framework de React para WordPress

Frontity es la mejor herramienta para crear webs combinando WordPress y React.

#Som

osW

CC

O

Headless WordPress

Ventajas de usar React

● Componentes reutilizables

#Som

osW

CC

O

Componentes & Hooks

Componentes & Hooks

Componentes & Hooks

Componentes & Hooks

Ventajas de usar React

● Componentes reutilizables

● Código declarativo

#Som

osW

CC

O

Imperative Code

Imperative Code

Declarative Code

Ventajas de usar React

● Componentes reutilizables

● Código declarativo

● Single codebase

#Som

osW

CC

O

Single Codebase

Single Codebase

Ventajas de usar React

Developer Experience

#Som

osW

CC

O

● Componentes reutilizables

● Código declarativo

● Single codebase

Developer Experience

#Som

osW

CC

O

Mejores websMenos tiempoMenor coste

WordPressRevolucionó la Developer Experience

#Som

osW

CC

O

Mejor UX

Mejor rendimiento

Mejor mantenimiento

Menor coste

#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

Frontity FrameworkPrimeros pasos

#Som

osW

CC

O

Primeros pasos

#Som

osW

CC

O

● frontity.org

● community.frontity.org

● docs.frontity.org

Primeros pasos

#Som

osW

CC

O

docs.frontity.org/getting-started/quick-start-guide

Quick Start Guide:

Primeros pasos

#Som

osW

CC

O

● test.frontity.org

● yoursite.com

● yoursite.wp.com

Frontity FrameworkFuncionalidades principales

#Som

osW

CC

O

#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

#Som

osW

CC

O

WordPress.com & WordPress.orgSoporte para ambas APIs

Frontity Framework

GatsbyJSPrincipales diferencias

#Som

osW

CC

O

#Som

osW

CC

O

#Som

osW

CC

O

100% enfocado en WP

Opinionated

Renderizado Dinámico

Extensibilidad

State Manager

Nuestra Visión

#Som

osW

CC

O

#Som

osW

CC

O

React + WordPressPermanecer en WP

Headless WordPressMás RobustoPreparado para el futuro

GRACIAS!

@iamposti @frontity

#Som

osW

CC

O

Recommended