Step by step to run Vue application in BSP
As I mentioned in my blog Is jQuery based UI Framework Obsolete, during one of my onsite support to a local Chinese customer, I discuss SAP UX strategy with their IT team. The team architect is a fan of Vue, who prefers to use Vue in their UI custom development instead of Fiori. Then I am curious about the advantage of Vue and plan to learn it in my spare time. As always a Vue Hello World must be finished before advantaged content is touched.
What is Vue
Vue is another UI framework based on MVVM which has more than 48000 stars ( till 2017 March ) in Github and now has 77000 + stars ( 2017 December ).
I will first finish development locally and finally upload the tested application to Netweaver running it as a BSP application. You should have some basic knowledge on nodejs, npm and webpack to follow this blog.
Detail steps for hello world tutorial
1. create a folder in your laptop, type “npm init” in command line to trigger the generation of dummy package.json. Just directly press enter key to finish the creation wizard, so that all default settings are used for package.json.
Type “npm install –save-dev webpack-dev-server” in command to install a light weight server which could be used for your local testing.
Repeat the command to install other necessary module:
- css-loader
- vue-template-compiler
- webpack
- vue-loader
- vue-router
So far all such installed modules are just required for development. Install runtime dependent modules vue and vuex with command:
npm install –save vue vuex
Once done, your package.json should look like below:
The highlighted script is manually added to ease the local testing, which will be illustrated later.
2. Create a folder src under the root folder. Create a new file “index.vue” and paste the following source code:
<style>
h2{
color: red;
}
</style>
<template>
<h2>Jerry: Hello, World!</h2>
</template>
<script>
module.exports = {
data: function(){
return {};
}
}
</script>The HTML source code <h2>Jerry: Hello, World!</h2> under <template> tag represents the view part of this Vue application and will be rendered in the final HTML page.
Go back to the root folder, create a new file main.js:
import Vue from 'vue';
import AppJerry from './src/index.vue'
new Vue({
el: "#demo",
components: {
app: AppJerry
}
});The constructor of Vue in the source code will simply mount the imported Vue component( implemented in ./src/index.vue) into the given HTML element specified by id=”demo”.
So create index.html and declare the div element with id=”demo”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world</title>
</head>
<body>
<div id="demo">
<app></app>
</div>
<script src="dist/build.js"></script>
</body>
</html>So far the index.vue in folder src could never be directly recognized by browser, so a conversion mechanism from .vue to .js is necessary here. The converted js from index.vue is stored in file dist/build.js. The next step is how to define and trigger such conversion.
3. Create a file webpack.config.js in root folder:
var path = require('path');
module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpg|eot|svg|ttf|woff)/,
loader: 'url?limit=40000'
}
]
}
}This file defines a configuration for webpack: when you type “webpack” in command line, the file “main.js” will be treated as pack input, the index.vue imported in this file will be converted and the corresponding Javascript source code is stored in file “./dist/build.js” as pack output.
So far all development / configuration is done. You should have the following content in your root folder:
4. type “webpack” in command, and you can observe the build.js is converted successfully.
It has 323KB because the necessary code to run Vue is also combined into this file so my index.html does not need to include Vue.js any more. Search keyword by “Jerry” and you can find the converted source code which is compiled from the template in index.vue:
Type npm run dev to launch the webpack server:
Ensure the application runs well locally:
5. here now is the last step which is easiest for ABAPers: create a new BSP application in SE80, just import index.html and build.js, all other stuff mentioned before are only required in development time.
Test the BSP application and it works as well:
i don't know why no one commented 🙂 but i am seriously thinking that vue.js can overcome the performance issues of SAPUi5.
SAPUI5 applications are really heavy especially when it comes to 60+ columns with sap.ui.table. Practically, building sapui5 applications might be faster but i am still searching a way of running vue.js application in sap netweaver.
I have dropped SAPUI5 for Vue as well. For me the learning curve is quite steep compared to Vue.
Hope that SAP will add more and more controls to Fundamental Vue.
It is a really helpful article! Saved my day 🙂
Hi,
thanks a lot for sharing your experience. It is truly inspiring!
I think Vue is the right choice. Lightweight, fast and easy to learn.
After reading your articles i have decided to create a sample so i can make rest based Vue & axios apps on gateway and use them on Fiori launchpad.
So, basically, i have created a BSP page to return Json (all biz logic is handled on R3 ERP and gateway just passes values between) and a vue html interface to consume that. Now, i do not need to waste time with OData and Fiori.
Here is the SAP Blogs post
Great article,
I’ve done the same test with React/Redux and performance is really awesome comparing to SAPUI5 : thanks to virtual DOM (I think Vue JS is using the same thing) vs SapUi5-JQuery DOM.
Besides, we can use many tools like :
Has anyone done also routing with vue.js inside a BSP?
I totally agree that OData is really cumbersome but on the other hand, the generation of all the OData services from HANA and according views is just a few clicks.
When it comes to integrating value helps, table sorts and filters OData combined with Fiori brings fast results where we have to code quite a bit with a vue.js application.
Thank you very much for providing your results!