cft

GlueCodes: A Front-end Studio Powered by SolidJS

I would like to showcase the project I've been working on for the past year. It's a studio that has a built-in IDE, a repository of widgets, its own meta-framework, it is powered by SolidJS and exports code to clean JSX.


user

Przemyslaw Michalak

3 years ago | 3 min read

I would like to showcase the project I’ve been working on for the past year. It’s a studio that has a built-in IDE, a repository of widgets, its own meta-framework, it is powered by SolidJS and exports code to clean JSX.

That’s only a small part of all the features that we managed to implement so you can read more below or go straight to the video I uploaded on YouTube

https://www.youtube.com/watch?v=OGR7cjZW44Q

SolidJS

First and most important — it runs SolidJS. When we started building first prototype a year ago, we were using virtual-dom. Since the library seems to have been abandoned and its performance is not the greatest, we decided to swap it with SolidJS just at the beginning of the year. That not only gave us a huge performance boost in both studio and exported code but also allowed us to implement more features for developers like UI signals.

All you need is your browser…

…and everything happens locally. The Studio not only stores your project on your hard drive to keep it safe but also transpiles the code right on your PC which makes it fast since it does not need any cloud service for display.

The Live Preview

Setup-free and ready to go right at the start. Simply open the new tab with the Live Preview, drag it on a different screen and enjoy looking at all your changes while you type.

Implementation Assistant

Now let’s see deep down how the Studio actually makes developing web apps fast. Implementation Assistant scans your code while you type, and gives you in-context notifications about what needs to be done inside your project. When Implementation Assistant is triggered by the developer, it’s creating all the necessary folders, files, glue code and places everything inside the project structure exposing only the file where you type your code to add new functionalities to your web app.

Widgets

Please, don’t expect here simple dropdowns, buttons, inputs or God knows what other simple elements you can think of. Widgets are isolated UI pieces that let you prototype simple landing pages or advanced administration panels in minutes. At the moment, we developed over 70 of them, starting from a simple block presenter going all the way to advanced data tables and forms. All of it is installable inside your project with one click.

You can edit their content by using a simple JSON object and style them with scoped CSS or Global Styles (we are also planning on opening the repository with pre-made global styles created by the community). Of course, they are fully responsive and their documentation can be found inside the Studio right before installation.

Reusable Slots

Navigations, footers, cookie consent notice, pop-ups — everything that you think should be reused on multiple pages can be developed in the reusable slot (also Widgets can be installed there) and reused by pasting single line of HTML:

<div gc-as=”slot” gc-name=”footer”></div>

HTML directives

Loops, conditionals, error presenters and more can be done using simple `gc` directives. That’s definitely too wide a subject to write more about it here. So, I will definitely make a separate blog about it in the near future. But if you are curious, have a look at our docs

Styling

For all the Widgets, Slots or Reusable Slots, the Studio creates separate CSS files that you can use to style parts of your web app without interfering with the rest of it. On the other hand, you can use Global Styles to edit the whole app at once which helps you to keep a consistent design.

Since scoped files always have priority over Global Styles, you can create 10 headers on your page, set their size, margins and paddings globally and change the color for each of them using scoped CSS.

Bootstrap and Font Awesome

Since those two libraries are very popular, we decided to implement them inside the Studio. So, you can use them right at the start without looking for their dependencies, etc. If you are not a big fan of them, or you are just working on a project that won’t make use of them, no problem. You can easily delete them from the dependencies.

Exported code

The code is exported to clean and well-organized JSX powered by SolidJS. It also comes with docker and Webpack setup. You can deploy it straight to your hosting service or build it using the terminal and keep developing outside the Studio.

I recently made a video where I’m showing how exported code performs in Google Insights. You can find it here:

https://www.youtube.com/watch?v=FCJtIY2DeHk

Yeah, so that’s just a small part of everything that we developed in the Studio, but I don’t want to keep it too long. We’ll definitely keep making new videos and blogs showing more details about specific features, but it is important for us to adjust to the community. So, any suggestions will be appreciated.

I’m leaving a small video with presentation of the GlueCodes Studio to show you how everything described here works in practice.

You can also try out the Studio here:

www.glue.codes

Upvote


user
Created by

Przemyslaw Michalak

A member of GlueCodes which has been founded to support businesses in a dynamic chase for better web products.


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles