Ever since the inception of Progressive Web App (PWA), I was obsessed with building a super fast webapp, after few months of rigorous development we launched our company’s first ever mobile webapp, LifCare Lite, so I would like to share some of my experience while building it.
The biggest challenge I faced was choosing the right stack. We had to build not only a webapp, but also have a codebase that will be maintainable in the future. The technologies I will be mentioning below will be a life saver for all , if you are planning to build something fast and reliable. Here we go!
React 16
But isn’t inferno or preact faster?
Of course it is, but I was concerned with the future, and ever since the evolution of react 15 to 16, there was a huge reduction in the bundle size with boost in performance. React and React-dom is 109 kb (34.8 kb gzipped), down from 161.7 kb (49.8 kb gzipped) than its earlier version. It is maintained by Facebook with a steady development. React might be a tiny bit larger than it compatriots, but I always believed in investing in future.
React 16 is also working on it’s new architecture fiber, please watch the video, Lin Clark explains it beautifully
Redux
Building a mobile web app requires good state management, and I needed a way to enforce principles that I personally believe in, which redux offers. Principles like pure functions, advanced react patterns like higher order components to map state and actions, maintaining immutability opens the door to a new and improved way of development which paves the way to a stable application. But of course use redux only if you need to, you always have a choice not to. Check the link below :)
But in my personal opinion, redux has a huge ecosystem which is growing with time. There are loads of libraries easily available if you want to develop applications really fast!
Redux Observable
Well the application isn’t a simple one, it has a lot of async tasks going on, I needed a manageable way of handling them, rxjs was the perfect match, so I ended up using redux observable.
Check the link below on redux observable, which explains why I think it is a life saviour.
Redux Persist
Redux persist is just the perfect match to persist my state in localStorage, and with its default configuration, it uses localStorage to store data for web, AsyncStorage to store data for react native which adds to the offline recipe. I personally believe this library really is the future. Check out the link below
React Router 4
Client side routing has never been easier than before! If you are thinking of a library which supports both web and native, I definitely recommend using this one as the documentation and usage is really simple.
React Loadable
This library is the super star of all. When the application gets bigger, the biggest problem I faced was the final bundle size, and thanks to code splitting, I was able to reduce almost 50% of the total size, and serve only the chunks that was required for my component loaded by the route.
Service Workers
This is the heart of Progressive Web Apps (PWA).
We have cached our major assets using service worker. As quoted in google docs
A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.
This powerful feature enables our site to run on limited network areas, and also enable users to add the webapp to their home screen just like any other app.
Webpack
I will quote it directly from the doc, webpack is a static module bundler for modern JavaScript applications. When webpack processes our application, it recursively builds a dependency graph that includes every module our application needs, then packages all of those modules into one or more bundles.
It takes care of bundling in the simplest way possible, and its configuration is changeable in accordance to our need.
Challenges
All of the libraries are very new in the industry, so developing on a large scale would require expertise on the topics mentioned and be careful so as not to misuse them. Especially observables and rxjs, because reactive programming was a lot of new concept to grab and new for the team as well, we had to often re read documentations and get lost in StackOverflow to get the right solutions. But it is worth it, trust me on this!
If you are building Progressive Web Apps (PWA), then it is highly recommended to study docs carefully. If service workers are not treated properly, it can cause unknown behaviours to the client side. Please make sure that you understand them properly, it will help you gain better control over the application.
Future
There is still a lot of room for improvements , performance is something that we are working on, image optimisations, remove bloated scripts, better caching of assets, come up with features like push notifications. We also plan to use HTTP2 server push and work on rendering performance of our react components. Of course I will be publishing soon, a case study of how we improved our performance, as someone wisely said, “we learn from our mistakes”… cliche huh 🤓
Pro Tips
- If web app is new, make sure service worker has header set as no-cache, so as to let clients get your updates faster.
- If you are using redux persist, you might not need to persist all the reducers in the storage, use it wisely :)
- Use StandardJs to automate your code standards throughout your application
- Avoid using libraries if it is easier to build it, lesser the bundle size, faster your app is ;)
- Use Higher Order Components to achieve state abstraction.
Conclusion
I am sure there are tons of other libraries to choose from, it doesn’t have to be the ones I mentioned, but if we are challenged to build something fast, it is highly recommended to use the ones that are already established and has large community support.
Follow me on twitter to get more updates regarding new articles and to stay updated in latest frontend developments. Also share this article on twitter to help others know about it. Sharing is caring ^_^
Acknowledgements
A huge thanks to the awesome frontend team behind this release Ayushi Khetan, Jyoti Arora, Lakshita Verma, Sachin Kumar and me of course 🤓. Well frontend alone isn’t enough, a huge shout out to our backend and QA (batman behind the scenes).
