Last modified: May-29-2022, 02:40PM +08

Progressive Web App

Progressive web app(PWA), a term that is increasingly common whenever one does a search on the web in 2021. To date, there have been over 200, 000 applications in the Play store built using Flutter. At it’s core, a PWA is an application software that runs on a web server and accessed through a client such as a browser.

The PWA alternative paradigm to traditional app development is made possible by the ongoing work on large number of modern web APIs such as Cache, WebGL, WebAssembly, Bluetooth, File System, IndexedDB, Service Workers and many more.

Over the last few decades, cybersecurity is being increasingly recognized as critical infrastructure, the Covid-19 pandemic further accelerated the shift towards the digital landscape in an attempt to return to normalcy. The 2021 Global Threat Report by Crowdstrike provides details on how adversaries exploit weaknesses present in current day business and government infrastructures. Security is now a first-class citizen in PWAs as communications and/or data must be served over TLS connections.

A PWA looks, feels and navigate like any other web page with nested URLs or it can function as a single page application. It is also installable and executes using the browser runtime. Additional functionalities include having the ability to work offline and access to device hardware, e.g., camera, microphone or GPU(s), that are traditionally available only to native applications. The app developer is also able to embed PWA within a web page or vice versa using WebView on mobile, resulting in a hybrid framework.

The PWA is not limited to mobile platform, even though there is increasing adoption on smart watches. It is also compatible across platforms, look beautiful and responsive at different resolutions and/or orientations. It does this by treating different resolutions and platforms as multiple independent states, resulting in a single codebase, which greatly streamlined rapid iteration of feature development.

Being browser and platform independent, all you need is a stable internet connection which enable high interactivity, performance(FPS) and low latency responses for simple through medium complexity use cases. A PWA can be configured to work with any input type including touch, mouse, keyboard, audio or gestures.

The PWA paradigm trades native performance for flexibility.

Flutter For The Web

A PWA framework in the spotlight for web development is Flutter Web which hit the stable milestone in 2021.

However, it takes high cognitive effort in navigating complex low-level APIs for intermediate and advanced usage. As with any new and exciting framework, Flutter attracts droves of developers in implementing their own Flutter port of exiting applications, only to be met with lacking documentation and/or over-simplified examples that do not translate to real world use cases.

Usability issues aren’t unique to Flutter Web. Coming over from TensorFlow 1.x, intermediate and advanced usage also experienced the same kind of brick wall once the developer crossed the novice speed limit. With TensorFlow 2.x, the engineering team adopted Keras as their high level API with an emphasis on progressive disclosure of complexity and greatly improved usability.

In my neutral opinion, TensorFlow 2.x and Snapcraft serve as good starting points for communicating user/reference guides, targeting different expertise levels. As such, I have newfound appreciation for well communicated technical documentations. As someone starting with zero experience in web development and web technologies, Flutter Web represents an enormous challenge with a tremendous investment in cognitive effort. Previously, Streamlit was my go-to for rapid experimentation. Jumping from Streamlit to full-fledged Flutter Web is akin to bungee jumping in Grand Canyon, a straight plunge to rock bottom.

Not recommended for new, aspiring web developers with restricted time allowance as APIs implementation such as Navigator 2.0 can get low level and filled with boilerplate for intermediate and advanced use cases. There is significant effort in reviewing third party alternatives where several packages are replicating similar use cases for complex APIs. Due to the complexities in modern network of web technologies and native platform APIs, community contributions are in great need.

It is also due to this patchwork of volunteers and industry that allow a PWA built with Flutter Web to exhibit near native performance across different platforms and modern W3C-compliant browsers. A Flutter Web PWA just works, no need for app stores, no hard requirement to download or install any executable.

The real testament to Flutter framework is emulating Wechat which serve over 1 billion users and represents a super app, housing smaller apps within its ecosystem.

Modern Browser As A General Purpose Computing Platform

Evolution from fetching web pages, reading emails to crunching computation in a secure and sandboxed environment. Modern browsers greatly enhanced productivity and entertainment with plugins ecosystem and a growing body of Web APIs. A general-purpose modern browser represents an international community effort in a pursuit of a fair, open and privacy-preserving high accessibility tool. Recent functionalities include programming sandbox(IDEs), screen casting and machine learning powered tools such as autocomplete search.

Symbiosis Of Flutter And TensorFlow

As a tinkerer, there’s an itch to satisfy after witnessing the exponential advancement in modern technologies. Hence, the inspiration to create a tool that’s designed to initiate creative and/or problem solving processes, reducing the user’s cognitive inertia with productive work. The fruition of this project is evident by well defined interfaces of public facing APIs in seemingly unrelated fields(Flutter Web, TensorFlow, TensorFlowJS, TFX) across different languages(Python, C/C++/CUDA, JavaScript/TypeScript, Dart).

Initial machine learning(ML) models were written with TFX pipelines, the SavedModel outputs were further converted to JSON format to be compatible with the browser. Separate JavaScript/TypeScript scripts would contain the logic in loading the converted browser-compatible models and handling inference requests.

These inference scripts are executed as callbacks from Dart classes upon accepting user inputs in the app UI. For low complexity models that have just a single parameter and accept a single input, response time are <1 second. For medium complexity models that have multiple parameters and accept a single input, response time are also <1 second. For high complexity models that require loading from content delivery networks(CDNs) and accept open-ended inputs such as text, audio, image or video, response time range from 3 to 10 seconds.

Preliminary exploration suggest that these technologies are fully compatible and worth further investments into advanced capabilities of the humble web browser.

What’s Next?

Future roadmap include expansion of low, medium and high complexity models with strict performance restrictions. Extending application to process text, audio, image and video data efficiently. Explore different problem domains in related fields of computer vision, natural language processing and machine-generated content.

Summary

General purpose ML toolbox that is cross-platform and readily accessible through the internet.

• PWAs will continue to proliferate due to it’s flexibility
• Flutter Web hits stable milestone for production use
• Modern W3C-compliant browser with exciting APIs
• Flutter + machine learning frameworks = UI meets AI
• Roadmap