This content originally appeared on DEV Community and was authored by Przemyslaw Michalak
I would like to showcase my project I've been working on for a last year. It's a Studio that has built in IDE, repository of Widgets, it's own meta-framework, it is powered by SolidJS and export code to clean JSX. That's only a small part of all features that we managed to implement so you can read more below or go straight to the video I uploaded on YouTube
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 be abandoned and it's performance is not the greatest we decided to swap it with Solid just at the beginning of the year. That not only gave us huge performance boost in both - Studio and exported code, but also let us to implement more features for developers like UI Signals.
All you need is browser...
...and everything happens locally. The Studio not only stores your project on your hard drive to keep it safe but also transpile the code right on your PC which makes it fast since is not send to any cloud service before is displayed in...
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 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 developer, it's creating all 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 lets you prototype simple landing pages or advanced administration panels in minutes. At the moment we developed over 70 of them, starting from simple block presenter going to advanced data tables and forms. All of it is installable inside your project within one click. You can edit their content by using simple object JSON and style them with scoped CSS or Global Styles (we also planning on opening the repository with pre-made global styles created by 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-up's - 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 to wide subject to write more about it here, so I definitely make separate blog about it in close feature, 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 help you to keep consistent design. Since scoped files have always priority over Global Styles you can create 10 header on your page, set their size, margins and paddings globally and change just color for each of them using scoped CSS.
Bootstrap and Font Awesome
Since those 2 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 just working on a project that won't make a use out 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 terminal and keep developing outside the Studio
Yeah. 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 community. So any suggestions will be appreciated.
I'm leaving 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:
This content originally appeared on DEV Community and was authored by Przemyslaw Michalak
Przemyslaw Michalak | Sciencx (2021-05-21T17:12:50+00:00) Front-end Studio powered by SolidJS. Retrieved from https://www.scien.cx/2021/05/21/front-end-studio-powered-by-solidjs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.