DEV Community: Reyes Martínez

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.

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!

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.

Growing Gudog's blog by 88% with Frontity (WordPress + React)

Reyes Martínez — Mon, 17 Feb 2020 17:17:37 +0000

Frontity is a free and open source framework for building headless WordPress sites using React. Learn more at docs.frontity.org.

For those of you who know us, you know that before launching the open source framework, we worked for a few years hand-to-hand with WordPress publishers and blog owners to help improve the performance of their websites on mobile devices.

We developed a mobile WordPress theme specifically for their needs called Frontity PRO. It was built using React on the front-end and the REST API to fetch the content, along with our PWA WordPress plugin.

At the beginning of 2019 (shortly before we announced our decision of placing all our focus on frontity.org), Gudog’s team approached us with the goal of improving their blog’s experience on mobile devices.

Moving to Frontity PRO took all of their concerns off the table, and resulted in better visitor metrics and SEO results.

One year later, we met with Javier Cuevas, Co-founder and CTO of Gudog, to know more about how Frontity has helped them so far.

Context

Gudog is a marketplace platform that connects dog owners with local dog sitters in Europe. Founded by Loly Garrido and Javier Cuevas, the company was born in 2012 with the idea of creating the first alternative to dog kennels.

Today, they are the market leader of these pet services in Spain and have more than half million registered users. In addition, Gudog operates in four more countries, including the United Kingdom, France, Germany, and Ireland.

They have a website and a mobile app to provide their services. Apart from that, Gudog's blog is one of the most important sources of traffic acquisition. It is used as the main marketing channel for distributing regular content and attracting new users.

Prior to Frontity, Gudog was using a responsive WordPress theme for their blog. When they started the project in 2012, around 20% of their traffic was mobile.

This percentage started to grow annually since then and by 2019, mobile devicesgenerated80% of their blog’s traffic.

Evolution of mobile vs. desktop traffic. Source: blog.gudog.com.

Challenge

The last few years, Gudog’s blog had a lot of visitors who had switched over to mobile, reading its content in a non 100% mobile-dedicated site which was already a bit outdated.

Javier's goal was to upgrade their blog's mobile experience so it didn’t lag behind and lose traffic.

“Performance had become an important ranking factor (among others) for Google’s mobile searches and our blog wasn’t up to date with the best practices. We had the feeling that it didn't meet the user expectations and wanted to improve that.”

Javier Cuevas, CTO at Gudog.

In addition, the company had four blogs (one for each language) with four different WordPress installations that shared the same server. This often made them grappling with load times challenges too.

Javier explored other responsive WordPress themes but none of them seemed to fit their needs. They had no impact on speed, and didn’t help deliver a seamless experience on mobile.

Solution

Gudog’s team wanted to find an alternative to provide their mobile visitors with a fast, modern experience. Something reliable which also allowed their content's team to maintain WordPress for creating and editing content with ease.

As soon as Javier knew about our theme, it seemed clear to both teams that it was a great solution for their blog. He liked the idea of providing their readers with a mobile-dedicated site.

There were actually a couple of reasons behind his choice:

Using a WordPress theme built with React allowed them to gain important benefits in terms of performance / load times on the one side, and continue using WordPress for managing the content on the other.
The user-friendliness (usability) of a solution specifically designed for a mobile audience.
No need to build a custom theme from scratch, saving resources and time.

What Gudog's blog look like on mobile with Frontity.

You can check out Frontity's theme visiting blog.gudog.com on your mobile browser.

Results

Today’s users value speed and simplicity above all. With Frontity, Gudog was able to deliver a frictionless user experience on mobile while improving their blog’s loading times.

The results have been very positive. Since installing our theme in February of 2019, blog.gudog.com has not only increased traffic and user engagement, but it’s also easier to discover in Google’s search results.

Compared to the previous year without Frontity (2018), Gudog’s blog has seen:

66% increase in user acquisition.
149% increase in page views.
78% increase of the time spent on site: from 36 seconds to 1 minute 04 seconds.
Lower bounce rate: from an average 91% to 74%.
Almost instant load times on mobile.

Audience overview comparison. Source: blog.gudog.com.

And these are not the only statistics Frontity helped them achieve.

From 2019 to January 2020, Gudog increased their organic blog traffic by 88,91%, and significantly improved their SEO results.

Evolution of organic vs. direct traffic.

Growth of organic search (88,91%) comparing before and after Frontity (Feb. 2019)

