The competition among frontend frameworks

 Frontend frameworks for desktop and responsive on other devices can be categorized in 5 main types:

• Angular
• ReactJS
• VueJS
• Classic (html, css, jquery, thymeleaf, asp.net)
• Flutter Web
  

Read More

What is backbase

What are Digital Banking Platforms (DBP)?

A digital banking platform (DBP) enables a bank to begin the transformational process of becoming a truly digital bank that is ecosystem-centric. A DBP also enables banks to achieve business optimization. However, that is not the end state. For banks seeking only business optimization as the goal of their digital banking strategy, a digital banking multichannel solution will meet those needs.

Read More

Installation mdbootstrap 5

Step 1

Download the package

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Open Dreamweaver editor and create a HTML site.

Find a template site and copy an index.html file to your project and compose your website. And yes, it's that simple! 

Importing CSS file

To import MDB stylesheet please use the following syntax:

<!-- Font Awesome -->

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- Google Fonts Roboto -->

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" />

 <link rel="stylesheet" href="css/mdb.min.css" />

Importing JS file

<script href="js/mdb.min.js"></script>

Run: click index.html file to open it on browser

and it works

Source code
IntegratedMaterialDesignAdminDemo


Reference document:
https://mdbootstrap.com/docs/standard/getting-started/installation/

Read More

VUE3 for Java developer

What is Vue.js and VUE 3 features?

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries (opens new window)

Vue 3 was officially released on September 18, 2020. While it has some great new features, especially having full TypeScript support which is the same as Angular 10. New Features in Vue 3 are

•     Composition API (built-in now)
•     Full TypeScript support
•     Portals
•     Fragments
•     Suspense
•     Global Mounting/Configuration API change
•     Multiple v-models
•     Custom Directive API
•     Multiple root elements (Template syntax )
•     Better reactivity
•     Emits Component Option

Easy integration is one important feature of VUE so that It is now easy to integrate with java frameworks such as Apache wicket, Play framework, Spring framework.. Java backend developer can be easy to understand VUE 3 so that they will improve their weakness with frontend.

Some VUE 3 details

The Composition API is introduced in Vue 3 as an alternative to the Options API in vuejs 2.x. 

It would be much nicer if we could collocate code related to the same logical concern. And this is exactly what the Composition API enables us to do. To start working with the Composition API we first need a place where we can actually use it. In a Vue component, we call this place the setup.

The setup option should be a function that accepts props and context which we will talk about later. Additionally, everything that we return from setup will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template. The setup method is also where all the action happens. This method gets called after beforeCreate and right before the created lifecycle hooks. Notice that setup is the only function inside our component.  

beforeCreate() => setup() => create()




For example:

import {defineComponent, ref, computed} from 'vue';

export default defineComponent({

  name: 'HelloNewYear',

  components: {},

  props: {

    msg: Object,

  },

  setup(props) {

      const msg = ref('msg');      

      const updateMsg = (newValue) => msg.value = newValue;

  

      return { msg, updateMsg }

  }

});

Lifecycle inside setup() includes 9 lifecycles:

•     onBeforeMount
•     onMouted
•     onBeforeUpdate
•     onUpdated
•     onBeforeUnmount
•     onUnmount
•     onActivated
•     onDeactivated
•     onErrorCaptured
•     onRenderTracked
•     onRenderTriggered

Full TypeScript support

Vue 3 has full TypeScript support. For example, 

To create mixins in TypeScript, we must first create our mixin file, which contains the data we share with other components.

Create a file called MsgMixin.ts inside the mixins directory and add the following mixin, which shares the project name and a method to update the project name.

import { Component, Vue } from 'vue-property-decorator'
@Component
class MsgMixin extends Vue {
  public msgName: string = 'My Message
  public setMsgName(newVal: string): void {
    this.msgName = newVal
  }
}
export default MsgMixin

Multiple root elements (template syntax )

In Vue 2,  the template tag can only take one root element. In Vue 3, There is no need for a root element anymore.

We can use any number of tags directly inside the <template></template> section:

<template>

  <p> Count: {{ count }} </p>

  <button @click="increment"> Increment </button>

  <button @click="decrement"> Decrement</button>

</template>

Equivalent code in Vue 2:

<template>

  <div class="counter">

    <p> Count: {{ count }} </p>

    <button @click="increment"> Increment </button>

    <button @click="decrement"> Decrement</button>

  </div>

</template>

Suspense

Suspense is a special component that renders a fallback content instead of your component until a condition is met. 

