On the last long holiday, I spent a lot of time thinking how can I simplify my web development process. I usually work with React.JS CRA or Next.JS web frameworks. One of approach came to my mind: I need to eliminate tools like compiler/transpiler/pre-processing tools like JSX-compiler or even something like npm. I want to write the code directly into HTML page, literally index.html file. But why? To be honest I wasn't really sure what I was about to find, but what I was thinking: the less I need to write/maintain the code/files, then the better it is. I also want to keep the component-based approach like the React way, I found that I can utilize javascript built-in features: web components ([customElements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)) to achieve that feature.
At first, I really thought this must be a stupid idea since I already familiar with Typescript, and this process will eliminate many things like TS static typing features, node modules, and other things. The only things left are only html, js, and css files. I started with googling for existing related frameworks/library, after quick scan I found three nice candidates: (1) React without JSX, (2) Vue.JS and (3) Ractive.JS.

Quick recap: React without JSX is great but it locked me into single element page while I want freedom to use the components anywhere in the html file or even another component. Even though I can wrap the React root into a web component (customElement), that will add another complexity layer which is bad for me. Vue.JS have similar issue like React, their library was designed to put the root into a single element. Ractive at first was looked different, this is like an old library, but when I dig into the docs I found that their approach is similar to React and Vue.JS, single root and no one use web components.

I decided to build my own library that able to utilize web component feature to behave as close as possible like React component. Also I want the web component to be reactive, I think I can utilize [Proxy on browser](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to do that. After some trials and errors, finally the first MVP is running well, still there are some bugs, but it was nice and satisfying for me. Now its open source [https://siput.dev](https://siput.dev)

After exploring some use-case, this library is quite helpful for me especially small project like landing pages or a web that isn't need complex page behavior. All I need to do just open my code editor, create a folder and html, js, css files then put an import like jQuery, thats all. I dont have to deal with web frameworks anymore and their rules.

Experimen ini mencoba mengembangkan sebuah library mirip ReactJS namun tanpa menggunakan alat pre-processor atau compiler, sehingga langsung dijalankan di browser tanpa bantuan tools apapun.