VueJS + Wicket = Vuecket

Getting Started with Vuecket

Vuecket - full-stack web framework, which integrates VueJS as front-end side and Apache Wicket as back-end side. It takes all the best from both frameworks and allows to develop full-stack applications fast and easy.

Of course, you can say that these are unproofed statements and you will be right since Vuecket is a newborn web framework (August 2020) and hasn’t been seriously tested on production. But it was developed as a result of 6+ years of work on our key solution and flagman Open Source product Orienteer, a platform for quick and easy Business Applications development.

We work hard to build this framework more valuable and helpful for the Open Source community, thus our team would appreciate your thoughts, feedbacks, and sharing your experience working with Vuecket (successful or not).

Vuecket guiding principles:

1. Be declarative, not imperative

• You can use VueJS 3rd party libraries and get benefits out of Vuecket even without modifying them
• In a similar way, you can use 3rd party Apache Wicket component and just by adding VueBehavior (Behavior provided by Vuecket) you enable Vuecket benefits

2. Provide 80% of functionality Out Of the Box, but do have good extension points for the remaining 20%

It’s easy to spot that both VueJS and Apache Wicket follow these guiding principles.

To get familiar with Vuecket, let’s develop together a Chat/Guest Book with Markdown support application in this article. You can find our final application here, and source code here.

Step 0: Project Creation

Let’s use Apache Wicket Maven Archetype to generate our project. You can use the following command:

Vuecket doesn’t have yet its own Maven Archetype. Probably, in the future releases, we will add that.

Now, let's add Vuecket. Add the following dependency topom.xml in your newly generated project. Please check the most recent Vuecket version on our GitHub page.

Step 1: Render Markdown

Your generated Wicket project already contains HomePage.java. Let’s add some code there to make sure that Vuecket has been enabled.

For example, let’s render Hello World from a text which will be provided by Apache Wicket component. We will use vue-markdown for rendering markdown on the client-side.

Instead of Wicket greetings please add the following code into HomePage.html:

And to HomePage.java:

But where is VueMarkdown? Let’s define it in the following way:

Please pay attention to annotation @VueNpm . It’s needed to enable Vuecket on this Wicket component, which will load everything needed from NPM to allow Vue on the client-side to render markdown properly.

Use mvn jetty:run to run your project and, if no problems are there, you can observe the following on http://localhost:8080 :

What did we build and why is it working?

• We added 2 Wicket components to our HomePage: for Vue application and for Markdown rendering
• We linked Vue components with corresponding Wicket components on the server side (in HomePage.java)
• We defined what particular VueJS library needed for markdown rendering: where to get it and how to enable it on your page
• The rest is easy: Wicket provided unrendered text # Hellow World from Vuecket to the client’s browser which was defined during adding the Wicket component. Vuecket helped to load everything required on the client-side (including VueJS), ran required VueJS enablement code, and allowed the last one to do its job in rendering the text as markdown.

Need help? Check this commit on GitHub

Step 2: Message Entering and Preview

Here we will enhance our application by allowing to enter a message and its preview.

Let’s use textarea to enter a message. For VueJS v-model use the field text and assign the same field to vue-markdown.

We’ve just used the data field text, so we have to define it in data of the corresponding Vue component. There are multiple ways of how to do that in Vuecket, but let's use the longest one:

• Create your own VueComponent for Vue app
• Associate it with *.vue file
• Define all required VueJS logic in this*.vue file: for this chapter, it will be a new data field text

And here is our newly created ChatApp.vue:

After running your application by mvn jetty:run you can see something like this:

All right, in this chapter, we learned how to create *.vue files and associate them with Apache Wicket components.

Need help? Check this commit on GitHub

Step 3: Display of Messages and Adding a New One

We won’t use either Vuecket or Wicket in this chapter, “eternal sunshine of the spotless VueJS”. Let's decompose our task:

• Add a new field to Vue app in order to hold the list of messages
• Add Vue method for adding a new message
• Display the list of messages using markdown

First of all, let’s change ChatApp.vue and add required logic: new field messages for holding the list of messages and method addMessage. Don’t forget that after adding a new message it will be good to clean textarea. For future convenience let’s store a submission date along with the message’s text. It will allow future extension of the message by additional fields, for example: author, priority, highlighting , etc.

Also, we have to change HomePage.html to render the list of messages and a handler for pressing Ctrl-Enter to add our new message through addMessage.

After running mvn jetty:run and some test chat with yourself, you can see something like this:

In this chapter, we learned how to add a new message and display a list of them on the page just by using VueJS.

Need help? Check this commit on GitHub

Step 4: Enable Collaboration

On the previous step, a content of our guest book was unique per visitor and not shared with a server.

In this step, we will enable a connection with the server and synchronization with all visitors. To do that we would need to use Vuecket Data Fibers, a special solution, which allows data synchronization between client’s and server’s sides. Moreover, to do that it’s sufficient to change only the server-side! Nothing to do on the client-side. Sounds amazing? Let’s go to code! But, wait… There are only 2 new lines of code for ChatApp.java:

All right, what’s just happened?

• We created Wicket IModel MESSAGES, which is accessible by everyone, because it’s defined as static final
• We added data-fiber, which links together data in MESSAGES from server and messages field on the VueJS side.
• We defined that data-fiber is needed for 3 things: load, observe, and refresh. Load — for the initial load of the messages list, observe — for letting the server-side know that messages was changed on the client-side, refresh — for updating messages on the client-side, if there are changes on the server one.

After running mvn jetty:run and sharing the link with your friends, you can observe something like this:

Need help? Check this commit on GitHub

Step 5: Server-Side Methods

I cheated a little bit in the previous chapter for a good purpose by providing full read-write access to MESSAGES to all site visitors. It’s highly not recommended to do because everybody can overwrite all messages on the server-side through data-fiber or even erase them. It’s recommended to use data-fibers synchronization from the client-side to the server-side only for objects which belong to the current visitor.

How can we fix that?

• Use our data-fiber only for the initial load of messages
• User server-side method for adding a new message

After these sub-steps, visitors will be able to add new messages to the list and will NOT be able to remove or change the existing ones. Also, let's make the server-side a little bit more complex by adding a new class Message to store the actual message instead of just a pure JSON object. Btw, this class can be JPA enabled to allow to store/retrieve it from a database.

Please pay attention to annotation @JsonProperty. By defining it we can retarget JSON field message to Java field text.

Let’s change ChatApp.java as well: add the Vuecket method for adding a new message. Also, you can find out in the code below the trimming of the list of messages. It was done to keep the list relatively short.

Do you see method annotated by @VueMethod? Here we are obtaining our new message as an instance of the class Message, adding to the list and trimming the last one. Finally, we are sending an updated list back to the client-side. Also, please pay attention that the data-fiber was reconfigured to do only the initial load of the messages.

Also, we need to change the logic in ChatApp.vue to send a new message to the server in asynchronous mode (vcInvoke) instead of adding it just locally.

What we have just learned:

• How to create Vuecket server-side methods
• How to invoke server-side methods
• How to send back changes on server-side

For common users, nothing will change, but hackers will not be able to change/erase messages on the server-side.

Need help? Check this commit on GitHub

Summary

There are multiple other enhancements that you can do for this application, but let us keep it up to you, dear reader. If you will need any help you know where to find us!
Do you like Vuecket? Please share your feedback. Community opinion is the main driver for any Open Source project as Vuecket.

P.S. Near-term Vuecket Road Map

• Support of WebSockets for even more reactive connection between server-side and client-side
• Ability to send the only delta between browser and server
• More configuration abilities for data-fibers
• Set of Vuecket/Wicket components which prewired with most interesting and used VueJS libraries, for example, vue-markdown (which we used in this tutorial)