DEV Community: Renan Franca

🔄 Just published a new article on enhancing CLI experiences! 🚀 I recently worked on an interesting UX challenge in the JHipster Lite CLI: users were left staring at blank screens during operations, unsure if things were working or frozen. 🤔

Renan Franca — Wed, 23 Jul 2025 16:08:28 +0000

Renan Franca

Jul 22 '25

Adding a Loading Animation to JHipster Lite CLI

#java #programming #tutorial #opensource

Comments 1

4 min read

Adding a Loading Animation to JHipster Lite CLI

Renan Franca — Tue, 22 Jul 2025 16:20:08 +0000

Have you ever run a command-line application and found yourself staring at a blank screen, wondering if it's still working or if it's frozen? That's exactly the problem I set out to solve for the JHipster Lite CLI project. In this post, I'll share how I implemented a loading animation to enhance the user experience while commands are executing.

The Problem: Waiting in the Dark

When running commands in the JHipster Lite CLI, users had no visual feedback during operations that took more than a few seconds. This led to uncertainty - is the application still running? Is it stuck? Should I cancel and try again?

I wanted to fix this issue by adding a loading animation that would provide visual feedback during command execution.

The Solution: A Hexagonal ProgressStatus

I created a loading animation module that follows the hexagonal architecture principles that JHipster Lite is known for. Here's a demo of what I implemented:

Exploring Available Libraries

Before implementing my own solution, I explored existing libraries:

magic-progress: I tried using this library but encountered errors when running the jhlite command. Looking at the source code, I found no tests, and the project hadn't been maintained since August 2020.
progressbar: This library didn't have spinner animations, which was a key requirement for our user experience.

Given these limitations, I decided to implement a custom solution that would perfectly fit our needs.

The ProgressStatus Module

I created a ProgressStatus module following hexagonal architecture principles:

Hexagonal Architecture Implementation

├── domain
│   └── ProgressStatus.java
├── infrastructure
│   └── primary
│       └── SpinnerProgressStatus.java
└── package-info.java

The code follows a clean hexagonal architecture pattern:

Domain Layer (Port) - The ProgressStatus interface defines the core contract
ProgressStatus.java - (click to expand)
Infrastructure Layer (Adapter) - The SpinnerProgressStatus class implements the interface for spinner animation
SpinnerProgressStatus.java - (click to expand)

This separation allows us to:

Keep the core logic independent of visual animation implementation
Easily test with mock implementations
Add new progress indicator types without changing core logic

Key Features

1. Animated Unicode Spinner

The spinner uses Unicode braille patterns for a smooth rotating animation:

private static final String[] SPINNER_FRAMES = { "⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏" };

2. Color-Coded Messages

The animation implements ANSI color support:

Cyan for in-progress operations
Green for success messages
Red for failure notifications

3. Asynchronous Animation

The spinner runs in a daemon thread to avoid blocking the main application:

executor = Executors.newSingleThreadScheduledExecutor(r -> {
  Thread thread = new Thread(r, "spinner-animation");
  thread.setDaemon(true);
  return thread;
});
executor.scheduleAtFixedRate(this::renderFrame, 0, 120, TimeUnit.MILLISECONDS);

4. Thread-Safe Operation

The implementation uses atomic operations for thread safety:

private final AtomicBoolean running = new AtomicBoolean(false);

5. Rich Animation Sequences

I added sophisticated animation cycles including:

Progressive dots (. .. ...)
JHipster-lite symbols (⧓⚡)
Hexagonal architecture symbol (💎)
Spring Boot symbol (🍃)

6. Rendering Animation Logic

private void renderSpinner(boolean updateFrame) {
 if (running.get()) {
   if (updateFrame) {
     frameIndex = (frameIndex + 1) % SPINNER_FRAMES.length;
     suffixFrameIndex = (suffixFrameIndex + 1) % SUFFIX_ANIMATION_FRAMES.length;
   }
   String frame = SPINNER_FRAMES[frameIndex];
   String suffix = SUFFIX_ANIMATION_FRAMES[suffixFrameIndex];
   System.out.print(CLEAR_LINE + ANSI_CYAN + frame + ANSI_RESET + " " + currentMessage + suffix);
 }
}

The Little Details That Matter

A cool thing about this animation is that you don't mind if operations take a little longer because you can see different animations and progress indicators. I included some curious details:

1) The icons on the right represent the technology and architecture used by JHLiteCli. I synchronized the animation so it feels like you can see what is loading, but it's just an illusion.

2) If the Execute command takes a little bit longer, it shows the bow tie + lightning, which represents jhipster-lite. I designed the animation to match that style.

At the end, I felt the loading time isn't as bothersome as before. The user experience is much more relaxed and engaging.

Usage Example

Here's a test case on how ProgressStatus works:

@Test
void shouldShowSuccessMessage(CapturedOutput output) {
   ProgressStatus progressStatus = new SpinnerProgressStatus();
   progressStatus.show("Operation in progress");

   progressStatus.success("Completed successfully");

   assertThat(output.toString()).contains("✓").contains("Completed successfully");
}

ProgressStatusTest.java - (click to expand)

Benefits Beyond Aesthetics

This implementation provides several benefits:

Improved User Experience: Users now have visual feedback during operations
Reduced Perceived Wait Time: The animation makes waiting feel shorter
Clear Operation Status: Success and failure states are clearly indicated
Architectural Consistency: The solution follows JHipster's hexagonal architecture principles

What’s next?

I am going to share how I integrated the ProgressStatus module into the JHipster Lite CLI for:

Application Startup: Shows "Loading JHipster Lite CLI" during initialization
Command Execution: Displays progress during command running
Command Completion: Shows success or failure messages with appropriate colors

The animation is going to be active for all major commands:

Version command (--version)
List command (list)
Apply command (apply)

Conclusion

Adding a loading animation to the JHipster Lite CLI might seem like a small enhancement, but it significantly improves the user experience. By following hexagonal architecture principles, I was able to create a solution that's not only visually appealing but also maintainable, testable, and extensible.

This project demonstrates how proper architectural design can benefit even UI components. The next time you're working on a command-line application, consider how you might enhance the user experience with similar feedback mechanisms.

Lastly, let me extend an invitation to join me on my journey 🚀 in the realm of software development. I share my insights, experiences, and valuable resources on LinkedIn 📎. Following me on these platforms not only keeps you updated on my latest posts and projects 📬 but also opens doors to vibrant discussions and learning opportunities. I look forward to connecting with you! 💼

[Boost] My Journey to the JHipster Core Team

Renan Franca — Thu, 10 Jul 2025 15:44:46 +0000

Renan Franca

Jul 10 '25

My Journey to the JHipster Core Team

#jhipster #webdev #beginners #tutorial

Comments 1

4 min read

My Journey to the JHipster Core Team

Renan Franca — Thu, 10 Jul 2025 15:40:18 +0000

Originally published at renanfranca.github.io

It's been 18 months since I joined the JHipster core team, and what an incredible journey it has been! Today I want to reflect on how it all started back in January 2024 when I was elected to join the team after a successful vote by the members. 🎉

My Path to the Core Team

My relationship with JHipster has been transformative:

🚀 It quickly turned into my main side project, where I get to apply the techniques I'm learning.
🛠️ Here, I truly discovered the power of Test-Driven Development (TDD).
📚 Always growing and learning with this amazing community! 😊
🎉 The pinnacle came when I was elected to join the JHipster core team in January 2024.

How I Introduced Myself

When I joined the core team in January 2024, here's how I introduced myself:

My name is Renan Franca, and I have been a software engineer since 2008. I am a big fan of JHipster! I first encountered JHipster in 2021 while creating a side project to monitor my baby girl's status: https://renanfranca.github.io/i-built-a-baby-care-web-app-using-jhipster.html Since then, I have been maintaining a blog to promote JHipster https://renanfranca.github.io

My first contribution to the jhipster-generator was on 07/2021: https://github.com/jhipster/generator-jhipster/pull/15724. After blogging for a while, I decided to contribute to the JHipster Lite project and wrote about the experience here: https://renanfranca.github.io/how-did-i-earn-money-to-fix-an-issue-from-an-open-source-software.html. Then, I made 10 contributions to the JHipster Lite project (https://github.com/jhipster/jhipster-lite/pulls?q=is%3Apr+author%3A%40me+is%3Aclosed).

I'd like to join the core team because I truly love this project and the community. Recently, I realized my ambition isn't to create new side projects anymore. Now, my goal is to adopt the JHipster project as my primary side project.

My Contribution Journey

My contributions until today (2025-07-10):

I contributed with more than 73 merged Pull Requests at JHipster Lite Project
I also contributed to the JHipster Lite Extension project with 7 merged Pull Requests
I am currently working on the CLI version of JHLite called JHipster Lite CLI Project, with 9 Pull Requests merged

This CLI project was the first major project I built using jhipster-lite to assist me, marking my first coding experience with it.

From Wishful Thinking to Reality

Back in January 2023, I wrote a post about how I earned money by fixing an issue in JHipster Lite. At the end of that post, I shared a goal that was close to my heart:

"I am planning to continue to contribute to the jhlite project by fixing issues and keep writing blog posts about my experience with jhipster.

One day, I wish to be part of the jhipster core team 😊!"

It's incredible how aspirations can become reality when you're persistent and passionate about what you do. Just one year after writing those words, what seemed like a distant dream became true when I was elected to join the core team!

This journey shows the power of setting goals and consistently working toward them. Through each pull request, each blog post, and each interaction with the community, I was building the path that would eventually lead me to where I am today.

18 Months of Growth

The past year and a half as a core team member has been filled with learning, collaboration, and growth. I've had the opportunity to work alongside incredibly talented developers, contribute to major releases, and help shape the future of JHipster.

Being part of this community has reinforced my belief in the power of open source and collaborative development. The skills I've gained and the connections I've made have been invaluable not just to my work with JHipster, but to my career as a whole.

What's Next?

As I look ahead to the future, I'm excited about the continued evolution of JHipster and my role within it. There are always new challenges to tackle, features to implement, and improvements to make.

I'm grateful for the trust placed in me by the JHipster community, and I remain committed to contributing my best work to this project that has become such an important part of my professional journey.

💨🚀 Accelerate Your Workflow with ChatGPT Prompts 📝 - Ditch the Boilerplate 📃✖️ and Eliminate Duplicates 🔄🚫

