DEV Community: Felipe Guizar Diaz

Universal Rendering in Laravel using Vue.js and Ara Framework

Felipe Guizar Diaz — Thu, 29 Aug 2019 03:05:11 +0000

This article was originally written in Ara blog.

Universal Rendering consists in rendering pages on the server and making them interactive on the browser using the same view components built with a library such as React, Vue.js, Angular, etc.

Nowadays, JavaScript frameworks such as Next.js, Nuxt.js and NgUniversal make this duty easier. However, how can we achieve it on non-JavaScript frameworks like Laravel?

Setup Laravel

Download Laravel installer using Composer.

composer global require laravel/installer

Create a folder named ara-laravel and run the following command inside the folder to create a Laravel project.

composer create-project --prefer-dist laravel/laravel laravel-site

Once the project is created run the Laravel application on http://localhost:8000/.

php artisan serve

Browser:

Set up the Nova service

We'll create a Nova service using Vue.js.

Install Ara CLI:

npm i -g ara-cli

Create the Nova service:

ara new:nova -t vue nova

Go to the Nova service folder:

cd nova

Run Nova service:

yarn dev

The Nova service runs on http://localhost:3000.

Test the Nova Service.

Once the Nova service is running you can make a POST request to http://localhost:3000/batch using a payload like:

{
  "uuid": {
    "name": "Example",
    "data": {
      "title": "Ara Framework"
    }
  }
}

The results property in the response contains the html of the view rendered by the Nova service.

Example:

{
  "success": true,
  "error": null,
  "results": {
    "uuid": {
      "name": "Example",
      "html": "<div data-hypernova-key=\"Example\" data-hypernova-id=\"4d9e81bd-6413-4661-ab56-ed5bb4f59cae\"><h1 data-server-rendered=\"true\">Ara Framework</h1></div>\n<script type=\"application/json\" data-hypernova-key=\"Example\" data-hypernova-id=\"4d9e81bd-6413-4661-ab56-ed5bb4f59cae\"><!--{\"title\":\"Ara Framework\"}--></script>",
      "meta": {},
      "duration": 1.210146,
      "statusCode": 200,
      "success": true,
      "error": null
    }
  }
}

Setup Nova Directive in Laravel Blade

Install Nova Directive for Laravel Blade using Composer inside the laravel-site folder.

composer require marconi1992/hypernova-blade-directive

Add NovaServiceProvider in application config config/app.php


return [
    ...
    'providers': [
        ...
        Illuminate\View\ViewServiceProvider::class,
        /*
         * Package Service Providers...
         */
        Marconi\Nova\NovaServiceProvider::class,
        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        ...
    ]
    ...
]

Use Nova Directive in a Laravel view

Add the Example view on the welcome page.

resources/views/welcome.blade.php

<html>
    ...
    <body>
        ...
        <div class="content">
            <div class="title m-b-md">
                Laravel
            </div>
            <!-- Nova Directive starts -->
            @hypernova('Example', [ 'title' => 'Ara Framework'])
            <!-- Nova Directive ends -->
            <div class="links">
                <a href="https://laravel.com/docs">Docs</a>
                <a href="https://laracasts.com">Laracasts</a>
                <a href="https://laravel-news.com">News</a>
                <a href="https://blog.laravel.com">Blog</a>
                <a href="https://nova.laravel.com">Nova</a>
                <a href="https://forge.laravel.com">Forge</a>
                <a href="https://github.com/laravel/laravel">GitHub</a>
            </div>
        </div>
        ...
    </body>
</html>

Server-side rendering

The Nova View is not rendered yet, we need to implement Nova Proxy in order to server-side render and include the Nova views.

The Nova Direvitve renders a placeholder that contains the necessary information to enable Nova Proxy to communicate with the Nova service and include the Nova view.

<div data-hypernova-key="Example" data-hypernova-id="d198fa6c-c9ec-11e9-a223-8c85903a4c93"></div>
<script type="application/json" data-hypernova-key="Example" data-hypernova-id="d198fa6c-c9ec-11e9-a223-8c85903a4c93"><!--{"title":"Ara Framework"}--></script>

Nova Proxy

Nova proxy is a service to implement Universal Rendering with any view library (React, Vue.js, etc) on any web platform (Laravel, Flask, etc). For example, in this demo, we'll render a view using Vue.js into a web application built with Laravel.

How it works:

A user requests a page to the Nova Proxy.
The Nova Proxy passes the request to the website server.
The website uses a Nova Directive to render the placeholders where the Nova views should be included.
The website sends back the HTML generated to the Nova Proxy.
The Nova Proxy includes the Nova views on the placeholders and sends back the HTML to the browser.

