Let me begin with a disclaimer: The tool I'm going to present isn't a replacement of frontend expertise and it's mostly suitable for full-stack developers. Therefore, I hope to get to full-stack developers who need to get their hands dirty with frontend to manage/visualise data.

I've been developing my own dev tool to make frontend simpler for people like me who find it extremely opiniated and often overengineered. In short, we are a low-code platform for developing interactive web frontends faster and with less tech knowledge required. It’s a tool for full stack developers who find frontend overcomplicated. Instead of going all over drag & drop, you can code using basics (as when frontend used to be just about HTML, CSS, and JavaScript) and underneath all the complex stuff is just happening for you. You code in a setup free online code editor with live preview. You are guided by live notifications which suggest what needs to be implemented next. Then, you can download scalable code which meets the newest web standards (React like but not precisely) and either keep tinkering with it or build it with Webpack. In the end you'll receive production-optimised code that delivers excellent page-load time.

Our niche is admin dashboards but transforming Porto template which we used for our website was also a pleasure (we are a team of just two so don't be too judgemental about it). By transforming I mean making it reactive, light, prerender on server-side etc. basically making it production-ready. Here is our website: https://www.glue.codes

The "complex" parts you cannot or it’s harder to get with frameworks are:

• Setup-free coding environment with live preview which let’s you code with the newest version of JS.
• You begin with a template full of examples.
• It’s a self-contained tool which doesn’t require any other libraries, yet you can use any NPM frontend modules if you need to.
• Splitting UI into manageable pieces (in GlueCodes you just add two HTML attributes to generate slot with CSS stylesheet scoped to it).
• You type HTML which internally gets converted to code that uses Virtual DOM.
• There is a built-in app state flow management which lets you keep event handlers and data providers as functions. There is a single state which can be accessed from any place in the UI and event-handling/data-providing actions write to it by simply returning/resolving. Underneath, the result of any action it stored against the keys named after its name. So, in your UI you have access to two global variables actions (an object holding event handlers/actions) and actionResults (results of these actions). After executing an action, the entire UI is re-rendered, and you have access to its result. It’s just simple and it means that to code any logic, you just export out functions. It’s all glued for you.
• After downloading code, you can bundle it with a single command which uses Webpack. The result is static HTML files (prerenders) which are populated by Virtual DOM-based function in runtime. So, you don’t need server-side solution like Next.js and can deploy your site e.g. to AWS S3 which is cheap.
• There are widgets you can insert in your HTML with a single-click. And it might be not so existing especially with simple presenters. However, more complex widgets are installed with their required app-wide actions and example input data. So after installation, it’s fully functional, even though you didn’t add a single line of JavaScript, and your job is to change the mocked actions to use your API.
• We have a standardised way of developing your own widgets and that covers things like scoped styling, telling what CSS classes should be opened to style from outside, creating mocked app-wide actions and writing example widget declaration, versioning and more.

I’d appreciate if you could challenge my points as it would really help to put this project on the right track.

We already have a rather advanced prototype. We want to push this project forward and we need your feedback. If you want play with our demo by yourself here is a link: https://ide.glue.codes or follow me for any further updates. Also, give ❤️ to help spreading the news about GlueCodes.