Apresentando o Quarkly, uma ferramenta para desenvolvedores e designers reagirem para otimizar seu desenvolvimento

Olá! Ideologicamente, Quarkly é um projeto que visa facilitar a vida de desenvolvedores e web designers. Neste post, vou explicar brevemente como isso é possível.



Primeiro, vamos ver como é um ciclo de desenvolvimento de aplicativo da web típico em 2020? Existe uma equipe. Essa equipe conta com um designer e um desenvolvedor. O primeiro cria uma especificação de design no Figma. O segundo, com base na especificação do projeto, cria os componentes, transfere o tema. O programador mostra o resultado de seu trabalho ao designer no Storybook. O designer verifica e aprova o projeto se estiver tudo bem. Em seguida, ele começa a criar layouts e o desenvolvedor os digita usando os componentes da especificação.







Para maior clareza, vamos construir tudo na forma de uma lista:



  • Criando uma especificação no Figma;
  • Configurando o ambiente de desenvolvimento;
  • Criação de kit Ui;
  • Approv;
  • Criação de layout no Figma;
  • Layout;
  • Configurando o coletor;
  • Recebemos um aplicativo da web.


Agora imagine que você otimizou os processos e ficou assim:



  • , ( , .. );
  • .


Quarkly!



, , , .



Quarkly - , – , , .



Quarkly



Design tool + IDE + Module builder + Publisher





Quarkly , Figma, – . : hmr, npm-.





( ) Netlify .





, create-react-app Gatsby.



, . bash.



Quarkly



, , React. – Quarkly , React.



- MobX. , - . . Logux, (Undo, Redo ). GitHub .



css-modules – , – Atomize.



– – Webpack (CRA), : , . , , .



– . , , , Babel, .





– , . , .



P.S.



, , . – @quarklyapp.



Product Hunt. , . Quarkly .




All Articles