CloseIT Hackathon #1

A few days ago, our first company hackathon finished successfully. But in order to define success, we have to define goals. With every new project, we evaluate what technologies to use. Even though we like Java and it is the language every one of us knows very well, not everything is a nail. So it would be wrong to have only a hammer in our toolbox. Since the development of our main projects isn't so intensive as before, we found some time to prepare a few demos using technologies we may need in the near future.

We mostly focused on React, QuaggaJS, Mongo and Thymeleaf. Not every part of the demos is new to us. For example, GUI of CRM and MGS are already made in React, and CRM is very tightly integrated with MongoDB. But as you can imagine, it's hard to meet two exactly same developers with same skillset. This was a good chance for individuals to try something which is not used by them on a daily basis. With this mindset, our hackathon started. To broaden the skills of individuals and test some technologies we might need in the future.

Luděk

I was mostly working on the React frontend. Since I consider myself primarily as a backend developer, I spent some time learning components, hooks and working with the state. The switch from Java to JavaScript isn't as smooth as switch to, for example, C#. The language syntax is pretty similar, what requires most head-scratching is the asynchronous nature of the language and surrounding ecosystem. Working with callbacks and promises can be sometimes very tricky.

The result of 4 days of work is the simple table that saves content to MongoDB database integrated by Kuba. An interesting feature is, that the content is first saved to browser local storage in case the backend isn't available. It tries to synchronize the content periodically. Saving to local storage is actually pretty easy. Don't forget to convert the value to String.

localStorage.setItem("Storage key", JSON.stringify(someObject)); let someObject = JSON.parse(localStorage.getItem("Storage key"));

The second important feature is the barcode scanner. I integrated the JavaScript library QuaggaJS. Even though it'slightly dated, it works pretty well. It's not hard to implement and it detects the barcode position in the image. Detected codes are saved to sliding queue and once the code is stabilized, it is captured to the package code field. I had problems rendering the camera output correctly though. You have to create an empty HTML element and give the id to the library. But the library rendered camera output and canvas element (which is used to render debug rectangles around the detected bar code) under each other. I solved it by manually creating video and canvas elements and stacked them on top of each other with styles.

<div id="barcode-camera" class="viewport" style=>   <video class="videoCamera" autoPlay={true} preload="auto" src="" muted={true} playsInline={true}></video>   <canvas class="drawingBuffer" style=></canvas> </div>

I have to say that hackathon was successful. Me and Kuba were able to create a working demo with all important features during only a few days.

Kuba

During our hackathon in CloseIT, I chose to use Node.js to create a REST API on the backend side, and assist Ludek with React part on the frontend. Whats bothers me every time I switch the context from Java(In this article, the meaning Java is Java + Spring boot) to JS is IntelliJ - I still can't set it to be helpful in the same way as it is for Java. Another thing is different lambda syntax :D On the other side, I noticed and use some similar concepts to do things what we usually do in Java.

Models

I started to create domain models what we'll need in our app. We chose to use MongoDB for persisting our data. It was pretty straightforward to do in NodeJS, just import mongoose, set DB string and define schemas and unique validators. If it needs to use ORM and RDBMS, the sequelize can be used.

Controllers - Routers

For processing the HTTP request, the Express web framework was used. I think it's the first option in NodeJS. Similar to Java, Express let you choose patterns and technology what you want to use. I set it to return JSON, add routes to each resource and use the corresponding HTTP method to the actions.

Middleware - Web filters

In my opinion, the middleware is what we call web filter in Java. I used it for authentication, error handling and logging. 

Logging request

I wanted an easy way to start log the request, and there is an option - Morgan. It's is to put in Express and define own format of logs.

Properties

The Dotenv module was used to simulate application.properties from Java.

Conclusion

This was a quick overview of concepts what we used on the backend side and similarities with Java. I think it is good to try to create a project in your secondary or new language/framework. You can realize then some concepts that Spring does for you under the hood.

Tomáš

My aim during the hackathon was to investigate the templating engine Thymeleaf.

Thymelaf is from the family of frameworks that represent the V in the MVC design pattern, meaning it is responsible for taking the data ("model") from the controller and preparing the final HTML which is then sent to a browser. The CloseIT team has had a lot of experience of with other such libraries - JSP, JSF, or Razor in ASP.NET, but we wanted to deep dive also into this one.

Thymeleaf was interesting for us since based on our research it is one of the most integrated frameworks into the Spring ecosystem. Even the official guide for Spring MVC - "Serving Web Content with Spring MVC" - uses it as the template engine. Creating a basic app scaffolding is just a matter of going to https://start.spring.io/ and setting Thymeleaf as one of your dependencies.

An example how a "for-each" cycle is done (taken from this page):

<tr th:each="prod : ${prods}">         <td th:text="${prod.name}">Onions</td>         <td th:text="${prod.price}">2.41</td>         <td th:text="${prod.inStock}? #{true} : #{false}">yes</td> </tr>

This portion of the view expects a variable "prods" in its model - sent via a controller. Notice the "th:" prefix for the elements which are then interpreted by the template engine.

We also had a very nice discussion about what part of the data is typically sent as the model, and back via the form (including the hidden fields), or what to keep in the server-side utilizing the servlet HttpSession API.

As a demo of its capabilities, we developed a basic questionnaire application, serving dynamic questions to a user and saving their answers. Thymeleaf was found quite suitable for this area and range of web development.

Authors: Luděk Novotný, Tomáš Frais, Jakub Horák