This is a Wikipedia mobile app for KaiOS. It is built with web technologies but is installed on the phone like a native app.
It is rather easy to run it locally in a browser. Just clone the repo and run npm install and npm run dev. Set your browser resolution to 240x290 for a realistic experience.
Which code to review
Please initiate the performance assessment by answering the below:
- What work has been done to ensure the best possible performance of the feature?
We're not looking for "best possible performance" but best possible time to market with adequate performance. We expect the features that don't require fetching data to feel snappy and those that do to feel responsive (not frozen). However, we have yet to design the article loading screen.
- What are likely to be the weak areas (e.g. bottlenecks) of the code in terms of performance?
We've found the css engine (Firefox 48) to be the main weakness. Laying out a large article can take 10 seconds or more. For this reason we only keep a single section in the DOM at a time and try to keep reflows to a minimum.
We transform the article API output quite a bit. This can take 250ms or more or very large articles.
- Are there potential optimisations that haven't been performed yet?
Breaking down large components into as many pure components as reasonable will greatly reduce the amount of rendering preact has to do.
Removing or memoizing calls to getBoundingClientRect() or other expensive DOM APIs could help.
We have to rewrite useNavigation so it doesn't renumber all the nodes all the time. We don't need it anymore.
Maybe include the i18n files in the bundle instead of fetching individual <lang>.json files on startup.
- Please list which performance measurements are in place for the feature and/or what you've measured ad-hoc so far. If you are unsure what to measure, ask the Performance Team for advice: email@example.com.
We use the console's time/timeEnd functions for ad-hoc measurements but nothing is in place permanently.