Along with their content strategy, Frontity’s performance helped their blog rank for the first position in Google’s search results with the keywords in Spanish “blog de perros” (Dogs’ blog), as well as contributed to appear in Google Discover.

You can see below how the query “blog de perros” goes improving its Google search ranking for Gudog's blog during the last 16 months:

Gudog has managed to keep both Google and their blog’s visitors happy, and their concerns about mobile UX and performance are now a thing of the past.

“Since going live with Frontity’s mobile theme, the results have come fast and beyond our expectations. We have seen an increase in user acquisition and it helped us improve our SEO a lot. And it just took us 3 minutes to install it.

In the near future, we’d like to take one step further and develop our own custom theme with the Frontity framework.

Javier Cuevas, Gudog CTO.

In many ways, this theme has allowed both Gudog and Frontity to establish a close collaboration. We’ll be happy to help drive the evolution of their blog for years to come!

Introducing Frontity Chakra Theme

Reyes Martínez — Thu, 30 Jan 2020 18:14:31 +0000

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

Today, we are really excited to introduce Frontity Chakra Theme, a new Frontity theme powered by the amazing Chakra UI React Component Library.

The theme has been designed and developed by Segun Adebayo, creator of Chakra UI and author of the Frontity’s Twenty Twenty theme port.

⚡ You can see the Frontity Chakra Theme demo here.

Intro to Frontity Chakra Theme

According to Segun, the Frontity Chakra Theme has been designed with three principles in mind: to be simple, beautiful and pleasant to the eye.

Its goal is to demonstrate how easy it is to create more sophisticated themes with Frontity, and how to use React component libraries (like Chakra) with Frontity.

Homepage view in Frontity Chakra Theme.

This pre-made theme is great for developers who are new to Frontity and want to get their site up and running quickly. But also for those who have a specific use-case in mind and prefer to use a theme as the base for their site instead of starting from scratch.

Although it can be adaptable to different websites, the Chakra Theme is best suited for blogs that make a heavy use of images to showcase their ideas or products. Mostly fashion, tourism, photography, design, etc.

Regarding the theme development, Segun highlighted that the overall experience with Frontity and Chakra UI was great.

The only challenge I had was with the connect function and how it interferes in the rest spread of component props. But I solved this challenge easily and had a great experience!

Theme Features

The theme comes with a handful of new, interesting features.

Theming: the theme uses Chakra’s theming functionality to provide colors to all components. All you need to do is to edit the colors in the frontity.settings.js file and your entire blog visuals will update.

Search: this theme has a full page search modal/popup to help visitors search the content of your blog.

Mobile Responsive: the Frontity Chakra theme is 100% mobile responsive and adapts to any screen size or resolution.

Progress Indicator: for each blog post, readers can see a progress indicator showing how far they’ve read.

Post view with progress indicator.

Mobile Menu: the theme displays an elegant responsive menu on mobile to navigate the entire site.

Social Links: this theme's feature allows you to use social media links in your blog. In order to use it, you will only have to provide your social links in the frontity.settings.js file and they will automatically show up in your blog. Amazing, right?

Installation

You can install the Frontity Chakra Theme like other published packages in Node using npm.

To do so, run this command in your terminal:

npm install frontity-chakra-theme

Then add frontity-chakra-theme to your frontity.settings.js file.

👉 To learn more about the theme options, how to configure them, and see an example of usage, please refer to the README of the GitHub repository.

You can also follow this guide on how to install a new Frontity package.

Resources

Feel free to reach out in the community with any questions you might have about the Frontity Chakra Theme.

Here's some useful links:

Special thanks to Segun Adebayo for his work on this theme. 💙

Can't wait to see what you build with it!

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

Frontity 2019: A Year in Review

Reyes Martínez — Tue, 07 Jan 2020 17:25:30 +0000

It’s been 6 months since we released Frontity 1.0 to the world but it feels like this happened yesterday. Seriously... time flies!

As we wind down 2019 and look forward to the new decade, we wanted to recap what brought us here and what we accomplished together this year, which has been a really exciting one for us.

Our Journey to Frontity Framework

The whole idea of this project really began in late 2017, when we started working with big Spanish WordPress publishers who wanted to improve the performance of their mobile sites. Despite their best efforts, their WordPress sites on mobile devices were slow and sluggish.

