Dal design al codice: generazione automatica della componente front-end di un'applicazione mobile

In a dynamic and competitive market such as that of mobile apps, it is essential to guarantee both the quality of the product and the speed of its release on the market. In this context, the multiplicity of tools required by the implementation process represents a criticality, as it increases the quantity of required skills. A first solution path, undertaken by all big tech companies, consists in adopting cross-platform technologies for the implementation process. It is, however, possible to further increase information sharing by designing tools that directly tie design to implementation. This can be achieved through a modular and configurable pipeline capable of reading the UI/UX design document and generating, in whole or in part, the corresponding source code. Modularity is a key element for the applicability of the tool and the approach both to the varied current context and to future developments, while configuration flexibility allows the pipeline to adapt to even very different projects. The founding element of this approach is the possibility of defining an abstract formal model of the application, independent of the design tool or the technology chosen for implementation. The pipeline proposed in this thesis work is composed of three functional units: a first module converts the design document into an instance of the abstract model, which assumes the role of intermediate representation, a second module manipulates this model without changing its formal structure, and a third module converts it into source code. The objective of this thesis work is to demonstrate the possibility of realizing this tool with modern technologies, and to evaluate its performance from the point of view of both development time compression and quality of the final result, i.e. of the product code.

In un mercato dinamico e competitivo come quello delle mobile apps è essenziale garantire sia la qualità del prodotto sia la velocità con cui questo viene rilasciato sul mercato. In questo contesto, la molteplicità di strumenti richiesti dal processo di realizzazione rappresenta una criticità, poiché accresce la quantità di skill richieste. Un primo percorso risolutivo, intrapreso da tutte le grandi aziende del settore, consiste nell’utilizzare tecnologie cross-platform per il processo di implementazione. È, tuttavia, possibile aumentare ulteriormente la condivisione di informazioni attraverso la progettazione di strumenti che leghino direttamente il design all’implementazione. Questo può essere ottenuto attraverso una pipeline modulare e configurabile capace di leggere il documento di design UI/UX e generare, in tutto o in parte, il corrispondente codice sorgente. La modularità è un elemento chiave per l’applicabilità dello strumento e dell’approccio sia al variegato contesto attuale sia a sviluppi futuri, mentre la configurabilità permette alla pipeline di adattarsi a progetti anche molto diversi fra loro. Elemento fondante di questo approccio è la possibilità di definire un modello formale astratto dell’applicazione, indipendente dallo strumento di design o dalla tecnologia scelta per l’implementazione. La pipeline proposta in questo lavoro di tesi si presenta composta da tre unità funzionali: un primo modulo converte il documento di design in un’istanza del modello astratto, che assume il ruolo di rappresentazione intermedia, un secondo modulo manipola tale modello senza mutarne la struttura formale, e un terzo modulo lo converte in codice sorgente. L’obiettivo che questo lavoro di tesi si propone è quello di dimostrare la possibilità di realizzare, con tecnologie moderne, tale strumento, e di valutarne le performance dal punto di vista sia della compressione dei tempi di sviluppo sia della qualità del risultato finale, ovvero del codice prodotto.