Shared info of IoT & Cloud, Banking, NextJS Wicket, Spring Reactive, AI, flutter, E-comm, Java Telecomm and More.

Tuesday, March 2, 2021

Beginning Amazon DynamoDB

What Is Amazon DynamoDB?

Amazon DynamoDB is a fully managed NoSQL database service that provides fast and predictable performance with seamless scalability. 

NoSQL is a term used to describe nonrelational database systems that are highly available, scalable, and optimized for high performance. Instead of the relational model, NoSQL databases (like DynamoDB) use alternate models for data management, such as key-value pairs or document storage. For more information, see http://aws.amazon.com/nosql.

Friday, January 1, 2021

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. 


ParametersANGULARVUE
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 bindingAngular 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.

Thursday, December 31, 2020

Tuesday, October 27, 2020

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

Wednesday, September 16, 2020

Python for Java developer

What is Python? 

Python is an object-oriented programming language created by Guido Rossum in 1989. It is so popular and in many operation system from Windows to Linux, Ubuntu or MacOS. Python is an interpreted language, every one can open an terminal and type some Python command on that. Python is used to build software application in ML and AI programs, Machine Learning, Live streaming data, Bigdata, Math and Physics and other science fields. Python is complementary for Java and It cannot replace Java in the Global IT market.

Tuesday, September 15, 2020

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.

Sunday, August 30, 2020

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.

Sunday, August 9, 2020

Apache Wicket 9 news

 With emerging of ReactJS and  Angular and Microservices, Apache Wicket framework seems darkly because many people think that only ReactJS, Angular, VueJS can work with Microservices. But apache wicket is also a FrontEnd framework and can communicate with Microservices over internet by JSON format data exchange and It is still safely, more stronger. Following is the news from https://wicket.apache.org site:

Beginning playframework

 What is Play?

Play is a high-productivity Java and Scala web application framework that integrates components and APIs for modern web application development. Play was developed by web developers for web application development.

Play uses Model-View-Controller (MVC) architecture so that It is familiar and easy to learn. Play is a full-stack framework so that Play includes all the components you need to build Web Applications and REST services, such as an integrated HTTP server, form handling, Cross-Site Request Forgery (CSRF) protection, a powerful routing mechanism, I18n support, and more.

Play’s lightweight, stateless, web-friendly architecture uses Akka and Akka Streams under the covers to provide predictable and minimal resource consumption (CPU, memory, threads).

Play is non-opinionated about database access, and integrates with many object relational mapping (ORM) layers. It supports Anorm, Slick, and JPA out of the box, but many customers use NoSQL or other ORMs.

Play Requirements

A Play application only needs to include the Play JAR files to run properly. These JAR files are published to the Maven Repository, therefore you can use any Java or Scala build tool to build a Play project. However, Play provides an enhanced development experience (support for routes, templates compilation and auto-reloading) when using the sbt.

Play requires:

  1. Java SE 1.8 or higher
  2. sbt - we recommend the latest version

To check that you have Java SE 1.8 or higher, enter the following in a terminal:

java -version

You should see something like:

openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)

You can obtain Java SE from Oracle’s JDK Site

If you want to use sbt to create a new project, you need to install the sbt launcher on your system. With sbt installed, you can use our giter8 template for Java or Scala to create your own project with a single command, using sbt new. Find the links on the sbt download page to install the sbt launcher on your system and refer to the sbt documentation for details about how to set it up.

After install sbt launcher, we can use sbt command to create Play Java  using sbt new command, for example:

sbt new playframework/play-java-seed.g8

After the template creates the project:

  1. Change into the top level project directory.
  2. Enter sbt run to download dependencies and start the system.
  3. In a browser, enter http://localhost:9000 to view the welcome page.
If I run on Hello World example from https://github.com/playframework/play-samples url, the result will be


The Play application layout

The layout of a Play application is standardized to keep things as simple as possible. After the first successful compilation, the project structure looks like this:

















The app/ directory

The app directory contains all executable artifacts: Java and Scala source code, templates and compiled assets’ sources.

There are three packages in the app directory, one for each component of the MVC architectural pattern:

  • app/controllers
  • app/models
  • app/views

You can add your own packages, for example, an app/services package.

More information is available on https://www.playframework.com/documentation/2.8.x/Anatomy url.

Using the sbt console

You can run single sbt commands directly. For example, to build and run Play, change to the directory of your project and run:

$ sbt run

To launch sbt in the interactive mode, change into the top-level of your project and enter sbt with no arguments:

$ cd my-first-app
my-first-app $  sbt

Tip: you can also launch some commands before getting into sbt shell by running shell at the end of task list. For example:

$ sbt clean compile shell

With sbt in the interactive mode, run the current application in development mode, use the run command:

[my-first-app] $ run

You can also compile your application without running the HTTP server. The compile command displays any application errors in the command window. For example, in the interactive mode, enter:

[my-first-app] $ compile

You can run tests without running the server. For example, in interactive mode, use the test command:

[my-first-app] $ test

Type console to enter the Scala console, which allows you to test your code interactively:

[my-first-app] $ console

Debug: You can ask Play to start a JPDA debug port when starting the console. You can then connect using Java debugger. Use the sbt -jvm-debug <port> command to do that:

$ sbt -jvm-debug 9999

When a JPDA port is available, the JVM will log this line during boot:

Listening for transport dt_socket at address: 9999

You can use sbt features such as triggered execution.

For example, using ~ compile:

[my-first-app] $ ~ compile

The compilation will be triggered each time you change a source file.

If you are using ~ run:

[my-first-app] $ ~ run

The triggered compilation will be enabled while a development server is running.

You can also do the same for ~ test, to continuously test your project each time you modify a source file:

[my-first-app] $ ~ test

You can also run commands directly without entering the Play console

For example, enter sbt run:

Use the help command to get basic help about the available commands. You can also use this with a specific command to get information about that command:

[my-first-app] $ help run

Hello World example

Assume that we use of sbt or gradlew commands from a terminal, but you can also integrate Play projects with your favorite IDE.

Code of Hello World app is at https://github.com/playframework/play-samples/tree/2.8.x/play-java-hello-world-tutorial

When you enter http://localhost:9000/ in your browser:

  1. The browser requests the root / URI from the HTTP server using the GET method.
  2. The Play internal HTTP Server receives the request.
  3. Play resolves the request using the routes file, which maps URIs to controller action methods.
  4. The action method renders the index page, using Twirl templates.
  5. The HTTP server returns the response as an HTML page.

At a high level, the flow looks something like this:


 Let’s look at the tutorial project to locate the implementation for:

  1. The routes file that maps the request to the controller method.
  2. The controller action method that defines how to handle a request to the root URI.
  3. The Twirl template that the action method calls to render the HTML markup.


index.scala.html Twirl template file.

public Result index() {
       return ok(views.html.index.render("Your new application is
  return ok(javaguide.hello.html.index.render("Your new application is ready.", assetsFinder));
}

To view the route that maps the browser request to the controller method, open the conf/routes file. A route consists of an HTTP method, a path, and an action. This control over the URL schema makes it easy to design clean, human-readable, bookmarkable URLs. The following line maps a GET request for the root URL / to the index action in HomeController:

GET     /           controllers.HomeController.index

Open app/views/index.scala.html with your text editor. The main directive in this file calls the main template main.scala.html with the string Welcome to generate the page. You can open app/views/main.scala.html to see how a String parameter sets the page title.

conf/routes file:

# Routes

# This file defines all application routes (Higher priority routes first)

# An example controller showing a sample home page

GET     /                           controllers.HomeController.index

GET    /explore                     controllers.HomeController.explore

GET    /tutorial                    controllers.HomeController.tutorial


# Map static resources from the /public folder to the /assets URL path

GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)

So the main steps to create Hello World application include:
  1. Create the Hello World page
  2. Add an action method
  3. Define a route
  4. Customize the greeting

1. Create the Hello World page

Follow the instructions below to add a new Hello World page to this project.

With any text editor, create a file named hello.scala.html and save it in the app/views directory of this project. Add the following contents to the file:

@()(implicit assetsFinder: AssetsFinder)

@main("Hello") {
    <section id="top">
        <div class="wrapper">
            <h1>Hello World</h1>
        </div>
    </section>
}

This Twirl and HTML markup accomplishes the following:

  1. The @ sign tells the template engine to interpret what follows.
  2. In this case, @main("Hello", assetsFinder) calls the main template, main.scala.html and passes it the page title of "Hello" (you can ignore the assetsFinder argument for the time being).
  3. The content section contains the Hello World greeting. The main template will insert this into the body of the page.

Now we are ready to add an action method that will render the new page.

2. Add an action method

To add an action method for the new page:

Open the app/controllers/HomeController.java (or .scala) file. Under the tutorial method and before the closing brace, add the following method:

Java
public Result hello() {
    return ok(views.html.hello.render(assetsFinder));
}
Scala
def hello = Action {
  Ok(views.html.hello())
}

Note that, in HomeController.java, it needs to add following code pieces:

import views.html.*;
import javax.inject.Inject;
..
private final AssetsFinder assetsFinder;

    @Inject
    public HomeController(AssetsFinder assetsFinder) {
        this.assetsFinder = assetsFinder;
    }

3. Define a route

To define a route for the new Hello page That maps the page to the method.:

Open the conf/routes file and add the following line:

GET     /hello      controllers.HomeController.hello

When you add a route to the routes file, Play’s routes compiler will automatically generate a router class that calls that action using an instance of your controller. For more information see the routing documentation. By default, the controller instances are created using dependency injection (see docs for Java and Scala).

You are now ready to test the new page. If you stopped the application for some reason, restart it with the sbt run command.

Enter the URL http://localhost:9000/hello to view the results of your work. The browser should respond with something like the following:

4. Customize the greeting

As the final part of this tutorial, we’ll modify the hello page to accept an HTTP request parameter. The steps include a deliberate mistake to demonstrate how Play provides useful feedback.

To customize the Hello World greeting, follow the instructions below.

In the app/controllers/HomeController.java (or .scala) file, add the helloName action method to accept a name parameter using the following code:

Java
public Result helloName(String name) {
    return ok(views.html.hello.render(name, assetsFinder));
}

In the conf/routes file, add a (name: String) parameter at the end of the hello:

GET  /helloName        controllers.HomeController.helloName(name: String)

In Twirl templates, all variables and their types must be declared. In the app/views/helloName.scala.html file:

  1. Insert a new line at the top of the file.
  2. On that line, add an @ directive that declares the name parameter and its type: @(name: String)
  3. To use the variable on the page, change the text in the <h2> heading from Hello World! to <h2>Hello @name!</h2>.

The end result will be:

@(name: String)(implicit assetsFinder: AssetsFinder)
@main("Hello") {
    <section id="top">
        <div class="wrapper">
            <h2>Hello, @name</h2>
        </div>
    </section>
}

In the browser, enter the following URL and pass in any name as a query parameter to the helloName method: http://localhost:9000/helloName?name=MyName, as the result It shows the following screen


Congrat! Our HelloWorld implementation by using Play framework is done. The first step to finding out Play framework has been completed.

From https://www.playframework.com/documentation/2.8.x/Home

Monday, July 6, 2020

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, ngrxngxsakita

Popular Posts

Blog Archive