Some background

This is the first part in my series "My approach to side by side in Jhipster with Vue and custom UI Layouts", second part soon!

Why JHipster?

I love JHipster, I have been using it for some toy projects. It has been useful to learn some front end technologies, since I am a back-end developer and I wanted to update my knowledge of the trending Javascript libraries and frameworks for front end.

This article departs from a simple monolith application generated with JHipster 6.2, if you do not know how to install or generate a simple JHipster app, I really recommend to visit their docs for installation or how to generate a simple app.

Why vue?

The React attempt

I stared with React, integrating the Inspinia layout, and loved the easiness of the learning curve to create new components and make them interactive (I even made my first, really simple contribution), however there was some things that were a little harder to understand, like the reducers (I know, maybe some tutorials of the basics could help, but I really wanted to learn doing). Maybe it was my lack of practice with Javascript (I mainly program C# and Java since some time a go).

The Angular attempt

Then I watched Antonio Goncalves and his talk about JHipster side by side, and it was just what I need, I was hitting many of the same problems that he had, so I changed both layout and framework and tried with Angular and AppWorks.

I realized that I was really comfortable with Angular, dependency injection, classes, it was like Net Core or Spring, it was all beautiful (or the most that can be, I am not so good in front end and distribution, user experience and that stuff).

I really wanted to write a post about my experience, but I had so much work (and this was my hobby project), then I watched a video of David Steiman, talking more in detail about side by side and was happily surprised because many of the tips or way to do things seemed really similar to the way I was doing stuff, so if you are trying side by side with JHipster and Angular, I really recommend to watch both videos.

The Vue attempt

While I am really happy with angular, I had a problem, there was one major player missing for the front end, and the blueprint was ready, so, why do not give a try?

I was hesitating, but:

• The front end developers in my work are working with Vue, so I can get some extra help with doubts and questions.
• I keep seeing many good comments about Vue, comming from a lot of people that I follow.
• I know you should not choose a framework based only on some milliseconds of advantage in some benchmarks, but hey, at least it can compete with Angular and React.
• Being a programmer for so long, I am really worried about one thing: Developer experience, and, again, many people are saying that Vue is a little more productive and easy to develop, so, why not try and see if fits me?

Why to use other layout?

If you need a simple application, you can just leave the layout as is and add new features with side by side, however, like I said before, I am not so expert in user interfaces, and, while I can see something and think "Oh, this looks ugly", I do not have the esthetic abilities to make it nice and beautiful.

When you start to add UI plugins you need to make sure they look uniform, bootstrap can help, but there are always some details, so, since this is only a personal project with just me, and I love back-end, but I can have some problems designing, Why not pay to an specialist?

Other reason is to try to differentiate from the rest, while the JHipster layout is nice and clean, there is always that "boostrap" feeling (no that is something bad, I must accept this project could me take less time if I stop playing with the base layout).

I have to admit, now that it comes with integration for bootswatch, maybe this will be even less necessary, but, hey, I really wanted my left menu :P.

Starting the work

My first rule is to modify the minimum in the JHipster archives, this can lead to some duplicate code, but in my experience is a lot easier to maintain, specially when new versions with major changes comes out. This is even more true in my case, using an external layout basically means a review to all the front end (I think, still easier than make everything from scratch).

The second rule is to adapt the layout to JHipster, not the other way. The first time it was more a mixture between both and it failed, it was really hard to maintain. So now I try keeping the JHipster structure whenever I can, it is where generally most good practices are, the updates are more frequent and in general is always more elaborate than the demo dashboards of the commercial layouts.

So, the first step is to create a simple JHipster app using the Vue blueprint, I like to use postgresql for both development and production (same environment, same behavior), but you can create it however you like.

Then run the app so you can confirm everything is working fine.

To run this project I am using Intellij with 3 run configurations:

• The default spring boot configuration to run the back end.
• A NPM configuration to run the front end.
• A docker config to start the postgresql server and other services, like elasticsearch.

On the other hand, we have the app work demo application:

My starting point is the index.html file

As you can see, the JHipster page is more complex and handles more cases than our demo page, the appwork demo page mainly loads some styles. Here the changes are simple, I just merge the styles from the layout.

As you can see, not much happened here, I just changed

<%= BASE_URL %>

Because in the layout the static resources are in base, but in JHipster the resources are in the content folder, so I just paste the folder in a new folder called bjt (my private package), so I can mark where my resources are, and where the JHipster resources stay.

The next important point where modifications are needed is in the App.vue file, it is the one where the app is loaded.

Here you can note more differences, the JHipster app has the layout declared, while the Appworks app only loads a simple component, so we need to investigate more.

Appworks contains several layouts to work with, to keep things simple we will just work with one layout, the default one, peeking in the router we can see is the one that the demo is displaying.

So, the real comparison needs to be between JHipster app.vue and the Appwork Layout1.vue files, luckily the structure is way more similar now:

Now we have a place where we can start replacing the JHipster components with ours!

Before continuing, I create a new folder in app called bjt, again, this is the point where my code begins, o at least most of it.

Then, I need to change the point where app.vue is loaded, so I can load mine, a quick search for the filename reveals our precious place in main.ts:

So, to start practicing, I modify my bjt/App.vue to be exactly as the one from JHipster, and I copy the app.component file to my folder (Appwork includes the Javascript in the same file as the view, but I like JHipster order more), then I make a little modification so I can see if the layout changes accordingly.

So, now the real test, I just run the project, the layout should come out normal.

But, if we modify the import in main.ts:

Then we can see our custom App.vue!

Now we can start to modify code more aggressively, not worrying about breaking the JHipster for when the app updates, you can even turn back to the JHipster layout by simply changing the imports in main.ts.

In the second part I will start to integrate the components from Appwork to my JHipster app, I Hope you like it!.