Forem: Frontity Framework

Moving to Frontity: Diariomotor Case Study

Reyes Martínez — Tue, 18 May 2021 12:56:11 +0000

About Diariomotor

Diariomotor is a digital publication which in-depth provides coverage of the automotive world, featuring news, reviews, opinion articles and Formula 1.

Founded in 2005 by Óscar Miguel and Daniel Seijo with the goal of combining their passions for cars and technology, Diariomotor has evolved over the years into one of the leading automotive publications in Spain.

In 2020, a particularly tough year for this industry because of the pandemic, it reached over 131 million page views. That is between 10 and 12 million page views each month on average.

Diariomotor runs two separate websites powered by WordPress and Frontity under the same domain: Diariomotor and Diariomotor Competición. The second one is a WordPress blog dedicated solely to providing news and information about motorsports.

Challenges

Simplifying web development and maintenance

Prior to using Frontity, Diaromotor had up to three different versions of its website.

Besides a desktop version with its custom layout, it had a mobile theme powered by an external publisher platform which showed news and regular posts, but which omitted a customized section called 'Coches'. This section, which contains 'cards' (custom post types) with information about car brands and prices and which is crucial to Diariomotor's project, wasn't supported by the publisher platform they were using, hence requiring them to have a separate mobile version for it.

Within this scenario, the team was grappling with ongoing development challenges and suffering from inefficient workflows which restricted agility. One of the priorities at Diariomotor was to unify and simplify the development and maintenance of their websites.

Taking back control of the code

The team at Diariomotor has a strong culture of iterating, experimenting, and innovating. They frequently look for and try new ways of interaction, content formats, and campaigns to learn what works best and helps boost Diariomotor's growth. When implementing new ideas, the team likes to have an exhaustive control over the code changes and to track the impact of those changes on analytics. They analyze the before and after pictures of even the smallest changes.

The main issue was that the team no longer had complete control over its code: they were dependent on a third-party platform for everything related to their mobile website. This publisher platform could make unexpected changes to the code without prior notice. The consequences of the proprietary lock-in were sometimes costly, especially when something was broken or compromised, and their metrics were affected. In addition, the development team was required to open support tickets in order to make any changes or improvements to their own mobile website.

These were all frustrating problems that added unnecessary time and pain to the team's workflow. They soon realized that this solution wasn't the most optimal for their needs. Moreover, it hindered the flexibility and speed they needed to experiment, adjust and make changes as new requirements and ideas emerged.

Focusing on performance

At Diariomotor, where the revenue model is based on advertising, site speed and performance are two critical factors to its success. As such, the team is constantly searching for the best ways to optimize them, and provide a great news experience for their readers.

Besides a solution that would enable them to tackle the above issues, the team at Diariomotor wanted a modern tech stack with a strong performance-oriented approach which would allow them to get the best possible results.

Adopting Frontity

At the end of 2019, Diariomotor CTO Javier Serrano began leading the migration of Diariomotor with the goal of overcoming the challenges they were having with their legacy tech stack.

He had known about Frontity since its initial release and had already looked into it well before the migration. When considering which solution to move to, Javier found the framework very easy to get started with, despite not being familiar with React, and decided to run some tests with it.

After a few months of learning and testing, he had enough confidence in Frontity to migrate Diariomotor to a modern frontend environment. Rather than starting a greenfield project, the development team liked the idea of building their application using an open source framework which could connect to WordPress and could easily be extended to fit their needs.

From kickoff to launch, the project led by Javier took a little over a year. The team rolled out the migration in two main phases. They started by moving the motorsports blog Diariomotor Competición to Frontity and launched it in March 2020. Nine months later, they managed to complete the migration of the Diariomotor.com site. Both sites are hosted in Stackscale, which has support for WordPress and Node.js.

Diariomotor now uses one Frontity multisite installation for the two websites. This enabled the team to simplify the diverse structure of the legacy tech stack, and to unify everything under just one project consisting of a single codebase.

The new sites take advantage of such Frontity functionalities as the Infinite Scroll hooks and the REST API - Head Tags package to add support for the All in One SEO WordPress plugin.

In addition, the dev team made use of the Code Splitting feature supported by Frontity to split large libraries and load them only when needed (on demand), thereby avoiding ending up with a large bundle and improving the performance of the application.

In order to integrate third-party services, such as Google Analytics and Comscore, they adapted several Frontity packages to their own requirements.

Thanks to Frontity's extensibility Diariomotor can reuse all these packages across their sites, helping them reduce both development time and maintenance workloads. Moreover, whenever they need to add new functionality or expand the capabilities of Frontity, they can use any of the existing Frontity and npm packages without having to build them from the ground up.

Because of its impact on SEO and UX, there was a final requirement the team at Diariomotor needed to address after the migration: the WordPress redirects. These are key to help catch and correct incorrect URLs. Since last February, Frontity supports this feature out of the box, allowing developers to configure and handle both client-side and server-side WordPress redirects quite easily. This helped Diariomotor set up the necessary redirects quickly, and take one more concern off the table.

Going forward, they are interested in taking advantage of the Google AMP package for Frontity (currently in development).

The two layer cache system

One of the things that Javier found particularly useful and that he values most about Frontity is the ability to have independent cache invalidation strategies for the WordPress REST API and the Frontity application, impacting positively both on performance and on the server load.

For a better understanding, let's explain how this two layer cache system works:

Both the WordPress REST API and the HTML generated by Frontity are aggressively cached.
When the team deploys a new version of the site, which can happen several times a day, they only invalidate the HTML cache, but not the REST API cache.
The Frontity application uses the REST API to get the necessary data, but those requests never hit WordPress, they hit the REST API cache, which means that generating the new HTML is really fast and cheap.
Finally, both the REST API and the HTML caches are invalidated selectively when a post is created or updated, which means that any change in the data is instantly reflected in the frontend.

The result of this two-layer system is that the WordPress load is reduced by several orders of magnitude.

Everything is as fast and as performant as possible.
The server load is as low as possible.
Content updates are instantly reflected in the frontend.

This technique is similar to static site generators in the sense the HTML and REST API assets are only generated once and then served from a cache. The main difference is that the generation of those assets happens on the fly, instead of at build time, so this technique has no penalty for large sites such as Diariomotor, which has almost 500.000 URLs indexed by Google.

Key benefits and results

Diariomotor needed to migrate an existing production project, a challenge that comes with its own difficulties. But the challenge was even greater considering that the team had no previous experience with React.

Frontity not only took all of their problems off the table but also made the whole learning process easier. It enabled Diariomotor to adopt a modern frontend architecture effectively, eliminating time-consuming maintenance and development workstreams, and freeing the team to focus on performance and growth. Plus, they have taken back control of their project's code.

Apart from the ease of getting started with the framework, Javier found the support of the Frontity team and the forum resources especially helpful throughout the migration.

The improved developer experience is one of the biggest benefits that Diariomotor has gained from using the framework, allowing them to develop faster, to have more productive workflows, and to avoid common pitfalls.

"While working on this project I found many complex things that Frontity simplified and made easy. For example, the handlers make it really easy to make complex calls. Or not having to deal with the state manager, just managing it with Frontity Connect is magic."

Javier Serrano, Diariomotor CTO.

Along with a great developer experience, Javier highlighted the flexibility Frontity has brought to their frontend development, especially the ability to create, and to experiment with, components and libraries easily. The team has regained the power to explore and implement new formats and campaigns with agility and speed.

Core Web Vitals improvements

In addition to the above advantages, since moving to Frontity Diariomotor has observed significant improvements in performance and in its Core Web Vitals metrics.

The Core Web Vitals are a set of metrics introduced by Google that quantify key aspects of the user experience such as load time, interactivity, and the stability of content as it loads.

This is great news for Diariomotor since these page experience signals are becoming a ranking factor for search results and a criterion to appear in Google Top Stories in mid-June 2021.

The following screenshots, which have been taken from Diaromotor's public Chrome UX Report, show real user experience data on Diariomotor based on three main metrics: Largest Contentful Paint (LCP), First Input Delay (FID), and Cumulative Layout Shift (CLS).

Largest Contentful Paint (LCP)

The LCP measures the perceived load speed.

If we compare January 2020 (legacy site) vs. January 2021 (with Frontity), Diariomotor has seen a 4.2% increase in the number of indexed URLs which have a 'good' LCP score (they take 2.5 seconds or less to load). More interesting is the fact that the number of pages that score a poor LCP have been reduced by 55.9%.

First Input Delay (FID)

According to web.dev, the FID metric helps measure users' first impression of the site's interactivity and responsiveness.

In January 2021, 94.3% of Diariomotor's pages were classified as 'good' (FID was 100 milliseconds or less). In comparison to the same period last year they have observed a 72.2% decrease in pages classified as 'poor FID'.

Cumulative Layout Shift (CLS)

The CLS metric takes into account the visual stability of a page.

Comparing January 2020 (legacy site) vs. January 2021 (with Frontity) again, Diariomotor has experienced a significant increase (128.7%) in the number of pages with a good CLS score (0.1 or less). On the other hand, pages classified as 'poor' have been reduced by 48.8%.

With these improvements, Diariomotor is already in a favorable position to work on further performance optimizations and provide their visitors with a great user experience.

