About WordCamp Europe

WordCamp Europe (WCEU) is the largest WordPress conference in Europe and takes place in a different European city each year.

WCEU 2018 took place in Belgrade, Serbia between 14-16th June with a total of 2,085 attendees from 76 countries and 808 live stream viewers.

Challenge

This year the WCEU organising team desired to build a new official app for the conference in order to:

• Provide attendees with a quick and practical way to access the event’s schedule, venue maps, and announcements.
• Enhance experience at WordCamp Europe 2018.

The proposal of having an official app was not taken forward until April and all the teams involved started working in May. The main challenge was to build an app in four weeks and get it ready by the end of the month to run tests before its announcement.

Solution

A Progressive Web App is always up-to-date, use less data, and take less storage space if we compare it to a native mobile app. Since mobile devices often have limited storage for native apps, it seemed the way to go to accomplish our goals and provide a better user experience.

Plus, it delivers the same native experience without the hassle of installing it. It’s frictionless to use and it can be accessed instantly from any device.

These are the steps we took along with the other teams who collaborated. We used Github issues to organise the workflow:

• The Attendee Services team drafted the minimum requests.
• The Development team (us!) created the wireframes to start both the design and development phases.
• When the wireframes were approved by the Attendee Services team, both the Development and the Design team started working in parallel.
• The Development team finished the PWA functionalities using the wireframes for reference at the same time as the Design team finished the design.
• The next step of the Development team was including the final design in the PWA.
• After that, we had the first working version of the PWA in our hands! The Attendee Services then stepped in again to give feedback and test the PWA.
• The Communication team was involved at this point to fill in the announcement pages and help with other related tasks.
• Finally, we repeated the same process a couple of times to add some nice-to-have features not contemplated in the original wireframes.

Building a PWA on top of WordPress with React and the WP REST API

Framework

For this project, time was very limited: 3-4 weeks. Building a PWA from the ground up is a time consuming task. But hey, we have created a framework to precisely solve that problem, so it was the perfect time to test it out!

We created a new repository for this Frontity theme, called it wordcamp-theme and started coding right away. David worked on the logic while Eduardo worked on the React components. Luis helped here and there. It wasn’t long until we got a first working version.

After that point, we kept refining the interface. The good thing about the Frontity Framework is that we didn’t have to take care of any bundling, routing or retrieving data from WP. Frontity took care of all that. Our only concern was to create the correct React components and implement the specific logic for this PWA.

We also had the opportunity to reuse some of the extensions we already had developed in the past like our powerful Context Router, our Slider (swipe left and right!), our Html2React converter, our Share extension, or our OneSignal Push Notifications extension. Very convenient.

WP REST API

The WP REST API was another key part of this project. Thanks to it, we were able to retrieve updated session and speaker data from the official WCEU website without having to code any specific integration in their end. Any changes done in their site were reflected in the REST API and therefore in the PWA.

We also used the REST API to fetch the rest of the content such as announcements, venue images, lunch menus, code of conduct, and so on.

The incredible thing about the REST API is that WordPress used to have only one way to display the content: their PHP templating engine. Now, thanks to the REST API, it has an unlimited number of ways to display content. This PWA made with Frontity and React is just one of them. 🙂

Server Side Rendering

When building PWAs, one of the important aspects is what people call the App Shell. This is what give users the feeling that they are dealing with a native app, instead of a simple website.

But this approach has a big problem in the WordPress ecosystem: these App Shells are built with front-end frameworks made with JavaScript. If you want to send a server-side-rendered version to the client so the site is usable before JavaScript is loaded (or even without JavaScript!), you need to execute the JS framework in the server.

To solve this problem, we’ve prepared Frontity to be able to render the first html using JavaScript and then cache it aggressively during 3 minutes. This way, we can serve in milliseconds the very same html that will be rendered by React once it’s loaded in the client. Actually, users don’t even notice that JavaScript has loaded when they are using the site, because the interface doesn’t change at all!

Native features

To offer a true app-like experience, we wanted to bring much of the functionality of native mobile apps to the mobile browser experience and implement “add to home screen”, offline support, and push notifications.

We already had a Frontity extension for the push notifications using OneSignal’s free service, so we used that. We also had support for manifests, but not for offline support yet.

We marked “offline support” as a nice-to-have feature because we weren’t sure if we were going to be able to implement it on time. But the initial development went so smoothly that we had some free time for it!

It was our first time with service workers. The implementation was quite complex because the OneSignal integration also uses a service worker and you can’t add two service workers in the same page. But we finally managed to merge our code with the OneSignal’s one and make offline work for the whole PWA.

Later, at the Google booth of WCEU, we talked with Alberto Medina about a project he is going to start to integrate Service Workers in the WordPress Core. He wanted to know our opinion and we told him a big “YES, PLEASE!”. It would certainly do our lives easier, so we’ll be collaborating with him and giving feedback to make this a reality.

Result

In collaboration with the rest of the teams we developed on time a PWA that led to a fast, reliable and frictionless mobile experience.

The PWA could be directly opened by accessing the page URLhttps://app.wp-europe.org on a mobile browser (just like any other mobile website) and contained practical information about WordCamp Europe:

• Schedules
• Information on sessions
• Information on speakers
• Venue maps
• Announcements
• Lunch menus
• Code of conduct and reporting information
• Other useful information about Contributor Day, the After Party, etc.

In addition, these were the final features included:

• Instant loading: the PWA was designed to load nearly instantly and reliably, even when attendees were under uncertain network conditions.
• Security: the app was served over HTTPS, a secure connection that protects sensitive information.
• Favorites: WCEU attendees could use this feature to mark all talks of their interest, or the ones that they planned to attend.
• Add to home screen: this allowed WordCampers to launch the PWA from their home screen, just like a native app.
• Push notifications: attendees could opt to receive push notifications (instant messages on their device) for important updates. This feature was only available for Android as browser notifications are not supported on iOS yet.
• Offline support: the WCEU PWA was aimed to be reliable if the network failed. If attendees temporarily lost their connection, they could continue accessing the site offline. On iOS, this feature is only available for 11.3 version or above.

WCEU’s official PWA is a theme that can be easily updated and rebranded to display content for future editions of the WordCamp. It is open source and available on GitHub.