Native applications can deliver amazing user experiences, but at the same time building and maintaining them can be both expensive and hard. Native apps run on mobile operating systems such as iOS and Android, or desktop variants like Windows, MacOS and Linux. Developers have to build, test and distribute software for multiple different platforms, often through proprietary app-stores. Additionally they must build and maintain web-based back-end services to support them - often using an entirely different set of tools and technologies.

As users tend to stick with a limited set of trusted applications, native app adaptation is declining. The threshold for finding and installing new applications is high. Analysts predict, as much as 20% of brands will abandon their native apps by 2019 - likely replacing them with Progressive Web Apps. If you haven't tested a PWA already, check out PWA rocks.

Progressive Web Apps are made possible through a combination of several new web technologies, and marks a paradigm shift for the web - it has the potential to greatly simplify development and distribution of software.

Some things you will love about PWA's:

• Instant loading (No install)
• Automatically updates
• Offline support - Yes, completely offline
• Add web-apps to your home screen
• Works with regular Url's and supports deep linking
• Push notifications
• Access to Bluetooth and other native capabilities
• No proprietary app-stores
• Everything else you love about the web
• and more.

Google massively promotes PWA, and I'd recommend you to check out this video by Jake Archibald from the Google I/O Conference.

Background

Allow me to introduce myself. My name is Thomas Sigdestad, I'm Co-founder and CTO @ Enonic.

This post is the first In this series where we will take you on a journey with our development team, as we embark on a mission to create a full-blown Progressive Web App from scratch. Mixing application and content is another major issue for a lot of projects, so to raise the bar, our PWA must also provide editorial content and general marketing capabilities such as search engine optimization.

Our goal is to practically explore every relevant aspect of PWA from front-end to back-end, hit a lot of problems and hopefully come up with good and practical solutions. During this endeavour we expect to learn a great many things, and we will be sharing our discoveries through new posts on Webagility.com.

The Foosball App

To push the limits of the web we need to build a web-app that touches as many different use-cases and technical features as possible. Here are the overall requirements for the project:

• Both developers and non-techies must be able to relate to the concept
• Should have an interesting data model, with potentially big volumes
• Needs to provide a relevant offline experience
• Support storing of personal settings or data
• Login support with popular ID providers such as Google and Facebook
• Support User generated content
• Provide transactions of some kind
• Relevant use of push notifications
• Nice URL handling and deep linking support
• Include public facing content, for easy access and search robot indexing
• Support localization
• Re-useable beyond Enonic, potentially as a cloud service
• Interaction with physical devices / IoT if possible

After some hardcore brain-twitching, we realized some of our most eager in-house developers already had a spare-time project that could be used as inspiration - an app to keep track of players and scores for Foosball. Foosball is happily played in every break - and the competition is fierce!

Turns out the potential features of a Foosball app is unlimited, and in our case - the perfect project to maximize developer engagement. At the time of writing we have identified the following features we can implement:

• Public pages for marketing the "Foosball" service, rules, etc etc
• Login to register new players
• Teams, players and games would be the core datamodel - with a growing data-set
• Notify players of upcoming games, or changes to their ranking
• Offline support for playing and recording games
• Deep linking into content, player statistics and game info
• User comments on games played
• Challenge other users for a new game

We're building the Strava of Foosball! :-)
- Some Enonic Developer

Choosing a Back-end

As we're building a PWA, we stricktly don't have to choose a client, but we'll be focusing on using Chrome as it apparently is the most mature browser in terms of PWA.

To build the back-end of the Foosball app we will need a great many tools to deliver on the requirements:

• Database to store the data
• App engine to build and run the various services
• Web server to deliver the PWA and assets
• Basic identity handling
• Content Management System for the marketing parts
• Search engine to produce reports
• In our case, everything should also be portable across clouds, including on-premise.

Facing a task like this, most teams will compose and integrate a suitable stack of tools, based on what their developers know and recommend - or what is "company standard". There are dozens of applications stacks out there from the "hip" Javascript-based MEAN stack through more established platforms such as .net, Java and the LAMP stack. Additionally we will most likely require search engine, a CMS, and an Identity system. For the search engine we could for instance use Elasticsearch. For Content Management Systems pretty much nothing is defined at the moment, which means we could do anything from a "headless" approach, via Wordpress to more advanced solutions.

In our project we're setting off with "company standard" infrastructure. The fact that we are a software company that builds this web infrastructure for a living makes it a lot more interesting. From a management perspective this is considered an excellent opportunity for dog-feeding :-)

At Enonic, our main effort is an open source platform called Enonic XP. Enonic XP provides a "stack-in-a-box" approach to web-development. Providing the essential API's required to build and deliver mission-critical web applications.
Some highlights are:

• Javascript App Engine and web server (based on PurpleJS)
• Embedded Storage and Search (based on Elasticsearch)
• System for identity and role handling (pluggable with 3.rd party systems)
• Content Studio for editorial content (supports both headless and rendered modes)
• Built with Java and runs in any cloud

This means XP should provide the essential tools we need. Missing capabilities identified during the process will be fixed or added. We're ambitious in making XP the preferred platform for PWA projects out there.

Enonic XP can conceptually be compared to traditional OS', in that it provides everything you need to run web apps, rather than native apps. We actually refer to it as "The Web Operating System" - or WOS among friends.

Enonic XP aims to simplify developent, testing, deployment, distribution, and scaling of web-apps and their back-end services. While providing freedom in choice of frameworks and clouds.

In our next blog post we will deliver a spec for the Foosball apps and choose a front-end framework...