Provide / inject

In Vue 2, we used props for passing data – such as string, arrays, objects, and so on – from a parent component directly to its children component. But in many cases, we also need to pass data from the parent component to a deeply nested child component which is, not so appropriate and becoming complicated in normal cases.

Vue 3 use the new Provide and inject pair to pass data with vuex.

Teleport is a new feature that makes it easy to display a component outside its default position i.e the #app container where Vue apps are usually wrapped. You can, for example, use Teleport to display a header component outside the #app div. Please note that you can only Teleport to elements that exist outside of the Vue DOM.

Global Mounting/Configuration API Change

It has simple command as following

import { createApp } from 'vue'

import App from './App.vue'

const app = createApp(App)

app.config.ignoredElements = [/^app-/]

app.use(/* ... */)

app.mixin(/* ... */)

app.component(/* ... */)

app.directive(/* ... */)

app.mount('#app')

Multiple v-Models

for example, to bind and listen to multiple properties in components:

<NameComponent

  v-model:fornames="forname"

  v-model:surname="surname"

/>

Understanding Vue 3 Ref for Reactive Variables

In this section, we'll learn about the ref() function in Vue 3. In Vue 3, you can use the ref() function to define a reactive variable. It can wrap any primitive or object and return it’s reactive reference. The value of passed element will be kept in a value property of the created reference. For example if you want to access value of count reference you need to explicitly ask for count.value. 

Difference between Angular and Vue on Different Parameters

Parameters	ANGULAR	VUE
Easy Integration	Angular is a Javascript framework, making easier for developers to integrate it with third-party components and other Javascript-based technologies.	On the other hand, Vue is a versatile and a flexible framework. It facilitates front-end libraries integration easily.
Flexibility	Angular framework is considered highly flexible as it offers official support to multiple systems without any restriction.	At the same time, Vue is not as flexible as Angular. It's a bit rigid. There are some rules which need to be followed while working on an application. Still, it provides flexibility for modular solutions.
Complexity	Angular framework is much more complex than Vue when it comes to design and API. A non-trivial application development takes more time with Angular than Vue.	Developing a non-trivial application takes less time when integrating with Vue. If we talk about design and API, Vue is considered simpler.
TypeScript	The learning resources provided by Angular are Typescript based so it acts as a booster for the developers and at the same time difficult for the beginners to learn.	Vue recently got the Typescript functionality, but it is not currently in use.
Performance	Angular has performed well till date. It doesn't disappoint. Angular is best known for its fast performance. Despite having a lot of watchers, Angular guarantee the same performance metrics on different platforms.	Vue also delivers the same quality performance as Angular. Both of them perform outstandingly on different benchmarks and at the same time addressing similar issues.
Data binding	Angular utilizes a two-way binding process between scopes. In addition to this, it supports asynchronous services to assist developers when they develop third-party components to integrate with the app.	On the other hand, Vue supports one-way data flow between the components. It facilitates non-trivial app development quickly.

VUE 3 and Angular are both using TypeScript and html/css template opposed to ReactJS that uses HTML (JSX) inside JavaScript.

Read More

Mockito vs JMockit

A Brief analysis on Mockito And Jmockit

Mockito	JMockit
1. We can achieve Static method/constructor mocking by the combination of Mockito with Powermock.

Read More

MyBatis introduction

 MyBatis is a Java persistence framework that couples objects with stored procedures or SQL statements using an XML descriptor or annotations.

MyBatis is free software that is distributed under the Apache License 2.0.

MyBatis is a fork of iBATIS 3.0 and is maintained by a team that includes the original creators of iBATIS. 

MyBatis is a first class persistence framework with support for custom SQL, stored procedures and advanced mappings. MyBatis eliminates almost all of the JDBC code and manual setting of parameters and retrieval of results. MyBatis can use simple XML or Annotations for configuration and map primitives, Map interfaces and Java POJOs (Plain Old Java Objects) to database records

Read More

Unit tests with jmockit

What is JMockit?

JMockit is open source software unit testing library, It includes APIs for mocking, faking, and combining with a code coverage tool. This library is used together with a testing framework such as JUnit or TestNG.  IntelliJ IDEA is a good ide for testing with JMockit.

Read More

Dart language from view of Java Developer

Nowadays I hear so much from Internet about Dart language so that today at the weekend I will go skimly Dart language on Google search.