Renan Franca — Wed, 12 Jul 2023 10:49:41 +0000

Originally published at renanfranca.github.io

In our ever-evolving digital landscape, efficiency is the name of the game. As developers, we're constantly on the hunt for tools and practices that can streamline our workflow and improve the quality of our code. One powerful approach to achieving this is through the use of AI-based prompts, specifically, OpenAI's ChatGPT prompts.

Unraveling Boilerplate Code

Boilerplate code refers to sections of code that have to be included in many places with little to no alteration. It's often necessary but can bloat our codebase, making it harder to read and maintain. Moreover, the act of constantly typing out these code sections is time-consuming and monotonous.

This is where the beauty of ChatGPT prompts comes into play.

Harnessing the Power of ChatGPT Prompts

ChatGPT prompts can drastically speed up the development process by automating the generation of boilerplate code. This not only reduces manual typing but also minimizes the risk of errors that often creep in during repetitive tasks like copying and pasting code. I will show you some examples using chatGPT-4.

A Practical Example: From JSON to Typescript object

As the first example, I will introduce a simple prompt for you to get used to it before going to complex prompts.

Imagine you have a JSON that needs to be converted to a Typescript object. Here's a sample prompt you could use:

Prompt: Convert the following JSON to a Typescript object:

{
  "id": 1,
  "name": "John",
  "email": "john@example.com",
  "details": {
    "age": 30,
    "address": "123 Main St"
  }
}

With the help of ChatGPT, the output would be:

interface Details {
  age: number;
  address: string;
}

interface User {
  id: number;
  name: string;
  email: string;
  details: Details;
}

const user: User = {
  id: 1,
  name: "John",
  email: "john@example.com",
  details: {
    age: 30,
    address: "123 Main St",
  },
};

With a simple prompt, we managed to convert a JSON object to a Typescript object, significantly reducing the time and effort required for this common task.

Try out this prompt right now: TS Object from JSON

Ditching Boilerplate with Prompts

I like to organize my Vuejs components in different files, for example, a component called Homepage:

📂homepage
- Homepage.component.ts
- Homepage.html
- HomepageVue.vue
- index.ts

The following prompt generates the content of those files for a different component name:

Prompt:

In vue 3 js, take into account the organization of this file inside the folder homepage:

- index.ts:
import HomepageVue from './HomepageVue.vue';

export { HomepageVue };

- HomepageVue.vue:
<template src="./Homepage.html"></template>

<script lang="ts" src="./Homepage.component.ts"></script>

- Homepage.html:

<div>
</div>

- Homepage.component.ts:
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'HomepageVue',
});

Now you are going to ask me for the name of the new component and replace Homepage with the new component name. After that, you are going to ask for other component names again forever.

ChatGPT: Sure, I can assist you with that. To start, what is the name of your new component?

Prompt: SignIn

ChatGPT:

Based on your request, your files for the new component "SignIn" should be structured as follows:

index.ts:

import SignInVue from './SignInVue.vue';

export { SignInVue };

SignInVue.vue:

<template src="./SignIn.html"></template>

<script lang="ts" src="./SignIn.component.ts"></script>

SignIn.html:

<div>
</div>

SignIn.component.ts:

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'SignInVue',
});

Let's continue. What is the next component name you would like to use?

Then I could keep creating new components and copy and paste them into my Vuejs project 😎!

Check this prompt right now: Generate Vuejs Component

Ditching Duplicates with Prompts

ChatGPT is not just limited to boilerplate code; it can also be employed to identify and refactor duplicated code, another common concern in software development.

Let's say we have a software system for a library. The system has two main functionalities: lending books to library members and restocking returned books.

Below is the code which has a significant amount of duplication and the prompt you could use at the:

Prompt:
Remove the duplication from the following Java class:

public class LibrarySystem {

    private List<Book> availableBooks;
    private Map<Member, List<Book>> lentBooks;

    // other necessary code...

    public void lendBook(Member member, Book book) {
        if (availableBooks.contains(book)) {
            // removing the book from the available book list
            availableBooks.remove(book);
            // adding the book to the member's lent books
            List<Book> memberBooks = lentBooks.get(member);
            if (memberBooks == null) {
                memberBooks = new ArrayList<>();
                lentBooks.put(member, memberBooks);
            }
            memberBooks.add(book);
            // generating a due date for returning the book, let's say in two weeks
            LocalDate dueDate = LocalDate.now().plusWeeks(2);
            // printing out a receipt
            System.out.println("Book: " + book.getTitle() + " lent to: " + member.getName() + " Due date: " + dueDate);
            // other necessary code...
        } else {
            System.out.println("The book is not available.");
        }
    }

    public void restockBook(Member member, Book book) {
        if (lentBooks.get(member) != null && lentBooks.get(member).contains(book)) {
            // removing the book from the member's lent books
            lentBooks.get(member).remove(book);
            // adding the book to the available book list
            availableBooks.add(book);
            // calculating and printing out any late fees
            LocalDate dueDate = LocalDate.now().minusWeeks(2); // assuming the book was due two weeks ago
            LocalDate returnDate = LocalDate.now();
            if (returnDate.isAfter(dueDate)) {
                long daysLate = ChronoUnit.DAYS.between(dueDate, returnDate);
                double lateFee = daysLate * 0.50; // assuming the late fee is 50 cents per day
                System.out.println("Late fee for book: " + book.getTitle() + " is: " + lateFee);
            }
            // other necessary code...
        } else {
            System.out.println("The book was not lent to this member.");
        }
    }
}

ChatGPT:

The duplication in this Java class can be seen in the code that retrieves a member's book list from the map. This code segment is repeated in both methods, lendBook, and restockBook. To remove this duplication, you can create a helper method, getMemberBooks, which takes a Member as an argument and returns a List<Book>. Here is the refactored code:

public class LibrarySystem {

    private List<Book> availableBooks;
    private Map<Member, List<Book>> lentBooks;

    // other necessary code...

    private List<Book> getMemberBooks(Member member) {
        List<Book> memberBooks = lentBooks.get(member);
        if (memberBooks == null) {
            memberBooks = new ArrayList<>();
            lentBooks.put(member, memberBooks);
        }
        return memberBooks;
    }

    public void lendBook(Member member, Book book) {
        if (availableBooks.contains(book)) {
            // removing the book from the available book list
            availableBooks.remove(book);
            // adding the book to the member's lent books
            List<Book> memberBooks = getMemberBooks(member);
            memberBooks.add(book);
            // generating a due date for returning the book, let's say in two weeks
            LocalDate dueDate = LocalDate.now().plusWeeks(2);
            // printing out a receipt
            System.out.println("Book: " + book.getTitle() + " lent to: " + member.getName() + " Due date: " + dueDate);
            // other necessary code...
        } else {
            System.out.println("The book is not available.");
        }
    }

    public void restockBook(Member member, Book book) {
        List<Book> memberBooks = getMemberBooks(member);
        if (memberBooks.contains(book)) {
            // removing the book from the member's lent books
            memberBooks.remove(book);
            // adding the book to the available book list
            availableBooks.add(book);
            // calculating and printing out any late fees
            LocalDate dueDate = LocalDate.now().minusWeeks(2); // assuming the book was due two weeks ago
            LocalDate returnDate = LocalDate.now();
            if (returnDate.isAfter(dueDate)) {
                long daysLate = ChronoUnit.DAYS.between(dueDate, returnDate);
                double lateFee = daysLate * 0.50; // assuming the late fee is 50 cents per day
                System.out.println("Late fee for book: " + book.getTitle() + " is: " + lateFee);
            }
            // other necessary code...
        } else {
            System.out.println("The book was not lent to this member.");
        }
    }
}

By simply running a ChatGPT prompt to identify and refactor duplicated code, we streamlined our code, enhancing readability and maintainability.

This prompt is available here: Remove Duplication in Java

Let's Connect and Continue the Discussion 🚀

My journey as a developer is marked by the constant pursuit of knowledge and efficiency. I've found the usage of ChatGPT prompts to be a powerful tool for achieving these goals, and I'm excited to share these insights with the community.

To continue this journey together, I extend an invitation to connect with me on Twitter @renan_afranca🐦 and LinkedIn📎. Not only will you stay updated with my latest posts and insights, but it will also pave the way for fruitful discussions and learning opportunities.

Your Turn 💼

How has your experience been with AI-assisted code generation? Do you see the use of prompts like ChatGPT becoming a staple in software development workflows? How have these prompts impacted your productivity or code quality?

Drop your thoughts 💭 in the comment section below and let's foster a healthy discussion around enhancing developer experiences in our digital era. Looking forward to your valuable input! 🌟

📣 Attention all tech enthusiasts, coders, and lifelong learners!

I have some intriguing blog posts that you just can't afford to miss!

🚀 Discover the art of perfecting your Github profile with the guide "Create a Github Stunning Profile". This article won't just teach you how to make your profile aesthetically pleasing, but also help you dynamically list your recent blog posts. Say goodbye to manual updates and hello to automation. Make your Github profile a mirror of your tech prowess! 💫

🧩 Ever wondered why JHipster avoids Lombok? Delve deep into the pros and cons of using Lombok and why JHipster chooses to walk a different path in my thought-provoking post "JHipster Does Not Use Lombok. Why?" Unravel this technological mystery and gain insights into industry practices that you can implement in your own projects.

📱 Want to code on the go? Check out my definitive guide "VSCode on Android (you don’t need to install anything)". This gem of a blog post will break down how to use Visual Studio Code on Android without the hassle of installation. Transform your Android device into a coding machine and get things done wherever you are.

No matter where you are in your tech journey, these posts will enlighten you, challenge you, and push you forward. Don't let this opportunity pass you by, read these posts now! Ignite your passion for technology and continue to expand your knowledge with us. 💡

Your Guide to Implementing Vue Placeholder Loading

Renan Franca — Mon, 26 Jun 2023 10:41:10 +0000

Originally published at renanfranca.github.io

In today's fast-paced digital world, user experience is paramount. As developers, we're always looking for ways to make our applications more responsive and enjoyable. One effective strategy to enhance the user experience is by using placeholder loading, or skeleton loading, in our Vue.js applications.

