What does it do?

         So from the previous post we understood about the gap between web designer and web developer, so how this new project can help, in a nutshell this is what it will provide: the designer should be able to "preview" the design on his device/browser in realtime. But not simulated. He should see the preview as the real deal, as if a developer would have coded for him. 

     When the designer draws a button, the developer should get a "Button" code snippet ready to be used in the app/site

     The developer should chose the snippet's language and dialect or coding style. As we already have some of the tools available like InVision and Sketch to build prototyping system are doing a great job for prototyping, they only go as far as "prototyping". They are mostly approximations or simulations of the end result, and they stop being useful right there.

    On the other end their are specific tools such as Zeplin, which is helping developer to pick each style information but they are rarely give the full context, plus they are exactly what they are callled "Target Specific", with hardly any configurations possible. 

   Also the approach just helps in explaining the sketch plain in html/css but their are plenty of tools that is needed to towards the goals, the designer still needs a lot of experience to explain the design to really make it worth his design.  

 So the shorts way to work this gap is to try define the layout representation in code format from which some sort of code in generated. 

  Given we are drawing a document structure like a model would have been the initial choice, but somehow coupled with some  concept found in Abstract syntax tree. 

   What the project does is to make a JSON Intermediate representation of the code which is later used to make a visual representation of the website/app beside that the tool also creates actual code behind the scene that may just need to connection to the backend.

      To Explain the project further here is the process diagram:

         

      Here first there is a website a dummy react js page to call all the backend processes, the purpose of having the a webpage is just to have a interface for the application.  

    The backend is consist of JSONs which has all the properties of CSS, HTML tags

  

    In the first phase of the application, CSS properties are going to be implemented into the json where at the backend which will be sent to the our dummy webpage.

  To keep the property and their values together the property values are also in the backend what all is done at the front end is whenever a CSS property is called and their property value is assigned it send back the property with the property value to the backend where it processes that to the JSON IR we want to create.

  

 Now once the JSON IR has all the css work it is ready to be process further for generating  CSS style sheet or for live preview of style. 

What will be JSON IR consist of at the end?

     Type: a string that will be consist of nature element. Regardless if we speak about web or mobile design and development, the building blocks all are roughly has same: views, texts, images, inputs, buttons, etc. which are aggregated into more complex elements and if their is any generic descriptive naming convention found it will be translated via mapping the target naming. 

   

   Style: a CSS object, it will cover all the web style properties with their property values. 

   children: An array of elements or a string.  

So far, it is confirmed their is a viable path of technology for building real-time design-to-code through which the design source and the target code can be completely decoupled.

 So far CSS is able to be generated using this approach.