Tajawal and Almosafer Progressive Web App

khurrum qureshi
May 26, 2018 · 5 min read

We are glad to announce that we have recently launched new mobile web experience for Tajawal and Almosafer which is a Progressive Web App. It is designed by employing techniques for JavaScript performance optimization, Service Workers for network resilience and best architectural practices. Let’s take a look at our learnings during this journey.

Image for post
Image for post

Journey to a Progressive Web App

The MVP for the PWA took 2 months to implement using React as the UI library and we build our core in native javascript.

Architecture

Furthermore, when we decided to move away from AngularJS it was the time when we realized that our architecture is quite tightly coupled with the framework. Hence, we needed to rebuild everything from scratch in order to get away from AngularJS.

As an enterprise the decision was challenging yet practical. So, we decided to build our architecture from scratch.We designed an architecture which is easy to scale, can be reused, easy to maintain in long-term and fulfill all our specific requirements, which include:

  • It must provide us an easier way to maintain multiple sites (Tajawal and Almosafer) within a same codebase.
  • We must be able to provide completely separate user journey for both desktop and mobile users.
  • It should be multi-lingual.
  • It should be framework independent as much as possible.
  • It should be flexible to adopt any upcoming changes in future and we should not have to rebuild everything from scratch again.

Based on our requirements, we came up with a multi-layer architecture which consists of two main layers UI layer and Business layer. UI layer is built using ReactJS and Business layer is built using native javascript.

Image for post
Image for post

We only keep UI components, navigation and some basic UI related logic in UI layer. UI layer also has a modular structure which supports separate UI journeys for mobile and desktop. We are using webpack for bundling the app which allows us to create separate builds for mobile and desktop.

Our business layer consists of different sdks which contain our core business stuff like http services, models, data transformation, storage service etc. We are using mono repo to maintain all our sdks.

This architecture is flexible as most of the code base is in native javascript. Hence, we can easily replace our UI layer with any other library with minimal effort in future. Moreover, it can scale as it supports multi-platform and multi-site also it is easily reusable if we need to implement flight or hotel booking flows in different systems we can easily implement it.

Performance

  • Apple iPhone
  • Samsung Galaxy S8
  • Samsung Galaxy S7

Testing the new experience on Lighthouse (using the 3G) we can see that they’re able to load and get interactive in under 3.6 seconds:

Image for post
Image for post
Tajawal Mobile Web Performance
Image for post
Image for post
Almosafer Mobile Web Performance

Performance Optimization

Route-level code-splitting

To accomplish this, We used React Router and React Loadable. As our application centralized all their route and rendering info a configuration base, we found it straightforward to implement code splitting at the top level.

For “vendor” (library) chunking, we used the webpack CommonsChunkPlugin to move commonly used libraries across routes up to a single bundle file that could be cached for longer periods of time.

Image for post
Image for post

Impact

Preloading late-discovered resources

Image for post
Image for post

Performance budgets

CSS Strategy

Workbox for network resilience and offline asset caching

We also implemented offline experience so, the user can still access some of the app features while offline.

Conclusion

With thanks to Muhammad Talal, Muhammad Ahmed, Ahmed Abdalla, Arif Masood, Yusuf Algan for making this happen.

tajawal

tajawal tech blog

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store