Each mobile platform maintains a set of custom HTML/CSS/JS that is used to render articles specifically for each platform.
This ticket is focused on auditing these separate implementations and seeing which code can be shared and how.
As a matter of timing, the Web Team is working on prototyping a new ServiceWorker powered implementation of the Mobile Web while at the same time using the MCS for content. Because of this, it seems like an appropriate time to look into this topic.
Questions / Ideas:
# Can CSS / JS be written in a way that can work across various form factors / platforms but not fragment the cache
# Can we use media queries to move some custom JS into CSS?
# Identify differences between apps and web (CSS / JS) to allow the above
# What will live in the MCS? (Just the Mobile Sections API?)
# What about cross site hosting concerns?
# When will Service Worker Proxy be completed? (Server side ServiceWorker)
# How much can we change the look of all platforms to ensure they have a consistent look to make the above easier?
# Will the mobile web use API calls to populate the HTML?
# Will mobile web degrade to non service worker w/js and then to non js clients? Or will it be all or nothing?
# Will streaming HTML to the apps improve rendering time?
# How can we decrease rendering time? What are the current times to render?
# Where will the JavaScript blob live?
- Square recommends that the blob be provided by the server. This allows the server to control both the data and logic in one place without re-releasing the app and greatly minimizing versioning concerns
- Regardless of where the blob lives, we should publish it as an NPM package
# What does testing look like?
- For presentation logic such as dates (today, yesterday, 3p, etc), this could be string assertions
- For DOM transforms (such as making tables collapsible), this could be apply then transform then trigger it and observe the result
# Are there any special considerations for versioning needed between the library and the Content Service? Native bridge platforms?
# Can we eliminate page rewriting for offline mode on Android and iOS? Maybe base href with a local server can be useful?
# What version of JavaScript are we compiling to?
- Android is currently API 16. Android System WebView isn't available until 21 so we have to support whatever is baked into 16.
# Can we simplify the process of generating stylesheets? Currently they exit in a separate repo, have common and platform overide files, and generated infrequently
References:
* [[ https://medium.com/square-corner-blog/shared-app-functionality-via-javascript-bbba4f0cb3ea | Shared App Functionality via JavaScript ]] (Square)