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.
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.
- 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.