1 of 48

Frontity Framework:

Introduction to building

React frontends for WordPress

�WordCamp Los Angeles 2020

​

2 of 48

Who am I?

Pablo Postigo @iamposti�Software Engineer, Entrepreneur & Foodie��Frontity CEO & Co-Founder�Make it easier to create modern UX with WordPress

3 of 48

Frontity PRO

�How all this started back in 2017

4 of 48

Frontity PRO

React mobile theme with �instant navigation & swipe.

WordPress publishers request: �Improve the UX of their mobile sites.

5 of 48

Frontity PRO

https://blog.gudog.co.uk/

6 of 48

Frontity PRO

Great results ����

150% Pageviews�88 % Organic traffic increase (SEO)�80 % Increase time spent�66 % increase in user acquisition

7 of 48

Frontity Framework

�Open Source transition in February 2019

8 of 48

The React framework for WordPress

Frontity is the easiest way to create lightning fast websites using WordPress and React.

9 of 48

Headless WordPress

10 of 48

Frontity – Embedded mode

11 of 48

Frontity – Embedded mode

12 of 48

Why React?

13 of 48

Why React?

  • Reusable Components��

14 of 48

Components and Hooks

15 of 48

Components and Hooks

16 of 48

Components and Hooks

17 of 48

Components and Hooks

18 of 48

Why React?

  • Reusable Components
  • Declarative code�

19 of 48

Imperative Code

20 of 48

Imperative Code

21 of 48

Declarative Code

22 of 48

Why React?

  • Reusable Components
  • Declarative code
  • Single Codebase

23 of 48

Single Codebase

24 of 48

Single Codebase

25 of 48

Why React?

  • Reusable Components
  • Declarative code
  • Single Codebase

26 of 48

Developer Experience

27 of 48

Developer

Experience

Better Websites�Less time �Lower cost���WordPress�Revolutionized Developer Experience

28 of 48

Developer

Experience

Better Websites�Less time �Lower cost���WordPress�Revolutionized Developer Experience

29 of 48

Better UX��Better Performance��Easier to Maintain��Lower Cost

30 of 48

WordPress + React

Great Developer Experience for the tech team�Thanks to React

Great CMS Experience �for the content creator.�Thanks to WordPress

Great UI & UX�for the visitor.�Thanks to React

31 of 48

How to start with Frontity

32 of 48

How to start with

Frontity

  • frontity.org
  • docs.frontity.org
  • community.frontity.org

33 of 48

How to start with

Frontity

Quick start guide:

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

34 of 48

How to start with

Frontity

test.frontity.org

yoursite.com

yoursite.wp.com

35 of 48

Frontity Framework

Key Features

36 of 48

Frontity Framework - Key features

Zero setup SEO Friendly���

Key Features

Extensible Battle tested�

Babel, Webpack, Routing…

Server Side Rendering

Themes & extensions

Frontity PRO, Millions of PV

37 of 48

Frontity Framework - Key features

WP.com & WordPress.org

Key Features

Support for both APIs

38 of 48

GatsbyJS

​

Key differences with Frontity

39 of 48

Frontity Framework - Key differences with Gatsby

40 of 48

Frontity Framework - Key differences with Gatsby

100% WordPress focus

Opinionated

Dynamically Rendered

Extensibility

State Manager

41 of 48

Showcases

42 of 48

Frontity Framework - Showcases

  • Big Media Publisher�10M Pageviews / month
  • WordPress VIP

https://www.aleteia.org

43 of 48

  • Guttenberg
  • Embedded mode
  • Open Source

Frontity Framework - Showcases

https://frontity.org

44 of 48

Frontity Framework - Showcases

  • Frontity Multisite
  • 4 languages
  • wp.com backend
  • React Team

https://www.crowdfarming.com/es/blog

45 of 48

docs.frontity.org/showcases

46 of 48

Our vision

47 of 48

React + WordPress�Stay with WordPress���

Headless WordPress�Stronger�Future Proof

48 of 48

Pablo Postigo

CEO & Co-Founder @ Frontity.org

​

@iamposti https://frontity.org