Using Vue.js with Hypernova Server

Last week I was playing with Hypernova in order to embrace a Micro-frontend Architecture, but the first challenge I faced was integrating Vue.js because it only supports React.js out of the box; but after diving in the Hypernova code I achieved it 🙌, I created hypernova-vue and I want to share it with you!

How does it work?

A couple of years ago Airbnb released Hypernova based on the need to migrate their Frontend code to a consistent Architecture. Their High-Level Architecture consists of these components:

Diagram from Hypernova repo.

1. A user requests a page on your server.
2. Your server then gathers all the data it needs to render the page.
3. Your server uses a Hypernova client to submit an HTTP request to a Hypernova server.
4. Hypernova server computes all the views into an HTML string and sends them back to the client.
5. Your server then sends down the markup plus the JavaScript to the browser.
6. On the browser, JavaScript is used to progressively enhance the application and make it dynamic.

Isomorphic Web Applications with SSR Server

Nowadays there are several frameworks, such as Nuxt.js, for creating Isomorphic Web Applications in order to use the same components for Server Side and Client Side Rendering.

So why should we use an SSR Server?

An SSR Server allows keeping a Frontend application agnostic about the framework used to render the views so it can use any programming language regardless of what’s used on the SSR Server, with this approach you can gradually migrate existing Web Applications, as well as, embrace a Micro-frontend Architecture.

Building our Hypernova Server

You can clone the repo.

marconi1992/hypernova-vue-example

The repo contains two folders vue-server for our SSR server and aggregator-server for our Frontend application.

Inside the vue-server folder, its necessary to run npm install or yarn to get all the required dependencies.

hypernova

hypernova-vue

vue

vue-server-renderer

The vue-server also contains other dependencies to transpile our code using webpack and the corresponding loaders.

We have the set-up for our hypernova server into the index.js file.

1. The hypernova server is created using the hypernova factory function.
2. The getComponent function returns the component decorated with the bindings of hypernova-vue
3. Vue.extend is used to create a component based on the definition.
4. A custom express application is instantiated in order to expose the client.js script for the browser. (I’ll explain what it is about a detail below)

The ProductList.vue is using the SFCs definition.

Running our Hypernova Server

We need to run yarn dev to start our Hypernova Server.

In order to test it, we can use Postman to request our view on http://localhost:3030/batch using POST method.

Hypernova server will return our view.

Building our Hypernova Consumer

The aggregator-server contains the code necessary to request and consume the views from Hypernova Server.

The index.js file contains the set-up for the application.

1. An express application defining a new route /.
2. getContent gets the view from the Hypernova Server.
3. The content view is added to the page template using interpolation. (You can use a template engine to make it cleaner, but I just used interpolation to make it simple).
4. Return HTML back to the user browser.

The getContent function requests the view from Hypernova server providing the view data (It should come from any storage)

Note: The Hypernova Consumer contains the styles for the components because the aggregator server is usually responsible to implement the branding and look and feel.

Running Hypernova Consumer

We need to run yarn start or npm run start to start our Hypernova Consumer.

Opening http://localhost:8080/ in any browser we’re gonna see the view.

Enabling Client-Side Hydration

Hydration refers to the client-side process during which Vue takes over the static HTML sent by the server and turns it into dynamic DOM that can react to client-side data changes.

The Hypernova Server is also responsible for building the client-side scripts through the server or a CDN.

The client.js script is creating the client binding for Hypernova and calling it in order to hydrate all the components found on the DOM.

Finally clicking on the Add Item button on the page we’re gonna see another item added.

Conclusion: Hypernova is helpful to develop an agnostic Frontend application that can embrace a Micro-frontends architecture.

Next Step: Micro-frontends using Hypernova.

Thanks for reading!! 😃

Thanks to Rafa Salazar for helping me to improve the article content.