Pare com a codificação dupla ou a comunicação bidirecional entre o design e o código

Como "fazer amigos" entre um designer e um engenheiro? Como deixá-los trabalhar com o mesmo tópico de dados, sem sacrificar a produtividade? Como armazenar um design em um sistema de controle de versão. Se você está interessado nessas questões, na mesma medida que eu, então seja bem-vindo!



Este artigo é uma continuação direta de "Pare de inventar, vamos atacar os layouts com automação" e é o resultado da minha pesquisa sobre o problema que me interessa.



Na primeira parte, descrevi resumidamente os problemas do layout em si e de sua automação. Ele também compartilhou seus resultados de pesquisa sobre este tópico. Eu me detive na questão da controlabilidade do layout automatizado.



Neste artigo, expandirei esse conceito com mais detalhes e compartilharei os resultados de minha pesquisa.

Quer brincar com alguma coisa? Aqui está uma prova de conceito .



Controlabilidade



E de que tipo de controlabilidade estamos falando?

Eu destaquei dois pontos principais:



  1. A capacidade de influenciar o processo de geração de código HTML.
  2. Edição direta do resultado, que será levado em consideração na geração seguinte.


, , HTML . , .



, .





HTML , . HTML .



. . , . , — - .







— HTML , HTML CSS.



, HTML , .





HTML , , , ? — , , .

2 .



, - , , Unity 3D, .



Unity, .



, — HTML , .



, , , , , , . .





, - Unreal Engine, WEB. ?

:



  1. Drag&Drop ;
  2. ;
  3. - HTML , .


, .





, .



, api, , , , , , …





.





, , ?



HTML , - . — WebKit Blink, ().



-



. ( index.html), . .

3 :



  1. , ;
  2. ;
  3. .


, .



3, , .

, , , .



, , , 2.



:



  1. ;
  2. , .


.





, .





?



, 2 , .





, Adobe Illustrator , , 2 * N . , .



, . .



HTML .



. HTML :



  1. ;
  2. .


.



, , — , .



.





?

:



  1. , ;
  2. DOM ;
  3. .


, DOM, .





:



  1. DOM, .
  2. , DOM.




.





DOM? , .



, , .





, , , , ( ).



, , … .

. 2 :



  1. ;
  2. .


, , .



, 2 :



  1. , ;
  2. , , .


Pagedraw .



, .





:



, . , .



, . . .





, , .



, , (-).



.



, .





  1. , ;
  2. ;
  3. , ;
  4. ;
  5. ;
  6. ;
  7. HTML .
  8. ""






, 2- , . .



, .



?



, "", . , , React, JSX + styled-components, .



, , twitter , , , — , " ".



E se alguém tivesse o desejo de ajudar, seria ótimo. É necessária ajuda, antes de mais nada, com um editor visual, parte é importante, mas não direcionada. Ou sugira um módulo que seja conveniente para trabalho e personalização. E, claro, chamar a atenção para meu trabalho e problemas não será menos útil.



Claro, ficarei muito feliz em ver críticas e discussões construtivas.



Paz para todos!




All Articles