DEV Community

artydev
artydev

Posted on • Edited on

1

You perhaps don't need any framework to use components in Javascript

Developping with components is at core of all modern frameworks.
In DML here is how to create a simple card component :

/* Definition of card component */
function Card(img) {
  let card = selectBase(div("", { class: csscard }));
  h1(img.title, { class: csstitle });
  image(img.src, { class: cssimgs, title: img });
  unselectBase();
  return card;
}
Enter fullscreen mode Exit fullscreen mode

As you can see, it is just Javascript. DML is not a framework, it is a library which works directly in the browser like Jquery.

Here is a demo on how to use it :

import { selectBase, div, unselectBase, h1, image, _bgred } from "./dml";

import b from "bss";

b.css("body", {
  padding: 0,
  margin: 0,
  paddingTop: "50px"
});

let csscard = b`
  max-width: 400px;
  background:white;
  margin: 0 auto;
  margin-bottom: 10px;
  border: 1px solid black;
`;

let cssimgs = b`
  width: 100%;
  display: inline-block;
  position: relative;
  top: 4px;
`;

let csstitle = b`
  text-align: center;
  margin:0;
  padding: 0;
   font-size: min(7vw, 32px);
`;

let images = [
  {title: "American Eskimo", src: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/American_Eskimo_Dog.jpg/1280px-American_Eskimo_Dog.jpg"},
  {title: "Rodhesian Ridgeback", src: "https://st2.depositphotos.com/1833015/5457/i/950/depositphotos_54570909-stock-photo-dog-breed-rhodesian-ridgeback.jpg"}
];

/* Definition of card component */
function Card(img) {
  let card = selectBase(div("", { class: csscard }));
  h1(img.title, { class: csstitle });
  image(img.src, { class: cssimgs, title: img });
  unselectBase();
  return card;
}

for (let img of images) {
  Card(img)
}

Enter fullscreen mode Exit fullscreen mode

You can play with it here : DemoCard

Another demo : UserCards

function  UserCard (user) {
  let card = selectBase(div("", { class: csscard }));
  let userdiv = selectBase(div("", {class: cssuser}));
  image(user.picture.thumbnail, {class: cssimg})
  div(user.name.first, {class: csstitle})
  unselectBase(2); //end card; end userdiv
  return card;
}

async function main (numUsers) {
  let req = await fetch(`https://randomuser.me/api/?results=${numUsers}`)
  let resp = await req.json();
  resp.results.map(UserCard)
}
Enter fullscreen mode Exit fullscreen mode

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay