JHipster vs Vaadin vs Spring Boot - Choosing your framework

 

---

Java frameworks provide pre-written code and tools that simplify the development of Java applications. They handle common tasks like database interaction, web request handling, and user interface creation, allowing developers to focus on the unique logic of their applications. Frameworks promote code reusability, consistency, and best practices, ultimately speeding up development and improving application quality. They range from lightweight libraries to full-fledged platforms that dictate the structure of your application.

---

Which ones are suitable for you?

Okay, let’s start with a brief overview of the frameworks.

1. Spring Boot

Spring Boot is not strictly a full-stack framework in the same way as the others. It’s more accurately described as a microframework or a toolkit built on top of the larger Spring Framework. Its primary goal is to drastically simplify the setup and configuration of Spring applications. Think of Spring Boot as the express lane for Spring development.

Key Features:

• Auto-configuration: Spring Boot automatically configures many beans (objects managed by Spring) based on dependencies in your project. This reduces the amount of manual configuration you have to do.
• Embedded Servers: Easily embed Tomcat, Jetty, or Undertow directly into your application, making deployment simpler.
• Spring Boot CLI: A command-line interface that further simplifies development tasks.
• Spring Initializr: A web-based tool for quickly bootstrapping new Spring Boot projects.
• Use Cases: Spring Boot is ideal for building REST APIs, microservices, and any backend component where you need the power and flexibility of the Spring ecosystem.

2. JHipster

JHipster takes Spring Boot and combines it with powerful code generation capabilities. It’s a full-stack application generator that helps you create modern web applications with Spring Boot on the backend and popular JavaScript frameworks (Angular, React, or Vue.js) on the front end.

Key Features:

• Full-stack code generation: Generates both backend and frontend code, including authentication, database integration, and basic CRUD (Create, Read, Update, Delete) operations.
• Microservices support: Can generate applications designed for a microservices architecture.
• Blueprint architecture: Allows for customization and extension of the generated code.
• Use Cases: JHipster is perfect for rapidly prototyping full-stack applications, especially when you want to use Spring Boot and a modern JavaScript framework. It’s less ideal for very small, simple projects where the overhead of JHipster might be too much.

3. Vaadin

Vaadin is a full-stack Java web framework focused on building rich and interactive web UIs. It offers two main approaches:

• Vaadin Flow: Allows you to build UIs entirely in Java, without writing HTML or JavaScript directly. Vaadin handles the rendering on the client-side.
• Hilla: A newer approach that combines a Spring Boot backend with a reactive TypeScript frontend.

Key Features:

• Component-based architecture: UI elements are represented as reusable Java components.
• Server-side rendering (Vaadin Flow): UI logic is executed on the server, which can simplify development for Java developers. Hilla uses client-side rendering.
• Rich set of UI components: Vaadin provides a wide range of pre-built UI components, from simple buttons to complex grids and charts.
• Use Cases: Vaadin is well-suited for building complex, data-driven web applications where a rich user interface is essential. It’s a good choice for Java developers who prefer a Java-centric approach to UI development.

---

Core Focus, Strength and Weaknesses

1. Spring Boot

• Core Focus: This is the foundation. Spring Boot simplifies building standalone, production-ready Spring applications. It handles a lot of the boilerplate configuration, making it easier to get a Spring project up and running quickly. Think of it as the engine of your application.

Strengths:

• Speed: Rapid development with auto-configuration and embedded servers.
• Flexibility: Works well with various databases, cloud platforms, and other technologies.
• Mature and Widely Used: Huge community support, extensive documentation, and a vast ecosystem of libraries.

Weaknesses:

• Not a Full-Stack Solution: You’ll need to choose and integrate your own frontend technologies (like React, Angular, or Vue.js).
• Learning Curve: While Spring Boot simplifies things, understanding the underlying Spring framework can still take time.

2. JHipster

• Core Focus: A code generator that helps you quickly create full-stack web applications with Spring Boot on the backend and popular JavaScript frameworks (Angular, React, Vue.js) on the frontend.

Strengths:

• Rapid Prototyping: Generates a complete application with authentication, database integration, and basic CRUD operations in minutes.
• Best Practices: Uses well-established technologies and patterns.
• Microservices Support: Can generate applications designed for a microservices architecture.