I found some good sites such as https://www.vogella.com/tutorials/Dart/article.html, https://flutter.dev/docs/resources/bootstrap-into-dart and I understood that Google Dart is a new programming language from Google that is used to build mobile applications, web applications, Internet of Things (IoT), advertisements, and so on.

The most famous framework that use Dart language is Flutter framework for mobile app development that can run on iOS, Android, etc. 

I see that Dart syntax learned much from Java8, RxJS, Typescript and add/update some differences to improve from Java.

Read More

Add Redux lifestyle into Angular's Reactive State Management

If you are java developer and you are not good at design and frontend skill but you want to develop a java web application using microservices style, Angular is the best choice as front-end framework for you. Angular is like java Wicket framework. Both use real html DOM in markup file so that It is easy to incorporate with cut-css/html frontend developer to make a target ui page.
Redux is a predictable state container for JavaScript apps and Redux was designed for React.
There are several ways to use Redux or create a Redux-inspired system that works with Angular. We can use Redux directly in order to show the concepts without introducing a new dependency (pure redux). But Angular also has state container by supporting from popular state management frameworks: angular-redux, ngrx, ngxs, akita

Read More

Doing microservices with JHipster

Today many companies are developing applications using Microservices, and Microservices with spring boot is chosen by many big companies in Vietnam.
In JHipster framework, Microservices is also supported. JHipster is a free and open-source application generator used to quickly develop modern web applications and Microservices using Angular or React (JavaScript library) and the Spring Framework.

Some technologies and tools are:

• Yeoman, a front-end scaffolding tool
• Spring Boot
• Angular 8, ReactJS: frontend Javascript frameworks.
• Swagger, for API documentation
• Maven, Npm, Yarn, Gulp and Bower are dependency managers and build tools
• Jasmine, Protractor, Cucumber and Gatling are test frameworks
• Liquibase is for database versioning

We need to  install Java 8, Git (version control system), NodeJS, Yeoman, Yarn and may be Gulp and Bower also on the computer.

Microservices vs Monolithic architecture

The first question JHipster will ask you is the kind of application you want to generate. You have the choice between two architecture styles:

• A “monolithic” architecture uses a single, one-size-fits-all application, which contains both the front-end code, and the back-end Spring Boot code.
• A “microservices” architecture splits the front-end and the back-end, so that it’s easier for your application to scale and survive infrastructure issues.

A “monolithic” application is much easier to work on, so if you don’t have any specific requirements, this is the option we recommend, and our default option.
However, A “monolithic” application is still an Spring Boot application with Microservices support.

Microservices architecture overview

The JHipster microservices architecture works in the following way:

• A gateway is a JHipster-generated application (using application type microservice gateway when you generate it) that handles Web traffic, and serves an Angular/React application. There can be several different gateways, if you want to follow the Backends for Frontends pattern, but that’s not mandatory.
• Traefik is a modern HTTP reverse proxy and load balancer that can work with a gateway.
• The JHipster Registry is a runtime application on which all applications registers and get their configuration from. It also provides runtime monitoring dashboards.
• Consul is a service discovery service, as well as a key/value store. It can be used as an alternative to the JHipster Registry.
• JHipster UAA is a JHipster-based User Authentication and Authorization system, which uses the OAuth2 protocol.
• Microservices are JHipster-generated applications (using application type microservice application when you generate them), that handle REST requests. They are stateless, and several instances of them can be launched in parallel to handle heavy loads.
• The JHipster Console is a monitoring & alerting console, based on the ELK stack.

In the diagram below, the green components are specific to your application and the blue components provide its underlying infrastructure.

From above picture, we can see that Eureka Server has been wrapped into Jhipster Registry, because the standard architecture of Eureka Server is something like following:

Docker installation

Guide to install docker on windows: https://docs.docker.com/toolbox/toolbox_install_windows/, https://github.com/docker/toolbox/releases
After installation, click on shortcut on desktop of computer to start docker

Then the terminal will appear with messages

Type the docker run hello-world command and press RETURN.

In the first times, It will show errors and then download hello-world example. If you run that command in the second times, It will show above messages. That means the installation of docker is okay.

Install Compose on Windows desktop systems
Docker Desktop for Windows and Docker Toolbox already include Compose along with other Docker apps, so most Windows users do not need to install Compose separately. Docker install instructions for these are here:

• Get Docker Desktop for Windows
• Get Docker Toolbox (for older systems)

Links:
https://www.jhipster.tech/microservices-architecture/
https://spring.io/blog/2015/07/14/microservices-with-spring

Read More