Finally, on the browser, JavaScript is used to progressively enhance the application and make it interactive. Read more here about the Nova Architecture.

Setup Nova Proxy

Create a configuration file for Nova Proxy in the root folder:

touch nova-proxy.json

Add the following configuration in nova-proxy.json file to proxy the incoming requests to the Laravel web server.

{
  "locations": [
    {
      "path": "/",
      "host": "http://localhost:8000",
      "modifyResponse": true
    }
  ]
}

Run Nova Proxy

Before running the command we need to set the HYPERNOVA_BATCH variable using the Nova service endpoint.

export HYPERNOVA_BATCH=http://localhost:3000/batch

You need to run the following command where the noxa-proxy.json file was created or pass the --config parameter with the configuration file path.

ara run:proxy --config ./nova-proxy.json

The command runs Nova Proxy on http://localhost:8080.

Now, see how the Nova view is displayed, it's because Nova Proxy includes the Nova view in the page coming from the Laravel application.

Browser:

Client-side rendering

The Example view is rendering only a simple heading. We can make it interactive adding an input element that changes the heading text.

Replace the nova/src/components/Example.vue with the following code:

<template>
  <div>
    <h2>{{title}}</h2>
    <div>
      <input type="text" v-model="title">
    </div>
    <br/>
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

Now, the Nova view displays an input element but the heading text doesn't change when we type something. It's because we need to add the client-side script.

Hydrate Nova views on the browser

Hydration is the process of mounting a view component on the browser using the state used when it was rendered on the server.

In order to hydrate the views we need to load the client.js script on the browser.

Update the welcome.blade.php file in the Laravel application:

<!DOCTYPE html>
<html lang="en">
<head>
    ....
</head>
<body>
    ....
    <script src="http://localhost:3000/public/client.js"></script>
</body>
</html>

Conclusion

Nova Proxy enables us to use modern view libraries on any web framework. So if you previously developed a web application using non-Javascript frameworks (Laravel, Flask, Ruby on Rails, etc) then Nova Proxy can help you to gradually migrate its views to a JavaScript view library (React, Vue.js) in a short period of time.

Implementing Microfrontends in Nuxt.js using Svelte and Ara Framework

Felipe Guizar Diaz — Wed, 28 Aug 2019 13:44:01 +0000

Demo code here

This article was originally written in Ara blog.

Nuxt.js is the most popular framework to easily develop Universal Applications using Vue.js. It also supports static websites, single-page, mobile, and desktop applications.

What is a universal application?

The main characteristic of a universal application is it uses the same JavaScript code on the server and browser. Therefore we can use the same Vue.js components to server-side and client-side rendering and get the benefits of both worlds.

This course video explains more about Universal Applications with Nuxt.js.

What do Microfrontends role play here?

We know the Frontend technologies evolve pretty fast. Nowadays, Svelte has become very popular, and more developers have started using it.

Sapper is one alternative to develop universal applications using Svelte. However, Sapper is not too much mature like Nuxt.js or Next.js. What if we could use Svelte in Nuxt.js?.

This is a perfect scenario where we can take advantage of the Tech Agnostic principle of Microfrontends. So, Why we need to wait until Sapper become to mature like other frameworks? We shouldn't. We can re-use what already exists.

Setup Nuxt project

Create a folder named ara-nuxt and run the nuxt app generator create-nuxt-app inside the folder:

npx create-nuxt-app nuxt-site

The command asks for some configurations, choose the default options.

Finally, run the Nuxt application inside the nuxt-site folder:

PORT=8000 yarn dev

The Nuxt application runs on http://localhost:8000.

Browser:

Setup Nova Service

Create a Nova service that use Svelte to render the Nova views.

Install Ara CLI:

npm i -g ara-cli

Create the Nova service:

ara new:nova -t svelte nova

Go to the Nova service folder:

cd nova

Run Nova service:

npm run dev

The Nova service runs on http://localhost:3000.

Test the Nova Service.

Once the Nova service is running you can make a POST request to http://localhost:3000/batch using a payload like:

{
  "uuid": {
    "name": "Example",
    "data": {
      "title": "Ara Framework"
    }
  }
}

The results property in the response contains the html of the view rendered by the Nova service.

Example:

{
  "success": true,
  "error": null,
  "results": {
    "uuid": {
      "name": "Example",
      "html": "<div data-hypernova-key=\"Example\" data-hypernova-id=\"4c08ba37-4b1a-4387-a883-99726e6b4617\"><h1>Hello Ara Framework</h1></div>\n<script type=\"application/json\" data-hypernova-key=\"Example\" data-hypernova-id=\"4c08ba37-4b1a-4387-a883-99726e6b4617\"><!--{\"title\":\"Ara Framework\"}--></script>",
      "meta": {},
      "duration": 1.210146,
      "statusCode": 200,
      "success": true,
      "error": null
    }
  }
}

