DEV Community

loading...
Cover image for Introducing Expressive Tea
Expressive Tea

Introducing Expressive Tea

Diego Resendez
Lead Developer for Expressive Tea • Javascript Fullstack Developer • Open Source Advocate • Amateur Data Science • Python Enthusiastic
・5 min read

Introduction

When I started coding Expressive Tea almost two years ago, it was just a tool to increase my laziness (as most engineers) avoid setting up a project on ExpressJS. I was thinking about combining a language that I started to learn (Typescript) and making easier a configuration for ExpressJS; by that moment, I did not know about NestJS, a very mature and fantastic Framework. I did not have a chance to research, just because I got the idea to start working in this new (at that moment) personal library.

In September 2019, that personal library turned into a microframework to help build server-side applications in NodeJS and use modern Javascript powered by Typescript. Also, one of the main goals is to make this compatible with all the express middleware and plugins available when I wrote this article; the list continues to expand with ideas and recommendations from friends and users that already started using Expressive Tea.

What the heck is Expressive Tea?

I define Expressive Tea as a flexible framework that gives freedom to build their own architectures by providing descriptive decorators, a plugin engine, shareable modules, and modern Javascript.

But what does that mean? As I mentioned in the introduction, it is just making developers lazier (for a good reason), helping them forget how to set up ExpressJS, and just working on the business logic.

Take into consideration that Expressive Tea has not come with anything out of the box; this means no additional plugins or middlewares with exceptions of certain features like Websockets, and you might need to provide the necessary plugins to achieve your unique server flavor.

So, telling that, you might still wonder where the flexibility or freedom is in something with nothing more than essential matters. Pleasantly, Expressive Tea has no attachment on any naming convention, any special plugin, or any data source, so this allows you to freely change the application in the way you prefer and introduce two critical entities in the Expressive Tea framework.

Plugins

A Plugin is an entity to implement features that we need for our applications, such as assigning a connection to MongoDB or changing the server behavior such as adding a view engine, adding authorization middleware, or just adding a body parser.

But more importantly, this can be share between Expressive Tea projects; the method depends on you (like npm package, git submodule, or copy and paste). Still, essentially you will get a path to create many plugins and combine them to flavor on your own Expressive Tea.

Modules

A Module is pretty similar to Plugin, but instead of change the behavior of the server is used to create a placeholder route to encapsulate controllers and services to respond to a user request through declared endpoints.

All the endpoints are defined in each ** controller** that have a corresponding method to respond to the client; in simple terms, a Module helps to contain routers in one place, by example, we can have a signing module that contains all the endpoints to sing in or sign up a user into our application.

As same as Plugins, Modules can be share between Expressive Tea applications if they have the following specifications:

  • All code must be in the same place; anyone has their own structure and scaffolding methods, ideally set all in the same root directory; the other thing is depends on you ;).
  • Should not contain external code, like external classes, services, or constants with certain exceptions like Expressive Tea settings and node packages.

Demo

We have enough for boring theory; it might be better with a bit of demonstration of how this is working, shall we?..

Dependencies.

We can start by installing tea CLI with the following command:

npm install -g @expressive-tea/tea
Enter fullscreen mode Exit fullscreen mode

Tea CLI is under development; take patience ;), send comments or open an issue.

Create a project.

Once tea finished to install, now is time to start to create a project with the following command:

tea brew to-do
Enter fullscreen mode Exit fullscreen mode

Follow all the instructions and change them if you want them. Once create project finished and create our to-do project, just go inside with:

cd to-do
Enter fullscreen mode Exit fullscreen mode

and execute the project with:

tea serve
Enter fullscreen mode Exit fullscreen mode

if you get the following message, congratulations; this is your first Expressive Tea application:

[INFO] 14:08:05 ts-node-dev ver. 1.1.6 (using ts-node ver. 9.1.1, typescript ver. 3.9.9)
Fri, 21 May 2021 19:08:06 GMT helmet deprecated helmet.noCache is deprecated and will be removed in helmet@4. You can use the `nocache` module instead. For more, see https://github.com/helmetjs/helmet/issues/215. at server/plugins/express.ts:59:31
Running HTTP Server on [8080]
Enter fullscreen mode Exit fullscreen mode

if you open your browser and type http://localhost:8080/
you will get the following response:

Alt Text

time to play

Let the fun start :), it is time to move our a little bit our project; the main goal is to create a REST API for a To-Do application, and the first thing to do is remove the static HTML that shows as the index.

It is time to open the main.ts file from the application and remove the line @Static('./public') (you can use the IDE that you like) as is the following screencast.

Now the main page is gone is time to implement our first endpoint to this new REST API.

The application now will return a To-Do list that is on memory, for now, just to not overcomplicate the example.

For this example need to add one of the elements from Expressive Tea for decorating arguments in the endpoints methods; the @body() annotation is part of the package on @zerooneit/expressive-tea/decorators/annotations and helps to extract the whole body object as is showing in the screencast above.

More details you will get in the documentation.

The Extra

The main goal is to present you a little bit of Expressive Tea, but how to leave without giving you an extra; in this case, I will show you how to modify the Express plugin in the demo to just show a console log.

Check our live playground.

I know this is not extensive details in this article, and this is because I just want to inform you more than training you, but if you're going to sneak pick a little more content, there is a series of articles that you can follow, it might be a little old but contains the essential:

Or you can use our sandbox in CodeSandbox, where you will be able to play a little bit or understand more about Expressive Tea.

Conclusions

As I continue improving this project, I learned and still learn many things technically. Still, the real value is discovering new things to do, challenges, and, more importantly, being active in the Open Source community. Even if this project does not grow much or maybe overextend it, the self-learning of many soft skills comes with this, for example, managing your time, executing a project, and actively checking new features.

Hence, as this work I just take it as a personal challenge it will be good to have help, so if any of you want to help, improving code, adding new issues, do a review, write an article, maybe a YouTube video, or ask for new feature down below you will get the link to the Github Repository of this project.

GitHub logo Expressive-Tea / expresive-tea

A Express and Typescript REST Service Template.

Without more to aggregate, let me thank you for reading my article, which is the first on this platform.

Discussion (0)