The competition among frontend frameworks

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

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

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

Angular 2 with ZK

With the emerging of reactjs and angular2, zk and other old ui java frameworks are standing before of going to history library but now angular2 has been integrated into zk and make it having more custom chosen for users so that zk framework is still used for maintainance and new java projects.

Angular 2 is integrated in zk by using  client command binding to communicate with a Java ViewModel at the server-side.

Read More

Spring Boot + React Redux and MySQL CRUD example

This article will build React Redux Http Client & Spring Boot Server example that uses Spring Data JPA to interact with MySQL database and React as a front-end technology to make request and receive response.
Technologies
– Java 1.8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot 2.0.1.RELEASE
– Webpack 4.4.1
– React 16.3.0
– Redux 3.7.2
– React Redux 5.0.7
– axios 0.18.0
– MySQL 5.7.16

Read More

Devstack download: migrating from JSF to ReactJS

At Bandwidth, our UI front end was originally written using JSF (java server faces). This made sense at the time because we had a lot of Java developers and it was easier for them to work with. As time moved on and we expanded our team we got more front-end developers on board. They were pushing for a more modern front end stack that will help improve efficiency for front-end development. That is how we ended up deciding to use ReactJs.
I think one of the trickiest parts of the change was deciding how to go about it. It takes a lot of time and effort to make the change and we had to convince everyone that it would be worth it. Since there was already a movement to revamp our signup process, it seemed like a perfect opportunity to write that using ReactJs and Redux. It also had the plus side of not needing to be authenticated so you really couldn’t pick a better piece to migrate first. You can click the link below to check out our new signup page and see the results!

Read More

Announcing the Ionic React Beta

How to Get Started with React & Ionic?

Getting started is quite simple. Begin first with create-react-app, because we want you to use Ionic with React in the most familiar way. We also recommend using TypeScript in your app, something we recently wrote about on our blog if you need tips. While this is not required, we mention it because Ionic React ships with TypeScript type definitions, and it makes for an excellent developer experience.

 npx create-react-app my-ionic-app --typescript
 cd my-ionic-app

Read More

Angular in Netbeans IDE

Requirements:

• Netbeans IDE 8.2
• Git-2.20.1-64-bit
• npm installed
• netbeanstypescript-2.x.nbm

Run commands:

 npm install -g bower
 npm install -g typescript

Detail at https://www.tutorialjinni.com/angular-2-netbeans-8.2-typescript-hello-world-example.html

Read More

Angular 7 vs React

Angular is a fully-fledged MVC framework and React is simply a JavaScript Library.

Here’s what Angular provides directly out-of-the-box:
-Templates, based on an extended version of HTML
-XSS protection
-Dependency injection
-Ajax requests by @angular/HTTP
-Routing, provided by @angular/router
-Component CSS encapsulation
-Utilities for unit-testing components
-@angular/forms for building forms
-Write once run everywhere

React provides the following “out of the box”:
-Instead of classic templates, it has JSX, an XML-like language built on top of it
-JavaScript
-XSS protection
-No dependency injection
-Fetch for Ajax requests
-Utilities for unit-testing components
-Learn once write anywhere

Read More

React.js and Spring Data REST - Basic Features

Spring Data REST provides backend functionality
React has sophisticated features to build an easy-to-grok UI.

• Spring Data REST provides a fast way to build hypermedia-powered repositories.
• React is Facebook’s solution to efficient, fast, and easy-to-use views in the land of JavaScript.

Read More

MVC vs Flux

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Flux applications have three major parts: the dispatcher, the stores, and the views (React components). These should not be confused with Model-View-Controller. Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children. Additionally, action creators — dispatcher helper methods — are used to support a semantic API that describes all changes that are possible in the application. It can be useful to think of them as a fourth part of the Flux update cycle.

Read More