Introduction

About

Translucent is a rather simple web framework for frontend UI development, based on:

• HTML 5

• CSS 3

• Web Components

• ECMAScript 2018

See also

Translucent is currently only working with ECMAScript 2018. Please refer to ECMAScript: 2015 vs. 2018 for more informations.

Design

The following design patterns are at the core of Translucent:

• We use convention over configuration

• We maintain our own template rendering engine directly in the HTML markup

• We dynamically build / compile the components server-side via Python

• We don’t use any 3rd-party libraries or frameworks

• We ensure debugging is as straight-forward as possible

Rationale

Since most of the frontend technologies are complete crap (highly objective, I know) and way too complicated, we decided to create our own components library based on web components and ECMAScript 2018. With the introduction of the official Web Components and ECMAScript 2018, JavaScript now provides better API’s than ever. However, even with those new API’s, it’s still a PITA to do web components fully in the frontend because:

• Dynamically building web components (JavaScript classes) is a bit of a hazzle

• Rendering HTML templates / views in JS is annoying

• Code separation (HTML vs. JavaScript) is not given

• Loops can only be made in JavaScript, thus HTML markup must be built / concated in JavaScript

• There is no HTML markup template engine

There are frameworks out there which help against those points. But again, most of the time these are way to complicated, overloaded and shitty to debug. Because of that we’ve committed to the Design patterns above.