Click to zoom out


Werft-projects Logo

Centralized web development building system focusing on ease of use and flexibility

It is recommended to see this page on a large screen
Werft-projects is a tool that provides an infrastructure to build web projects of all kinds, from blogs and web pages to e-commerce platforms and industrial applications, focusing on its ease of use and flexibility. It facilitates the life of the programmer, thanks to its reactivity, convenience of use and efficient management of all the resources necessary for the construction of web products. On the other hand, it can be extended by incorporating new functionalities, technologies or ways of processing web assets.
Werft-projects overview

It has nine processing modules, of which seven are focused on building web assets for the client (frontend). Each of the modules has a series of processing channels, responsible for generating, modifying or compiling the incoming files or assets, contributing to the construction of the final web product.

Some of these modules address tasks such as:
  • Transpile the JavaScript code from more abstract languages and modern versions not yet supported by the target platforms
  • Generate multi-device CSS code thanks to the expressivity of more comfortable languages and libraries
  • Provide a testing platform for all the devices, automatically triggering changes from sources codes and easily debugging errors
  • Track web resources (images, fonts, etc.) and optimize them to consume less space and take advantage of caching techniques

Its design includes 3 processing modes: 1) simplified and customizable http server in order to mock the real server, facilitating the management of requests, serving statics and being able to generate API endpoints as the real server; 2) client where all the potential for the development of application frontends is exploited; and 3) refinery as a place where prototypes and components of the client system are developed as quickly as possible.


The following diagram shows the internal processing flow of one of these modules, responsible for generating the final JavaScript code files. It has optimizations in the parallel processing and the manipulation of streams, accelerating the process of interpretation, cleaning and building. In addition, thanks to the use of channel multiplexing, it allows the incorporation of new processors capable of providing new functionalities to the system, increasing its flexibility.

Its creation was a clear breakthrough, since it granted functionalities not seen in any other system, but since then it has been improved and expanded. In addition to supporting the latest advances in experimental JavaScript (@next), it provides full support for Sweet.js macros, enhancing language expressiveness. Web components (m-forms) are treated as first-order entities under this system, incorporating features such as internationalization directly from translation files (yml), or the interpretation of compile-time views based on templates (pug or twig).

Werft-projects JavaScript processing flowClick to zoom in

Refinery was created as a result of the entire Werft-projects client and server system, but simplifying and concentrating the vital tasks in a single thread, carrying out multiple optimizations and conventions that allow developing prototypes and frontends really fast. Once the prototypes are consolidated, they are exported as Werft-projects first-order components, incorporating them into the client processing mode.

As can be seen in the refinery module, JS processing acquires the focus during the entire processing flow, although there are tasks in charge of managing other assets (css, html, static). This module is highly optimized and parallel in order to lift work instances and quickly compute in order to minimize REPL times (reading-evaluation-printing loop) during the prototyping session, greatly reducing development times thanks to a high level of interactivity (programmer - final product).

Werft-projects refinery processing flowClick to zoom in
Werft-projects was not only designed with flexibility and ease of use in mind, but also was prepared with a view to the future, giving it facilities for modification and adaptation to new techniques, libraries and web technologies. Thanks to this, it has benefited from the internal research cycles of Group4Layers, providing significant improvements in resource consumption (RAM) and computation times (CPU), taking advantage of our optimization and parallelism techniques. The impact on both the processing modules and the three development modes is shown below.
Optimization charts of Werft-projects processing modulesClick to zoom in
Optimization charts of Werft-projects development modesClick to zoom in
It is conceived during 2015, and since then it has served in multiple web projects, making all kinds of adaptations, software updates and specific improvements taking into account the needs of each project. Due to its centralization, it is still used for projects and prototyping that have to be launched in record time.
Group4Layers can help you
Are you interested in promoting your web developments and making faster prototyping? Do you want to optimize your web development infrastructures? We can help you design and optimize specific mechanisms for your business model based on web technologies.

This website uses its own and third party cookies to analyze the traffic and offer you a better experience. By browsing or using our services the user is accepting its use.More information.