I know there is plenty of backend developers who are either not passionate about creating frontend or don't have time to learn additional languages. But Web is constantly expanding and the demand for good developers is growing disproportionate to number of them. So sometimes all of us have to step up, go out of our comfort zone, and help the team deliver code in stack that we don't feel comfortable with. I asked on dev.to Facebook and Twitter what are your main issues when it comes to creating the frontend. And those are the main issues addressed by you:
1. Responsiveness
2. Browser compatibility
3. The need to learning extra programming languages
4. JavaScript itself
5. The overwhelming amount of libraries often not well documented or even abandoned
6. The App state management
Knowing that all of us are mostly facing the same problems over and over there had to be someone trying to solve at least some of them. And I personally think this is how we got to the age of 'drag and drop' tools. Sounds great. You start with some visual template, adding the necessary elements like buttons or paragraphs, resizing, filling some form responsible for its look and Voilà. We got our prototype. Yeah... if only that would be the case... Unfortunately it works great as long as you play by the rules of the tool that you are using. The first problem appears when you try to do something that the creators of the tool didn't expected you to do. We all know how crazy UI designers can be, right? So you are dragging and dropping new elements trying to implement everything that you see in the mock up and starting loosing control over the responsiveness or finding that its close to impossible to add certain functionalities. The other problem I personally have with platforms like that is the fact that I actually have to use a visual tool. I think that, we, developers who are spending dozen of hours on learning code deserve something better than Paint on steroids, letting us drag and drop boxes around the page and filling plenty of forms to make it come to life...
So a friend of mine, after months of developing the idea in his head, came up with something. Something that could potentially solve all these issues when it comes to making a frontend and make it a pleasure. This is how we started developing our own IDE. Principals were 'simple'. Make the tool that generates all the necessary glue code leaving the developers only with files that are important for displaying the content; lower down the need of using any code (HTML CSS JavaScript) to the minimum but in the same time leaving the full access to it. Also to get rid of necessity of styling the app or at least make it significantly easier for those who doesn't want to became a CSS Wizards. And allowing to save the clean code generated by the IDE leaving them with full access to it.
And here we go. A year later, we got everything that we wanted packed in fully automated IDE. Let me go a bit deeper in what we achieved and briefly explain our approach to each solution.
1. Responsiveness
We created a data base of widgets - ready to go UI pieces that are fully responsive from the start and using loaded from template CSS to match the whole web app styles. The widgets are using simple JSON object files to input their content or edit their models in case of forms and more advanced Widgets. They also come with all necessary pre made functions to provide things as validation etc. but as mentioned before - they are always accessible to you in case you will have to edit it.
2. Browser compatibility
We use Babel to transpile modern JavaScript to its older iteration to automatically help with cross browsers/devices compatibility
3. The need of learning extra programming languages
In a perfect scenario all you will have to know is how to use JSON files. But we all know that's almost never the case. You will still need to use some CSS, HTML and JavaScript to make custom adjustments here and there. But we made it as simple as possible. The whole web app is split on slots with installed Widgets. That lets the IDE to split the layout of the web app in single UI pieces without interfering with the whole app design. It also makes naming much easier since you can use the same names for classes between different slots or variables in functions. All the necessary JavaScript that comes with each widget is well named and organised. So if you want to change the way of the validating form, you have to find a premade function and simply editing its regEx.
Here is a video showing how the IDE splits the CSS between multiple Widgets and how easy it is to edit JavaScript.
https://www.youtube.com/watch?v=DSWFKj3STJY&t=327s
4. JavaScript itself
Yes. JavaScript can easily give a headache. That's why we took care of all necessary functions making Widgets and web app fully functional. That lowers down the need of using it or at least significantly lowers the cases where you will have to do it. The IDE works for you in the background generating all the files, organising its structure, generating the glue code and gluing everything together. All that is left to do are simple providers and commands; the functions responsible for providing data to the app or making operations to the data.
5. The overwhelming amount of libraries often not well documented or even abandoned
The app state management, templates, Widgets, Bootstrap, Font Awesome and much more are already built in. Although we wanted to leave our tool as flexible as possible and for you to have the possibility to use outside libraries there is really no need for it. We are constantly adding features and keep them as simple as we can so that the IDE will be the full solution to create the whole web app.
6. The App state management
We took care of it. The IDE splits JavaScript in simple commands and providers and built in framework takes care of it. You won't have to worry about how it works - it just will. That's the job of the IDE, to sort everything out for you. All you need to do is provide the data. The IDE and its code generator will know how to make it work.
It sounds like a great solution, but there are more things that wouldn't let us call our project complete. Other things that we already implemented are:
- Live preview
- Implementation Assistant - 'AI' that notifies you about any changes you need to do in order to make the app functional
- full access to the code - you can save all the code at any time and open it in your own favourite code editor. You will get access to all of it and make any changes you want to
- Docker - The downloaded code is set up and ready to run in the docker container. You also have access to all the setting files so you can create your own configuration if you want to
- flat file structure - as mentioned before. The IDE takes care of the whole file structure and glue codes, leaving you with the simple file pipe line instead of a nested tree
There are much more functionalities but I don't want to keep you longer than necessary because you can try and test all of that yourself.
Getting to the point, did we create the perfect solution for all developers problems? Well. No. The IDE is still in the alpha stage. It's developed only by 2 people and it took us a year to get to this point. This is why I'm making this blog. We need the community to help us. We need people to verify the idea and help us improve it as much as possible. So if you like the idea just follow us on the most convenient social media channel for you. Also feel free to test the IDE yourself and give us your feedback.
Here is how to access the IDE. In order to use it we only ask about a GitHub login. No bank card registrations, no email verifications:
Our website:
YouTube with some tutorials (yeah, its not many of them, but we are working on it):
https://www.youtube.com/channel/UCDtO8rCRAYyzM6pRXy39__A?view_as=subscriber
You can also find as on LinkedIn and Facebook and my personal account on Twitter.
Top comments (0)