Introducing Quarkly, a tool for react developers and designers to optimize your development

Hello! Ideologically, Quarkly is a project that aims to make life easier for web developers and web designers. In this post I will briefly describe how this is possible.

First off, let’s see what a typical web app development cycle looks like in 2020? There is a team. This team has a designer and a developer. The first creates a design spec in Figma. The second, based on the design specification, creates the components, transfers the theme. The programmer shows the result of his work to the designer in the Storybook. The designer checks it and approves the project if everything is fine. Then he begins to create layouts, and the developer types them using the components from the specification.

For clarity, let’s build everything in the form of a list:

  • Creating a specification in Figma;
  • Setting up the development environment;
  • Ui-kit creation;
  • Approv;
  • Layout creation in Figma;
  • Layout;
  • Setting up the collector;
  • We get a web application.

Now imagine that you have optimized the processes, and it turned out like this:

  • The designer creates the specification and layouts, and the developer helps to add logic (the latter is not always necessary, since there are skeletal components);
  • We get the application in one click.

All this is available now with the help of Quarkly!

While working on our product, we really wanted to make the process of creating a website or application really simple, while the result was a competitive project with clean and readable code.

Quarkly allows you to create sites and web applications both with the mouse and with the help of code – all the advantages of interactive editing are available to you, but at any time you can open the code editor and edit the code of your application manually, and everything is completely synchronized.

Creating a simple block in Quarkly

Design tool + IDE + Module builder + Publisher

Designers work with Quarkly in the same way they used to do it in Figma – the interface will be pretty familiar to them. For programmers, a mechanism for assembling modules with all the delights is available: hmr, npm modules.

The result of your collaboration is synchronized with the github (where without versioning) and published on Netlify with the click of a button.

Among other things, the project can be exported at any time as create-react-app or in Gatsby.

Out of the box, you get all the necessary optimizations important for the modern web. Without a single line in bash.

What’s under the hood of Quarkly

In short, our project is based on all well-known tools, such as React. This looks quite logical – at Quarkly, we promote the convenience, speed and functionality of React.

We chose MobX for the role of state manager. I warmly advise those who, for some reason, have not yet done so, take a closer look at it. With its help, we were able to very noticeably increase the speed of our development. We also developed our own analogue of Logux for it, but only slightly more powerful (Undo, Redo and versioning). In the future, we plan to publish the source code for this module on GitHub and tell you more about it.

We write styles using css-modules – if we talk about static, but dynamics – using our Atomize library.

The collector – everything is simple here – Webpack (CRA), but with a caveat: the collector, which we developed ourselves, is responsible for assembling custom modules. Again, if there is interest, we can tell you about it separately.

One of our tricks is code generation. Here, by tradition, our own development, which is based on Babel, but part of the code printing is heavily patched.

A little about the future

Our global goal is to create a convenient tool that optimizes the full cycle of website and application development. We are working on lowering the entry threshold and increasing the level of abstraction so that everyone can create their own site and do it in a modern way.

PS

One of the important tasks that we set ourselves for the near future is the formation of the community. If we managed to interest you, we invite you to our community in telegram @quarklyapp

Also today we are launching an open beta and going to vote on Product Hunt. We will be glad if you support us. You can vote for Quarkly by link

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *