Hello world! Ideologically, Quarkly.io is a project dedicated to ease the life of web developers and designers. In this post, I will briefly tell you how we make it possible.
First, let’s take a look at how a typical web app workflow looks like in 2020. There is a team, it has a designer and a developer. The former creates a design spec in Figma. The latter creates a design based on this spec, and transfers the theme. Then, the developer shows the results of his work to the designer in Storybook. Designer checks and approves it – if everything is fine, he creates mockups, and the developer uses the components from the spec to markup the final layout.
So, to summarize:
- Make a spec in Figma
- Adjust the environment for development
- Create an ui-kit
- Approval
- Create a Figma mockup
- Markup
- Adjust the assembler
- Get web app
And now - let's imagine that you have optimized all these processes, and get it like this:
- Designer makes specs and mockups, and the developer helps with the logic (not always necessary – there are skeleton components)
- Get an app in 1 click
And all this is available right now with Quarkly!
Working on our product, we always wanted to simplify the website or app creation process, while at the same time provide a competitive end-results, with clear, easy-to-read code.
Quarkly allows creation of websites and webapps with both the mouse and the code – you have the pros of responsive editing, but at any moment you can open the code editor, and manually edit your app code manually. And everything will be synchronized perfectly.
Design tool + IDE + Module builder + Publisher
Designers can work in Quarkly the same way as they are used to in Figma – they will find many familiar things in the interface. For developers, we have a module assembler in all its glory: hmr, npm-modules.
Result of your common work is cbeing synchronized with GitHub (how could we forget versioning?), and can be published on Netlify with just one click.
Additionally, you can always export your project as “create-react-app” or to Gatsby.
So, straight from the box, you get all the necessary optimizations, important for the modern webdev, and all that – without a single line in bash :)
What powers Quarkly
In short, or project based on well-known instruments. React, for example. It looks logical – we in Quarkly believe and promote utility, speed and functionality of React, and the Quarkly itself is on React to double down on our commitment to these principles.
We choose MobX as a state-manager. I strongly recommend you to take a closer look at it, if you haven;t done it before for whatever reason. Using it, we were able to significantly speed up our development speed. Also, we made our own equivalent of Logux for it, but more powerful (Undo, Redo and versioning). In the future,we will make the source code of this module available on GitHub, and will tell you more about it.
Styles are done with css-modules – if we are talking about static ones. Dynamic ones are written using our lib Atomize.
Assembler – here everything is simple – Webpack (CRA), but with one detail: Assembler that is responsible for assembling user modules, is our own original development. We can tell you more about it if you are interested.
One of our other cool features is code generation. It is, traditionally, also our own inventions, based on Babel – but the code printing part is heavily augmented.
About the future
Our end goal – to create a useful tool, that will optimize the entire cycle of website and app development. We work on reducing the entry bar and increasing the abstractions level, so that everyone be able to create their own website – in style.
P.S.
One of our most important tasks at this moment, is forming a community. If Quarkly interests you – we will be happy to welcome you in our community on Spectrum or in Discord.
Also, today we start the Open Beta and launch on Product Hunt. We will appreciate your support! To read more, follow this link.
Top comments (2)
Hello! Quarkly allows creation of websites and webapps with both the mouse and the code – you have the pros of responsive editing, but at any moment you can open the code editor ;)
This is awesome!