shershen08 / tailor-vue-demo

Using frontend microservices with zalando/tailor and Vue.js as frontend fw

Tailor + VueJS SPA demo

Inspired by React implementation.

This repository is an example application using the Mosaic frontend microservices architecture.

It makes use of Tailor only, so it is a pretty basic example.

Since the idea is that a separate team would be in charge of each of the fragments, there is some duplicate code within each of the fragments such as the Webpack configuration.

How it works

Tailor is a layout service. It is able to parse HTML templates and replace <fragment> tags for their respective bundles.

Tailor also injects a RequireJS bundle into your template so you're able to use Webpack Externals to share dependencies across fragments (such as vue).

Fragments

Fragments are small VueJS applications.

They might be VueJS applications, or any other implementation.

Fragments do not need to necessarily render something.

This app consists basically in a couple of fragments:

• fragments/dashboard
• fragments/header

Each fragment contains it's own webpack.config.js that specifies how to build it.

fragments/*

All the other fragments are parts of this application.

Those shared dependencies are listed as externals in their respective webpack configurations.

All of them are built using amd as a libraryTarget in their Webpack configuration files.

The dependency management is handled with RequireJS on runtime.

How to

Setting up

1. Clone this repository
2. Install all of the base dependencies with npm install
3. Install all of the fragment dependencies with npm run install-fragment-dependencies
4. Build the fragments with npm run build-fragments

Running

1. In one terminal, start the fragments servers with npm run start-fragments - then you'll have header anf dashboard running on 8090 and 8091 localhost ports respectively.
2. In another terminal, start the Tailor service with npm start
3. Navigate to http://localhost:8089

Running in development mode

1. In one terminal, start the fragments watchers with npm run watch-fragments
2. In another terminal, start the fragments servers with npm run start-fragments
3. In another terminal, start the Tailor service with npm start
4. Navigate to http://localhost:8089

Needed features

Sharing dependencies with fragment-common

TODO

Sharing styles

TODO

Some way to exchange data: state or message bus

TODO

Ideas and contributions

It's ongoing experiment. I believe that it could be a usefull POC for teams and individual developers who are using VueJs for their frontend and want to achieve more flexbility that microservices phiosophy gives.

Ping me on twiter @shershen08 or create a PR.