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';
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.
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.
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.
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:
Wicket
is a Java web application framework which allows “Designers” (people
good with Dreamweaver) and “Developers” (people good with Java and
Databases) to collaborate on a project with minimal chances of stepping
on each other’s toes or wearing each other’s hats.
The beauty of Wicket
is that it uses plain xhtml pages as it’s templating markup. This
means that html pages can be loaded into Dreamweaver (or whatever tool
the Designer is comfortable with) and they will look very close to the
same as they would when rendered on the deployment web server.
This document takes you through the basics of creating reusable components and assembling them into a web application. Each component consists of a Java class and an HTML file. The framework that allows you to develop your application in this way is called Wicket. In addition to its component-based approach, a distinguishing feature of Wicket is the absence of XML configuration files. Instead of an XML configuration file, you use a Java class for application-wide settings, such as the identification of a home page.
Each widget in your web application is created in a Java class and rendered in an HTML page. The Java class and HTML page must have the same name and exist in the same source structure. They are linked to each other via a Wicket identifier. You will be shown how the IDE supports the development of component based applications so that you can quickly and efficiently create reusable components that can give your web application a consistent look and feel without very much work on your part.
Wicket examples is a good place to learn Apache Wicket by examples, and a must reference site for new or experienced Wicket’s developers. In this Wicket examples site, it almost contains all of the usage of the common wicket’s components.
In this guide, we show you how to setup the above Apache Wicket example site in your local development environment (Eclipse IDE).
A new open-source framework aimed at simplifying the development of Java-based Web applications will debut at JavaOne Monday with support from a former Sun Microsystems Java evangelist.
Wicket, an open-source project founded in spring 2004 by Jonathan Locke, a member of the team that developed the JFC (Java Foundation Classes)/Swing framework, will introduce Wicket 1.0 next week at the annual Java developer confab, according to a press statement from the Wicket project.
Miko Matsumura, former Java evangelist at Sun and currently vice president for Infravio, will host a session about Wicket 1.0 Tuesday at JavaOne with one of the members of the project's development team, Martijn Dashorst, senior staff engineer at Topicus.
Wicket 1.0, which will be released under the Apache Software License, simplifies developers' ability to create and package reusable Web components byseparating the creation of dynamic Web pages into two separate domains for designing and coding, according to the Wicket team. This allows the design and code teams to work independently without interfering with the other's process.
(Note: The sources and binaries are at http://java.net/projects/nbwicketsupport, but for some reason you can't access NetBeans update centers if they're on java.net, hence I uploaded it into this blog.)
Then you'll be able to create Wicket applications in NetBeans IDE 7.1, in the final step of the New Web Application wizard: