DEV Community

GreenestGoat
GreenestGoat

Posted on • Edited on

Mase JS is a new way to write HTML entirely in your JavaScript.

#webdev #javascript #programming #html

Mase JS is a new way to write HTML entirely in your JavaScript.

Introducing Mase JS a new way to write and structure html entirely inside your JavaScript. Also leaving a small footprint on your website as the library comes in at only 800 bytes in size. it uses a custom JSON like format that converts JavaScript to html on the frontend.

Planned:

Server side / Backend rendering with nodejs or express.
plugin support.

check out the GitHub to get started, also a star would be awesome, if you find an error or wanna ask me a question have a look at our Discord server.

Installation

CDN

Import Mase JS using CDN.

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs';
Enter fullscreen mode Exit fullscreen mode

🚧 Specific Version 

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';
Enter fullscreen mode Exit fullscreen mode

NPM

Install Mase JS using npm and node.

npm install masejs
Enter fullscreen mode Exit fullscreen mode

Import

Import Mase JS definitions from MaseJSInterpreter.

index.js

import { MaseJSInterpreter } from 'masejs';

MaseJSInterpreter.interpret(masejs);
Enter fullscreen mode Exit fullscreen mode

Usage

Use the tree structure in your Javascript. That's it 🎉.

script.js

import { MaseJSInterpreter } from 'https://cdn.jsdelivr.net/npm/masejs@latest';

const masejs = {
  div: {
    center: 'true',
    class: 'button-container',
    styles: {
      height: '100%',
      width: '100%',
      inset: '0px',
      position: 'fixed',
    },
    button: [
      {
        value: 'Click me',
        styles: {
          color: 'white',
          'background-color': '#000000',
          outline: 'none',
          border: 'none',
          height: '38px',
          width: '88px',
          'border-radius': '5px',
          cursor: 'pointer',
        },
        class: 'button',
        id: 'button',
        events: {
          click: () => alert('Button clicked!')
        },
      }
    ]
  }
};

MaseJSInterpreter.interpret(masejs);
Enter fullscreen mode Exit fullscreen mode

Examples

Top comments (13)

Collapse
 
merri profile image
Vesa Piittinen •

Here are some tips for improvements:

  1. People want to write their HTML as HTML (that's why JSX and similar syntaxes like htm are so popular).
  2. People want to write their CSS as CSS because that's transportable, CSS as JS object is awkward, and CSS-in-JS custom code dies over time as the JS solution becomes a legacy burden.
  3. For UI library / framework people are most interested of state management and structure: how to keep a complex app together without it becoming a mess. Currently signals are regarded as the optimal solution for front-end.

With this I'm not saying you shouldn't be doing what you do, instead I'm just encouraging to look into what has already been done before, and find out what problems are not solved yet, and whether it makes sense (for you) to spend time to solve those problems.

Collapse
 
greenestgoat profile image
GreenestGoat •

ty for the feedback

Collapse
 
syeo66 profile image
Red Ochsenbein (he/him) •

Not everything needs to be Javascript. Maybe HTML should stay HTML.

Collapse
 
efpage profile image
Eckehard •

The way, HTML and Javascript are coupled (via global ID´s) can be impractical, so there are cases where you have a benefit to build the DOM directly without using HTML. But as always - it depends much on your task.

Collapse
 
efpage profile image
Eckehard •

Just a question:

why did you not use innerHTML? HTML-rendering his highly optimized, so probably faster than any JS solution. So, your code would be something like this:

const masejs = document.createDocumentFragment();
masejs.innerHTML = ' <div class = 'button-container' style = '...' >
  <button>
         Click me
  </button>
</div>
'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
husseinkizz profile image
Hussein Kizz •

Hmm nice, am also working on a framework, just finishing up final touches, my initial draft was like what you have there, later realized its not dx friendly and so unnatural so I can say just continue!

Collapse
 
hopemanryan profile image
Ryan Hoffman •

it seems like you made a virtual dom, while it is impressive (found that most people dont know how they would implement this) the current solution is for very basic functionality and doesn't take into consideration many things other frameworks have already have a mature solution for.
mostly under render performance.
its a cool project dont get me wrong, and good job for creating the logic for it, but lets keep it at that IMO , not trying to discourage you or anything just being realistic

Collapse
 
franklivania profile image
Chibuzo Franklin Odigbo •

Why would I use this? What does it solve?

Collapse
 
greenestgoat profile image
GreenestGoat •

it would mostly be used to have all you code in one place in a single language.

Collapse
 
efpage profile image
Eckehard • • Edited

Beside the fact that JSX solves the same task in a more natural way, there are lot´s of mature libraries featuring the same idea. See Mithril or VanJS. Most of them use a "composition by code"-approach, where the structure of the code controls the structure of the DOM.

You might have a look on DML, which implements (like VanJS) all HTML-tags as functions, so you can just write
h1("headline") to create a headline. But as it features an "auto-mount" feature, you can use Javascript commands to build your DOM. An ordered list can be created like this:

begin(ol())
["apple","banana","kiwi"].forEach(fruit => li(fruit))
end()
Enter fullscreen mode Exit fullscreen mode

DML allows to easily build functional componentes, so many commands are extended like this:

ol(["apple","banana","kiwi"])
Enter fullscreen mode Exit fullscreen mode

There is definitively a place for DOM in JS-solutions, but it would be better if people would cotribute to existing projects instead of reinventing the wheel every second week.

Collapse
 
franklivania profile image
Chibuzo Franklin Odigbo •

Yeah, that is great, but I am more focused on the "functionality" side of things. HTML/JSX is already great, plus, this then contains the Vanilla-CSS dread. So...

Whilst I understand how this wold be okay, it is not great, in the grand scheme. I see it as removing the flexibility from creating a modular structure, with more robust reusable component structure. So... What is the happs to this?

Collapse
 
alxwnth profile image
Alex •

Interesting concept! But I’d rather have my HTML as HTML

Collapse
 
salladshooter profile image
SalladShooter •

This is impressive. I’m working on something similar but for Python instead -> github.com/SalladShooter/phyal. My motive is sometimes people don’t want to or can’t learn HTML but know another language instead. Keep up the work!

View full discussion (13 comments)

Read next

nozibul_islam_113b1d5334f profile image

JavaScript Shared Memory

Nozibul Islam -

saidmounaim profile image

Social connect full-stack app using NestJs, Next.js, Prisma & Next-Auth

Said MOUNAIM -

leandroveiga profile image

Master Advanced LINQ in C#: Writing Ultra-Efficient Queries for Massive Datasets

Leandro Veiga -

labby profile image

Vulnerability Scanning | Penetration Testing | Kali Linux | Metasploitable2 | Hands-on Lab

Labby -