ReactFoo 2017

Hide yo IndexedDB. Hide yo Local Storage. The cloud has come after our frontends this time. With Desktop apps like IDEs moving to the cloud the requirement for a brilliant User Interface demands an Offline First App. This talk is about the why, what, how and huh? of offline first apps using the React Ecosystem.

Outline

Preface

As Frontend Developers
When the cloud came for our infrastructure, we didn’t care.
The cloud came for our application backends, we didn’t care.
Now the cloud has come for our frontend. It’s time to cut it off and to stop depending on it all the time.

Why?

Markdown Editors, Document Editors, IDEs, TodoLists and many more apps moving to the cloud have an extremely valid use case to support offline usage, to displace the applications as they exist in their current forms effectively.
What use is an IDE if it can’t work on an airplane?
What use is an IDE if it takes 15 network calls to rename a variable?
What if we just store the data on the client, rather than making the entire User Experience depend on their internet connection.

What?

Offline first apps unlike regular client side apps focus on persisting data on the client first and syncing to the backend is secondary. The majority of the data which drives their UI is available and written back on the client side itself.

How?

All the popular web browsers have been working for a long time to support capability to store significant amounts of data offline. All the mobile devices already have a mature system for local storage in place. Most Browsers now already have APIs like IndexedDB and Service Workers (not as common) to support offline first applications. Where the client side app can store high amounts of data generated by the user using the interface.

With cross platform applications also on the rise, there are JS databases like Realm, GunDB, RxDB available on the client side which abstract the client side storages like IndexedDB, Android and IOS Storage behind their JS APIs, and offer seamless integration with your application code, keeping it agnostic of the storage tech being used.
Using the above tech and React and React Native enable teams to write their persistence and business logic once, for all their platforms. Essentially write once, test once, fix it once (hopefully) and use everywhere for all the app’s core business and persistence logic.

Huh?

Even though the client side technologies have evolved considerably and there are some standards available for writing offline apps. Syncing the client side stored data while maintaining consistency or eventual consistency is still an under-developed area. Much has to be done in terms of standardizing approaches and solutions. Most of the teams end up re-inventing the wheel while trying to implement their own sync mechanism or trying to achieve eventual consistency as per their use case.

This talk is aimed at being a primer at Offline First Cross-Platform development, and all the tools, databases and standards one can leverage while one is about this behemoth of a task.

Speaker bio

Developer.
Olympic Weightlifting Enthusiast.
Times Person of the Year 2006.
Gets annoyed when people wish me on my Birthday.

I am a software developer who was allergic to Frontend programming, used to look down upon it, and was in love with all things Server even rendering until I fell in love React 2 years ago. Last year I quit my corporate job and co-founded Samanvay R&D, a non-profit organization dedicated to using technology to bring social justice to the poor and under-privileged. We work with the government and other NGOs to deliver premium corporate quality software to make lives easier for the providers working for the poor. We believe in spending most of our time in the villages and rural areas to understand be more effective and understanding the problems better.