In line with Progressive Web Application (PWA) technologies. I present the Device Streaming Object Library (DSO Loader) as an all-in-one resource and performance management environment for dynamic code and resource delivery.
The DSO Loader is designed to be a lightweight service that tracks the networks' link performance in order to provide the most efficient and effective Quality of User Experience (QoUE).
One of the DSO Loader's key functions will be is the ability to determine the current network speed as early as possible in the initial download phase, and signal a slow or fast download rate in KiloBytes per second (KBps) and then offering various strategies to enrich the QoUE.
If the DSO Loader detects a slow KBps download rate, instead of downloading the entire interactive site or experience. The DSO Loader will begin downloading a low or non interactive version of the site, which will have reduced or no user interactive functionality.
Meanwhile, the full responsive interactive online experience can be progressively downloaded in the background based on DSO's configuration. Ideally, if the connection strength is rated well, the interactive experience is directly offered. Further, if frameworks and libraries cross over between both states, these libraries will be shared or what is defined in configuration as 'inherited' libraries.
The areas in which DSO Loader can deliver functional advantages are:
- Progressively load the full interactive experience while offering the low interactive version during the interim.
- Grouped deferred and asynchronous CSS delivery.
- Grouped deferred JavaScript module/library delivery.
Possible advancements in features could include modularisation, however, the main drawback will be purpose and download footprint when other parts of the DSO Loader which would be better suited. However, some parts that could be considered useful for asynchronously retrieved or even direct modularisation could include the following.
Global performance functions / tool sets - E.G Create a lazy loading algorithm that decides whether to lazy load images based on connection quality rather than viewport.
ServiceWorker event listening and frameworking - The DSO Loader can allow for a global interface for device level interactions. Such features can include, structure based cache management; or push notification handlers and services.
DSO Loader is broken down into the following key areas
- Network (and processor) performance
- Library bundling and configuration
- Prioritisation of initialisation
- Concise and asynchronous object download
Network and processor performance will be a fairly simple interaction between Resource Timing and calculating the download rate of an incoming result or ping test and then using the download rate in KBps to decide an appropriate download strategy.
Being able to choose what Javascript/CSS files are downloaded with what bundle version by a defined download rate.
Note: the threshold will be configurable.
- low interactive
- full interactive
- custom download thresholds
The following strategies can take place if the download rate of download is not met.
- Ask to download the full interactive experience in the background
- Assume to download the full interactive experience in the background
- Once a download is met ask to show the full interactive mode
- Ask other custom thresholds to be download
- Automatically step custom thresholds once full interactive has loaded or vice-versa
All object downloads should be handled in a way that allows for maximum download efficiency and reuse. Javascript/CSS libraries will be cross shared and layered allowing for reuse whenever possible.
This project is written as native ES5.1 Compliant JavaScript.
Also, this project is still very much in early stages, as this lib only currently works as a bare-bones solution or as a manual implementation. This will change as soon as the code base reaches maturity and offering it as a practical real world solution becomes feasible.
The eventual outcome of this project will be to maintain compatibility with most popular development environments by operating as a Webpack module or plugin. Further, the aim will be to offer the ability to seamlessly connect with most popular front-end frameworks such as React, Angular and Vue, etc.
In order for the library to be effective the entire initial payload size or the First Byte payload should try to be under about 20KB compiled (approx) uncompressed, which includes the sites' AppShell and the DSO Loader. Please see my blog article discussing in-depth, breaking down benchmarks and the overall efficacy of the footprint strategy and design.
- Request a small data object such as an image or file.
- Use the last recorded KBps rate to decide on bundling.
- Continue to download other bundles in the background after the initial download offering (optional).
- If the KBps threshold is passed then load the relevant bundle in varied experience bands as per DSO Loader's configuration
- If the KBps threshold has falls below minimum level then load low interactive mode
- on Bundle Load - Once A bundle has loaded
- on Scripts Bundle load - Once the JavaScript part of the bundle has loaded
- on Styles Bundle load - Once the CSS part of the bundle has loaded
- on Threshold Load - Once entire threshold has loaded
- on Experience Load - At what Experience the threshold been has loaded at
Please see the project roadmap for more details on future feature-sets.
Please see the following demo site.
To see the differences in network speed load DevTools, visit Networking and switch between: Online, Fast 3G, and Slow 3G.
Feel free to contact me via email jamestbiv@gmail.com for any general related enquiries or discussions.