Placeholder loading is a technique where a simplified version of the web page is shown while the full content is being loaded. This approach gives users immediate feedback that content is on the way, resulting in a smoother, more engaging experience. But how do we effectively implement placeholder loading in Vue.js applications?

Enter placeholder-loading

An easy and efficient way to implement placeholder loading is through the placeholder-loading npm package. This simple and flexible library uses CSS-only content placeholders, providing a sleek loading animation.

To use placeholder-loading in your Vue.js project, you can install it via npm and import it into your application:

npm install placeholder-loading --save
@import "~/node_modules/placeholder-loading/src/scss/placeholder-loading";

This library allows you to modify various SASS variables to suit your project's aesthetics, such as direction, background color, border properties, grid configuration, and animation duration.

Using placeholder-loading is as simple as including specific classes in your HTML markup. Here's an example of how you can use it:

<div class="ph-item">
    <div class="ph-col-12">
        <div class="ph-picture"></div>
        <div class="ph-row">
            <div class="ph-col-6 big"></div>
            <div class="ph-col-4 empty big"></div>
            <div class="ph-col-2 big"></div>
            <div class="ph-col-4"></div>
            <div class="ph-col-8 empty"></div>
            <div class="ph-col-6"></div>
            <div class="ph-col-6 empty"></div>
            <div class="ph-col-12"></div>
        </div>
    </div>
</div>

In the above example, .ph-item, .ph-col-*, .ph-picture, and .ph-row are all classes provided by placeholder-loading. See some live examples here: https://zalog.ro/placeholder-loading/

A Practical Example

To better illustrate the use of placeholder loading in Vue.js, let's examine a real-world example from a pull request I recently made to the jhipster-lite repository on GitHub: add placeholder during load #6247.

In this pull request, I added placeholder loading to the LandscapeLoader and ModulesPatchLoader components. Those components are responsible for displaying a placeholder while the actual content is loading. To achieve this, I used the placeholder-loading library along with Vue.js components for rows, pictures, and lists.

Let's take a look at the Landscape screen using the LandscapeLoader:

Landscape Skeleton Loading Screen

Landscape screen loaded

Here is the ModulePatch screen using the ModulesPatchLoader:

ModulePatch Skeleton Loading Screen

ModulePatch screen loaded

I choose to detail the implementation of the ModulesPatchLoader because it is easy to understand. Follow me through 8 steps to implementing it!

Step I: package.json

Here, I'd like to discuss a key change I made to the package.json file in a Node.js project. This file is crucial as it contains project metadata and the dependencies required for the project to function correctly.

Here is the modified code:

{
  "dependencies": {
    "axios": "1.4.0",
    "mitt": "3.0.0",
    "placeholder-loading": "^0.6.0",
    "vue": "3.3.4",
    "vue-router": "4.2.1"
  }
}

Line by line, let's break this down. The axios and mitt dependencies remained unchanged at versions "1.4.0" and "3.0.0" respectively. The vue and vue-router dependencies also remained consistent in versions "3.3.4" and "4.2.1".

The key change was the addition of a new dependency - placeholder-loading. This was introduced with a version specifier of "^0.6.0". This syntax is specific to npm, the Node.js package manager, and it indicates that npm will install the latest minor version that is greater than or equal to 0.6.0. For instance, if there are versions 0.6.1, 0.6.2, 0.7.0 available, npm will install 0.7.0. However, if there's 0.8.0, it would not install this as 0.8.0 would be considered a major version.

Adding the placeholder-loading package to the project's dependencies, allows the project to use the functionality provided by this package, which was critical to the enhancement I was working on.

Step II: vite.config.ts

Let's break down the changes I made in the code, line by line:

css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/assets/global.scss";
          @import "@/assets/side-form.scss";
          @import "${path.resolve('node_modules/placeholder-loading/dist/css/placeholder-loading.min.css')}";`,
      },
    },
  },

In the css property, the preprocessorOptions is set to use SCSS, a CSS preprocessor which makes writing CSS more powerful and maintainable. The additionalData property allows us to add more SCSS resources.

The @import statement is used to import the styles from other SCSS files. The first two imports, "@/assets/global.scss" and "@/assets/side-form.scss", are from the original code and load global and side form styles respectively.

The new line I introduced imports the placeholder-loading.min.css from the placeholder-loading package, which is a framework for creating a placeholder loading effect. The path to the placeholder-loading.min.css file is resolved using Node's path.resolve method, which resolves a sequence of paths into an absolute path.

Step III: ModulesPatch.html

In the initial state of the code, a div element with classes "jhipster-modules" and "jhlite-loader-container" was used to display the loading state. This display was conditioned on the isLoading method of the content object. Inside this div, there was another div with the class "jhlite-loader" that presumably handled the actual display of the loading state.

<div class="jhipster-modules jhlite-loader-container" v-if="content.isLoading()" data-selector="modules-loader">
  <div class="jhlite-loader"></div>
</div>
<div class="jhipster-modules jhlite-menu-content-template" v-else data-selector="modules-list">
  <div class="jhipster-modules-list jhlite-menu-content-template--content">
    <div class="jhipster-modules-filters">

In the improved version of the code, the div has been replaced with a Vue component called ModulesPatchLoaderVue. This component is also dependent on the isLoading method of the content object to determine when to display. This change encapsulates the loading display logic within a reusable Vue component, making the code cleaner and more maintainable.

<ModulesPatchLoaderVue v-if="content.isLoading()" />
<div class="jhipster-modules jhlite-menu-content-template" v-else data-selector="modules-list">
  <div class="jhipster-modules-list jhlite-menu-content-template--content">
    <div class="jhipster-modules-filters">

Step IV: ModulesPatch.component.ts

Here's the modified code snippet:

import { ModuleParametersVue } from '../module-parameters';
import { castValue } from '../PropertyValue';
import { ModuleParametersRepository } from '@/module/domain/ModuleParametersRepository';
import { ModulesPatchLoaderVue } from '../modules-patch-loader';

export default defineComponent({
  name: 'ModulesPatchVue',
  components: { ModuleParametersVue, IconVue, TagFilterVue, ModulePropertiesFormVue, ProjectActionsVue, ModulesPatchLoaderVue },
  setup() {
    const alertBus = inject('alertBus') as AlertBus;
    const modules = inject('modules') as ModulesRepository;
  }
});

Starting from the top, the imports section of the code remained largely the same, but with the addition of one crucial line: import { ModulesPatchLoaderVue } from '../modules-patch-loader';. This line imports the ModulesPatchLoaderVue component, which was added as part of the solution to improve the page loading experience.

In the defineComponent function, the new ModulesPatchLoaderVue component was added to the components object. This means that the ModulesPatchLoaderVue component is now accessible within the ModulesPatchVue component, and can be used to display a more aesthetically pleasing loading placeholder when the page is loading.

The setup function remained untouched, but it's worth noting that it injects instances of alertBus and modules for use within the component.

Step V: modules-patch-loader/index.ts

The changes are straightforward - it imports the Vue component ModulesPatchLoaderVue from ModulesPatchLoader.vue and then exports it. Here's the code:

import ModulesPatchLoaderVue from './ModulesPatchLoader.vue';

export { ModulesPatchLoaderVue };

This kind of file is standard in JavaScript and TypeScript projects. It brings a significant improvement to the way we handle imports in our code. The magic lies in its ability to allow importing directly from the modules-patch-loader directory, without the need to specify the .vue file. This results in cleaner and more readable code. Here's how you can now import the ModulesPatchLoaderVue:

import { ModulesPatchLoaderVue } from '../modules-patch-loader';

This replaces the more verbose, previous method:

import ModulesPatchLoaderVue from '../modules-patch-loader/ModulesPatchLoader.vue';

By streamlining the way we import the ModulesPatchLoaderVue, we make our code more maintainable and intuitive to navigate, thereby enhancing our overall code quality.

Step VI: modules-patch-loader/ModulesPatchLoader.vue

The ModulesPatchLoader.vue file is a Vue Single File Component (SFC), essentially an all-in-one file containing a <template>, a <script>, and a <style> tag, each referring to an external HTML, TypeScript, and SCSS file respectively.

The <template> tag in this component points to the external ModulesPatchLoader.html file:

<template src="./ModulesPatchLoader.html"></template>

Next, the <script> tag links to the ModulesPatchLoader.component.ts TypeScript file:

<script lang="ts" src="./ModulesPatchLoader.component.ts"></script>

The <style> tag introduces SCSS styles that define the appearance of the component:

<style lang="scss">
.jhlite-modules-loader-content {
  background-color: $jhipster-lite-secondary-color;
  color: $jhipster-lite-primary-text-color;
  .ph-item {
    border: none;
    background-color: $jhipster-lite-secondary-color;
  }
}
.ph-jhlite-modules-container-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0;
  box-sizing: border-box;
  .modules-filter {
    height: 80px;
  }
  .modules-list {
    flex-grow: 1;
    overflow-y: auto;
  }
}
.ph-jhlite-modules-sidemenu {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-sizing: border-box;
  &-top {
    flex-grow: 1;
    flex-basis: 0;
  }
  &-bottom {
    height: 110px;
    flex-grow: 0;
    flex-basis: auto;
  }
}
</style>

The .jhlite-modules-loader-content class sets a background color and a text color, while also adjusting the border and background color of items with the .ph-item class. The .ph-jhlite-modules-container-content class dictates the flexbox properties for layout control, and adjusts the height of the .modules-filter subelement and the overflow properties of the .modules-list subelement. Lastly, the .ph-jhlite-modules-sidemenu class manages the flexbox properties of the side menu, and manipulates the height and flexbox properties of its -top and -bottom subelements.

Basically, this SCSS mimics the positions of the elements from the ModulePatch screen.

Step VII: modules-patch-loader/ModulesPatchLoader.html

The ModulesPatchLoader.html is an HTML file that serves as a template for a Vue.js component. It sets up the structure of the component and uses Vue.js directives to create dynamic logic, like loops (v-for) and class bindings (:class).

div class="jhlite-modules-loader-content jhlite-menu-content-template" data-selector="modules-loader">
  <div class="ph-jhlite-modules-container-content jhlite-menu-content-template--content">
    <div class="modules-filter">
      <div class="ph-item">
        <div class="ph-col-12">
          <div class="ph-row">
            <div class="ph-col-12 big"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="modules-list">
      <div class="ph-item">
        <div class="ph-col-12">
          <div class="ph-row" v-for="(row, index) in rows" :key="index">
            <div :class="`ph-col-${col.size} ${col.classes}`" v-for="(col, index) in row.columns" :key="index"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="jhlite-menu-content-template--menu">
    <div class="ph-jhlite-modules-sidemenu">
      <div class="ph-jhlite-modules-sidemenu-top">
        <div class="ph-item">
          <div class="ph-col-12">
            <div class="ph-row">
              <div class="ph-col-12 empty"></div>
              <div class="ph-col-6 big"></div>
              <div class="ph-col-6 empty big"></div>
              <div class="ph-col-12 empty"></div>
            </div>
            <div class="ph-row">
              <div class="ph-col-6"></div>
              <div class="ph-col-6 empty"></div>
              <div class="ph-col-12 big"></div>
              <div class="ph-col-10"></div>
              <div class="ph-col-10 empty"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="ph-jhlite-modules-sidemenu-bottom">
        <div class="ph-item">
          <div class="ph-col-12">
            <div class="ph-row">
              <div class="ph-col-12 big"></div>
              <div class="ph-col-12 big"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Let's go through the given code line by line:

<div class="jhlite-modules-loader-content jhlite-menu-content-template" data-selector="modules-loader">

Here, a div is defined with the class jhlite-modules-loader-content jhlite-menu-content-template and a data-selector attribute modules-loader. This serves as the root container for the module loader.

The next section is a container for the content of the modules. This is where the dynamic creation of the modules happens:

<div class="ph-jhlite-modules-container-content jhlite-menu-content-template--content">

The nested div elements provide structure and design to the modules:

<div class="modules-filter">
...
</div>
<div class="modules-list">
...
</div>

Inside the modules-list section, a Vue.js directive v-for is used to loop over an array rows. Each row in this array represents a row in the module list:

<div class="ph-row" v-for="(row, index) in rows" :key="index">

Inside each row, another v-for directive is used to iterate over the columns in the row. The class of the column is dynamically bound with the Vue.js :class directive, which allows different styling based on the properties of the col object:

<div :class="`ph-col-${col.size} ${col.classes}`" v-for="(col, index) in row.columns" :key="index"></div>

The final section defines a side menu, which is broken down into a top and bottom section. Each of these sections contains several rows and columns for displaying information:

<div class="jhlite-menu-content-template--menu">
  <div class="ph-jhlite-modules-sidemenu">
    <div class="ph-jhlite-modules-sidemenu-top">
    ...
    </div>
    <div class="ph-jhlite-modules-sidemenu-bottom">
    ...
    </div>
  </div>
</div>

Step VIII: modules-patch-loader/ModulesPatchLoader.component.ts

The ModulesPatchLoader.component.ts is a TypeScript file that exports a Vue.js component, which includes a setup function for creating reactive data. Additionally, several helper functions are used to generate columns and rows for the component.

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ModulesPatchLoaderVue',
  setup() {
    return {
      rows: [createCategory(4), createCategory(1), createCategory(3), createCategory(1), createCategory(2), createCategory(2)],
    };
  },
});

const createCategory = (modulesCount: number) => {
  const baseColumns = [createBigColumn(2), createBigColumn(10, true), createNormalEmptyColumn(12), createBigColumn(12)];
  const additionalColumns = Array(modulesCount - 1).fill(createBigColumn(12));
  const lastColumn = createBigColumn(12, true);
  return createRow(...baseColumns, ...additionalColumns, lastColumn);
};

const createColumn = (size: number, classes: string) => ({ size, classes });

const createBigColumn = (size: number, isEmpty: boolean = false) => createColumn(size, `${isEmpty ? 'empty ' : ''}big`);

const createNormalEmptyColumn = (size: number) => createColumn(size, 'empty');

const createRow = (...columns: any[]) => ({ columns });

Below is the breakdown of the code:

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ModulesPatchLoaderVue',
  setup() {
    return {
      rows: [createCategory(4), createCategory(1), createCategory(3), createCategory(1), createCategory(2), createCategory(2)],
    };
  },
});

In this section, the Vue.js component named ModulesPatchLoaderVue is defined using the defineComponent function from Vue. The setup function returns an object with a rows property. This property holds an array, each element of which is the result of the createCategory function with different arguments.

const createCategory = (modulesCount: number) => {
  const baseColumns = [createBigColumn(2), createBigColumn(10, true), createNormalEmptyColumn(12), createBigColumn(12)];
  const additionalColumns = Array(modulesCount - 1).fill(createBigColumn(12));
  const lastColumn = createBigColumn(12, true);
  return createRow(...baseColumns, ...additionalColumns, lastColumn);
};

Here, createCategory is a function that takes a modulesCount argument. It creates an array of baseColumns and another array of additionalColumns which holds several createBigColumn instances based on the modulesCount. It then combines these arrays into a single row using the createRow function.

const createColumn = (size: number, classes: string) => ({ size, classes });

const createBigColumn = (size: number, isEmpty: boolean = false) => createColumn(size, `${isEmpty ? 'empty ' : ''}big`);

const createNormalEmptyColumn = (size: number) => createColumn(size, 'empty');

createColumn, createBigColumn, and createNormalEmptyColumn are helper functions used for creating different types of columns. createColumn function creates a column object with size and classes properties. createBigColumn calls createColumn and adds a 'big' class string to it, optionally marking it as 'empty' based on the isEmpty argument. createNormalEmptyColumn creates an 'empty' column with a specified size.

const createRow = (...columns: any[]) => ({ columns });

Finally, createRow is a function that takes an arbitrary number of column objects and wraps them into a single row object.

By implementing placeholder loading in this way, we significantly enhance the user experience, providing immediate visual feedback while the real content is loading.

Conclusion

Whether you're building a simple blog or a complex web application, incorporating placeholder loading in your Vue.js applications can greatly improve user experience by providing immediate feedback during content loading. The placeholder-loading library is a flexible, easy-to-use tool for implementing this technique, as demonstrated by the pull request example.

I hope this post has shed light on the importance of placeholder loading 💡 and how to use the placeholder-loading library in your Vue.js applications. I hope you enjoyed this insightful guide 📖 on implementing Vue placeholder loading! To continue the conversation, I'd love to hear from you 🗣️.

Do you have experience using the placeholder-loading library in your own Vue.js applications? How has it improved the user experience? 👥 Or maybe you've faced challenges while implementing this technique, and you're seeking solutions or alternative methods. Share your stories 📚, ask your questions ❓, and let's learn together 🤝!

Drop your thoughts 💭 in the comment section below and let's foster a healthy discussion around enhancing user experiences in web development. Looking forward to your valuable input! 🌟

Lastly, let me extend an invitation to join me on my journey 🚀 in the realm of software development. I share my insights, experiences, and valuable resources on Twitter @renan_afranca 🐦 and LinkedIn 📎. Following me on these platforms not only keeps you updated on my latest posts and projects 📬 but also opens doors to vibrant discussions and learning opportunities. I look forward to connecting with you! 💼

🔥🚀 Ready to level up your coding skills and knowledge? 🚀🔥

🚀 Stepping into Vue - Enhancing the User Experience in JHipster Lite: Take a deep dive into the world of Vue and JHipster Lite and uncover ways to significantly uplift the user experience. Whether you're a developer seeking to boost your skills 🛠️, or a tech enthusiast intrigued by the potential of Vue, this post offers compelling insights that you simply can't afford to miss.
💰 How did I earn money to fix an issue from an Open Source Software (OSS)? Ever wondered if you can turn your passion for OSS into a revenue stream? This riveting post details one coder's journey to monetize their expertise, offering valuable tips, techniques, and motivation for anyone looking to follow a similar path.
🌐 Deploy jhipster monolithic (angular + spring boot) at fly.io for FREE: Looking for ways to deploy your jhipster monolithic application at no cost? Discover a step-by-step guide to utilizing fly.io for exactly this. Packed with useful advice, this post is a goldmine for any developer looking to deploy efficiently and effectively, all while keeping costs at bay.

Don't let this opportunity pass you by! Dive in now and unleash the wealth of knowledge these posts have to offer.

Stepping into Vue - Enhancing the User Experience in JHipster Lite

Renan Franca — Thu, 15 Jun 2023 11:48:32 +0000

Originally published at renanfranca.github.io

Greetings everyone! Today I'm thrilled to delve into my recent adventure into the world of Vue.js while working on the JHipster Lite project on GitHub. I took the plunge into this popular JavaScript framework to solve an issue, and in the process, learned a great deal about the framework and Hexagonal Architecture. So, let's dive right in!

The Issue at Hand

Firstly, I would like to address the problem that kick-started my Vue journey. The Issue #3371 describes that module properties were resetting every time a user navigated to another page. This could prove tiresome for users as they would need to redefine their preferences every time they switched pages. This proposed solution was to persist the module properties across pages using local storage.

So the issue will be considered fixed when a property typed at the Landscape screen will be loaded at the Patch screen without the need to type it again. Let's take a look at the images below that show the same property 'Project full name' shared between the Landscape and the Patch menu options.

Landscape screen has the property 'My Super App' highlighted with a blue rectangle

Patch screen has the same property 'My Super App' highlighted with a blue rectangle load automatically

My First Steps with Vue

To address this issue, I found myself working with Vue.js for the first time. I embarked on this journey while creating the Pull Request #6091, titled "Share module properties between landscape and patch screens". I made numerous code changes to enable the module properties to be shared between screens.

My first foray into Vue was both exciting and challenging. Vue's reactivity model and component architecture were different from what I was used to, but I quickly found them to be powerful tools for creating interactive user interfaces. I learned how to use Vue directives, computed properties, and component lifecycle hooks to create responsive and efficient components.

Hexagonal Architecture Challenges

An interesting challenge I faced during this development was maintaining the principles of Hexagonal Architecture while programming the front-end. There were instances where I made mistakes that contradicted the architectural concepts, but I was fortunate to have a code reviewer who pointed out these discrepancies and clearly guided me on what should be done.

I have come to appreciate the value of Hexagonal Architecture in isolating the application's core logic from external concerns. The experience also underscored the importance of clear and open communication in collaborative development.

Making Improvements

The following changes have significantly improved the user experience by maintaining the state of module properties across different pages. The use of a repository for managing module parameters has also enhanced the efficiency and reliability of the code.

Part I: ModuleParametersRepository.ts and LocalStorageModuleParametersRepository.ts

I created two TypeScript files: ModuleParametersRepository.ts and LocalStorageModuleParametersRepository.ts.

In ModuleParametersRepository.ts, I introduced an interface ModuleParametersRepository:

import { ModuleParameterType } from "@/module/domain/ModuleParameters";

export interface ModuleParametersRepository {
  store(map: Map<string, ModuleParameterType>): void;
  get(): Map<string, ModuleParameterType>;
}

This interface provides a contract for storing and retrieving module parameters. The store method accepts a map of type ModuleParameterType and doesn't return anything, while the get method returns a map of the same type.

In LocalStorageModuleParametersRepository.ts, I implemented the ModuleParametersRepository interface:

import { ModuleParametersRepository } from "../domain/ModuleParametersRepository";
import { ModuleParameterType } from "../domain/ModuleParameters";

export class LocalStorageModuleParametersRepository
  implements ModuleParametersRepository
{
  private readonly STORAGE_KEY = "moduleParameters";
  private readonly localStorage: Storage;

  constructor(localStorage: Storage) {
    this.localStorage = localStorage;
  }
  store(map: Map<string, ModuleParameterType>): void {
    this.localStorage.setItem(
      this.STORAGE_KEY,
      JSON.stringify(Array.from(map.entries()))
    );
  }

  get(): Map<string, ModuleParameterType> {
    const storedValue = this.localStorage.getItem(this.STORAGE_KEY);
    if (storedValue) {
      return new Map(JSON.parse(storedValue));
    }
    return new Map<string, ModuleParameterType>();
  }
}

In this class, I defined a STORAGE_KEY constant for identifying the storage location and a localStorage property of type Storage. The constructor accepts a Storage object and assigns it to localStorage.

The store method takes a map of ModuleParameterType, converts it into a string using JSON.stringify, and stores this string in localStorage using the setItem method. The get method retrieves the stored string from localStorage using the getItem method, parses it back into a map using JSON.parse, and returns it. If no stored value is found, it returns a new, empty map.

Part II: Main.ts

The first change I made was to add a new import at the top of the main.ts file. I imported the LocalStorageModuleParametersRepository class from the './module/secondary/LocalStorageModuleParametersRepository' file. This class is responsible for storing the module properties in the browser's local storage.

import { LocalStorageModuleParametersRepository } from "./module/secondary/LocalStorageModuleParametersRepository";

Next, I created a new instance of LocalStorageModuleParametersRepository, passing localStorage as an argument. This allows the class to access the browser's local storage to store and retrieve the module properties.

const moduleParametersRepository = new LocalStorageModuleParametersRepository(
  localStorage
);

Finally, I added moduleParametersRepository to the Vue application context. This allows any Vue component to access the repository and, therefore, the module properties.

app.provide("moduleParameters", moduleParametersRepository);

These changes allow module properties to be persistently stored, improving the user experience when navigating between pages. Moreover, the implementation of LocalStorageModuleParametersRepository allows other parts of the application to easily access the module properties, making the code more modular and easier to maintain.

Part III: Landscape.component.ts

In the recent update to the Landscape component of the JHipster Lite project, a significant change was made to improve the management of module parameters. The original code used a local reference, valuatedModuleParameters, to store the parameters of the modules. This was replaced with a more robust solution: a repository pattern.

The ModuleParametersRepository was imported at the top of the file, and an instance of it was injected into the component. This repository is responsible for managing the module parameters, providing a more centralized and consistent way to handle these values. This change can be seen in the following lines:

import { ModuleParametersRepository } from '@/module/domain/ModuleParametersRepository';
...
const moduleParameters = inject('moduleParameters') as ModuleParametersRepository;
const moduleParametersValues = ref(moduleParameters.get());

The moduleParametersValues reference now points to the values retrieved from the repository, and any changes to these values are stored back into the repository. This can be seen in the updateProperty and deleteProperty methods:

const updateProperty = (property: ModuleParameter): void => {
  moduleParametersValues.value.set(property.key, property.value);
  moduleParameters.store(moduleParametersValues.value);
};

const deleteProperty = (key: string): void => {
  moduleParametersValues.value.delete(key);
  moduleParameters.store(moduleParametersValues.value);
};

This new approach ensures that the module parameters are consistently managed across different parts of the application, reducing the risk of inconsistencies and bugs. It also makes the code more maintainable and easier to understand, as the responsibility of managing the module parameters is clearly defined and encapsulated within the ModuleParametersRepository.

Part IV: ModulesPatch.component.ts

Starting with the import section, I introduced ModuleParametersRepository from the domain of the module. This repository is designed to manage the module parameters, providing a more efficient way to handle them.

import { ModuleParametersRepository } from "@/module/domain/ModuleParametersRepository";

In the defineComponent function, I replaced the moduleParameters ref with an injection of moduleParameters from the ModuleParametersRepository. This allows the component to directly access the repository, improving the efficiency of data retrieval. I also introduced moduleParametersValues as a ref, which gets the current state of the module parameters from the repository.

const moduleParameters = inject('moduleParameters') as ModuleParametersRepository;
const moduleParametersValues = ref(moduleParameters.get());

In the isNotSet function, I changed the source of the value from moduleParameters.value.get(propertyKey) to moduleParametersValues.value.get(propertyKey). This ensures that the function checks the current state of the module parameters.

const value = moduleParametersValues.value.get(propertyKey);

In the updateProperty and deleteProperty functions, I updated the state of the module parameters in the repository after every change. This ensures that the repository always holds the most recent state of the module parameters.

const updateProperty = (property: ModuleParameter): void => {
  moduleParametersValues.value.set(property.key, property.value);
  moduleParameters.store(moduleParametersValues.value);
};

const deleteProperty = (key: ModulePropertyKey): void => {
  moduleParametersValues.value.delete(key);
  moduleParameters.store(moduleParametersValues.value);
};

In the function that applies a module, I replaced moduleParameters.value with moduleParametersValues.value as the source of parameters. This ensures that the most recent state of the module parameters is used when applying a module.

parameters: moduleParametersValues.value,

In the function that handles project history properties, I updated the state of the module parameters in the repository after setting each unknown property. This ensures that the repository is updated with any new properties that are discovered.

moduleParametersValues.value.set(property.key, property.value);
moduleParameters.store(moduleParametersValues.value);

Finally, in the return statement of the defineComponent function, I replaced moduleParameters with moduleParametersValues. This ensures that the component always provides the most recent state of the module parameters.

moduleParametersValues,

Conclusion

These changes have the potential to significantly enhance the user experience in JHipster Lite. With the module properties now persisting across pages, users no longer need to redefine their preferences every time they navigate to a different page.

However, please note that these changes generated the following bug Local properties storage do no reset #6279 which I have already fixed it. I eagerly look forward to feedback from the community and I am ready to make any necessary adjustments.

For a comprehensive understanding of the changes, I recommend reviewing the code directly on GitHub. Stay tuned for more updates on JHipster Lite's development!

That's it for now, folks! I hope you've enjoyed my journey into Vue.js, the challenges of Hexagonal Architecture, and the solutions I've implemented to improve JHipster Lite's user experience. The software development world is full of exciting challenges and adventures, and I would be more than happy to have you follow along with me.

If you want to stay updated with my latest projects and insights, follow me on Twitter at @renan_afranca and connect with me on LinkedIn at https://www.linkedin.com/in/renan-af. Let's explore this tech-filled universe together!

I'd love to hear your thoughts on our exploration of Vue.js and Hexagonal Architecture. How could these principles be applied to your projects? Is there another JavaScript framework you're considering using with Hexagonal Architecture?

Your input is incredibly valuable. Please share your thoughts in the comments below. Your insights will contribute significantly to our ongoing discussion and learning. I'm looking forward to hearing from you! Happy coding!

🚀 Ignite Your Coding Journey

💰 Want to get started in open source software and turn your technical skills into earnings? Don't miss out on reading How did I earn money to fix an issue from an Open Source Software (OSS)? It's full of practical tips and real-life experiences that could set you on your own path to financial success. Dive into the world of OSS today and start making a difference while earning money!

🚀 Interested in deploying a powerful combination of Angular and Spring Boot but concerned about the cost? Fret not! Deploy jhipster monolithic (angular + spring boot) at fly.io for FREE is what you need. Discover how to harness the power of jhipster and deploy your app at zero cost on fly.io. Get your app up and running without breaking the bank.

📱 Get ready to revolutionize your coding experience! VSCode on Android (you don’t need to install anything) is a game-changer. Experience VSCode on your Android device without the hassle of installing any additional software. Stay connected and code on the go. Unleash the power of mobile coding today!

Don't let this opportunity pass you by! Dive in now and unleash the wealth of knowledge these posts have to offer.

How did I earn money to fix an issue from an Open Source Software (OSS)?

Renan Franca — Mon, 06 Feb 2023 11:33:22 +0000

Originally published at renanfranca.github.io

I am going to share my approach and my own experience and opinion about fixing a bounty issue from the jhipster-lite Open Source Software (OSS).

Wich issue to choose

I got stuck for a long time because I couldn't decide which issue I should fix and I didn't have much time to spend fixing an issue. I could only be coding while my baby girl was sleeping.

At first, I created an issue to fix because I was afraid to fail to fix an existing issue. Then I realized that isn't a good idea to implement a front-end feature because my strength is back-end code using spring boot!

After some time, I decided to join together my goal to help the jhipster-lite (jhlite) project by solving an issue with my need to earn money beyond my paycheck. So I started to read the bounty issues list, looking for an issue that demands only backend skills to fix.

In the end, I decided to try to fix this issue: Add the possibility to comment spring properties in modules
.

How should I start to fix an issue?

I started to read the closed issues to understand and look for answers to my questions:

How an issue was assigned to someone?
Should I ask for permission to fix it before I start to try to fix it?
What happens if two contributors were trying to fix the same issue and both didn't ask for permission?

I found all the answers in the bounty issue instructions:

Create a Pull Request that fixes a ticket with the $$ bug-bounty $$ label.

In order to close the ticket automatically, you must have one commit message with the Fix keyword. For example, Fix #1234 to close ticket #1234.

That Pull Request must be merged by someone from the core team. If there are several Pull Requests, the core team member either selects the most recent one or the best one - that’s up to the team member to decide what is best for the project.

In addition, I realized that I was afraid of getting my attempt to fix declined by the reviewer. So I decided to walk over my fear and try to fix and create a pull request as fast as possible to gather feedback (positive or negative) from the reviewer.

What did help me to fix the issue?

Here I will try to share some of my abilities and background knowledge which gives me the confidence to keep up coding until the issue got merged 😄!

Learn about the jhipster-lite project

In my case, I need to understand the project to be motivated to contribute to it. Below, I will list some interesting resources to fall in love with jhlite 😊.

What is JHipster Lite?
Read everything at the jhipster-lite contributing guide
What is JHipster Lite and why should you care? by Julien Dubois
- Excelente content showing how to use jhipster-lite and Julien will guide you through jhlite options. In the end, you will create the demo project and could explore it by yourself! That was so cool!
How to contribute to JHipster by Anthony Viard and Sohini Pattanayak
- I learn a lot of tricks with this video which covers how to contribute to jhipster-lite, for example, name my branch using the GitHub issue number 2106-add-comment-spring-properties-in-modules.
Simple WebServices with JHipster Lite by Colin Damon
- Here you will learn how jhipster lite could be your best friend in coding! This great demo was made by the reviewer of my pull request. "Hi! Colin 👋!".

Study Hexagonal Architecture

Hexagonal architecture (application service flavor)
I cloned the jhipster-lite project and run it in debug mode to learn more about the code base which I am going to change.
Then I realized that a better approach is to run the implemented tests in debug mode. The test works as a documentation of the functionalities.

Affinity and joy in implementing Tests

I believe that implementing tests is the way to build great software. The jhipster-lite project is configured to accept only 100% test coverage code. So any change made in this project needs to be tested!

The test code should be as good as the production code, that's not a trivial task. In my opinion, the jhlite project has a high-quality code base and I had to do my best to implement a feature with the best code I could make.

Know in advance some technologies

Maven
Java
- Jacoco
- Cucumber
- JUnit
Spring Boot
VS Code
Prettier
Sonar
Git (especially rebase commands)
GitHub (Actions (CI), Fork, Issues, and Create Pull Request)

My workflow

I will share my workflow which I used to fix, improve, and refactor the code each time my pull request was reviewed.

Before pushing my changes to be reviewed

Here is the script I used to keep my branch up to date with the latest version of the jhipster-lite main branch.

git switch main
git fetch upstream
git rebase upstream/main
git push
git switch <my-branch-name>
git rebase origin/main
npm run prettier:format

Then I run the sonar after I finished coding.

docker compose -f src/main/docker/sonar.yml up -d
./mvnw clean verify sonar:sonar

So you can check the result at http://localhost:9001 to see if you match the 100% code coverage or if you need to fix any code smells.

Keep the pull request reviewer informed

Every time I pushed some changes I let the reviewer know and I always answers each code review he made.

I preferred to push the changes even though I didn't fully understand what the review wants because in my experience is easier to talk about an implemented code than a hypothetical one.

There is a Contributor Covenant Code of Conduct

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.

In my own experience as a contributor, I can say that everyone who I interacted with was kind and genuinely wants the best for the project. I felt that they appreciate my effort to fix an issue and they were cheering me up!

Claim the bounty

After my pull request got merged, I was eligible to claim the bounty.

First, I create an invoice at open collective: $300 bug bounty claim for https://github.com/jhipster/jhipster-lite/pull/4814.

Then I published the invoice link at my pull request: https://github.com/jhipster/jhipster-lite/pull/4814#issuecomment-1374433366.

After some time, the invoice was processed and I got paid 👏😃☺️!

The official documentation explains each step to claim your bounty: How to get the money.

What was the outcome of this experience?

I am a Windows user, but I am migrating to use Linux (Ubuntu) through wsl 2 because It is faster. On windows took me 5 minutes and 20 seconds to run the command ./mvnw clean verify sonar:sonar. On Linux, the same command took me 2 minutes and 30 seconds. I found this great YouTube video How To Run Linux Code on Windows with WSL 2 & VS Code which taught me how to use Linux for coding inside Windows. In addition, my developer experience was lighter and smoothly with VS Code running under Linux.

I enjoyed working on the jhlite project without being pressured and asynchronously! I could code when I have the time on my own passe 👏!

I realized that I am not an expert in the TDD field, I have so much to learn. Here is an interesting article that opens my eyes The Real Reasons for Doing Test-Driven Development. Thanks to Colin Damon for letting me know that I was doing Test First and not TDD and for introducing the concept of Software Craftsmanship.

Thanks to Pascal Grimaud for being around and following along on the issue.

What next

I am planning to continue to contribute to the jhlite project by fixing issues and keep writing blog posts about my experience with jhipster.

One day, I wish to be part of the jhipster core team 😊!

Learn to debug the JHipster generator, increase your chances to fix bounty issues

Renan Franca — Mon, 30 Jan 2023 10:22:47 +0000

Originally published at renanfranca.github.io

Motivation

You can earn money by fixing issues with bounty labels!

Matt Raible

@mraible

Want to make some money doing open source @Java development? There's over $2500 USD available for fixing issues in the @JHipster + @QuarkusIO blueprint!

💰 github.com/jhipster/gener…

See our bug bounty program for more info: jhipster.tech/bug-bounties/

#java #jhipster #opensource

12:08 PM - 21 Sep 2021

Take a look at the available bounty issues.

Hands on

Here I will show you how to debug the jhipster import-jdl command with an inline entity example. I am using VSCode with Windows 10.

jhipster import-jdl --inline 'entity RenanClass(RenanTable) { testString String }'

First clone the generator-jhipster into a folder, and follow the instructions below:

Set NPM to use the cloned project
Then open the generator-jhipster root folder and your VSCode will look like that:

VSCode with generator-jhipster folder
Click at the bottom to change the Auto Attach to Smart.
Click on Debug icon (left) :

VSCode Debug View
You will see at the top left some debug options. There are many options pre-configured for different commands. Choose the jhipster import-jdl and click on the setting icon:

VSCode JHipster Debug Options

Make a copy of jhipster import-dl configuration and change it to be like that:

{  
        "type": "node",  
        "request": "launch",  
        "name": "CUSTOM jhipster import-jdl",  
        "program": "${workspaceFolder}/cli/jhipster.js",  
        "args": [  
            "import-jdl",  
            "--inline",  
            "entity RenanClass(RenanTable) { testString String }",  
            "-d"  
        ],  
        "cwd": "${workspaceFolder}/test-integration/samples/app-sample-dev/",  
        "console": "integratedTerminal"  
    }

VSCode launch.json

Choose the new debug option CUSTOM jhipster import-jdl and hit the play button:

VSCode run Debug
My suggestion for your first breakpoint. Open the file cli\jhipster.js and put the breakpoint at line 50:

if (preferLocal) {
If everything works and you got the execution stopped at the first breakpoint, I will recommend another one. Open file cli\jdl.js and put the breakpoint at line 48:

logger.debug(jdlFiles: ${toString(jdlFiles)});

You could get this failure message

PS C:\Users\Renan\Documents\JHipster\TUTORIALS\how_debug_with_vscode\generator-jhipster\test-integration\samples\app-sample-dev>  ${env:NODE_OPTIONS}='--require "c:/Users/Renan/AppData/Local/Programs/Microsoft VS Code Insiders/resources/app/extensions/ms-vscode.js-debug/src/bootloader.bundle.js" --inspect-publish-uid=http'; ${env:VSCODE_INSPECTOR_OPTIONS}='{"inspectorIpc":"\\\\.\\pipe\\node-cdp.10508-2.sock","deferredMode":false,"waitForDebugger":"","execPath":"C:\\Program Files\\nodejs\\node.exe","onlyEntrypoint":false,"autoAttachMode":"always","fileCallback":"C:\\Users\\Renan\\AppData\\Local\\Temp\\node-debug-callback-f76952482a888dfe"}'; & 'C:\Program Files\nodejs\node.exe' '.\..\..\..\cli\jhipster.js' 'import-jdl' '--inline' 'entity RenanClass(RenanTable) { testString String }' '-d'  
Debugger attached.  
Waiting for the debugger to disconnect...  
internal/modules/cjs/loader.js:905  
  throw err;  
  ^Error: Cannot find module 'semver'

To solve this misconfiguration go to generator-jhipster root folder and confirm that you executed the following command:

npm link

Then go to the test-integration\samples\app-sample-dev folder (if you hit the play button again, you are already there). After that, execute this command:

npm link generator-jhipster

Then run this command:

jhipster --skip-jhipster-dependencies

Now, hit the debug button and it will work smoothly =) !

That is all. Thank you for your attention

All steps I mentioned above are described at the CONTRIBUTING.md. I’ve never work with node.js, yeoman, and ejs before. Because that, I had to read the instructions over and over again until I figured out how to make it works.

In my opinion, the CONTRIBUTING.md do the job, but we have to study to understand it.

Thank you JHipster!

Deploy jhipster monolithic (angular + spring boot) at fly.io for FREE

Renan Franca — Tue, 25 Oct 2022 08:51:01 +0000

Originally published at renanfranca.github.io

I built a Baby Care web app using microservices architecture to challenge me in my roadmap to master jhipster. Unfortunately turns out that I couldn't afford the cost of Publishing Microservices into Google Kubernetes Engine (GKE) and I decided to self-host the Baby Care App in my notebook and keep accessing it through my phone.

My baby girl Marília complete 9 months old so we are going out with her and I couldn't access the Baby Care App outside of my home. I decided to rewrite the Baby Care App as a monolithic architecture using jhipster to deploy it on Heroku for free. When I finally rebuilt the app, I realized that Heroku is going to shut down the free tier plan!

I will share with you my experience to publish an angular + spring boot + postgres database solution into fly.io for FREE. I opened source the Baby Care App as monolithic to let you put your hands on the code as I explain the step-by-step:

Create postgres into flyio

Free tier plan

According to this flyio community post, the free tier is a postgres with 1GB volume attached running in the free tier machine (shared-cpu-1x 256mb VMs).

Install flyctl

I am using Windows 10, so I had to run the following command at Powershell iwr https://fly.io/install.ps1 -useb | iex . Visit this link to install it on another OS.

Signup

Run the command flyctl auth signup to create your account. I put my credit card to earn more free resources, according to the documentation it's necessary to use postgres for free.

Login

Run the command flyctl auth login

Create a postgres app

Run the command flyctl postgres create and I choose the following options:

? Choose an app name (leave blank to generate one): baby-postgres
automatically selected personal organization: Renan Franca
? Select regions: São Paulo (gru)
? Select configuration: Development - Single node, 1x shared CPU, 256MB RAM, 1GB disk

After the postgres app were created you will receive something like that as an output:

Postgres cluster baby-postgres created
Username: postgres
Password: randompassword
Hostname: baby-postgres.internal
Proxy Port: 5432
Postgres Port: 5433
postgres://postgres:randompassword@baby-postgres.internal:5432

Write it down, because you won't have another chance to access your postgres server information.
Run the following command flyctl volumes list -a baby-postgres to confirm that a persistent free volume was automatically created for your postgres app.

Create the baby database

You will have to connect to the fly.io postgres server that you created to define the databasename. Use this command to port forward and connect with pdadmin locally flyctl proxy 5432 -a <postgres-app-name>.
Use 127.0.0.1 instead of localhost when defining the host of your connection at pgadmin, because if you use localhost you will get the following error could not receive data from server: Socket is not connected (https://serverfault.com/a/1003780/244961). In my case, I created the database called baby that will be used by my spring boot application.

Create angular + spring boot server

Free tier plan

According to this flyio pricing link, the free tier include:

Up to 3 shared-cpu-1x 256mb VMs
160GB outbound data transfer

Create the dockerfile to the baby care app

Let's create the Dockerfile at the root of your project folder to run my jhipster angular+spring boot application. I got out of memory error when I tried to deploy using a regular OpenJDK image. I learned that works if you use an optimized ibm jre (https://community.fly.io/t/deployment-of-java-spring-api-using-dockerfile/6708/5) :

FROM ibm-semeru-runtimes:open-11-jre-focal
MAINTAINER https://renanfranca.github.io/about.html
COPY target/baby-0.0.1-SNAPSHOT.jar baby-0.0.1-SNAPSHOT.jar
ENV _JAVA_OPTIONS="-XX:MaxRAM=70m"
CMD java $_JAVA_OPTIONS -Dspring.profiles.active=$SPRING_PROFILES_ACTIVE -Dspring.datasource.url=$SPRING_DATASOURCE_URL -Dspring.liquibase.url=$SPRING_LIQUIBASE_URL -Dspring.datasource.username=$SPRING_DATASOURCE_USERNAME -Dspring.datasource.password=$SPRING_DATASOURCE_PASSWORD -jar baby-0.0.1-SNAPSHOT.jar

https://github.com/renanfranca/mamazinha-monolithic/blob/publish-to-flydotio/Dockerfile

To build the final jar and optimize the baby application for production, run:
./mvnw -Pprod clean verify

Then I have to create a docker image locally from Dockerfile using this command at the project root folder docker build -t stting/mamazinhaflyio .. Replace stting with your dockerhub account.

The last step is to open the docker desktop and push the created image to the docker hub.

Create flyio dockerfile

I created the flyio folder flyio in the root directory of my project. Inside that folder I created another dockerfile to push to flyio, doing this way you won't use the fly.io image builder, only pull from the docker hub (this makes the deployment much faster):

FROM stting/mamazinhaflyio:latest

https://github.com/renanfranca/mamazinha-monolithic/blob/publish-to-flydotio/flyio/Dockerfile

Create the flyio application

Let's go to the folder flyio and run the command flyctl launch and I choose the following options:

Creating app in C:\Users\Blog\Documents\Projects\mamazinha-monolithic\flyio
Scanning source code
Detected a Dockerfile app
? App Name (leave blank to use an auto-generated name): mamazinha-app
? App Name (leave blank to use an auto-generated name): mamazinha-app
Automatically selected personal organization: Renan Franca
? Select region: gru (São Paulo)
Created app mamazinha-app in organization personal
Wrote config file fly.toml

After running that command you will have an already configured fly.toml file with your application info and everything you need to deploy it 🤩.

Define the environment variables

You have to open the fly.toml file and edit the [env] section with the variables (replace the values with your recently created postgres app):

  _JAVA_OPTIONS="-XX:MaxRAM=70m"
  SPRING_PROFILES_ACTIVE="prod,api-docs"
  MANAGEMENT_METRICS_EXPORT_PROMETHEUS_ENABLED="false"
  SPRING_DATASOURCE_USERNAME="postgres"
  SPRING_DATASOURCE_URL="jdbc:postgresql://app-postgres-name.internal:5432/databasename"
  SPRING_LIQUIBASE_URL="jdbc:postgresql://app-postgres-name.internal:5432/databasename"
  JHIPSTER_SLEEP=5

https://github.com/renanfranca/mamazinha-monolithic/blob/publish-to-flydotio/flyio/fly.toml

WARNING: about the postgres database URL for java. The postgres start guide examples didn't consider java language and the URL to connect to postgres which they gave to me after creating the postgres instance was that: postgres://baby-postgres.internal:5432/baby. To solve the problem I change the prefix postgres to postgresql: jdbc:postgresql://baby-postgres.internal:5432/baby

Define the database password

You can use the secret option to keep your database password safe! Run the command:

flyctl secrets set DB_POSTGRES_PASSWORD=pasteHereThePassword

That will create an encrypted environment variable. To list your secrets, run the command flyctl secrets list.

Deploy the application

Run the command flyctl deploy . To open your already deployed application in a browser, run the command flyctl open.

Read this jhipster user

Before deploying the app, you can test it using the docker desktop.

First, edit the file src/main/docker/app.yml to use the docker image stting/mamazinhaflyio (in my case):

# This configuration is intended for development purpose, it's **your** responsibility to harden it for production 
 version: '3.8' 
 services: 
   baby-app: 
     image: stting/mamazinhaflyio 
     environment: 
       - _JAVA_OPTIONS=-Xmx128m -Xms128m 
       - SPRING_PROFILES_ACTIVE=prod,api-docs 
       - MANAGEMENT_METRICS_EXPORT_PROMETHEUS_ENABLED=false 
       - SPRING_DATASOURCE_URL=jdbc:postgresql://baby-postgresql:5432/baby 
       - SPRING_LIQUIBASE_URL=jdbc:postgresql://baby-postgresql:5432/baby 
       - JHIPSTER_SLEEP=30 # gives time for other services to boot before the application 
       - SPRING_DATASOURCE_USERNAME=baby 
       - SPRING_DATASOURCE_PASSWORD= 
     # If you want to expose these ports outside your dev PC, 
     # remove the "127.0.0.1:" prefix 
     ports: 
       - 127.0.0.1:8080:8080 
     deploy: 
       resources: 
         limits: 
           memory: 256M 
   baby-postgresql: 
     image: postgres:14.2 
     # volumes: 
     #   - ~/volumes/jhipster/baby/postgresql/:/var/lib/postgresql/data/ 
     environment: 
       - POSTGRES_USER=baby 
       - POSTGRES_PASSWORD= 
       - POSTGRES_HOST_AUTH_METHOD=trust 
     # If you want to expose these ports outside your dev PC, 
     # remove the "127.0.0.1:" prefix 
     ports: 
       - 5432:5432

https://github.com/renanfranca/mamazinha-monolithic/blob/publish-to-flydotio/src/main/docker/app.yml

Then run the command docker-compose -f src/main/docker/app.yml up -d and access your application at http://localhost:8080 which is using postgres database.

My own experience with fly.io

I am running my Baby Care App on fly.io since 03 September 2022, here is the link: Mamazinha Baby Care App.

I accessed the app every day at least 10 times a day, I only got 5 downtimes the first week. After that, my wife and I didn't notice any downtime 😊! It looks like the app was always warmed up and ready to receive requests.

On the dashboard web app, you can see a lot of information about your app: https://fly.io/dashboard. My application constantly uses 226 MB from the 232 MB available. In addition, you can access the Grafana dashboard https://fly-metrics.net/ for awesome insight info 👏!

🌟Feedback

If you like this project, please, considering give it a star 🌟 to support me and enhanced the repository's visibility 🤩!

•⭐mamazinha-monolithic

💙 Special Thanks

I just wanna say thanks to the fly.io team for adding this free high-quality free tier option! It has the bearing minimum for your MVP version and to use it to host your portfolio projects!

Thank you @pascalgrimaud for being available to chat and help me out when I've got stuck! It's important to read another point of view when I can't move on.

Last but not least, thank you JHipster Community!

JHipster does not use lombok. Why?

Renan Franca — Fri, 26 Aug 2022 06:22:00 +0000

Originally published at renanfranca.github.io

After I run the JHipster generator for the first time I realized that the back end implemented with spring boot doesn't use Lombok. So I decided to customize the generated code to use lombok than I realized it wasn't the best way to use JHipster.

Customize JHipster

When I realized how awesome JHipster was I thought that I should change the generated code to be like the one I used to type manually. So I saw the opportunity to create my own blueprint with the following custom annotations:

Add Lombok - @lombok
Hide comment - @noCodeComment
Change the database scheme - @schema
Add Id GeneratedValue to entity - @generatedValue(identity)
Define column database name - @column(ds_field)
Use unsupported types - @newFieldTypeImport(import_class_package_type) and @newFieldType(type)

I opened source my blueprint which customize the server side code:

generator-jhipster-custom-server-side-blueprint-private
Here is the class which implement those custom annotations options: https://github.com/renanfranca/generator-jhipster-custom-server-side-blueprint-private/blob/custom-annotations-options/generators/entity/index.js

Here is a jdl file example which uses my blueprint:

@lombok  
@schema(MyProject)  
@noCodeComment 
entity RenanClasse (RenanOk) {  
@generatedValue(identity)  
id Long  
@column(ds_name)  
name String
@newFieldTypeImport(java_time_LocalDateTime)  
@newFieldType(LocalDateTime)  
birthday ZonedDateTime
}  

// Use Data Transfer Objects (DTO)  
dto * with mapstruct  

// Service layer  
service all with serviceClass

JHipster choose not use Lombok

I found an issue at jhipster generated project that list the the reasons to not use lombok. I will quote some of them:

On one project, a new version of the Lombok plugin caused the IDE to crash (I think this was Intellij). So nobody could work anymore.
On another project, Lombok made the CI server crash (and would have probably caused the production server to crash), as it triggered a bug in the JVM
On a third project, we achieved 30% performance increase by recoding the equals/hashcode from Lombok
Then, for JHipster, the story is also that we can't ask people to install a plugin on their IDE:
- 1st goal is to have a smooth experience: you generate the app and it works in your IDE, by default
- 2nd goal is that you can use whatever IDE you want. And some people have very exotic things, for example I just tried https://codenvy.com/ -> no plugin for this one, of course

Entity implementation

In the following example you can see that JHipster implements manually sets and gets. Beyond that you can see it's implement what is called fluent method as I learn it from the JHipster generator source code and from this issue which discuss fluent setters implementation at jhipster.

@Entity
@Table(name = "nap")
@Cache(usage = CacheConcurrencyStrategy.READ_WRITE)
public class Nap implements Serializable {

    private static final long serialVersionUID = 1L;

    @Id
    @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "sequenceGenerator")
    @SequenceGenerator(name = "sequenceGenerator")
    @Column(name = "id")
    private Long id;

    @Column(name = "start")
    private ZonedDateTime start;

    @Column(name = "jhi_end")
    private ZonedDateTime end;

    @Enumerated(EnumType.STRING)
    @Column(name = "place")
    private Place place;

    @ManyToOne
    private BabyProfile babyProfile;

    @ManyToOne
    private Humor humor;

    // jhipster-needle-entity-add-field - JHipster will add fields here

    public Long getId() {
        return this.id;
    }

    public Nap id(Long id) {
        this.setId(id);
        return this;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public ZonedDateTime getStart() {
        return this.start;
    }

    public Nap start(ZonedDateTime start) {
        this.setStart(start);
        return this;
    }

    public void setStart(ZonedDateTime start) {
        this.start = start;
    }

    public ZonedDateTime getEnd() {
        return this.end;
    }

    public Nap end(ZonedDateTime end) {
        this.setEnd(end);
        return this;
    }

    public void setEnd(ZonedDateTime end) {
        this.end = end;
    }

    public Place getPlace() {
        return this.place;
    }

    public Nap place(Place place) {
        this.setPlace(place);
        return this;
    }

    public void setPlace(Place place) {
        this.place = place;
    }

    public BabyProfile getBabyProfile() {
        return this.babyProfile;
    }

    public void setBabyProfile(BabyProfile babyProfile) {
        this.babyProfile = babyProfile;
    }

    public Nap babyProfile(BabyProfile babyProfile) {
        this.setBabyProfile(babyProfile);
        return this;
    }

    public Humor getHumor() {
        return this.humor;
    }

    public void setHumor(Humor humor) {
        this.humor = humor;
    }

    public Nap humor(Humor humor) {
        this.setHumor(humor);
        return this;
    }

    // jhipster-needle-entity-add-getters-setters - JHipster will add getters and setters here

    @Override
    public boolean equals(Object o) {
        if (this == o) {
            return true;
        }
        if (!(o instanceof Nap)) {
            return false;
        }
        return id != null && id.equals(((Nap) o).id);
    }

    @Override
    public int hashCode() {
        // see https://vladmihalcea.com/how-to-implement-equals-and-hashcode-using-the-jpa-entity-identifier/
        return getClass().hashCode();
    }

    // prettier-ignore
    @Override
    public String toString() {
        return "Nap{" +
            "id=" + getId() +
            ", start='" + getStart() + "'" +
            ", end='" + getEnd() + "'" +
            ", place='" + getPlace() + "'" +
            "}";
    }
}

source: Nap.java

So you can create this object like when you use the builder pattern but it's not immutable.

Nap nap = new Nap().id(1l).start(ZonedDateTime.now()).end(ZonedDateTime.now().plusHours(1));

I enjoyed this implementation and that's enough for me to keep my code less verbose.

This is the way

I gave up to customize JHipster generated code.
I realized that I should accept the jhipster generated code pattern because If I try to customize everything I am creating my own JHipster and I am going to lose the productivity which JHipster could bring to my workflow.
It isn't a trivial job to maintain a blueprint up to date with the latest jhipster generator version. So I advise you to only create a blueprint if it is extremely necessary.

Publishing Microservices into Google Kubernetes Engine (GKE)

Renan Franca — Mon, 11 Jul 2022 10:34:56 +0000

Originally published at renanfranca.github.io

I will show you how to publish the Mamazinha Baby Care Web App - Open Source Project on Google Kubernetes Engine (GKE)

Before we start

I used JHipster to build the web app, everything you need to know about how to generate the Kubernetes (k8s) yml files to publish on GKE is detailed step by step in this tutorial (I strongly recommend watching the video first before getting your hand dirty 😁) created by @mraible

Publishing on GKE

I open source the yaml files that i used to publish on GKE:

I’ll cover here the Google Cloud configuration that I made to run my project as cheap as possible. My goal is to keep the cost below or near the Always Free tiers:

The GKE free tier provides $74.40 in monthly credits per billing account that are applied to zonal and Autopilot clusters. If you only use a single Zonal or Autopilot cluster, this credit will at least cover the complete cost of that cluster each month. Unused free tier credits are not rolled over, and cannot be applied to any other SKUs (for example, they cannot be applied to compute charges, or the cluster fee for Regional clusters).

Initial setup

So I made this pricing simulation (I choose São Paulo as my Region because I am from Brazil):

https://cloud.google.com/products/calculator/#id=d2a4523b-27f9-4a35-950b-924cd8b0d590

After logging in at Google Cloud Console, Let’s create the Cluster Zone and the first Node Pool

Open GKE Standar Option

Choose those options. Only edit the cluster name and the cluster zone (choose the nearest zone from your location or your client location)

You will end up with something like this

Now you have to connect to your cluster. Install google cloud SDK and install Google kubectl (I'm using windows)
gcloud components install kubectl

On git bash:

confirm that the installation was successful wich kubectl and the response should be something like

/c/Users/AccountName/AppData/Local/Google/Cloud SDK/google-cloud-sdk/bin/kubectl

execute the following command to connect to your cluster, change mamazinha to your cluster name and change southamerica-east1-a to your zone gcloud container clusters get-credentials mamazinha -zone=southamerica-east1-a

You can now publish the yml files to GKE:

clone the repository git clone git@github.com:renanfranca/mamazinha-k8s.git
Switch to google-cloud branch git checkout google-cloud
On git bash go to the root of the cloned project folder and run the command ./kubectl-apply.sh -f

Install the amazing k9s https://k9scli.io/topics/install/ and type the command to connect to your cluster k9s -n mamazinha

k9s home screen

As you can see only 3 nodes weren't enough for my project, after digging around I discovered the preemptible VM option 😆! The registry/baby microservice both are stateless, so I don't care if after 24h the VM will be destroyed and they will be initialized at another VM.

Let’s create a new node pool with a preemptible VM which costs less than the regular machine type.

Go to Cluster Kubernetes Engine > Clusters > Clique on your cluster > clique on ADD NODE POOL

Only one node number

You must mark the node as preemptible! Then click on CREATE! 🤩

Now we can see 4 nodes and only one preemptible

That’s what happened after 24h! Shutdown the preemptible VM 😜

The cluster is ready! But how to choose the place to deploy each component of my project? The Postgres database can’t be deployed at the preemptible node, because the data will be lost every 24hrs!

The answer is NodeAffinity, let’s take the gateway as an example. I want to always deploy the gateway on the node gke-mamazinha-pool-small-cost-03fa0890-zqn0

Create a label for the node kubectl label nodes gke-mamazinha-pool-small-cost-03fa0890-zqn0 app=gateway
Add this nodeAffinity property to my yml file

gateway-deployment.yml

Change toreplicas: 0 and apply the deployment yml to terminate every gateway running instances kubectl apply -f gateway-k8s/gateway-deployment.yml -n mamazinha
Change back to replicas: 1 and apply again kubectl apply -f gateway-k8s/gateway-deployment.yml -n mamazinha
Repeat this for the other components if you want to deploy at a specific node.

Here is the real cost of this configuration. I am from Brazil, so the costs are in my country's currency. You can do the conversion by knowing that $1 Dollar was R$5,40 Reais when I capture the print screen from the following billing report.

Mamazinha Google Cloud Project billing report

Final setup

The preemptible VM cost 80% less than the regular machine, so my goal was to use only preemptible. The only way I figured it out to do this is to create persistent volume on my kubernetes cluster for each Postgres database because after 24h even the Postgres could be shut down without losing data.

First I port-forward the Postgres pods to backup the data using pgAdmin then I defined the persistence volume in the yml file:

gateway-postgresql.yml (partial)

The next step was to delete the regular machine-type node pool then I resize the preemptible node pool to have 4 nodes.

After that, I apply both yml files ( kubectl apply -f baby-k8s/baby-postgresql.yml -n mamazinha and kubectl apply -f gateway-k8s/gateway-postgresql.yml -n mamazinha) and restore the backup using pgAdmin that will be stored at the persistent volume.

With this approach, my web app is going to have downtime every 24hrs. To mitigate that I decided to deploy everything simultaneously so after 24h everything will be shut down and going up in 2 minutes.

All pods running on preemptible nodes at the same time

The final cost

According to Google Pricing, the cluster manager fee will be free.

After using only preemptible nodes the cost was reduced a lot.

Mamazinha billing report after using only preemptible nodes

The invoice from January 2022 was R$844,09 (~$162.14), I don’t think it is too expensive. But I can’t afford this value by myself.

The cost from January 2022

So I couldn't keep the web app online on Google Cloud.

The cost until I shut down the web app

How was my experience with Google Cloud?

Google cloud platform is easy to use and I set things up quickly. I could learn while I was using it, I could undo, destroyed and build easily 😆

I think Google Cloud should have a real free plan for small microservices applications, so the user will pay when the product gain traction and started to be used ☺

Now it's your turn! How was your experience with Google Cloud?

I will enjoy to read your comments 🤗

If you have any question feel free to ask me anything here or Direct Message (DM) me on Twitter @renan_afranca (follow me and I will follow you back to unlock the DM option).