"Now with Frontity we have one code (installation) for both websites, a fully responsive site and we have already seen performance improvements without doing anything special. Plus, the developer experience is great, maintaining the code is much easier."

Javier Serrano, Diariomotor CTO.

Diariomotor is no longer stuck with the legacy tech stack that made their websites hard to maintain and difficult to improve.

Migrating to Frontity has allowed Javier and his team to steer clear of the previous headaches and drive the evolution of Diariomotor, putting them on the path to both better performance of their application and more productivity from their team.

This case study was prepared based on an interview with Javier Serrano, CTO at Diariomotor.

Thank you to all the Diariomotor team for bringing their expertise and experience around the table and for contributing to make Frontity better by providing feedback, testing features, and reporting bugs among many other things.

Case Study: Migrating Aleteia to Frontity

Reyes Martínez — Tue, 23 Feb 2021 17:25:14 +0000

Background

Aleteia is an online Catholic publication launched in 2013 and currently distributed in seven languages (English, French, Portuguese, Spanish, Italian, Polish and Slovenian).

With more than 670,000 subscribers to their newsletter and more than 4 million fans on Facebook, Aleteia reaches over 13 million unique visitors and draws 40 million page views per month, making it the most popular Catholic website in the world.

In May 2020 Andrea Romano, Chief Technology Officer at Aleteia, contacted us to let us know that his team was discussing the opportunity to migrate all their websites to Frontity. Both the digital publishing industry and user behavior have evolved quickly during the last years. They wanted a performant, flexible, and modern stack to improve their web experience and meet today's users expectations.

Although it's been only a few months since they finished the migration to Frontity, we wanted to talk with Andrea to know how it went and how Frontity has helped them so far.

Project needs

After Google’s algorithm core changes as well as Facebook’s strategy to give less organic post visibility on the news feed, Aleteia's global traffic wasn’t growing as expected at the beginning of 2020. Andrea and his team identified some areas of improvement, and one the biggest one was related to web performance and SEO.

"Site speed is a ranking factor, and it’s especially critical for mobile pages. Slow websites have a lower number of conversions, a lower number of page views per visit, and higher bounce rates. Essentially, a slow site means people will bail because no one has the patience to wait for a website to load."

Andrea Romano, CTO at Aleteia.

We met Andrea in late 2018, when he approached us to learn more about our previous product (Frontity PRO) and how it could positively impact on Aleteia's performance and UX. Since then, the idea of building a React theme has been hanging over his head.

The traffic drop made the need for a modern web app a priority. Google just announced new metrics to evaluate how users perceive the experience of interacting with a web page, and they were also worried that their website could be penalized in the future. It was time to update the tech stack to correspond to the team needs.

While their previous stack was stable, it lacked flexibility. In order to improve the overall web experience, Andrea aimed to move Aleteia to a modern frontend which they could have more control over while maintaining the WordPress backend. They also needed something that would integrate well with all the services used by Aleteia.

Lastly, they wanted a technology partner who could support them during the process. We have been in contact with Andrea for some time now. He already knew the benefits that Frontity brings for digital publishers as well as our dedication to help them succeed.

When the time came to make a decision on the frontend stack, Frontity and our team just gave them the confidence they needed.

Approach

Andrea's first approach for upgrading Aleteia's website was to develop a whole new custom theme in React using Frontity. However, as any greenfield project of this magnitude, they quickly realised that this was going to require a longer time frame.

In order to address some of the above concerns quickly, the development team finally decided to put their efforts into migrating their WordPress theme to Frontity first. This would help simplify the process.

As soon as we knew about their decision we connected Andrea with Eduardo Campaña, who formerly worked at Frontity. They hired him as a freelancer to work on the project along with their two in-house engineers, who were new to Frontity.

According to Andrea, Eduardo's help and guidance was fundamental in their transition to Frontity. He enabled the team to quickly get up and running with the framework and its development practices.

In just a couple of months, they managed to complete the migration of all their websites. That is seven websites in total (one per language), including the implementation of several packages to integrate their analytics and ads partners, as well as their GDPR and web push notifications services.

Frontity's extensibility and its package management interface made this integration more efficient and allowed the team to continue using their preferred services.

Aleteia's current tech stack is:

WordPress multisite as backend for managing the content.
One Frontity multisite installation which serves the content from their websites.
WordPress VIP Go enterprise hosting platform with Node.js support.

You can visit Aleteia's main website at [aleteia.org](https://aleteia.org/).

Right now, Andrea and his team are working on adding premium content for paid subscriptions. They will keep adding progressive enhancements and features to Aleteia during the next months.

Among the reasons for choosing Frontity, Andrea's particular emphasis was on the support and expertise from our team. "We didn't choose Frontity only for technological reasons. One of the key factors which convinced us to use it was the team behind it, because they gave us a sense of real support" he said. Andrea also recognised that the fact of being invested by Automattic was a plus that reaffirmed his confidence in the project.

"I truly believe in the people. If the team is well prepared, I trust in what they are building. And the people who work at Frontity is what makes it unique."

Andrea Romano, CTO at Aleteia.

Outcomes

Frontity brings a lot of advantages that go beyond performance, SEO, and scalability. A great developer experience when it comes to creating a more complex UI among the top ones.

Going for WordPress and Frontity in the stack ensured that Aleteia doesn't spend time re-inventing the wheel and that they get the best possible results in the short term.

A seamless migration

Frontity helped the migration run smoothly, which allowed Aleteia's team to reduce the development time to two months and accomplish their goals in a very short period of time.

While they still have bigger plans with the framework, switching to Frontity was already a great first step in evolving their website, and it helped them cut the time it takes to migrate seven editions.

"Everything went smoothly and in just a couple of months we were able to publish all the websites. I recommend using Frontity because it significantly helps minimize the development time. The product is solid and stable."

Andrea Romano, CTO at Aleteia.

A powerful, extensible frontend stack

Aleteia now uses the latest in frontend technologies and provides a greater overall user experience.

They are armed with a performant website that is easier to maintain, allows them to handle iterations easily, and gives them room to implement new features and third-party integrations as new requirements emerge.

"One of the best things about Frontity is that it's very flexible. Even a complex website like Aleteia, with seven editions and different packages between them, is quite easy to tweak."

Eduardo Campaña, developer in the Aleteia project.

In addition, because Frontity is rendered dynamically, it makes it a great fit for medium and large scale publishers like Aleteia with a lot of content that might change rapidly, giving them a great power and reliability when it comes to frequent and real-time updates.

The same robust editorial experience

Lastly, moving to Frontity meant no interruption to Aleteia’s publishing workflow. This is especially important for teams that produce many pieces of content every day, as even the smallest impact on their workflow can pay dearly.

With the new decoupled approach only the development team at Aleteia works directly with Frontity, leaving the content editors to continue working in WordPress as if nothing had changed.

We are proud to see what Aleteia has accomplished in such a short time. Special thanks to Andrea Romano and his team for taking the time to share their story with us, and for contributing to make Frontity better with their feedback.

This project has allowed even a closer collaboration between both teams, and we look forward to growing together.

Announcing a New Version of the Frontity Docs

JuanMa — Mon, 22 Feb 2021 17:03:18 +0000

Documentation is one of our key priorities here at Frontity and we want it to be the best possible resource for the community.

Since the formation of the Frontity Developer Relations team almost one year ago, Michael and I (JuanMa) have been analyzing and consulting with the rest of the team and with the community about how the documentation could be improved and made more effective.

After several months of work, we're excited to announce that we have revamped the documentation to bring you more helpful resources and improve your experience with Frontity.

In addition to the recently announced step-by-step tutorial, we've published a new API reference site and reorganised the docs across three different sites:

Before explaining these changes in detail, let us tell you more about the reasons behind them. If you can't wait to see what's new, feel free to jump ahead to this section.

Why are we making these changes?

The goal of the changes we've made is to provide you with the most useful information in the most appropriate context as and when you need it. The new structure will make it easier for you to understand and consume the information presented in the documentation, and will also make it easier for you to find and apply the knowledge in your own projects.

Following the analysis and the various conversations we had we detected that:

We lacked a good tutorial that could guide any developer interested in learning Frontity through the process of creating a theme from scratch whilst also covering the most important features of a Frontity project.
We needed to separate out two types of documentation that were mixed together in the same place:
- API Reference docs: these are more detailed and technical explanations that can be easily used as a reference when developing a Frontity project.
- Guides docs: these are practical and theoretical explanations that could help our users to fully understand the potential of Frontity and that could guide them in the development of their projects.

After arriving at these conclusions we decided to split the documentation across three different sites that represent the distinct purposes or functions that good documentation should fulfil, namely: tutorial, reference, and conceptual understanding.

Previously all the information was lumped together in one place, making it hard to find the precise bit of information that you needed, or to distinguish between what was intended to be conceptual understanding and what was intended to be reference.

What's new?

New structure with separate sections

The new structure of the documentation will provide you with three separate sections, each of them can be found under a separate sub-domain of frontity.org:

