DOM Manipulation with UmbrellaJS

As expected, it's really easy since it's strongly influenced by jQuery.

TL;DR

• u('<div>') can do the equivalent of document.createElement("div").
• Documentation | Umbrella JS
  • https://umbrellajs.com/documentation
• Umbrella JS Documentation Translation | Umbrella - Japanese.
  • https://tr.you84815.space/umbrella/index.html

Example of DOM to be generated

<div id="thumbnail_list" class="grid grid-cols-4 gap-4 px-24 py-4">
  <div class="h-56">
    <div class="mb-2">
      <img class="w-full h-40" src="https://via.placeholder.com/150/92c952">
    </div>
    <div class="flex">
      <img class="flex-none w-10 h-10 rounded-full" src="https://via.placeholder.com/150/92c952">
      <div class="flex-grow ml-4">
        <div>foo title A</div>
        <div class="text-sm">foo</div>
        <div class="text-sm">2020/11/15</div>
        </div>
    </div>
  </div>
  <div class="h-56">
    <div class="mb-2">
      <img class="w-full h-40" src="https://via.placeholder.com/150/92c952">
    </div>
    <div class="flex">
      <img class="flex-none w-10 h-10 rounded-full" src="https://via.placeholder.com/150/92c952">
      <div class="flex-grow ml-4">
        <div>bar title B</div>
        <div class="text-sm">bar</div>
        <div class="text-sm">2020/11/20</div>
        </div>
    </div>
  </div>
...
</div>

Trying with Vanilla JavaScript

function createVideoThumbnails(videos) {
  const thumbnailList = document.getElementById("thumbnail_list");

  for (const video of videos) {
    const thumbnailImg = document.createElement("img");
    thumbnailImg.className = "w-full h-40";
    thumbnailImg.src = video.thumbnailUrl;
    const thumbnailImgDiv = document.createElement("div");
    thumbnailImgDiv.className = "mb-2";
    thumbnailImgDiv.appendChild(thumbnailImg);
  
    const titleDiv = document.createElement("div");
    titleDiv.innerText = video.title;
    const artistDiv = document.createElement("div");
    artistDiv.className = "text-sm";
    artistDiv.innerText = video.artist;
    const dateDiv = document.createElement("div");
    dateDiv.className = "text-sm";
    dateDiv.innerText = video.date;
    const infoDiv = document.createElement("div");
    infoDiv.className = "flex-grow ml-4";
    infoDiv.appendChild(titleDiv);
    infoDiv.appendChild(artistDiv);
    infoDiv.appendChild(dateDiv);
  
    const iconImg = document.createElement("img");
    iconImg.className = "flex-none w-10 h-10 rounded-full";
    iconImg.src = video.thumbnailUrl;

    const iconAndInfoDiv = document.createElement("div");
    iconAndInfoDiv.className = "flex";
    iconAndInfoDiv.appendChild(iconImg);
    iconAndInfoDiv.appendChild(infoDiv);
  
    const thumbnailDiv = document.createElement("div");
    thumbnailDiv.className = "h-56";
    thumbnailDiv.appendChild(thumbnailImgDiv);
    thumbnailDiv.appendChild(iconAndInfoDiv);

    thumbnailList?.appendChild(thumbnailDiv);
  }
}

The code is so long...
I feel like it could be written a bit more smartly, but it probably wouldn't make a huge difference.

Trying with UmbrellaJS (+TypeScript)

type Video = {
  id: string;
  title: string;
  artist: string;
  thumbnailUrl: string;
  sourceUrl: string;
  date: string;
}

function createVideoThumbnailsByU(videos:Array<Video>):void {
  const thumbnailList = u("#thumbnail_list");

  for (const video of videos) {
    const thumbnailImg = u('<img>').addClass("w-full h-40").attr("src", video.thumbnailUrl);
    const thumbnailImgDiv = u('<div>').addClass("mb-2");
    thumbnailImgDiv.append(thumbnailImg);

    const titleDiv = u('<div>').text(video.title);
    const artistDiv = u('<div>').addClass("text-sm").text(video.artist);
    const dateDiv = u('<div>').addClass("text-sm").text(video.date);
    const infoDiv = u('<div>').addClass("flex-grow ml-4");
    infoDiv.append(titleDiv).append(artistDiv).append(dateDiv);

    const iconImg = u('<img>').addClass("flex-none w-10 h-10 rounded-full").attr("src", video.thumbnailUrl);
    const iconAndInfoDiv = u('<div>').addClass("flex");
    iconAndInfoDiv.append(iconImg).append(infoDiv);

    const thumbnailDiv = u('<div>').addClass("h-56");
    thumbnailDiv.append(thumbnailImgDiv).append(iconAndInfoDiv);

    thumbnailList.append(thumbnailDiv);
  }
}

Done.
u('<div>') can do the equivalent of document.createElement("div").
Since u() returns an Umbrella JS instance, you can conveniently specify classes or attributes directly using method chaining.
I also feel it looks cleaner because append() can also be chained.
The final generated DOM is the same as the Vanilla JavaScript pattern.

I also feel this could be written even more concisely... I'm still trying out various ways.

Reference Sites

• Documentation | Umbrella JS
  • https://umbrellajs.com/documentation
• Umbrella JS Documentation Translation | Umbrella - Japanese.
  • https://tr.you84815.space/umbrella/index.html