Arrêtez le double codage ou la communication bidirectionnelle entre la conception et le code

Comment «se faire des amis» entre un designer et un ingénieur? Comment les laisser travailler avec le même sujet de données, sans sacrifier la productivité? Comment stocker un dessin dans un système de contrôle de version. Si ces questions vous intéressent, dans la même mesure que moi, alors bienvenue sous la coupe!



Cet article est une suite directe de "Arrêtez de créer, passons aux mises en page avec l'automatisation" et est le résultat de mes recherches sur le problème qui m'intéresse.



Dans la première partie, j'ai brièvement décrit les problèmes de la mise en page elle-même et de son automatisation. Il a également partagé les résultats de ses recherches sur ce sujet. J'ai insisté sur la question de la contrôlabilité de la mise en page automatisée.



Dans cet article, je développerai ce concept plus en détail et partagerai les résultats de mes recherches.

Envie de jouer avec quelque chose? Voici une preuve de concept .



Contrôlabilité



Et de quel genre de contrôlabilité parlons-nous?

J'ai souligné deux points principaux:



  1. La capacité d'influencer le processus de génération de code HTML.
  2. Edition directe du résultat, qui sera prise en compte dans la génération suivante.


, , 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 , , , — , " ".



Et si quelqu'un avait envie d'aider, ce serait super. Une aide est nécessaire, tout d'abord, avec un éditeur visuel, une partie est importante, mais pas ciblée. Ou suggérez un module pratique pour le travail et la personnalisation. Et bien sûr, attirer l'attention sur mon travail et mes problèmes ne sera pas moins utile.



Bien sûr, je serai très heureux de voir des critiques et des discussions constructives.



Paix pour tous!




All Articles