Creating A Progressive Web App In 2 Weeks - Part 1
At Jahia, we are committed to making digital simpler. From our jContent platform to the Jahia Cloud, every piece of technology we provide is designed to further enable and grow your marketing technology stack in a simple and easy-to-understand way.
To that end, we decided to run an experiment: Could an agency with no prior experience on Jahia create a new web app within 2 weeks, utilizing jContent as a headless CMS?
Obviously, the agency would need to have experience using a headless CMS to power web applications, along with knowledge of optimizing experiences using personalization. But we wanted to see if someone could come in with zero understanding of Jahia's tools, and no prior Java development experience, and still achieve success.
We invited Altola Inc., a US-based boutique digital experience agency focused on helping their customers create optimized, personalized experiences to take part in this experiment. They dedicated two resources for the project: Alex Shyba, a full-stack developer, and Lars Birkholm Petersen, a digital strategist.
The following is their story, in their words:
We started the project on a Friday, with a kickoff between the stakeholders: Altola and Jahia. We came in with a blank slate - no scope for the app, nor even the purpose for it. While we had many years of experience with many different products and platforms, we didn’t have any experience with Jahia or Java development. We had a lot to cover.
We started by discussing what the app would do. We quickly settled on an app that could help travelers get a better understanding of the destinations they are visiting. We also agreed that it should be developed as a progressive web application (PWA) - fully decoupled from Jahia and hosted outside of Jahia Cloud.
With the basic concept identified, Lars, the Altola strategist, started refining the scope and looking at design options, content structure, IA and definitions, as well as how to best plug-in Jahia Marketing Cloud and Apache Unomi CDP.
Meanwhile, Alex - our Altola developer - needed to get his environment set-up with latest Jahia release. That included gaining access to Jahia Cloud for content storage and authoring. Setting up the latter was, thankfully, easy. Alex went through Jahia's set-up wizard to select the right environment and access was ready in less than 5 minutes.
We regrouped with the Jahia product team for a 60-minute introduction to the core concepts of Jahia and the UI (we started here and worked our way up). Following this, we felt ready to begin the challenge.
The remainder of the day was spent defining the screens for the app and what kinds of content we would incorporate.
To make the app as flexible as possible, we decided to work with these content definitions:
- Screens: A specific user interface displayed to a user (e.g. like a page on a website). Each screen has a list of the sections that are displayed on the screen. The screen itself doesn’t display any information. The information is displayed in the sections associated with the screen.
- Sections: A set of information that is presented to a user. The information displayed in the section is determined by the category (or categories) assigned to the section. A section can be associated with a single screen or multiple screens.
- Experience: Something you can do at a destination. Examples include a specific restaurant, a tour, a show, etc. Each experience is described using text and images.
- Experience category: Grouping of related experiences. Examples include food, events, tours, etc. Each experience category consists of a description, a list of experiences belonging to the category, and a list of related experience categories (e.g. food can have a link to family dining).
With the above content definitions, the app would have the following structure:
We started the week by splitting the project into two streams:
1. App design & code
Stream 1: App design and code
For the app design & code stream, we needed a nice design for the content definitions from Day 1. We decided that each section would be rendered to take up the entire display area on a mobile device. When a screen has multiple sections, those sections would be accessed by swiping down. Dots on the right-hand side of the screen would display the number of sections, and which section is currently selected.
After we agreed on this basic design and functionality, we identified a couple of extra requirements for the content definitions. One was allowing the user to control the order the sections appear on a screen. The other was allowing the user to associate full screen background images for each section.
We decided to code the app using React, and we used Create React App to get started quickly.
Stream 2: Content
For the content stream, we used Day 2 to create the different content definitions in jContent. Based on the decisions from the app code and design stream, we also needed to add extra logic for the content definitions.
The below image shows the different folders for content in jContent. These folders match our content definitions.
After the content definitions were created in Jahia, we could focus on creating content for the app. This included copy and images, as well as a strategy for getting and keeping the user engaged.
By day 5, we had completed the following tasks:
- Content definitions and content were ready in Jahia
- The React-based PWA was built and working
The following is a rough estimate of the amount of time we spent on days 2-5 working on the two streams:
Check out Part 2 to see how Lars and Alex were able to further connect the content, launch the app, and what lessons they learned in the process.