Weaknesses:

• Complexity: Can generate a lot of code, which might be overwhelming for smaller projects or developers new to the technologies.
• Less Control: You have less control over the initial setup compared to building everything from scratch.
• Maintenance: Upgrading generated applications can be challenging.

3. Vaadin

• Core Focus: A full-stack Java web framework that lets you build rich, interactive web UIs with Java. It offers two main approaches:
• Vaadin Flow: Build UIs entirely in Java, without writing HTML or JavaScript.
• Hilla: Combines a Spring Boot backend with a reactive TypeScript frontend.

Strengths:

• Productivity: Vaadin Flow’s Java-centric approach can be very efficient for Java developers.
• Type Safety: Strong type safety throughout the development process.
• Excellent UI Components: Provides a wide range of pre-built UI components.

Weaknesses:

• Steeper Learning Curve: Vaadin has its own way of doing things, so there’s a learning curve.
• Less Flexibility: Compared to Spring Boot, Vaadin is more opinionated about how you structure your application.
• Performance: Vaadin Flow’s server-side rendering can sometimes lead to performance issues in complex applications.

Read More

Reading entire URL content is really easy using R

In my good old days, reading the entire content of a website is not easy. The process of web scraping and getting the required data requires lots of programming and a few tools. A friend of mine even developed and sold the tool which he called it (during the development) as myrobot. He developed using PHP.

Now, it is much easier and one of the many ways is using R.

Here are the steps (which requires you to write ONLY two lines of code)

1. Connect to the website using URL command
   con <- url ([the website url], “r”)
2. Then, read the website
   x <- readLines(con)
3. Do whatever you wish with the data. In this example, I print out the head of the website and also copy the whole content to a file.
   head(x)
   dput(x, “readFromUrlExample.html”)

There you go.

The sample source code can be retrieved at 

https://github.com/masteramuk/LearnR-Coursera/blob/master/sample-ReadFromUrl.R

Read More

Improving your Telegram Security

---

Telegram’s user continues to increase and recently it reaches 400 million user per month

Since its birth, there are many features added plus friendly API allowing various innovative ideas add-in to its base. 

---

But, having lots of features may also result in lots of possibilities for hacking. One of the many features that may be wrongly used is the Automatic Media Download. 

As noob @ beginner, many do not realize it until their phone or PC slow due to disk space has shrunk as telegram keeps on automatically download all files. 

The most scarier is that the auto-play anything including GIF, video, and audio. All this can be used by hackers to insert a code and inject it upon executed/run by telegram.

However, luckily telegram allow us to modify the setting. Here are the steps to change it:

1. Go to your telegram setting and choose Advance

Telegram setting window

2. At the Advance screen, go to Automatic media download section

In the Advance setting

3. Click In private chats

In automatic media download setting

4. In the setting, click all the slide-tick to disable it (or you can choose whichever you want to enable or disable). You can even reduce the size to increase the protection rate.

5. Continue the process for all settings within the Automatic media download section.

---

That’s all.. you are ready to go and you shall be safe.

Read More

Ontology Model for C Overflow Vulnerabilities Attack

Prepared the slide and was hoping to present at a conference. Unfortunately, due to Covid-19, it can only be shared online here.

I would like to thank all in the slide for making it through especially Saiful who give it all to complete the paper and published it at IJATCSE.

You may access and view the slide at Slideshare

Ontology model for c overflow vulnerabilities attack from Nurul Haszeli Ahmad

#covid19 #overflow #softwaresecurity #overflowvulnerabilities #programanalysis #staticanalysis #informationsecurity #security #cybersecurity

Read More

List of available data set for Data Scientist

I am exploring on data related to 2019nCoV and found the following list of dataset that can be used for data scientist, data scientist to be, student, etc to explore. Check it out