Setup Nova Bridge in Nuxt.js

The Nova Bridge enables us to use Nova Views on any view library such as React, Vue.js, and others. Read more about Nova Bridge here.

Go to nuxt-site folder and install nova-vue-bridge in Nuxt.js:

yarn add nova-vue-bridge

Add @babel/plugin-transform-modules-commonjs plugin for babel in nuxt.config.js file.

nuxt.config.js

{
  ...    
  build: {
    /*
    ** You can extend webpack config here
    */
    babel: {
      plugins: [
        '@babel/plugin-transform-modules-commonjs'
      ],
    },
    ...
  }
}

Implement Nova view (Svelte) in Nuxt.js

Use the Nova component into a Nuxt page pages/index.vue.

Import Nova component:

<script>
import Nova from 'nova-vue-bridge'
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo,
    Nova
  }
}
</script>

Use Nova component in page:

<template>
  <div class="container">
    <div>
      <logo />
      <!-- Nova component starts -->
      <nova name="Example" :data="{ title: 'Ara Framework' }" /> 
      <!-- Nova component ends -->
      <h1 class="title">
        nuxt-site
      </h1>
      ...
    </div>
  </div>
</template>

Client-side rendering

Update the client-side entry point in order to render and mount the view on placeholder rendered by Nova Bridge.

nova/src/client.js

import { renderInPlaceholder } from 'hypernova-svelte'

import Example from './components/Example.svelte'

const { document } = global

document.addEventListener('NovaMount', (event) => {
  const { detail: { name, id } } = event
  if (name === 'Example') {
    return renderInPlaceholder(name, Example, id)
  }
})

Add client-side script on page:

pages/index.vue

export default {
  components: {
    Logo,
    Nova
  },
  head: {
    script: [
      { src: 'http://localhost:3000/public/client.js' }
    ]
  }
}

Run the Nuxt application again:

PORT=8000 yarn dev

Finally, the Nova view is rendered and mounted correctly displaying a heading text saying "Hello Ara Framework"

Browser:

Server-side rendering

The Nova View is not server-side render yet, so if we disable the client-side script nothing is displayed. We need to implement Nova Proxy in order to server-side render and include the Nova views. Read more about the Nova Architecture here.

Setup Nova Proxy

Create a configuration file for Nova Proxy in the root folder:

touch nova-proxy.json

Add the following configuration in nova-proxy.json file to proxy the incoming requests to the Nuxt application.

{
  "locations": [
    {
      "path": "/",
      "host": "http://localhost:8000",
      "modifyResponse": true
    }
  ]
}

Run Nova Proxy

Before running the command we need to set the HYPERNOVA_BATCH variable using the Nova service endpoint.

export HYPERNOVA_BATCH=http://localhost:3000/batch

Run the following command where the noxa-proxy.json file was created or pass the --config parameter with the configuration file path.

ara run:proxy --config ./nova-proxy.json

The command runs Nova Proxy on http://localhost:8080.

Now, see how the Nova view is displayed even if the client-side script is disabled, it's because the page coming from the webserver contains the rendered HTML for the Nova view.

Update the Example View

The Example view is just displaying a heading. We can update it adding an input that changes the heading text.

nova/src/components/Example.svelte

<script>
  export let title;
</script>

<div>
  <h1>Hello {title}</h1>
  <input type="text" bind:value={title}>
</div>

Browser:

Conclusion

Micro-frontends enable us to integrate different frameworks into the same page, but it doesn’t mean that we should mix frameworks arbitrarily. We should define standard frameworks and libraries across the company.

However, this level of isolation gives us the flexibility to evolve our web application along with the web technologies.

Universal Rendering in Flask using Vue.js and Ara Framework

Felipe Guizar Diaz — Sat, 24 Aug 2019 21:24:10 +0000

Universal Rendering consists in server-side render pages and make them interactive on the browser using the same view components built with React, Vue.js, Angular, etc.

Nowdays, JavaScript frameworks such as Next.js, Nuxt.js and NgUniversal make this duty easier. However, how can we achieve it on non JavaScript frameworks like Flask?

Nova Proxy

It's a proxy server part of Ara Framework to implement Universal Rendering with any view library (React, Vue.js, etc) on any web platform (Laravel, Flask, etc). For example, in this demo we'll render a view using Vue.js into a web application built with Flask.

How it works:

A user requests a page to Nova Proxy.
Nova Proxy passes the request to the website server.
The website uses a Nova Directive to render the placeholders where the Nova views should be included.
The website sends back the HTML generated to Nova Proxy.
Nova Proxy include the Nova views on the placeholders and sends back the HTML to the browser.