Tutorial → [tutorial.frontity.org](https://tutorial.frontity.org/)
Conceptual understanding / Guides → [docs.frontity.org](https://docs.frontity.org/)
API Reference → [api.frontity.org](https://api.frontity.org/)

1. Tutorial

Found under the tutorial sub-domain this is our recently published step-by-step guide. This is the site to visit if you're new to Frontity and looking to learn how to develop sites using Frontity, or if you've previously worked with Frontity but feel that your knowledge is fragmented or incomplete.

The tutorial teaches web development with Frontity in a progressive and sequential way. It is primarily a didactic resource. You can learn more about it in this blog post.

2. Docs / Guides

This section can be found under the docs sub-domain where all the documentation previously resided. This is where you should go if you want to deepen your conceptual understanding of how Frontity works and how a Frontity project should be implemented.

As well as theoretical information, such as Frontity architecture, you can also find some practical guides here. For example how to deploy a Frontity site or troubleshoot your Frontity project. Some practical how-to's will also be coming to this section in the near future.

In addition to the above we have here useful introductions to JavaScript/ES6 and React in case you need to get up to speed with these.

3. API Reference

The API Reference is where you go when you want to look up a specific piece of information that you need in order to implement your Frontity project in the most efficient and effective way. This section will primarily be used by those developers who know what they are looking for and need to find it quickly.

This section can be found under the api sub-domain. Read on to learn more about this newest addition to the documentation.

New API Reference site

Whereas the step-by-step tutorial is focused on learning Frontity, the focus of the API Reference is instead on providing technical information and detailed descriptions of the tools available for a Frontity project.

We've divided the content into four primary sections: CLI, Packages, Themes, and WordPress Plugins.

Frontity CLI

Almost every Frontity project will start in the terminal at the command prompt. This section is where you'll find comprehensive information about the commands, and the command line options, provided by the Frontity CLI that you can use to create, run and build your Frontity projects.

Packages

Packages are the building blocks of your Frontity project. They're NPM packages which implement specific logic required by the project. Included here are references for Frontity core, the source package (@frontity/wp-source), the router package (@frontity/tiny-router), amongst others.

Themes

In reality a Frontity theme is just a special instance of a Frontity package. At root everything is a package when you're working with Frontity.

However most developers working on a Frontity project will primarily be working on a theme. We have therefore afforded the built-in themes (@frontity/mars-theme and @frontity/twentytwenty-theme) their own dedicated section of the API Reference.

WordPress Plugins

In order to get the most from headless WordPress there will be times when you will want to add functionality to the backend server. At these times you will need to install a PHP-based WordPress Plugin.

Oftentimes Frontity plugins will extend the REST API to provide additional content that you can use in your Frontity project. Information on using and configuring these plugins in WordPress, and consuming the data in Frontity, can be found in this section.

We're not done yet...

This is just the beginning of several improvements we plan to add to the documentation.

Over the last year the DevRel team have been working on what we refer to as the "Frontity Learning Experience". Work on this led us to consider what might be the best way to explain and present the knowledge required to work with Frontity.

The result of this research was that we derived certain conclusions regarding what content was needed by Frontity developers, and what was the best way to structure it. The continuing implementation of these results will be the DevRel team's top priority during the current calendar year.

Keen to dig in? Great! Check out the new docs and let us know what you think of the new structure.

Contributions to improve the documentation are always welcome. The Frontity docs are housed on GitHub and you can suggest changes and improvements at any time by following these contributing guidelines.

Learn Frontity with the New Step-by-Step Tutorial

Michael Burridge — Mon, 08 Feb 2021 15:31:09 +0000

We’re delighted to announce Frontity's new step-by-step tutorial, a learning resource designed to guide you through the creation of a Frontity project from start to finish.

The goal of the tutorial is to provide you with a deep and solid understanding of web development with Frontity.

It can be found at tutorial.frontity.org.

What is the step-by-step tutorial?

The Frontity step-by-step tutorial is a progressive sequence of lessons that takes you from the absolute basics to a solid understanding of Frontity, how it works, and how to develop themes and other functionality with Frontity.

The tutorial is designed for those developers who are newcomers to Frontity. However, it will also be extremely useful for those who may have been developing with Frontity for a while but who feel that they lack a complete and wholistic understanding of working with Frontity, who feel that their knowledge is instead fragmented and incomplete.

Each lesson in the tutorial builds on what was learned before and so it is intended that you should work through the course in the order in which it is presented.

Upon completion of the tutorial you will have gained a comprehensive understanding of working with Frontity, thereby enabling you to approach the development of a Frontity project with confidence.

Why are we launching this tutorial?

There are many third party blog posts introducing Frontity available on the web, such as this one, this one, or this one.

Although these are great introductory posts, they usually cover little more than installing Frontity and configuring it to connect to a WordPress site as its data source.

We also have the Getting Started guide and the documentation, which help you jump straight into code and configure Frontity to your needs, but there was a need for a more comprehensive guide to learn and understand Frontity in a structured and progressive way.

The lack of such of a comprehensive guide meant that developers learned to work with Frontity in a piecemeal kind of way, checking the documentation in one situation, consulting a code sample in another, or asking in the community forum when they got stuck.

Developers therefore frequently felt a bit lost, or as though they were figuring things out as they went along rather than coding confidently with the feeling that they knew what they were doing.

The goal of this tutorial is to help developers who are working with Frontity to have that confidence and to be self-sufficient as they work on their projects, by providing them with a solid understanding of what they are doing, and why.

What can you expect from it?

You will learn to work with Frontity by building a fully working Frontity theme, starting from scratch.

While pre-built themes are available, such as the bundled mars-theme and twentytwenty-theme, or a variety of third party themes, the best way to develop a solid understanding of Frontity is by building a theme from the ground up.

Many developers have learned to work with Frontity in an ad-hoc and experimental way by hacking one of these pre-built themes.

The tutorial teaches and reinforces best practice by showing you how to build a theme from scratch.

Starting from the very basics by installing Frontity and creating a theme package, the tutorial goes on to create a fully-featured and functional theme, that is also pleasingly styled.

Along the way a number of different topics are covered, from listing posts, to displaying posts and pages, to styling the project and adding interactivity. The tutorial even shows how to make a Frontity project SEO friendly, refines the theme with some finishing touches, and demonstrates how to use Custom Post Types.

As you work through the course you can compare your code at each stage with the corresponding commit in this repo, so you'll always be sure that you're on the right track.

Theoretical topics are also covered, so that you will develop an understanding of the structure of Frontity's "state" and the prescribed method of accessing data in that state.

The finished project is then deployed to a live server so that you can not only show off your achievement to the world, but also use it as the basis for your own project. Yes indeed, the project developed during the tutorial can be considered a "starter theme" that you can go on to build upon and make your own.

A preview of the finished site and the final version of the code can be seen in this CodeSandbox.

Ready to get started? Great! Check out the new tutorial at tutorial.frontity.org and do let us know what you think of it.

Frontity's step-by-step tutorial docs is housed on GitHub - you can suggest changes and improvements at any time by following these contributing guidelines.

Introducing the Frontity Public Roadmap Page

Reyes Martínez — Fri, 22 Jan 2021 09:24:59 +0000

We're excited to share with you the Frontity Roadmap page: a new page where you can learn more about Frontity's public roadmap and how to keep track of the framework updates.

A step towards more transparency

During last year we shipped more than 20 releases, including features and packages to make adding functionality to your Frontity projects easier. We also improved the Feature Discussions category of the community forum to explain the meaning of each feature status.

However, we know that it was still not easy to keep track of what we're going to be shipping. We have to admit that there is room for improvement in the way we communicate the roadmap and what you can expect from Frontity.

The main goal of having this page is to share our internal planning for features development and give as much visibility as possible. We're aware that with more transparency into what we're building, Frontity users, partners, and agencies can also plan better.

We're continuously improving Frontity and shipping new features with a strong focus on quality. The Roadmap page will be maintained and reviewed on a quarterly basis accordingly. It contains the features we're working on to release in the coming months, and the "why" behind each (the goals those new features are addressing).

Why a mid-term roadmap

A long-term roadmap is usually a less specific plan that paints a picture of where the product might go. While our vision and product strategy is clear, we cannot give precise dates nor guarantee specific features in the long-term.

A short or mid-term roadmap is not 100% fixed either. Obviously things happen and priorities may shift. As an open-source project, there are also bugs and issues that need to be fixed on a regular basis. However, we feel that it's a more accurate roadmap, with a summary of real and tangible goals that will help give the community greater visibility into what's next.

What's coming in Frontity

As you can see from the new page, during the next months we'll be focused on features such as the server extensibility, the Frontity WordPress plugin, and the version 2.0 of the source package, among others.

All of them will bring significant developer experience improvements. Others are specifically designed to improve the framework core. We believe this will ease the development and integration of other Frontity packages in the future.

The Frontity roadmap is the result of an ongoing discovery and prioritization process that involves user interviews and feedback from publishers, partners, and those who use the product.

If you are a Frontity user and want to help shape the roadmap, please feel free to join the community forum and share your feedback and suggestions with us. We are constantly looking for ways to make the experience with Frontity the best it can be, so we highly value all input.

Stay in the loop

Apart from the roadmap, we also included some resources where you can keep track of our work, stay informed about what's new, and get involved. In summary:

Feature Discussions

These are conversations where we research and discuss the implementations of a feature. The idea of each FD is to give you more information and details about a feature and its status. They are public so everyone is welcome to join in and share feedback. You also can suggest new features by opening a new topic, or vote for those which you are most interested in.

Releases

In general, you can expect a new release every 15 days, although this time may vary slightly depending on the features which need to be finished. To be notified when new releases or features are out, you can subscribe to the Releases forum category or to the 'Released' tag instead (this way you will be only notified of the features that are tagged as 'released').

Alternatively, in order to stay up-to-date with the most important updates, community projects, and content surrounding the framework, you can always subscribe to the newsletter.

Sprints

The dev team organizes their work in sprints of 4 weeks, and divides it into specific tasks. To know what they are currently working on, take a look at the GitHub boards or at the summary of the sprint that's in progress in the community forum.

We hope you can have more visibility on upcoming features with the new Roadmap page, and that it helps you build successful projects with Frontity.

If you have any questions or comments about the Roadmap page, feel free to share them here.

Frontity 2020: A Year in Review

Reyes Martínez — Mon, 28 Dec 2020 13:41:48 +0000

Here we are at the end of 2020, and what a year it's been!

Despite the circumstances and the challenges that we've all faced over recent months, we feel lucky that our work hasn't been negatively impacted by the pandemic.

2020 has actually been an exciting and busy year for Frontity. We're proud of what we and Frontity's amazing community have accomplished so far. Before the New Year, we wanted to take a look back over some of our biggest updates and the milestones that shaped 2020 for us. Let's get into them!

Framework updates

Over the course of the last year we've shipped more than 20 releases.

To start the year we rolled out the 1.0 version of the Twenty Twenty Frontity Theme, with pagination, proper status codes, and other CSS improvements.

Apart from addressing many other improvements we also continued to make adding functionality to your Frontity projects easier by releasing different packages and features, including:

Frontity Yoast Package, which adds support for the REST API output of Yoast SEO plugin (14.0 or newest versions).
WordPress Comments Package, to support native WordPress comments.
First beta version of both the Google Ad Manager Package and the Smart AdServer Package, both of which allow you to integrate ads from these servers with Frontity really easily.
New <Link> component and the auto-prefetch feature to easily speed up navigation (a huge thank you to @nicholasio for this contribution!).
Analytics Packages, to add Google Analytics, Google Tag Manager, and Comscore to your Frontity projects.
Beta version of the infinite scroll feature (thanks to @orballo for his work and improvements on this hook!).
A Slot component which can be used to fulfil the "Slot and Fill" pattern.
A Switch component to improve the routing between pages.
REST API - Head Tags Plugin and Package, to add the meta tags generated by some of the most popular WordPress SEO plugins to the REST API output and get automatically all the data in Frontity.

As part of the upcoming Frontity PHP plugin, we also created a Proof of Concept of the Frontity Embedded Mode with post preview support. This offers a new way to use WordPress and Frontity together under the same domain by embedding the React theme. By using this mode, you don't have to worry about all those things which are difficult to replicate in a traditional headless setup (like instant cache invalidation, CORS, or redirections, among many other benefits).

In addition, we released new guides and demos, improved the documentation, and we also introduced Frontity Talks. Frontity Talks is a series of videos created by our DevRel team to demonstrate and explain a variety of different topics related to Frontity.

Last but not least, we launched a brand new frontity.org website this year. Built with Gutenberg and Frontity, this was a great opportunity for us to learn more about the new WordPress editor and leverage its strengths. Mario, our Product Manager, recently published this blog post in order to share the process we followed and all the things we learned from the experience.

We've got some exciting things planned for 2021. There are already some features on the horizon, such as server extensibility, version 2.0 of the source package, and Frontity hooks, all of which will bring significant developer experience improvements. We'll be following up with our roadmap for the coming months soon!

Thank you for contributing code, helping improve the documentation, giving us feedback, helping answer questions in the community, or simply for just using the framework. This has enabled much of the progress we've made this year.

Company updates

In April, we announced a €1M funding round with Automattic and K Fund. Frontity was born around the idea of building great web experiences with WordPress and React easily. Getting financial backing has allowed us to invest more effort in helping deliver on our mission, and make the project sustainable.

We also started to collaborate with a number of WordPress hosting companies to make it easier to deploy your Frontity websites on your preferred hosting platform. Pantheon's new Decoupled Bridge is a good example in this direction. Here's a quick demo of how this solution works with Frontity.

In October, we launched a partnership program to collaborate and join forces with various WordPress agencies. 10up, one of the largest WordPress-centric agencies in the world, was the first partner to join in. We can't wait to do more together!

To end the year, Frontity was featured in Runa Capital's ROSS Index as one of the fastest-growing open-source startups for Q3 2020.

Community

In the last year, we've seen more than 40,000 NPM downloads and 1200 stars on GitHub. Also, more than 500 members have joined the community forum.

You have built some beautiful Frontity starter themes, including:

F1 Starter Theme (by AWSM)
Frontity Starter Theme (by Alexandra Spalato)
Frontity Dimension Theme (by Mathieu Mencé)
Frontity Chakra Theme (by Segun Adebayo)

And also many, many other awesome projects!

The Showcase Page includes examples from big online publications such as Aleteia and Diariomotor to personal projects. Go check them out if you haven't yet!

But that's not all. During the last 12 months, you have written blog posts and guides, made video tutorials, and helped spread the word about the framework around the globe.

So far we have seen talks about Frontity in six different countries! We're grateful for all these amazing contributions from the community. Please keep them coming! 🙌

Our team also had the chance to get involved in online gatherings with the WordPress community and with other open-source communities this year. Because of the growth of online events, we could attend and speak at many local meetups and conferences from around the world, including WordCamp Europe, JSNation Live, WordCamp Los Angeles, and WordCamp Colombia.

We gave 14 talks, hosted 2 workshops, and supported the JavaScript for WordPress Conference and JSNation Live as sponsors.

Looking Forward to 2021

We couldn't have done all this without you helping us out in such a multitude of ways. Thank you so much for being part of Frontity and for all your support over the past year. 💙

We are excited to be kicking off a new year and can't wait to share with you all that we have planned for it!

Happy New Year from all of us at Frontity! See you in 2021!

Connecting Gutenberg and Frontity

SantosGuillamot — Fri, 27 Nov 2020 09:37:40 +0000

This is a written version of the "Connecting Gutenberg and Frontity: A Case Study" talk that I gave at the 2020 JavaScript for WordPress Conference. You can find the slides here and watch the full talk on Youtube.

Gutenberg (also known as the block editor) is already being used by many WordPress users. Rolled into WordPress 5.0, it has reinvented the experience of creating and managing content in WordPress.

In this talk, we walk you through the process we followed to rebuild our website (frontity.org) with Gutenberg and Frontity. We share all the challenges and lessons learnt, and what we considered to be the best approach to solve them.

Introduction:

Why use Gutenberg and Frontity together?
Goals of the process

Connecting Gutenberg and Frontity:

How did we implement it?
1. Adapting Frontity to Gutenberg
2. Block patterns
3. Template parts
4. @frontity/html2react

Conclusions:

What went well
Lessons learnt and next steps

Introduction

Why use Gutenberg and Frontity together?

As you already know, WordPress as a publishing tool is great. That is one of the main reasons why it's widely used for different websites. In addition, Gutenberg opened a new paradigm which is revolutionizing the way we build, edit, and publish online. Its goal is to make the publishing experience even easier.

By using Gutenberg with a React framework like Frontity, you can benefit from the best of these two worlds.

First, you will get a great editing experience thanks to WordPress and Gutenberg. Frontity allows you to maintain the publishing workflow with all the awesome functionalities that are already made for the WordPress editor.

On the other hand, because Frontity is based on React, you will be able to create more complex user interfaces while having a great developer experience. In the same way that WordPress usage is increasing each year and is the most popular CMS, React is becoming a popular library for taking over front-end development.

Lastly, thanks to Frontity's unique approach, combining WordPress and React has never been easier. The framework deals with all the setup needed like Babel, WebPack, the WordPress REST API, the routing... so that you can focus on building your React theme.

If you are interested in knowing more about why Frontity can be a great fit for your project as well as our vision, take a look at this introductory talk about the framework that our co-founder Pablo gave at the JavaScript for WordPress Conference.

Goals of the process

Before starting the migration, we defined the project's goals and requirements that we needed to keep in mind during the whole process. This helped us prioritize and make other decisions later.

Explain Frontity better

After discontinuing the development of Frontity PRO (our previous product) in order to focus on Frontity Framework, we hadn't updated our website to reflect the changes to the product. We felt that the new framework wasn't being properly explained. We had been working on new features which were not mentioned in the homepage, and some of the benefits of using Frontity weren't clearly expressed. For these reasons, our first and main goal was to redesign the whole website to explain everything better and start getting more traction.

Make everything editable from Gutenberg

Sometimes when developing a website, you are tempted to hardcode specific parts of the content or layout that you don't plan to update frequently. An example could be the header or the footer of a website. This can be even more tempting in a headless setup, where some aspects might be a bit more difficult to implement.

In our case, we wanted the marketing team or any other member of the team to be able to easily change the website's copy, or to add or delete sections in the future without having to rely on the dev team. Such flexibility was an essential requirement for us. In the end, this is what a CMS like WordPress is for, right?

Create new pages easily

This is closely related to the previous point: we wanted the ability to create new pages in an easy way. Not just simple pages, but also more complex ones in which we could reuse different layout elements. We thought that, with a proper implementation, we should be able to build nice landing pages just by reusing some patterns of the homepage.

We knew this was going to be another requirement at some point (for building the 10up partner page or similar ones, for example). And again, we didn't want anyone to have to depend on the dev team to do this.

Find the best way to connect Gutenberg and Frontity

Frontity aims to solve all the challenges that a headless setup may cause. For this reason, we want to ensure that Frontity's integration with the WordPress block editor is as smooth as possible. This was the perfect opportunity to understand it better, learn from our own experience, and work on solutions for any issue we might encounter.

Connecting Gutenberg and Frontity

How did we implement it?

We based the implementation on 4 important aspects and reasons.

Adapting Frontity to Gutenberg. This allowed us to use the block editor just as it is.
Block patterns. This enabled us to reuse layout elements in different parts of the website easily.
Template parts. This made it possible to edit common elements that are used in all pages (e.g. the header or footer).
@frontity/html2react. This allowed us to add React logic to any HTML element we wanted.

1. Adapting Frontity to Gutenberg

1.1. How Gutenberg works?

In order to find the best way to connect Frontity and Gutenberg, we had to understand first how Gutenberg works:

Add any block from the WordPress editor

Just as they do in any WordPress site, users can create their desired layout using the block editor. They first select the blocks they are going to use, and then define their specific properties. There are Gutenberg blocks for almost everything, and each block has different properties. For example, the paragraph block has a property to change the text colour, and in the image block you'll find properties to change the image's size or alignment. Similarly with the video block, which has different properties to change the controls or activate the autoplay functionality.

In our case, we didn't find anything that we couldn't already do with the built-in Gutenberg blocks. This means that we didn't have to create any custom blocks for our website, which made the implementation much easier.

Gutenberg outputs the HTML adding some classes

Once the user saves a post, Gutenberg outputs the HTML and adds different classes to match each block's properties defined by the user. It doesn't output the block attributes but valid HTML.

This is important because, in the end, both Gutenberg and React are basically just HTML. In other words, we don't have to link each block with React. The Gutenberg HTML, with the classes it adds, is available in the REST API and is fetched by Frontity automatically. This allows Frontity to work with it in the same way it works with any common post. It doesn't require any further integration. We just have to add React logic to the HTML elements we want.

This is an example of the image block, aligned to the right:

<figure class="wp-block-image alignright size-large">
  <img
    src="..."
    class="wp-image-6616"
    alt="AWSM F1 Frontity Theme screenshot"
    ...
  />
</figure>

Gutenberg adds two css files to match that classes

In order to match the layout defined in the editor, Gutenberg creates two css files which add the logic to style the post. Since Frontity is already getting the HTML from the REST API, this is great because we just have to add these files in our Frontity theme to match the classes output in the HTML. From there, Gutenberg is already supported, and we simply have to add React logic to the HTML elements we want.

This would be the css that matches the previous example:

.wp-block-image .alignright {
  float: right;
  margin-left: 1em;
}

There are two exceptions that are not included in these files: colour palette and font sizes.

In Gutenberg, you can define a theme palette (a set of colours) in order to select your own colours in the block editor. Gutenberg will create the new class has-$slug-color but this won't be included in the theme.css and style.css. So we have to make it match from within Frontity. We can add our own colours by adding this simple snippet to WordPress:

add_action( 'after_setup_theme', 'prefix_register_colors' );
function prefix_register_colors() {
    add_theme_support(
        'editor-color-palette', array(
            /* Frontity colors */
            array(
                'name'  => esc_html__( 'Frontity', 'nude' ),
                'slug' => 'frontity',
                'color' => '#1f38c5',
            ),
            array(
                'name'  => esc_html__( 'Primary', 'nude' ),
                'slug' => 'primary',
                'color' => '#0f1c64',
            ),
        )
    );
}

The same happens with the different font sizes. You can define your own set of font sizes to replace the default ones, and Gutenberg will add the class has-$slug-font-size with this simple snippet:

add_theme_support( 'editor-font-sizes', array(
    array(
        'name'      => __( 'Large', 'nude' ),
        'shortName' => __( 'L', 'nude' ),
        'size'      => 20,
        'slug'      => 'large'
    ),
    array(
        'name'      => __( 'Medium', 'nude' ),
        'shortName' => __( 'M', 'nude' ),
        'size'      => 16,
        'slug'      => 'medium'
    ),
    array(
        'name'      => __( 'Small', 'nude' ),
        'shortName' => __( 'S', 'nude' ),
        'size'      => 14,
        'slug'      => 'small'
    )
) );

Imagine we have a paragraph, then we change the font size to medium and we select the frontity color, previously included in our theme palette. Gutenberg will output something like this:

<p class="has-medium-font-size has-frontity-color has-text-color>
  My formatted paragraph
</p>

1.2. How to adapt Frontity to this workflow

Knowing this, in order to integrate Gutenberg in your Frontity project you just have to add the styling logic which is lacking, as the HTML output by Gutenberg will be available in the REST API.

This is how we did it. First, we added the content of the theme.css and the style.css files that Gutenberg creates. The content of both files is available in the SVN repository, and you can select any version of Gutenberg you are using. Once we had this logic, we created these two css files in our Frontity theme, and we imported them into the index.js file:

import { connect, css, Global, Head, styled } from "frontity";
...
import gutenbergStyle from "./styles/gutenberg/style.css";
import gutenbergTheme from "./styles/gutenberg/theme.css";

const Theme = ({ state }) => {
  const data = state.source.get(state.router.link);

  return (
    <>
      <Global styles={css(gutenbergStyle)} />
      <Global styles={css(gutenbergTheme)} />
      ...
    </>
  );
};

export default connect(Theme);

After doing this, everything added from Gutenberg was supported except the colours and the font-sizes. As previously mentioned, we had defined our own colour palette and font-sizes.

In order to match the different colours we had created, the first step we took was to add them to Frontity state as well. To do so, we added them to state.theme.colors in the index.ts file of our theme. Now they were accessible from any part of our Frontity project. Apart from this, we created two processors (explained later): one for the text-color, and other for the background-color that extracts the colour which is used and, looking into state.theme.colors, adds the css needed for this.

Moreover, we created a new util named addAlpha (used in these processors) to add opacity to these colours if a specific class is matched. This isn't supported by Gutenberg yet, so we decided to implement it ourselves.

On the other hand, to match the font-sizes, we added the css we wanted for the specific classes. We did it using a processor, but this can be done directly in the css files:

.has-small-font-size {
    font-size: 14px;
    line-height: 20px;
}

.has-medium-font-size {
    font-size: 16px;
    line-height: 24px;
}

.has-small-font-size {
    font-size: 20px;
    line-height: 32px;
}

And that's it. Now that we had connected Gutenberg and Frontity, we just needed to add the React logic to the HTML elements we wanted.

2. Block patterns

From the Gutenberg side, we realised that we were using the same layouts in different parts of the website. We wanted to be able to reuse them in an easy way, not only for the existing pages but also for future ones. After some research, we decided to use Block Patterns for this purpose.

Block patterns are basically a group of Gutenberg blocks that have been combined together to create a page layout. Once you have created a block pattern, it can be reused throughout your website. That is, you can combine different blocks with different properties, create a pattern and placed it anywhere you like. Then you will only have to change the content within it.

A good example of a block pattern can be found in the "Why Frontity?" section. As you can see, all the feature items follow the same pattern: they have an icon with a squared background, a heading 4, and a paragraph with medium font size. Instead of building each item from scratch, we created a block pattern with the required properties and reused it to list each of the different features.

2.1. How to create block patterns

Here's the code that you can include in your functions.php or in a Code Snippet. However, for a more detailed explanation, please check the Block Patterns documentation.

<?php

register_block_pattern(
   'pattern-slug',
   array(
       'title'   => __( 'Pattern name' ),
       'content' => '...Gutenberg HTML...',
   )
);

After adding this simple function, the patterns that you've created will appear in the Gutenberg editor. In order to create the HTML, what we did first was to create the patterns using the visual editor. Then we changed the properties that we needed. Once we had considered them finished, we switched from the visual to the code editor and copied and pasted the HTML. Doing things this way made everything much easier.

For this you don't have to do anything in your Frontity project. This only affects the Gutenberg editing experience.

2.2. How to use them

Once we had created the patterns, it was really easy to use them in the Gutenberg editor. On the same button that you use to add blocks there's a new tab named Patterns where you can find the ones that were previously defined.

3. Template parts

The Gutenberg plugin in its experimental version creates a new Custom Post type named Template Parts, which is an important part of block-based themes. We decided to use it for the common elements on every page, such as the footer or the header.

As they are a CPT, we can edit them just as we do with any other post or page, and WordPress then outputs the content in the REST API. For example, if we create a Template Part for the footer using WordPress, we can fetch the content in this endpoint: https://frontity.org/wp-json/wp/v2/template-parts?slug=footer.

After creating all the template parts that we needed, the next step was to fetch them in our Frontity app and make sure they were available for every page. In order to achieve this, we had to:

Include the Template Parts CPT in the frontity.settings.js file. As we're including /blog/ for the post permalinks, we had to add that as well.
Create an array in the index.js file of our theme to define all the template parts that we wanted to fetch.
Create a Frontity action to fetch all these template parts Before Server Side Rendering.

At this point, our Frontity state already had the content of all the template parts. Now we just had to create the React components that would consume this content. For example, we created the <Footer /> component for the footer template part.

4. @frontity/html2react

Finally, in order to add React logic to just the HTML elements where we wanted to create a more complex interface, we used the @frontity/html2react package. This package not only parses all the HTML content, but also allows you to hook into any HTML element that you want to extend or modify.

It does this based on two important aspects: nodes and processors.

4.1. html2react nodes

Nodes are the JavaScript objects the package returns once you have hooked into an HTML element with all the information about it. Let's imagine we have this small piece of HTML and we hook into it:

<div class="wp-block-group jsforwp">
   <h4>Heading</h4>
   <p>Paragraph</p>
</div>

What we are going to get in our React app is this object:

{
 "type": "element",
 "component": "div",
 "props": { "className": "wp-block-group jsforwp" },
 "children": [ 
   { heading-object },
   { paragraph-object }
 ]
}

As you can see, all the information about the HTML element is still available. We have the HTML tag and all its attributes, so we can do whatever we want. We even have the children object and, although it's not included here because it's a simple example, we could find the properties of the parent attribute as well.

4.2. html2react processors

Processors are the place where you specify which HTML element you want to hook into, and how you want to modify it. For a deeper explanation, please take a look at our docs. Below is a very quick summary:

name: just the name of the processor.
priority: this allows you to select which processors should run before the others.
test: this is the function to select which HTML elements you want to hook into. It's basically an if statement. If test is true, then the processor runs.
processor: this is the function where you apply any modification you want. Here you can change the styles, add new children, or change it into a full React component for example.

Here's a quick example based on the previous case. Here we are telling our app: if you find an element with the class "jsforwp", then run the processor. And in the processor function we are making some changes.

const jsforwp = {
 name: "jsforwp",
 priority: 10,
 test: ({ node }) =>
   node.type === "element" &&
   node.props?.className?.split(" ").includes("jsforwp"),
 processor: ({ node }) => {
   //Change styles
   node.props.css = css`background: blue;`;

   //Add a new children
   node.children.unshift(Logo);

   //Substitute it for a React Component
   node.component = NewJSforWP

   return node;
 },
};

4.3. Use cases

The above approaches allowed us to add React logic to any element in the content, which is pretty powerful. Let's take a look at some examples on our own website.

Lazy load

In order to improve the performance, we decided to lazy load the heavier elements like videos, iframes, or tweets. This way we don't load them until the user is close to reach them when scrolling. Instead of doing this with PHP, we did it with html2react. For example, we created a processor that hooks onto any video element, and swaps it for a React component that uses a Frontity hook to lazy load it.

import { Element,Processor } from "@frontity/html2react/types";

import LazyVideo from "../components/lazy-video";

export const lazyVideo: Processor<Element> = {
  name: "lazy-video",
  test: ({ node }) => node.type === "element" && node.component === "video",
  processor: ({ node }) => {
    node.component = LazyVideo;

    return node;
  },
};

You can see above that we are importing the <LazyVideo /> component. This is basically the same HTML we received but using the useInView hook, where we are not loading the video until we are 600px above it:

import useInView from "@frontity/hooks/use-in-view";
import React from "react";

const LazyVideo = ({ children, ...props }) => {
  const { ref, inView } = useInView({
    rootMargin: "600px",
    triggerOnce: true,
  });

  return (
    <>
      <video ref={ref} {...(inView && props)}>
        {children}
      </video>
    </>
  );
};

export default LazyVideo;

Web browser layout

We decided to add a top bar to some elements of the website to make it look as if the element is inside a web browser window. This was useful for images or iframes for example, and prevented us from having to create it for every element.

The top, grey bar and the three dots, which simulate the browser window, aren't added to the image or the iframe directly. Instead, we added this HTML with React by creating this processor:

import TopBar from "../components/window-top-bar";

export const webBrowser = {
  name: "web-browser",
  test: ({ node }) =>
    node.type === "element" &&
    node.props?.className?.split(" ").includes("has-browser-window"),

  processor: ({ node }) => {
    const topFrame: Element = {
      type: "element",
      component: TopBar,
      props: {},
      // we need to pass empty props, because other processors might
      // expect `.props` to exist
    };

    node.children.unshift(topFrame);

    ...

    return node;
  },
};

As you can see, we added the component <TopBar /> to the children array. And if you take a look at the component, you also will see that we just added the HTML for the bar and the dots with some styles:

import { css, styled } from "frontity";
import React from "react";

const Dot = styled.span`
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 5px;
  border-radius: 100%;
  background-color: rgba(15, 28, 100, 0.2);
  vertical-align: baseline;
  margin-top: 12px;
`;

const WindowTopBar = () => (
  <div
    css={css`
      height: 32px;
      padding-left: 10px;
    `}
  >
    <Dot />
    <Dot />
    <Dot />
  </div>
);

export default WindowTopBar;

Now we have the possibility to add this window effect to any element by adding the class has-browser-window.

We are following a similar approach for the buttons and links on our website. Apart from reusing them in different sections, we wanted to display the Frontity monogram logo before the text.

Since we didn't want to have to add it manually to each button and link from within Gutenberg, we instead created a processor to deal with this. This processor adds the Frontity monogram by default unless we add another icon from Gutenberg or specify that we don't want an icon.

Terminal

This is another example (more complex than the previous ones) of how we used use JavaScript with Gutenberg. If you take a look at the different code blocks that we have, they all look similar.

Apart from adding the layout in a similar way to the previous example, we're using a JavaScript library named Prism for the syntax highlighting. Rather than defining the colors for each piece of code from Gutenberg, it's Prism.js which takes care of this and makes sure they look similar. It works with any code block.

And you can go even further. For example, we're using another React library, react-typist, to load the terminal letter by letter in the homepage's hero. While the commands are editable from WordPress, the effect is made with React (with one of the multiple npm packages that are available).

Newsletter

This is the last example and probably the most complex one of our website. At the bottom of each page, we included a form to subscribe to the Frontity newsletter. We also did this with React rather than PHP.

If you fill out the first form (the email address field), a second form will be loaded and then the "Thank you" message. This is connected with our Google Tag Manager account and the email services. Although the form's content is editable from WordPress, the logic to manage all this was, again, made with React.

Conclusions

What went well

In general, we were able to achieve most of our goals. Knowing that the main purpose was to explain Frontity better, we considered it a success and are happy with the end result. In addition, the design implementation was great. Here are some of our conclusions.

✔️ Gutenberg features were really helpful

Although we had already worked with Gutenberg, there were many different use cases to address in this migration and we were somewhat concerned about it. However, some of Gutenberg's latest features, such as the Block Patterns or the Template Parts, were really helpful in connecting Gutenberg with Frontity and facilitated much of the process.

✔️ We managed to make everything editable from WordPress

We can now edit everything from the WordPress editor. Even the command lines, the header or the footer (which in many websites are hardcoded) are editable in our case. This is great because it allows us to leverage the great editing experience and all the benefits of Gutenberg while using Frontity.

✔️ Creating new pages is easy

This is related to the previous point too. Creating new landing pages from scratch, or reusing the block patterns and styles that were already created for the homepage, is pretty easy now. In addition, we don't have to rely on the development team to make these changes. A couple of great examples are the About Us page and the 10up Partner page, both of which we built afterwards without coding anything.

Here's a quick demo of how we created a new page from scratch:

✔️ There was nothing that we couldn't do

In Frontity PRO, our previous product for big publishers, we had already tested this approach and the @frontity/html2react package worked great. But there were a lot of new, different use cases this time that hadn't been developed before. The good news is that, after creating many diverse processors, we were able to do everything with the built-in Gutenberg blocks and html2react. There are still things to improve and there might be use cases that we didn't cover for sure, but the experience has been great so far.

Lessons learnt and next steps

1. In some parts, we struggled to deal with the CSS that Gutenberg adds as well as to overwrite its styles. One of the things that might be causing this problem is that we add all the css directly to our Frontity app. We would like to work on a Frontity - Gutenberg package that deals with the CSS and solves this. This would allow you to select the Gutenberg plugin version styles that you want to import and add the css used in each page. There's an open conversation about this in this Feature Discussion.

2. We decided to use html2react processors for too many things. In the end, using them for every single Gutenberg block that we wanted to modify doesn't seem right. Writing processors for adding styles to HTML classes feels strange, like an extra step between CSS and HTML. If we start a similar process again, we would consider if some of these processors could be moved to global css.

Apart from this, it would be great to have some generic processors for basic tasks, like adding styles. Also for improving the Html2React API by adding a better way to select elements and modify them. We might want to add higher abstractions for common uses cases:

CSS-only processors: if we feel that adding css with the processors is the proper approach, it would be useful to have a nicer API while keeping everything hackable. We are already talking about this here.
Transform parent-child HTML nodes into parent-child React components: this would ease the way we add React logic to some elements. There's an ongoing conversation here.
Reuse processors between different projects: sometimes there are interesting processors that could be reused in different projects. For example, the way we are importing the Prism.js library for the code blocks, could be useful for other users. We are also discussing about the best way to share them here.

3. Gutenberg is still in an early stage and we had to code functionalities which might be solved by the block editor in the future. For example, the util we created for adding opacity to the colors it's something that could be added from Gutenberg.

4. Finally, we want Frontity to be updated with all the upcoming Gutenberg functionalities. Some of its latest features, such as the Block Patterns or the Template Parts, have already been very useful for us. We will keep track of the updates and continue exploring the best way to integrate them with Frontity.

Actually, we are currently researching the block-based themes and the Full Site Editing experience the Gutenberg team is working on. We really like what they are achieving, and it would be really powerful to integrate Frontity with a block-based theme.

Closing words

We hope this post gives you a better understanding of how we integrated Gutenberg and Frontity, and how they can work together. We do believe this is a powerful approach to leverage the power of the block editor as well as to combine the best of WordPress and React.

In order to fully understand the html2react package, we recommend you take look at our docs. If you are curious to see frontity.org's code, here's the public GitHub repository.

For any other questions you might have, hit us up on Twitter or our community forum. We will be happy to help!

_This post was originally published at frontity.org/blog.

Announcing Frontity's Partnership with 10up

Reyes Martínez — Fri, 23 Oct 2020 15:53:28 +0000

Frontity is a free and open source React framework for WordPress. You can learn more at docs.frontity.org.

A few days ago, we officially launched a new initiative we are really excited about: our Agency Partner Program. As an open source platform, collaboration is key to ensure the framework's growth but also to build a strong product and community. With that purpose in mind, we started to have some conversations and join forces with different WordPress agencies who share our vision and values.

Today, we are thrilled to announce our partnership with 10up, one of the largest WordPress-centric agencies in the world and a leader in building headless CMS experiences.

About 10up

10up is a digital agency that aims to make a better web with finely crafted websites, apps, and tools for content creators, leveraging open source technologies like WordPress and React. The company's portfolio includes projects with brands such as Microsoft, Google, and Facebook.

Furthermore, 10up is also well known for its many and different contributions to open source projects, including Frontity.

In addition to the Link Component and Auto-Prefetching features, one of their most recent contributions to the framework is the ElasticPress package, which allows you to enhance your Frontity theme by supercharging the search experience with ElasticPress. You can add this functionality to your Frontity project just by installing the package, without having to modify your theme (this is one of the greatest things about Frontity's extensibility!). Kudos to 10up for their fantastic work on it!

Why are we partnering with 10up?

Nowadays, publishers have a big challenge ahead of them with users demanding better experiences in the digital space. Since we launched Frontity Framework last year, dozens of WordPress publishers have asked our team about consulting services and for help on their migration to Frontity. It was great to see an increasing interest in using Frontity at an enterprise-level but, unfortunately, we didn't have an efficient way to help them all and fulfil the custom requirements these projects usually need.

One of the main goals of this partnership is to connect these companies who are looking for professional guidance with 10up's team of experts.

As a contributor to the core Frontity framework, 10up’s dedicated team of JavaScript and WordPress engineers, web strategists, designers, and audience and revenue consultants can help design, build, and monetize a performant, modern, digital platform that meets your business needs both today and in the future.

On the other hand, we aim to help 10up grow their business by bringing in new opportunities, support them as they work with Frontity and empower their development team. They are already familiar with Frontity but thanks to this new partnership, they'll have a deeper understanding and knowledge of what the framework is able to provide for their clients.

A win for the project

We're really excited to share expertise with such a great team as the one at 10up, and believe that their knowledge, strengths and contributions will have a very positive impact both on Frontity Framework and on its open source community.

When companies share the same values, they can work together to better solve challenges. This is what collaboration is about. Having the support of one of the brightest agencies in the WordPress space is not only the best way to inaugurate our Agency Partner Program but also to keep pushing our mission of helping people build websites with WordPress and React easily.

We're just getting started and can't wait to do more together!

We invite you to visit the 10up Partner Page to learn more about how they can help support your Frontity project needs. If you have any questions, feedback, or would like to know more about this partnership, do not hesitate to get in touch.

This post was originally published at frontity.org/blog.

We're sponsoring JSNation Live 2020

Reyes Martínez — Thu, 18 Jun 2020 12:49:09 +0000

Frontity is a free and open source React framework for WordPress. You can learn more and get started at docs.frontity.org.

We are very happy to be sponsoring this year's JSNation Live (June 18-19), the biggest JavaScript conference in the cloud. This is such a great opportunity to connect with fellow developers of the JavaScript community.

Here's everything you need to know about Frontity's presence at JSNation Live.

We're hosting a talk

Our co-founder Pablo Postigo is giving a lightning talk on "Building React frontends for WordPress" this Thursday, June 18 at 19:10 CEST. Check out the full schedule and get your free ticket here: https://live.jsnation.com/.

Virtual booth and live demos

Our DevReal team members JuanMa Garrido and Michael Burridge are hosting a few live demos at our virtual booth. They will show you how to create a basic project with Frontity using one of the default themes, look at creating a custom component and styling it. Finally they will show how to deploy the project to production. After each demo, there will be a short Q&A session. Get your questions ready!

Here's the schedule of the live demos:

Day 1 - Thursday, June 18

17:25 CEST
18:55 CEST

Day 2 - Friday, June 19

17:20 CEST
18:50 CEST

Over the two-day event, we'll be hanging out at our virtual booth and interacting with the community. Feel free to stop by to say hi, join our live demos or learn more about Frontity.

Frontity JSNation Contest

We are running a contest for the JSNation Live attendees. In order to participate, you have to build a website with Frontity (you can use a Frontity theme as a basis or create your own custom theme) and submit it before the 3rd of July.

All entries will get a swag bag (who doesn't want a Frontity t-shirt and stickers? 😄 ) and two lucky winners will receive a consulting session with the team. We also encourage you to show your work to the world with the hashtag #MadeWithFrontity.

Check out the Frontity JSNation Contest page for more details on how to enter and the contest rules. We look forward to receiving your submissions!

Workshop: Build a React-based Theme for WordPress with Frontity

Last Monday, June 15, our DevRel Michael Burridge hosted a 3-hours workshop on how to create a React-based theme for WordPress using Frontity. It was a great experience and we received very positive feedback.

For anyone who missed the workshop, you can watch it now on Youtube. The code and the steps that Michael followed can be found on this GitHub repo.

https://youtu.be/QFY3GPfoKR4

We look forward to seeing you at the JSNation Live! 🙂

This post was originally published at frontity.org/blog.

New Frontity Showcase Page

Reyes Martínez — Tue, 16 Jun 2020 12:30:29 +0000

We’re excited to share with you Frontity's new Showcase page: a gallery to discover what the community is building and give more visibility to your Frontity projects.

Why a Showcase page?

We at Frontity are curious to see what you are building using the framework, and it's the same for people in the community and those who just find out about Frontity. They want to see examples, what they can create with the framework, and hear about other's developers experience, specially when they are choosing a tech stack or considering different tools for their projects.

For this purpose, we have this category in the community forum, where users can share their projects and feedback on Frontity. However, over these months, we realized that most people are unaware of this section.

In an effort to help discover what the community is building, give more visibility to all projects and make it easier to add yours, we have created a new Showcase page in our website. In addition, you can see the projects in a more visual way now.

Why share your Frontity site?

There are many reasons for you as a developer to share what you have built with Frontity. Let me list some of them:

Your work matters and it can be a great motivation to encourage other developers. There can be users who are still baffled as to how using React for a WordPress site. Your work can help them understand how you're using Frontity and what can be accomplished with it.
You have the opportunity to showcase your talent. This opens doors to connect with other people. If you're a freelancer, agencies or clients looking for developers to build a website with Frontity can find you easily.
It's free publicity for you or for your brand: sharing your project will allow you to get more visibility and recognition.
Inspire and be inspired: the Showcase section is a great place not only to inspire others with your work but also to get inspiration for your future projects and get a feel of new designs, approaches, etc.
It's a way to get constructive feedback from other developers if you wish, which will allow you to enhance your personal and professional growth.

Sometimes you might think that your work is not good enough to be shared, that it has nothing of note to offer, or that it has a lot of room for improvement. That's fine, there's no pressure to share your work if you don't want to. Just remember, there's no such thing as a perfect project. You are probably your harshest critic, so give yourself some credit! 🙂

How to add your website

There are two main ways to add your Frontity project to the Showcase page.

The first and the easiest one is to fill out this form with your site's information. That's it. We will review your submission and feature your project in the Showcase page.

Alternatively, you can share your project in the community forum. Simply go to the Showcase category, open a new topic and write a post with a link to your website or npm package. Here are some ideas to include in your forum post.

We look forward to seeing your projects with Frontity! 🙌

This post was originally published at frontity.org/blog.

Announcing Frontity's €1M Funding Round with Automattic and K Fund

Reyes Martínez — Wed, 22 Apr 2020 16:13:59 +0000

We are thrilled to announce that Frontity has raised a €1M funding round led by Automattic (the parent company of WordPress.com and WooCommerce) and the venture capital firm K Fund, with participation from significant business angels of the Spanish startup ecosystem.

Before telling you more about what this investment means for us and the future of Frontity, let’s briefly look back to understand better what brought us to where we are today. If you already know our story, feel free to jump ahead to learn more about the funding round. 🙂

Our Story

As of late 2017, some WordPress publishers approached us with the same concern: despite their best efforts, their WordPress sites on mobile devices were slow. In order to help them improve their site’s performance and user experience, we developed a mobile WordPress theme based on React specifically for their needs.

The results of this theme, which we called Frontity PRO, were very satisfactory. After installing it, publishers saw a significant improvement in both their performance and visitor metrics (x2 increase of page views, lower bounce rates). For those curious, a few months ago we published this case study on how Gudog's blog has grown by 88% with our theme.

During 2018, Frontity PRO was used in more than 50 news sites and served more than 40 million page views. Every new project with a WordPress publisher helped us learn from each use case as well as battle test the internal framework we had built in order to create that theme.

At the time we were working on this, there was no easy way to connect WordPress and React and we had to face a lot of development challenges. That made us think that if we put all our experience and knowledge into an open source project, anyone trying to solve the problems that we had already faced could benefit.

This is how Frontity, the first React framework exclusively built for WordPress, was born.

Frontity’s unique approach strips away the complexity that entails connecting both WordPress and React, and gives you a big head start by providing many of the most common queries already built in. This way you can focus on building your website or blog instead of all the tooling and configuration.

Since officially open sourcing the framework in May 2019, it has quickly grown in usage. More than 250 developers have already joined the community and started using Frontity for their projects. We could have never imagined this support in such a short time!

Since May 2019, Frontity has seen more than 12,700 npm downloads.

What does this investment mean?

Making WordPress with React easier

Frontity was created around the idea of making it easier to build fast, scalable websites with WordPress and React.

Getting financial backing for the startup means that we can invest more effort in helping deliver on our mission. It will help us improve the framework development, roll out new features faster, and grow the community around it by providing more resources to collaborate and learn.

In addition, we are already planning to collaborate with different WordPress hosting companies to make it easier to deploy your Frontity sites on your preferred hosting. If you are interested in joining forces, feel free to contact us. 😉

Pushing the headless WordPress web forward

We believe that during the coming years there will be a big transition towards decoupled architectures and that React will play a key role in WordPress to build better, modern user experiences. This investment is really important to us because it validates our vision and work.

Having the support of Automattic will allow us to connect and collaborate with their partners to support larger projects and bring decoupled WordPress and Frontity to a wider audience.

This will not only open up new opportunities to keep pushing the headless web forward, but also help us position Frontity as a framework of reference within this context.

Offering a great developer experience

We know documentation is a key part of the user experience and we haven't been quite up to the task yet. Good news is that our newly formed Developer Relations team is already taking care of it, working on more guides, tutorials and learning resources! 🙌

Frontity's business model

Now that we’ve raised a round of funding, it’s natural to ask questions about the Frontity’s business model or revenue stream for us as a company.

Since we are not developing any business model during this initial phase, this funding round was the best way for us to make the project sustainable. It is worth mentioning that it doesn’t mean in any way a move away from open source. We are an independent company and have complete autonomy on our strategy.

Frontity framework is open source, and will always remain open source. We'll never release any framework feature as paid-only.

Possible monetizations that we are thinking of to generate revenue in the future and add value to the community are a hosting solution, premium support, or a marketplace of paid themes.

The Frontity Team

Thank you for making this possible!

We’d like to thank all our investors, advisors, and the team of the Google for Startups Residency Program for their help and for believing in us, both in the project and the team. We raised money from an incredible group of people and feel truly grateful and honored to have Automattic (one of the best WordPress companies in the world) and K Fund (one of the best venture capital firms in Spain) as investors.

Finally, thank you to Frontity's amazing community for joining us on this journey. For sharing your knowledge, helping us improve the framework, building such awesome projects with Frontity, and inspiring us each day. 💙

Can't wait to build this new Frontity chapter with you all!

This post was originally published at frontity.org/blog.

Introducing Twenty Twenty Frontity Theme (v1.0)

Reyes Martínez — Mon, 16 Mar 2020 18:34:00 +0000

Frontity is a free and open source framework for building headless WordPress sites using React. Check out the documentation here.

We are happy to announce that we recently released the 1.0 version of the Twenty Twenty Frontity theme!

The Twenty Twenty default WordPress theme was included in WordPress 5.3 "Kirk" (out on November 12), and ported over to Frontity by the software engineer and designer Segun Adebayo.

According to Segun, the theme development was easy and fast. It took him less than one week to release the beta version of the theme port. Although he knows React, this was the first Frontity theme ever made by him.

The Twenty Twenty theme is based on the Anders Noréns’ free theme Chaplin, and was designed with a special focus on Gutenberg.

Along with the Twenty Nineteen and the Frontity Chakra Theme, the Twenty Twenty theme is a great option if you prefer to use a theme as the base for your site instead of starting one from scratch. If you are new to the framework, it will also allow you to get your site up and running easily.

You can see the Twenty Twenty Frontity Theme in action here.

Homepage view in Twenty Twenty Frontity theme.

Twenty Twenty’s Theme Features

Apart from its amazing performance, this theme comes with some other nice features:

Accessibility Ready

The theme is accessible and screen-reader friendly. We added the proper landmarks, roles and labels. We also paid attention to trap focus within modals, ensure focus indicator is visible for all interactive elements.

Custom Colors

You can give your website or blog a personal touch by changing the background colors, text colors and primary/accent color in the theme settings. You change the color in one place, all visual elements get updated.

Search

The theme comes with a built-in search box to make it easy for your readers to look for specific content. Search box is powered by the robust and performant search engine built into WordPress.

Featured Images

Show beautiful featured images for your blog posts. Frontity uses the featured image uploaded to WordPress and renders it on every blog post. You can also opt out of this in the theme settings.

Content Prefetch

You can prefetch page for any link to provide an almost instant user experience. All you need do is to change your settings to prefetch pages when the user "hovers" on a link, when the link is visible on screen, or prefetch all links on the current page.

Pagination

Frontity's theme has the same pagination as the original WordPress theme so you can have access to different pages in the footer, and navigate easily between pages.

Installation

If you are new to Frontity, we recommend you check out the docs first to learn more about the framework and how it works.

For a new Frontity project

Create a new Frontity project with this command:

npx frontity create

Then you will be asked to (1) enter a name for the project, and (2) pick a starter theme to clone. There you can select @frontity/twentytwenty-theme.

Start a development server with:

npx frontity dev

Lastly, open http://localhost:3000 in your browser (if not already opened) to interact with the Twenty Twenty Frontity Theme in a development environment.

For an existing Frontity project

If you already have a Frontity project but would like to install this theme, the first thing you must know it's the name of the package that you'd like to install. In this case it is @frontity/twentytwenty-theme.

Then, you can follow this guide on how to install a new package and add it to the frontity.settings.js file.

Theme settings

👉 To learn more about the theme settings and how to configure them, please visit the Twenty Twenty Theme documentation.

Resources

Feel free to reach out with any questions you might have about the Twenty Twenty Theme.

To take a look at the code, please refer to the GitHub repo.

Here's some other useful links:

Special thanks to Segun Adebayo for porting this theme over to Frontity, and to Uche Jude, Michal Czaplinski, Luis Herranz, and Mario Santos for all their work to release the 1.0 version! 💙

This post was originally published at frontity.org/blog.

Forem: Frontity Framework

Moving to Frontity: Diariomotor Case Study

About Diariomotor

Challenges

Simplifying web development and maintenance

Taking back control of the code

Focusing on performance

Adopting Frontity

The two layer cache system

Key benefits and results

Core Web Vitals improvements

Case Study: Migrating Aleteia to Frontity

Background

Project needs

Approach

Outcomes

A seamless migration

A powerful, extensible frontend stack

The same robust editorial experience

Announcing a New Version of the Frontity Docs

Why are we making these changes?

What's new?

New structure with separate sections

New API Reference site

We're not done yet...

Learn Frontity with the New Step-by-Step Tutorial

What is the step-by-step tutorial?

Why are we launching this tutorial?

What can you expect from it?

Introducing the Frontity Public Roadmap Page

A step towards more transparency

Why a mid-term roadmap

What's coming in Frontity

Stay in the loop

Frontity 2020: A Year in Review

Framework updates

Company updates

Community

Looking Forward to 2021

Connecting Gutenberg and Frontity

Table of contents

Introduction

Why use Gutenberg and Frontity together?

Goals of the process

Explain Frontity better

Make everything editable from Gutenberg

Create new pages easily

Find the best way to connect Gutenberg and Frontity

Connecting Gutenberg and Frontity

How did we implement it?

1. Adapting Frontity to Gutenberg

1.1. How Gutenberg works?

1.2. How to adapt Frontity to this workflow

2. Block patterns

2.1. How to create block patterns

2.2. How to use them

3. Template parts

4. @frontity/html2react

4.1. html2react nodes

4.2. html2react processors

4.3. Use cases

Conclusions

What went well

Lessons learnt and next steps

Closing words

Announcing Frontity's Partnership with 10up

About 10up

Why are we partnering with 10up?

A win for the project

We're sponsoring JSNation Live 2020

We're hosting a talk

Virtual booth and live demos

Frontity JSNation Contest

Workshop: Build a React-based Theme for WordPress with Frontity

New Frontity Showcase Page

Why a Showcase page?

Why share your Frontity site?

How to add your website

Announcing Frontity's €1M Funding Round with Automattic and K Fund

Our Story