1. https://data.world/
2. https://quantumstat.com/dataset/dataset.html
3. https://www.ncbi.nlm.nih.gov/labs/virus/vssi/#/virus?SeqType_s=Nucleotide&VirusLineage_ss=Wuhan%20seafood%20market%20pneumonia%20virus,%20taxid:2697049
4. https://www.ncbi.nlm.nih.gov/genbank/2019-ncov-seqs/?utm_campaign=wuhan_nCoV&utm_source=twitter&utm_medium=referral
5. https://www.ncbi.nlm.nih.gov/nuccore/MN908947,MN970003,MN970004,MN938384,MN938385,MN938386,MN938387,MN938388,MN938389,MN938390,MN975262,MN975263,MN975264,MN975265,MN975266,MN975267,MN975268,MN985325,MN988713,MN994467,MN994468,MN997409,MN988668,MN988669
6. https://researchguides.uic.edu/c.php?g=252253&p=1683071
7. https://archive.org/details/2019-search-engine-keyphrases.json

or you can just use google and search the entire internet through the engine
https://datasetsearch.research.google.com/

Read More

Disruptive UI/UX - The new interactive design of a website

The faces of a website have evolved drastically from normal static one page to multiple page interactive and so on. With Big Data and ML, comes chatbot and more interactive website which more customer engaging concept.

It no time, we will definitely view a website through the Augmented Reality concept. Just read the name on a billboard, and then you will get to see the whole company profile in AR mode. Well, while waiting for this to happen, let us take a look at few revolutionize user engaging designs of a website.

As shared by Bruno Simon at https://bruno-simon.com/

Whom also the master of behind many 'abnormal' website like Orano

and Prior Holding

Go ahead browse the website and you will feel different.

Read More

Codility - CyclicRotation (Rotate an array to the right by a given number of steps)

This is the second lesson in Codility; that is to rearrange an array to the right based on the number of steps given. It will be two input and I scored 100% for it.

public int[] solution (int[] A, int K){
        int a = 0;
        int[] sortA = A;
        int x = 0;
     
        while (x < K && x < A.length){
            a = sortA[sortA.length - 1];
         
            Arrays.copyOfRange(sortA, 0, sortA.length);
            sortA = Arrays.copyOf(sortA, sortA.length);
            System.arraycopy(sortA, 0, sortA, 1, sortA.length - 1);
            sortA[0] = a;
         
            System.err.println( x + " : " + Arrays.toString(sortA) + " - " + a);
         
            x++;
        }
        return sortA;
    };


  100% CyclicRotation

You can get the code at
Bitbucket - git clone https://masteramuk@bitbucket.org/fullstacksdev/codility-cyclicrotation.git
Github - git clone https://github.com/masteramuk/codility-lessoncode.git

Read More

Codility - Find longest sequence of zeros in binary representation of an integer.

I'm taking the coding test at Codility for a job offered by a Japanese company (of which I did not get it). For practice, I tried all and this are the code (in Java) for binary gap

public int solution (int N){
//Convert the value to binary and split the value between number 1
        String s2[] = Integer.toBinaryString(N).substring(0, Integer.toBinaryString(N).lastIndexOf('1') ).split("1");
        int x = 0;
        int a = 0;
        
//find and count the longest zeros
        while(x < s2.length){
            a = a > s2[x].length() ? a : s2[x].length();
            x++;
        }
        
        System.out.println("Number: " + N + System.lineSeparator() + "Binary: " + Integer.toBinaryString(N) 
                + System.lineSeparator() + "Zero: " + a);
        return a;
    };

It score 100% for codility test.

You can download the code here
Bitbucket - git clone https://masteramuk@bitbucket.org/fullstacksdev/codility-binarygap.git
Github - git clone https://github.com/masteramuk/codility-lessoncode.git

Read More

Ionic 4 + React + Capacitor: Publishing Your Apps

Since I don't have Apple Store Developer Account yet, I can only publish on Android, of which at Google Play Store. Head up if you are ready.

Before you start. Here is my development tools/environment.

1. VS Code 

Version: 1.41.0
Commit: 9579eda04fdb3a9bba2750f15193e5fafe16b959
Date: 2019-12-11T17:58:38.338Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Darwin x64 19.2.0


2. OSX Catalina with zsh (I am not using Bash)


3. Samsung A50 running Android

Steps to publish your first Apps on Google Play.

1. Check your installation
           Command to check your NPM version

       % npm -v

       6.13.4

           Command to check your ionic version

       % ionic -v

       5.4.13

