WatchmakerJS and Initial Dev observations

Hey everyone. So I've had my Bangle for a few days and I've been diving into discovering what it takes to make an app for the device.

My output so far is WatchmakerJS - https://github.com/tanepiper/watchmaker-­js (with demo "Moods" app)

This is very very alpha - there are two parts included in it:

• The library itself - https://github.com/tanepiper/watchmaker-­js/tree/main/packages/watchmaker/watchma­ker/src/lib

• A basic app using it: https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts

The library includes a few wrapper functions around E methods, using some additional library code to take strings and turn them into pages of content. There is also a new UI component I called a "Scroll Prompt" that is a cross between a Prompt and a Menu: https://github.com/tanepiper/watchmaker-­js/blob/main/packages/watchmaker/watchma­ker/src/lib/ui.ts#L117

Here is only shows two options - but like a menu it supports as many options as provided

The biggest part of the library is lug - A small application framework that allows routable applications to be created and handles some additional stuff:

• A router configuration and .goTo method that allows you to define your application flow
  
• A global state (that should be used sparingly!) that allows for some shared state across the app
  
• Methods for loading/saving from an app.settings.json file, and loading global settings
  
• Methods for loading from an application text file (for storing strings rather than hard-coding in memory)
  
• Methods for saving data as a JSON file in storage, with each line a separate JSON object (recommended with using an array of data and .unshift to make sure the latest data is at the top, not the end) - so it's easily parsable in the app, and also easy to parse with some additional changes on the interface.html
  
• Methods for loading data to a specified number of lines
  
• Some basic state for storing images that are regularly used.
  
• Also has three callbacks passed as options - init for setting app state, first for the first transition after app state loaded and onChange when each route change happens.
  
  

So far these are the things I've found I needed to make a fast, memory-efficient app. Since implementing these new techniques my initial app - which ran out of memory - now barely pushes total memory usage over 60%

I've written an initial app for it - The Moods App - https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts

• Loads some initial data and state (https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts#L531)
  
• If the first run, shows the help steps, otherwise goes to the home page
  
• Sets up listeners for GPS, HRM and LCD Power, and a debug function with debug data (only available when Debug Info is on in the global settings - can be viewed in the debug menu) (https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts#L62)
  
• Handles the flow of data through sync and async pages, and includes some new UI like the Scroll Prompt page (https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts#L258)
  
• Some basic drawing of image and text (using image from the app state) https://github.com/tanepiper/watchmaker-­js/blob/main/packages/apps/wmaker/src/ma­in.ts#L44
  
  

Data is saved each time a new mood is added - which can include HRM and Geolocation data - it's also saved by reading the current file, appending the new record to the beginning and resaving - this means re-reading data the latest is always at the top. This makes re-reading data much more efficient than having to read the whole file to get the latest data.

There are instructions to build the library and the app - currently, the app requires the library and I'm still figuring out the tooling to bundle correctly - otherwise, the library needs to be included in the BangleApps module folder and as it's still early release I'd prefer not to add the app just now.

The overall size of apps is still on the large size - there's also an issue with the Terser plugin causing code to fail when uploaded to the Bangle, but that works perfectly fine unminified. However once on the device the app is quick and efficient with data.

Would love to get some feedback on this in terms of usefulness and also potential features (also on anything anyone sees as a nono!)

Nice! The routing idea seems like it might be quite helpful.

My only concern with this is obviously there are pretty limited resources on the Bangle, and things like wrapper functions can end up chewing through them quite quickly.

If you haven't already it'd be well worth checking out https://www.espruino.com/Code+Style#othe­r-suggestions and trying to make your library such that it can run without using too much memory. The more stuff you can keep in flash (which is really pretty big) the better!

Hey @Gordon - thanks for the feedback.

The final idea would be to have something that is zero dependencies and fully tree-shakable, but for now, it's just a concept idea - I've got some kind of pipeline compiling the library to a IIFE version and appending it with the app code, which is also IIFE and it works fine - but yes it's pulling 10K for that file.

I'm trying for the library being ESM/UMD which means it's importable and tree-shakable, and the output code being UMD with bundled dependencies but it seems a pain right now. It's something I might come back to.

(As it is if I made that select component more compact would it be useful in the core? It's an alternative to a menu but allowing a user prompt)