A Logstalgia port with Node.js, Canvas and WebSockets.


nodestalgia


I remember it was about two months ago when I was talking with Eduardo
Lanchares about the best stack for the next webapp. Sometimes you are at work
and you are stuck with the current set-up of frameworks and tools that are
quite difficult to change or refactor. This forces you to always work with the
same mentality not allowing you to test new approaches to solve problems.

Following our desire to learn new stuff to make our life easier, we wanted to
experiment with new technology to build a side project with a complete new
stack that fits better with the app requirements.

In that same week, a friend of mine was talking about a bug that was affecting
him in the web client of Transmission. This [bug](https://trac.transmissionbt.com/ticket/5857)
was affecting more people because we found an open bug report in the tracker
that was 2 years old. We decided to check the source code and try to fix it
because we thought that would be a piece of cake. But a few hours later we
discovered that was not as easy as we expected and at some point we gave up.

With all these things in mind we had the perfect scenario and excuse to start
playing with a new side project. We decided to start building a new interface
from scratch to understand new patterns, new approaches and discover what would
be the next challenges for the _ultimate interface_.

## Our experimental stack

Reviewing all of the features in the current Transmission web client, the stack
we chose was React for the user interface, Mobx for the state management and
CSS modules for all the stuff related with the application styles, with a new
build process managed by Webpack.

On the other hand, and with the above stack in mind, we decided to use some
best practices for the long term quality of this project. Some of these were
things like a strict set of Eslint rules, unit tests, UI tests and
internationalization.

With this decision we wanted to achieve a more reliable interface, better
performance, security and correctness. In conclusion a better way to maintain
this web application.

## Demo
![demo](demo.gif)

## Other

With Edu, we presented this experimental project on the BarcelonaJS. Those are
the slides: [Presentation in BarcelonaJS](https://docs.google.com/presentation/d/1cYbyC2Qkf85SQm4Ceq7e9TzXgaiJwMJ_VYilGn-_960/edit?usp=sharing)


React Transmission is an ongoing reimplementation of Transmission web interface.

react-transmission


I was impressed by [Logstalgia](https://logstalgia.io/), a software to show
graphically the traffic that a web application is receiving in realtime. It
uses the `access.log` files to know the origin, the response code and other
information and show it as a *Pong* game style.

You can see a nice demo here:

<iframe width="560" height="315"
src="https://www.youtube.com/embed/HeWfkPeDQbY" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

I wanted to improve my experience with [NodeJS](https://nodejs.org) and I was
curious about trying to replicate the same with Canvas and WebSockets.

Although the result was not impressive as the original, it was nice to deliver
a working PoC that was achieving to get all the pieces to work together.


~ferran.basora