2. Test your apps on Android devices by running the following command on your command prompt
    ionic serve --devapp

   > ionic integrations enable cordova

   [ERROR] Ionic doesn't support using Cordova with @ionic/react projects.

        

        We encourage you to try ⚡️ Capacitor ⚡️ (https://ion.link/capacitor)

If you come across the above error, no worries. This is because your app is Ionic + React and Cordova does not support this. You need to add capacitor to it. If you already configure it with capacitor before, you don't need to run the command.

Run the following command.
      % ionic integrations enable capacitor
Once completed, you will see the following
     🎉   Your Capacitor project is ready to go!  🎉

    Add platforms using "npx cap add":

    npx cap add android

    npx cap add ios

    npx cap add electron

    Follow the Developer Workflow guide to get building:

    https://capacitor.ionicframework.com/docs/basics/workflow

     

    [OK] Integration capacitor added!

Next, initialize your apps to use the capacitor by running command npx cap init [appname] [appid]. The appname and appid are available in file capacitor.config.json.

Once done, run ionic build command. You shall see similar to following

> react-scripts build

Creating an optimized production build...

Compiled successfully.

File sizes after gzip:

...

354 B     build/static/js/5.c9486a88.chunk.js

The project was built assuming it is hosted at the server root.

You can control this with the homepage field in your package.json.

For example, add this to build it for GitHub Pages:

  "homepage" : "http://myname.github.io/myapp",

The build folder is ready to be deployed.

You may serve it with a static server:

  npm install -g serve ##this command is to install static server

  serve -s build       ##this command is to run the static server

Find out more about deployment here:   

Give it a try by running the last two command shown above. I did and the following appeared. Give it a try and use any other computer to browse your apps.

   ┌───────────────────────────────────────────────────┐

   │                                                   │

   │   Serving!                                        │

   │                                                   │

   │   - Local:            http://localhost:5000       │

   │   - On Your Network:  http://192.168.1.123:5000   │

   │                                                   │

   │   Copied local address to clipboard!              │

   │                                                   │

   └───────────────────────────────────────────────────┘

Voila!! You are halfway go from releasing your apps. BUT damn, you get few more errors when you try running command npx cap add android
   [error] The web directory ([some folder of your apps]) must contain a "index.html".

    It will be the entry point for the web portion of the Capacitor app.

What is next? If you google it, you will only be directed to https://github.com/ionic-team/capacitor/issues/116 or few which won't resolve your problem. Just go to your project folder, find where index.html is located. For mines, it is located in the folder public.

So, change your capacitor.config.json to point the webDir to the folder that holds the index.html. In my case, it will look like below

"npmClient": "npm",

"webDir": "public",

Finally, run ionic build and followed by npx cap add android.
Once done, you will see the following message.

✔ Installing android dependencies in 18.77s

✔ Adding native android project in: /YourProjectPath/android in 77.66ms

✔ Syncing Gradle in 107.10s

✔ add in 125.95s

✔ Copying web assets from public to android/app/src/main/assets/public in 7.90ms

✔ Copying native bridge in 1.21ms

✔ Copying capacitor.config.json in 4.62ms

✔ copy in 24.10ms

✔ Updating Android plugins in 3.01ms

  Found 0 Capacitor plugins for android:

✔ update android in 14.69ms

Now you can run npx cap open android to launch Android Studio

So go ahead run the command npx cap open android 
The command will open your android studio, update your Gradle and build your apps. It shall tell you where your APK is released.

Once done, observed on Gradle Sync Issues. Any Red or Orange, please do resolve it first.
Test your apps by running it.

NOTE: If you still face a problem; for instance, you have blank screen, Follow the following steps:
Ionic 4 + React + Capacitor — The right way of building mobile apps with these three https://link.medium.com/uHL1APKDx2 or http://malaysiandeveloper.blogspot.com/2019/12/ionic-4-react-capacitor-right-way-of.html

3. Test your apps by running it on emulater.
4. Before you publish your apps, create your splash screen. You can follow the steps shown here. I do it manually; that is by changing all icons in all folders located at android/app/source/main/res using Adobe Photoshop. Then I added the following in my capacitor.config.json file

"plugins": {

"SplashScreen": {

"launchShowDuration": 3000,

"launchAutoHide": true,

"backgroundColor": "#000000",

"androidSplashResourceName": "splash",

"androidScaleType": "CENTER_CROP",

"androidSpinnerStyle": "large",

"iosSpinnerStyle": "small",

"spinnerColor": "#ff9900",

"showSpinner": true

}

}

That shall do it.

5.  If you change the config and add new files, just recompile your code (start at step 2 again) and rebuild your APK.

6. Finally, you are ready to publish. If you are using Ionic 4 + React + Capacitor, skip step 7 to 10.

7. Create your key (if you have yet to do so). Follow the following step

(base) % keytool -genkey -v -keystore [yourkey.keystore] -alias [aliasname] -keyalg RSA -keysize 2048 -validity 999999

Enter keystore password:  

Re-enter new password: 

What is your first and last name?

  [Unknown]:  [Your Name]

What is the name of your organizational unit?

  [Unknown]:  [Your Company]

What is the name of your organization?

  [Unknown]:  [Your Company]

What is the name of your City or Locality?

  [Unknown]:  [Your current Local]

What is the name of your State or Province?

  [Unknown]:  [Your State]

What is the two-letter country code for this unit?

  [Unknown]:  MY

Is CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY correct?

  [no]:  Yes

Generating 2,048 bit RSA key pair and self-signed certificate (SHA256withRSA) with a validity of 999,999 days

for: CN=My Name, OU=MyName, O=MyName, L="Local", ST=State, C=MY

[Storing my-release-key.keystore]

8. Signed your Unsigned APK (or your successful compiled/debug APK). Normally, your APK is located at android/app/..../debug/
- Run the command

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore /android/app/build/outputs/apk/debug/app-debug.apk [your-alias-name-given-during-key-generation]

Enter Passphrase for keystore: 

 updating: META-INF/MANIFEST.MF

....

Warning: 

The signer's certificate is self-signed.

No -tsa or -tsacert is provided and this jar is not timestamped. Without a timestamp, users may not be able to validate this jar after the signer certificate's expiration date (4757-11-17).

(base) % 

Note: Don't worry about the warning as you are signing using your own certs.
If you face problem of jarsigner error: java.time.DateTimeException: Invalid value for MonthOfYear (valid values 1 - 12): 0
Don't worry, just change your Java Environment/JDK to higher version. For example, I'm using Java 9 during the signing process, I just switch to JDK10 using JEnv. and it works

9. Next, align your APK or in other words, compile for final release using the Zipalign command.

(base) % zipalign -v 4 [your-signed-apk].apk [yourfinalnameapps].apk

please make sure you include the path to your APK and path to zipalign. Zipalign is located in android folder; for instance, mine is located at ~/Library/Android/sdk/build-tools/29.0.2/

10. Once done, you should be able to release it to Google.

11. For Ionic + React + Capacitor, you must perform few edits before you can begin.

• Change your appId and appName at capacitor.config.json. Please ensure it was not pointing to io.ionic.start.
• Change your package name so that it will not refer to io.ionic.starter (follow https://abhiandroid.com/androidstudio/how-to-change-package-name-android-studio.html)
• Remove all permissions (If you don't need that). Take a look here -> https://facebook.github.io/react-native/docs/removing-default-permissions or  https://stackoverflow.com/questions/41234205/warnings-your-apk-is-using-permissions-that-require-a-privacy-policy-android-p
• Once remove permission, add this in your manifest https://stackoverflow.com/questions/55334431/facing-below-error-toolsnode-associated-with-an-element-type-uses-permission
• Finally, change your version number (if you had tried to publish before). Check here https://stackoverflow.com/questions/24772407/upload-failed-you-need-to-use-a-different-version-code-for-your-apk-because-you

12. Then run the command npm run build, followed by npx cap copy android or npx cap sync android.

13. Open your Android Studio and rebuild the projects.

14. Use your Android Studio to perform the following:

• Build APK and Bundle APK
• Signed the Bundle APK (Check https://developer.android.com/studio/publish/app-signing)

** Note: Please create key using Android Studio to ease in publishing the apps

15. Touch down. Open your Google Play Dashboard and start your publishing process.

The full documentation is reachable at https://ionicframework.com/docs/publishing/play-store and https://ionicframework.com/docs/v1/guide/publishing.html and https://support.google.com/googleplay/android-developer/answer/7159011

Read More

Improving and Managing the Applications Performance

I was developing my personal resume mobile apps using Ionic Framework + React and Capacitor. It is using a few JSON files so that I can easily manage it in the future.

It works perfectly when I run npm start or ionic serve command. However, when I move it to mobile apps, there start a problem. It is lagging despite running on an emulator or even on my devices and I'm just using local files.

After days of googling and try-n-error, I found a good solution to it. Used

• Lazy
• Suspend
• Error controller

And it should solve it.

Here it is done:

1. Lazy & Suspend

import React, {lazy, Suspense, Component} from 'react';

//import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react';

const AboutPage = lazy(() => import('./AboutPage'));

class Abouts extends Component<any, any> {

constructor(props: any) {

super(props);

this.state = {

details: true

}

}

showDetails() {

this.setState({ details: true });

}

renderLoader = () => <div className="loader">Loading About & Credit...</div>;

render() {

const { details } = this.state;

return (

<div className="divLoading">

{ details &&

<Suspense fallback={this.renderLoader()}>

<AboutPage />

</Suspense>

}

</div>

);

}

}

export default Abouts;

2. Error controller

class ErrorBoundary extends React.Component<any, any> {

constructor(props: any) {

super(props);

this.state = {hasError: false};

}

static getDerivedStateFromError(error: any) {

return {hasError: true};

}

render() {

if (this.state.hasError) {

return <p>Loading failed! Please reload.</p>;

}

return this.props.children;

}

}

.....

#part of your code

<ErrorBoundary>

<Suspense fallback={this.renderLoader()}>

<ThePageToLoad />

</Suspense>

</ErrorBoundary>

All is based on the following resources. Credit goes to them who help me to solve it:

1. https://web.dev/code-splitting-suspense/
2. https://codesandbox.io/s/7zx3jlrry1?from-embed
3. https://www.freecodecamp.org/news/how-to-optimize-react-applications-with-lazy-loading-232183e02768/

Read More

Ionic 4 + React + Capacitor - The right way of building mobile apps with these three

React is supported in Ionic starting from Ionic 4. And this is the issue if you started to develop ionic react apps by running command ionic start [appsname] --types=react.

I started with that command and it becomes issues of which it took me 3 days and still it won't work. Few issues found was:

1. You cannot build or compile into mobile apps with normal ionic cordova add android, etc commands. It will stated that it is a react apps and you need to use capacitor instead.

2. So you start to install capacitor and follow many steps. You will be succeed in building and compiling.

3. But, upon running the apps on emulator or your devices, you'll get blank screen. 

How to solve that? I've followed many steps including changing the default href in index.html, remove and add capacitor and rerun it. Yet it failed. 

How do I solve that? Here is the steps:

1. Remove everything

(base) % npm uninstall -g ionic    

up to date in 0.05s

(base) % npm uninstall -g capacitor

up to date in 0.045s

(base) % npm uninstall -g cordova  

up to date in 0.047s

(base) a% npm cache clean -f        

npm WARN using --force I sure hope you know what you are doing.

2. Update your NPM modules

(base) % npm i -g npm              

3. Install ionic with capacitor

(base) % npm install -g ionic capacitor

4. Create your apps

(base) % ionic start yourapps tabs --type=react

5. Run NPM install to install any modules required upon completed. For any additional modules, run npm install to ensure required modules is updated.

(base) % cd yourapps 

(base) % npm install

6. Run your apps to test it out

(base) % ionic serve

7. After doing your development, build it using npm run build or ionic build

(base) % npm run build

8. Next, build for your platform. Once build is completed, please ensure your www or public folder exist. Then add the required platform. In my case, I'm developing for android.

(base) % ionic cap add android

9. Open IDE. If succeed, proceed with opening the apps on XCode or Android Studio (depend on your chosen platform)

(base) % ionic cap run android

10. Once your IDE is opened, compile/build and run it on emulator or devices.

It shall do it.

Read More