Finally, on the browser, JavaScript is used to progressively enhance the application and make it interactive. Read more here about the Nova Architecture.

Set Up Flask App

We'll use SAO to generate the base Flask application.

Install SAO:

npm i -g sao

Create Flask app:

sao marconi1992/create-flask-app ara-flask

Set Up Nova Directive

Notice the requirements.txt file contains a package named hypernova_jinja2_directive. It's used to render the Nova directives using the template engine for Flask (Jinja2).

Set up the nova helper for jinja into __init__.py:

from flask import Flask
from hypernova_jinja2_directive import nova
# Initialize the app
app = Flask(__name__, instance_relative_config=True)

# Load the views
from app import views

# Load the config file
app.config.from_object('config')


app.jinja_env.globals.update(nova=nova)

Run Flask App

The application generated contains a docker-compose.yml file to run the Flask app.

Run it:

docker-compose up -d

Test the Flask application on http://localhost:8000/.

Browser:

Set up the Nova service

We'll create a Nova service using Vue.js.

Install Ara CLI:

npm i -g ara-cli

Create Nova service:

ara new:nova -t vue nova

Go to the Nova service folder:

cd nova

Run Nova service:

npm run dev

The Nova service runs on http://localhost:3000.

Test the Nova Service.

Once the Nova service is running you can make a POST request to http://localhost:3000/batch using a payload like:

{
  "uuid": {
    "name": "Example",
    "data": {
      "title": "Ara Framework"
    }
  }
}

The results property in the response contains the html of the view rendered by the Nova service.

Example:

{
  "success": true,
  "error": null,
  "results": {
    "uuid": {
      "name": "Example",
      "html": "<div data-hypernova-key=\"Example\" data-hypernova-id=\"4d9e81bd-6413-4661-ab56-ed5bb4f59cae\"><h1 data-server-rendered=\"true\">Ara Framework</h1></div>\n<script type=\"application/json\" data-hypernova-key=\"Example\" data-hypernova-id=\"4d9e81bd-6413-4661-ab56-ed5bb4f59cae\"><!--{\"title\":\"Ara Framework\"}--></script>",
      "meta": {},
      "duration": 1.210146,
      "statusCode": 200,
      "success": true,
      "error": null
    }
  }
}

Update the Example view

The Example view is rendering only a simple heading. We can make it interactive adding an input element that changes the heading text.

Replace the nova/src/components/Example.vue with the following code:

<template>
  <div>
    <h2 class="title">{{title}}</h2>
    <input type="text" v-model="title">
  </div>
</template>

<script>
export default {
  props: ['title']
}
</script>

Set up Nova Proxy

Create a configuration file for Nova Proxy in the root folder:

touch nova-proxy.json

Add the following configuration in nova-proxy.json file to proxy the incoming requests to the Flask web server.

{
  "locations": [
    {
      "path": "/",
      "host": "http://localhost:8000",
      "modifyResponse": true
    }
  ]
}

Run Nova Proxy

Before to run the command we need to set the HYPERNOVA_BATCH variable using the Nova service endpoint.

export HYPERNOVA_BATCH=http://localhost:3000/batch

You need to run the following command where the noxa-proxy.json file was created or pass the --config parameter with the configuration file path.

ara run:proxy --config ./nova-proxy.json

The command runs Nova Proxy on http://localhost:8080.

Render Nova views (Vue.js)

Use the Nova directive in a Jinja2 template page:

app/templates/index.html

{% extends "base.html" %}
{% block body %}
  <div class="container">
    <h1 class="title">Hello Flask</h1>
    {{ nova('Example', {'title':'Ara Framework'}) }}
  <div>
{% endblock %}

The nova helper requires the name of the view, and the data necessary to render the it.

Open the page on http://localhost:8080 and notice the Nova view is rendered.

The rendered view is not interactive yet, if we type something in the input element the heading text is not updated. It's happening because we're not loading the client script.

Hydrate Nova views on the browser

Hydration is the process of mounting a view component on the browser using the state used when it was rendered on the server.

In order to hydrate the views we need to load the client.js script on the browser.

Update the base.html file in the Flask app:

<!DOCTYPE html>
<html lang="en">
<head>
    ....
</head>
<body>
    ....
    {% block body %}
    {% endblock %}
    <script src="http://localhost:3000/public/client.js"></script>
</body>
</html>

Finally, the Nova view rendered on the server is interactive and dynamic on the browser.

Conclusion

Nova Proxy enables us to use modern view libraries on any web framework. So if you previously developed a web application using non Javascript frameworks (Laravel, Flask, Ruby on Rails, etc) then Nova Proxy can help you to gradually migrate its views to a JavaScript view library (React, Vue.js) in a short period of time.