We got down to work and developed a mobile WordPress theme for them, called Frontity PRO. Our goal was to make this theme as performant as possible while delivering a great user experience. To achieve that, we built an internal React framework which used the REST API to fetch the content of their WordPress sites, and spent the whole year optimizing it.

During that time, we faced a lot of challenges and realized that combining WordPress and React wasn’t easy at all. This combination has plenty of benefits but the steps necessary to create a working decoupled WordPress site are not straightforward. Good news is that after all the work, the theme was a success and it was used by more than 20 million readers!

In February of 2019 we decided to set aside the development of this theme for publishers to place all our focus on Frontity.org. We wanted to use all the acquired knowledge to launch an open source framework, so anyone facing the same challenges with WordPress and React could benefit. You can read more about our history and background in this Post Status interview.

At that time, we were also selected to join the third edition of the Google for Startups Residency program in Spain. Being accelerated by Google and count on their support has certainly been an amazing opportunity for us this year.

2019 in Review

Many things have happened since we made that decision in February. Here are some big milestones and other great moments that shaped 2019.

Framework

May 16, 2019: Frontity's beta version is released.
June 6: Frontity 1.0 Release Candidate is launched. The same day, we published the Learning Frontity docs, which aim to explain all the concepts around the framework to help understand how it all works.
June 20: Frontity 1.0 is released. This was a huge milestone for us but also for all the community, which hasn't stopped growing since then.
July 1: we announced new improvements like the npx frontity info command to get environment information for debugging purposes.
July 30: the Twenty Nineteen WordPress theme is ported over to Frontity by Imran Sayed and Smit Patadiya. We also added support for CodeSandbox so that you can try Frontity directly from your browser without having to install anything.
August 5: we created a Frontity builder for Zeit Now hosting to make the deployment process simpler.
October 10: we released a new version of Frontity with support for custom post types and custom taxonomies and added the create-package command to our CLI.
October 31: contributors Imran Sayed and Smit Patadiya released an external package for Frontity that adds support for the Contact Form 7 WordPress plugin.
November 4: new Frontity improvements are announced, native support for fonts and source maps for styled components, among others.
December 12: we released the beta version of Frontity’s Twenty Twenty theme port made by Segun Adebayo.

Events and sponsorships

We are proud to have contributed in different ways to WordPress and other open source communities this year.

In 2019 we could attended both the WordCamp Europe and the WordCamp US for the first time. As usual, these were a great opportunity to learn, connect, and build meaningful relationships with members of the WordPress community.
We sponsored the Madrid WordPress meetup, the JavaScript for WordPress Conference, and the Hacktoberfest Open Source Weekends meetup.
We launched the first WordPress Meetup for Devs in Madrid (which is part of the WordPress Madrid group).
We hosted a few workshops at Open Source Weekends and WordCamp Sevilla - the first WordCamp for Developers that took place in Spain.
The dev team participated as Teaching Assistants at WordCamp Europe and we gave a talk on SEO for headless WordPress at the JS for WP Conference.
Other members of the team contributed with code and got involved at local WordPress meetups as speakers and volunteers.

Community

Since we launched the framework beta in May we've seen 7,120 NPM downloads and 600 stars on GitHub. In addition, more than 200 members have joined the community forum! ✨

We love seeing how the Frontity community keeps growing each day. During these months, many of you contributed to code, gave us feedback in different ways, helped answer questions about Frontity, wrote posts, made video tutorials, and helped spread the word about the framework around the globe.

So far, we have seen talks about Frontity on four different continents! Isn't it amazing? These are some of the them (if we’ve missed anything, feel free to chime in):

Jesús Olazagoitia talked about Frontity at the Amurrio WordPress Meetup (Spain).
Brandon Dove gave a demo of the framework at the OC WordPress Dev Meetup (USA).
Anna Branco gave an online talk on how to create a React theme using Frontity at the JS for WP Conference.
Uche Jude delivered a session on headless WordPress and Frontity at DevFest Ikorodu (Nigeria).
Imran Sayed hosted a workshop on how to build a WordPress site with React and Frontity at WordCamp Kochi (India).

Looking Forward to 2020

We feel truly grateful for all of this and want to say, one more time, a huge thank you for being part of Frontity.

We are excited to kick off this new year and can’t wait to share with you all what's next for Frontity.

Stay tuned as we have big news to share with you in 2020!

Happy New Year from all of us at Frontity! 🎊

This post was originally published at frontity.org/blog.
Featured illustration is courtesy of undraw.co.