Web Application Development Environment for Design-Code Integration
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current web application development processes are inefficient as they require significant programming skills, leading to wasteful iterations between designers and developers, with designers' mock-ups often being discarded and not utilized effectively in the development process.
Innovation Solution
A Graphical User Interface (GUI) based web application development environment that allows designers to create both visual and functional aspects of web applications without writing code, generating XML data that is then converted into browser executable code by a runtime engine, conforming to Service Oriented Architecture (SOA) and other architectures.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If a designer creates a mock-up using HTML tools, then the visual look and feel can be specified, but the mock-up is discarded and not utilized effectively in development
Solution Approach 1:
The system recovers the designer's mock-up by automatically converting HTML mock-up code into executable web application code. Instead of discarding the mock-up as in traditional workflows, the conversion module transforms it into functional code that preserves both visual appearance and can be enhanced with business logic, thereby recovering the value of the designer's work.
2Adaptability or versatility
If changes are made to web application functionality, then the application can be updated, but significant programming skills are required and iterations between designer and developer are needed
Solution Approach 1:
The system introduces an intermediary conversion module that translates between mock-up code and executable web application code. This intermediary handles the complex code generation and transformation processes, allowing designers to make changes through simple mock-up modifications without requiring deep programming knowledge, thus reducing the perceived complexity for end users.
Solution Approach 2:
The system enables self-service by allowing designers to independently create and modify web applications using HTML mock-up tools without requiring developer intervention for every change. The automatic conversion process empowers designers to perform functionality updates themselves, reducing dependency on programming expertise.
3Productivity
If a developer writes code from scratch to implement functionality, then the application can be built, but visual discrepancies arise that require designer intervention
Solution Approach 1:
The system performs preliminary action by generating the visual structure and layout code automatically from the designer's mock-up before the developer adds functionality. This ensures that the visual framework is already in place and consistent with the design intent, preventing visual discrepancies from arising in the first place and reducing the need for iterative corrections.
4Reliability
If designers and developers work in separate roles, then specialized skills are utilized, but the process becomes inefficient with multiple iterations
Solution Approach 1:
The system enables multi-functionality by allowing designers to perform both design and basic development functions. Through the automatic conversion capability, designers can create mock-ups that directly translate into functional web applications, eliminating the strict separation between design and development roles while maintaining the benefits of specialization for complex tasks.
Data Source
AI summary
A system for creating an application comprises a user interface receiving user interaction that specifies visual properties and actions of a web application, and a code unit generating application data that describes the specified visual properties and actions of the web application.