Part 2.png

Creating A Progressive Web App In 2 Weeks - Part 2

2 décembre 2019
Jahia Team

 

In Part 1, we introduced our experiment - could an agency with no prior experience on Jahia create a new web app within 2 weeks, utilizing jContent as a Headless CMS? Alex and Lars from Altola took up the task, and within 5 days had learned the system and built out content definitions for their application.

We'll let them take it from here... 

 

Day 6-7

 

We started day 6 with content created in Jahia and the PWA built using React, but the app wasn’t connected to the content. Making this connection was our next task.

The technology we would need to use was Jahia’s GraphQL API, jExperience and jCustomer. Again, we divided the work into two streams:

1. Connecting content to the app

2. Enabling personalization and tracking

 

Stream 1: Connecting content to the app

Alex, the full-stack developer, focused on connecting content to the app. Having prior experience with GraphQL, connecting content to the app was a breeze. The additional decision to use the Apollo Client library to wire up the API to the app freed the developer to focus on important features instead of the plumbing. This was completed on Day 6.

Day 7 was used to add app preview to Jahia so editors and business users could see their Jahia content in the context of the design.

Below shows the preview in Jahia Edit Mode:

 

Screen 4.png

 

 

Stream 2: Enabling personalization and tracking

Lars, the strategist, focused on enabling personalization and tracking. Most of Day 6 was used to map data taxonomies and enabling behavioral tracking. Lars also connected jCustomer to the app during this time, which proved fairly easy.

Day 7 was focused on implementing jExperience. We used this module to create the logic for personalization and to create personalized content. We based the personalization logic on scoring plans and dynamic segments driven by visitor behavior. We developed the personalized content to target the different behavior-based segment: family, business and romantic traveler.

At end of day 7, we had a fully functional PWA with personalized content from Jahia.

 

Screen 4.5.png

 

 

Day 8-9

 

We used Day 8 for testing different scenarios and fixing minor issues in the app.

We also added a couple of extra features, including content aggregation. For this, we leveraged Jahia’s native content aggregation capabilities. We hooked into Yelp reviews and extended the content definition for experience so that any experience could include reviews.

 

Screen 5.png

 

Another extra feature we added was support for preset traveler types. We created presets for our behavior-based segments: business, family, and romantic travel. We then added the ability for a user to select a preset so the user can see relevant content quickly.

By the end of Day 8 the app was fully deployed to Netlify, using their modern global application delivery network. Deploying to Netlify ensured a fast, scalable and secure site. Netlify also makes it easy to deploy changes in the future.

We used Day 9 to document the app and to present the app for Jahia stakeholders.

...And that's it! Not only was Altola able to deliver a new, fully decoupled progressive web application despite having no prior Jahia development experience, but they did so in only 9 days - completely blowing our expectations out of the water! 

 

We asked Alex and Lars to comment on their experience developing their first Jahia-based Progressive Web Application:

 

Lars

“While building the strategy and creating content for the app, I was impressed with the speed of getting a new Jahia Cloud instance up and running – and then by the speed of Jahia. Tt was fast loading and easy to navigate. Working with content was also very straight-forward. This let me focus on our content definitions and logic. When enabling personalization, I was pleasantly surprised by how easy it was to plug into jCustomer and see tracking in real-time - it was a ‘It just works’ moment for me. The interface for managing consent was also impressive. Based on how we structured our work, it’s a great testament to the operational efficiency that Jahia enables. You can start content or code first – and you have no Jahia dependencies on the presentation, which is what modern web development is all about.”

 

Alex

 

“It was a great challenge for me, being a full-stack developer with a Microsoft background and my only experience with "Java" being my morning coffee. It was impressive to experience how much we were able to achieve in a short amount of time without having to go into Java development. I love the fact that Jahia invests time and money in making sure their products are simple to work with. That gave us the opportunity to start with a clean slate and develop a new PWA. I was also impressed by its speed and flexibility. Jahia feels like a rock-solid stable platform that can be used as a true headless CMS with a modern API layer and the additional benefits of using personalization and tracking.”

 

 

Following this experience, Altola Inc. agreed to join on as a Jahia Partner!

 

As a quick highlight, here is just some of the technology Lars and Alex used in building their PWA:

 

Screen 6.png

 

Our main goal from this experiment was to prove that anyone, no matter background or expertise, could succeed utilizing Jahia's easy-to-use technology. Want to learn more, or see the PWA Lars and Alex built in action? Contact us!

Retour