To reduce time spent on front-end code development and reduce the number of potential errors, we have built a TypeScript generator.
Description of the problem
Most of the Web-based systems consist of server and client sides where the client-side model and HTTP requests should be a reflection of the server-side model and endpoints. Despite that usually because of physical and technical separation developers create everything independently what doubles the effort. Furthermore maintaining the code of both sides is troublesome. Changes made on one side requires changes on another what in many cases causes incompatibility. All above increase development and maintenance time which leads to higher cost.
What if we could generate the client side model and endpoints based on backend code? That’s exactly what we did. Our library Typescript Generator creates all models and HTTP requests automatically.
Once we have a model and endpoint on the server, our library creates frontend side. What is more, after every change typescript generator can update it. The produced model has equivalent types and information about fields optionality. Thanks to this we do not lose any of typescript capabilities. In pair with the model, we receive services that communicate with every endpoint in server API. The only thing that we need to do is to inject service to our component, and we can use methods created by typescript generator. We do not need to worry about implementation.
Generated code is configurable. We can configure for example types serialisation and optionality. When frontend libraries do not have types equivalent to those on backend side, we can inform generator how to convert them.
Typescript generator has been successfully used in many projects. From our experience, it reduces the amount of frontend code by about 15% and countless hours of debugging, testing etc.
By using our TypeScript generator, the volume of the frontend code can be reduced by about 15%.
- TypeScript interfaces generated based on Java Model
- TypeScript services generated for Java REST controllers
- Support for Jackson annotations
- Spring MVC
- Custom type mapping
- Package per module strategy
- Generates the imports
- Support for Angular -> for React in progress
JSON Scopes library reduces the application model and size of requests payloads.
Description of the problem
Application entities usually have bidirectional association’s what causes cyclic dependencies. It is a problem because it’s impossible to serialise them to JSON format. Furthermore, most of the time we do not need all data associated with the entity. To solve this issue most of the developers uses design pattern called Data Transfer Object (DTO). This solution works but requires a lot of effort to create and maintain such a structured application. Each business model needs its representation in a separate DTO model which leads to the point where we possess repeatedly more DTOs then entities. More code means more time for development, testing and support. To improve quality and effectivity of our work we designed a better solution.
Our library JSON Scopes allows us to configure how data should be serialized with Jackson annotations. It’s not required to create DTOs, we define what should be serialised in controllers, so we send as much data as is needed. In case serializer finds the cyclic dependency, it will serialise the object once and leave a proxy in other places. When deserialising on the client side, serializer search for proxies and replace them with references to real objects. Thanks to that we have a graph structure on both backend and frontend which is transferred by a tree in JSON format. Such an approach reduces the size of the model.
The Library is compatible with Hibernate and Spring. This solution was already successfully used in many of our projects and proved its value.
- Conceptually similar to GraphQL
- Eliminated DTO, entity serialisation
- Avoids code duplications on the back-end and front-end
- Reduced size of requests payloads