New post
Announcement
· Sep 18, 2017

Node.js: vue-qewd - Vue.js plugin for creating web apps with QEWDjs using WebSockets

#JavaScript #Node.js #REST API #Vue.js #ZEN #Caché

As an advanced alternative for REST calls, the new vue-qewd plugin for Vue.js allows easy integration with QEWDjs using WebSockets.

For developing web applications with the very popular Vue.js framework with a Node.js back-end using QEWDjs, I have developed a plugin that makes it very easy to integrate your Caché database/application server.

Vue.js allows you to bind to your Caché database using REST, using one of the standard http modules like Axios, as you can see in this example code.

But if you want a permanent connection between your browser application and your QEWDjs/Caché back-end, a WebSocket connection is a much better way of linking your front- and back-end.

The new vue-qewd plugin for Vue.js makes this integration very easy. The README of the module will get you started already, but I will also post more detailed step-by-step instructions to get started with Vue.js application development.

Btw, for developers already familiar with ZEN, the concepts introduced by Vue.js will look very familiar. Vue.js is also very lightweight and comes very close to plain vanilla HTML/CSS development as you do in ZEN too. The learning curve is very flat and you'll feel at ease in a couple of hours.

I also added a very basic example with REST calls to show you how Vue.js code looks like. 

If you want  to learn Vue.js completely from the ground up, I can recommend this excellent training course by Maximilian Schwarzmüller.

Discussion (6)2
Log in or sign up to continue
Ward De Backer · Sep 19, 2017

I completely agree Herman! Vue.js looks so "natural" once you start coding with it that you ask yourself the question: "why didn't I think of this before?" ...

IMHO, there's also one big difference between Angular and Vue.js: Angular is a "complete" framework in the sense that it contains all functionality you may need (what makes it big and heavy - 452 kB minified!) while Vue.js is a library for your view + business logic (what makes it so compact and lightweight - only 16 kB minified). With Vue.js, you only include functionality you need for your application. One would argue that with current hardware devices this is no longer an issue, but the performance hit lies in the execution of this amount of code at runtime, which makes it slower the bigger the framework code is.

In fact, the guy who started Vue.js (Evan You) was first working at Google Labs with Angular where he saw the need to make an easier to understand, much more compact library allowing you to do the same with a flat learning curve. When you see Vue.js now with it's companion libs like Vuex, I think he did a really great job!

1 0
John Bertoglio · Mar 23, 2018

Thank you Ward.

BTW, I am half way through the huge training course...best $20 I have ever spent. Thanks for the recommendation. If I had known how good it is, I might of even paid the "list price" of $189.00 :)

Vue is awesome. It takes the best of Angular 1.X and adds the performance of React.  Once I finish the Vue course I will give your QEWD tooling a shot.  It looks like this is going to evolve into our standard.

John Bertoglio

0 0
Ward De Backer · Mar 24, 2018

Hi John,

I'm happy to hear the course was useful for you! 

Btw, I can also recommend the YouTube channel from the Frontend Developer conference lately in Amsterdam:
https://www.youtube.com/channel/UC1nBp6ouBB1o5P8YvPznPOw

You'll find a featured video there from the creator of Vue.js (Evan You) about how Vue.js will go forward. Btw, in terms of GitHub stars, the Vue.js project currently has 88k stars while React has 91k - it became quickly one of the leading frameworks and adoption is comparable to React. 

I'm also more and more convinced Vue.js is a very complementary front-end for Caché/IRIS (and a natural fit) because of it's simplicity, flexibility and feature richness:

  • simplicity: if you worked with HTML, CSS & JavaScript in a CSP page, your can write Vue.js pages too
  • flexibilty: excellent for existing (bigger) applications because you can even replace pieces of your application with Vue.js controlled fragments - no need to rewrite your existing applications completely!
  • feature rich: under the hood, it uses modern JavaScript technology in the browser (it won't work on Internet Explorer 6 wink) to make your client side application code reactive by design

It's very easy to learn and allows to bind your front-end to your back-end using the technology you prefer like WebSockets (using QEWD), REST, GraphQL, ...)

1 0