Building first app, but code seems to be very inefficient

@g_lander thanks for your hint. It was indeed uploading straight to RAM, changed the IDE now to upload to flash.

Original implementation BJS1 uploaded to RAM

before render { "free": 2449, "usage": 51, "total": 2500, "history": 9, "gc": 0, "gctime": 0, "blocksize": 13 }
after render { "free": 1059, "usage": 1441, "total": 2500, "history": 243, "gc": 0, "gctime": 2, "blocksize": 13 }
after render { "free": 967, "usage": 1533, "total": 2500, "history": 249, "gc": 0, "gctime": 3, "blocksize": 13 }

Original implementation BJS2 uploaded to RAM

before render { "free": 11950, "usage": 50, "total": 12000, "history": 8, "gc": 0, "gctime": 2, "blocksize": 15 }
after render { "free": 10708, "usage": 1292, "total": 12000, "history": 204, "gc": 0, "gctime": 9, "blocksize": 15 }
after render { "free": 10688, "usage": 1312, "total": 12000, "history": 210, "gc": 13, "gctime": 12, "blocksize": 15 }

My implementation BJS1 uploaded to RAM

before render { "free": 1841, "usage": 659, "total": 2500, "history": 9, "gc": 0, "gctime": 3, "blocksize": 13 }
New interpreter error: LOW_MEMORY,MEMORY

My implementation BJS2 uploaded to RAM

before render { "free": 11409, "usage": 591, "total": 12000, "history": 8, "gc": 0, "gctime": 11, "blocksize": 15 }
after render { "free": 9377, "usage": 2623, "total": 12000, "history": 90, "gc": 333, "gctime": 10, "blocksize": 15 }
after render { "free": 9394, "usage": 2606, "total": 12000, "history": 96, "gc": 186, "gctime": 12, "blocksize": 15 }

My implementation exceeds the maximum memory for BJS1 while running on BJS2 and the before render call in both implementations indicates a higher memory usage on BJS1 in general.

After figuring out the issue with the RAM I also dropped the huge fonts and rely on the available 6x8 font now. I also started nesting the calendar elements, so I don't have to have the extra function rendering over my layout, but can simply update the day of the month with layout['day-of-month'].label = date.getDate();

console.log('before render', process.memory());

const WIDTH = g.getWidth();
const HEIGHT = g.getHeight();
const FG_COLOR = 0x0000;
const HL_COLOR = 0xFFFF;
const BG_COLOR = 0xFFE0;
const THICKNESS = 4;

function getShoeImageSource() {
  return require("heatshrink").decompress(atob("oFAwkEogA/AH4A/AH4A/AH4A/AE8AAAoeXoAfeDQUBmcyD7A+Dh///8QD649CiAfaHwUvD4sEHy0DDYIfEICg+Cn4fHICY+DD4nxcgojOHwgfEIAYfRCIQaDD4ZAFD5r7DH4//kAfRCIZ/GAAnwD5p9DX44fTHgYSBf4ofVDAQEBl4fFUAgfOXoQzBgIfFBAIfPP4RAEAoYAB+cRiK/SG4h/WIBAfXIA7CBAAswD55AHn6fUIBMCD65AHl4gCmcziAfQQJqfQQJpiDgk0IDXxQLRAEECaBM+QgRYRYgUIA0CD4ggSQJiDCiAKBICszAAswD55AHABKBVD7BAFABIqBD5pAFABPxD55AOD6BADiIAJQAyxLABwf/gaAPAH4A/AH4ARA=="));
}

function createLayout() {
  const Layout = require("Layout");

  return new Layout({
    type: "v",
    col: FG_COLOR,
    bgCol: BG_COLOR,
    c: [
      {type: "h", c: [
        {width: WIDTH/2, height: HEIGHT/2, id: "top-left", type: "v", c: [
          {height: THICKNESS*3},
          {type: "h", c: [
            {bgCol: FG_COLOR, height: THICKNESS, width: THICKNESS, id: "left-hook"},
            {width: THICKNESS*3},
            {bgCol: FG_COLOR, height: THICKNESS, width: THICKNESS, id: "right-hook"},
          ]},
          {bgCol: FG_COLOR, height: 50-THICKNESS*2, width: 50-THICKNESS*2, type: "v", c: [
            {height: THICKNESS},
            {bgCol: HL_COLOR, type: "h", c: [
              {height: 50-THICKNESS*4, width: 50-THICKNESS*4, id: "day-of-month", type: "txt", font: "6x8:2", label: "1"}
            ]},
            {height: THICKNESS},
          ]},
          {height: THICKNESS},
          {id: "day", type: "txt", font: "6x8:2", label: "MON"}
        ]},
        {width: WIDTH/2, height: HEIGHT/2, id: "top-right", type: "v", c: [
          {type: "img", src: getShoeImageSource},
          {id: "steps", type: "txt", font: "6x8:2", label: "000"}
        ]}
      ]},
      {height: HEIGHT/2, type: "v", c: [
        {bgCol: FG_COLOR, fillx: 1, height: 5, id: "top-separator"},
        {bgCol: HL_COLOR, fillx: 1, height: 60, id: "time", type: "txt", font: "6x8:5", label: "00:00"},
        {bgCol: FG_COLOR, fillx: 1, height: 5, id: "bottom-separator"}
      ]}
    ]
  }, {lazy:true});
}

function draw() {
  const locale = require("locale");
  const date = new Date();

  layout.time.label = locale.time(date, 1).replace(/ +/, 0);
  layout.steps.label = Bangle.getHealthStatus("day").steps;
  layout.day.label = locale.dow(date, 1).toUpperCase();
  layout['day-of-month'].label = date.getDate();

  layout.render();
  console.log('after render', process.memory());
  //layout.debug();
}

g.clear();

const layout = createLayout();

setInterval(draw, 15000);

draw();

Bangle.setUI("clock");

My updated implementation BJS1 uploaded to RAM

before render { "free": 1841, "usage": 659, "total": 2500, "history": 9, "gc": 0, "gctime": 0, "blocksize": 13 }
after render { "free": 976, "usage": 1524, "total": 2500, "history": 155, "gc": 355, "gctime": 1, "blocksize": 13 }
after render { "free": 954, "usage": 1546, "total": 2500, "history": 161, "gc": 175, "gctime": 1, "blocksize": 13 }

My updated implementation BJS2 uploaded to RAM

before render { "free": 11409, "usage": 591, "total": 12000, "history": 8, "gc": 0, "gctime": 11, "blocksize": 15 }
after render { "free": 10532, "usage": 1468, "total": 12000, "history": 130, "gc": 333, "gctime": 17, "blocksize": 15 }
after render { "free": 10549, "usage": 1451, "total": 12000, "history": 136, "gc": 186, "gctime": 14, "blocksize": 15 }

My updated implementation BJS1 uploaded to Flash

before render { "free": 2348, "usage": 152, "total": 2500, "history": 0, "gc": 0, "gctime": 0, "blocksize": 13 }
after render { "free": 1653, "usage": 847, "total": 2500, "history": 0, "gc": 205, "gctime": 2, "blocksize": 13 }
after render { "free": 1638, "usage": 862, "total": 2500, "history": 0, "gc": 89, "gctime": 1, "blocksize": 13 }

My updated implementation BJS2 uploaded to Flash

before render { "free": 11849, "usage": 151, "total": 12000, "history": 0, "gc": 0, "gctime": 1, "blocksize": 15 }
after render { "free": 11129, "usage": 871, "total": 12000, "history": 0, "gc": 205, "gctime": 13, "blocksize": 15 }
after render { "free": 11143, "usage": 857, "total": 12000, "history": 0, "gc": 113, "gctime": 12, "blocksize": 15 }

Difference between rendering on BJS1+2:

While it seems to be sufficient to specify col: FG_COLOR on the root element of the layout for BJS2, it requires BJS1 to explicitly specify it per type: "txt" element to make it work.