Vue app in SCP

[SergioG_TX]

Hello Community - happy Friday again.

A few weeks ago, I was asked about Progressive web apps and my mind went directly to the google PWA and its documentation. I started reading all about them, and well, there are a few different options, one of them is a JavaScript framework called Vue.js

 

Pre-reqs: 

• Download the vue.js file for dev or vue.min.js for prod


• Knowlegde of HTML, and good understanding of JavaScript and its scope

 

Today, I would like to demonstrate a simple, yet comprehensive about the Vue framework with a simple tutorial app built on on SCP with my trial account (where the cool sh*t happens * hehe catchy phrase huh?).



warning if you are already a web developer with good understanding of HTML, and JavaScript, then this tutorial should be fairly easy to follow

 

This took me maybe about an hour to put together while reading documentation which I also found very helpful on their site. Thank you Vue team and let's get to work here



 

I started by downloading the vue.js file (similar to any other 3rd party library). I created a new app on the web ide full stack and by default, I created a new ui5 project. Then, I created a script folder where the Vue.js file will live. I created another js file (main.js) which will work as the entry point to my sample application. Lastly, I replaced the default content of the ui5 based html file with a few items I experimented with. In this tutorial, I will showcase the following:

• String Bind


• List bind


• User Input (2 way binding)


• Eventing (click and function call)


• Child Components *

the first 3 items above are simply to know more about how data binding works on this framework and interaction between view, model and controller (since this framework also follows an MVC like pattern)

my project looks like this:



my index.html file looks like this:



With more explanation of what I want to describe from the prev image:

a) string binding using mustache

b) 2-way binding with a model

c) binding an event (click)

d)  child  * Components - this is probably the highlight of the framework for me due to the fact that we can build the UI in a modular way so that we can build smaller chunks of mark up

 

my main js file looks like this:



 

the arrow above shows the entry point of the application with the new Vue constructor. also, notice, the constructor is bound to the element #app (div on my html) and its data is the object being return from the oData function.

** the Component property must be defined before the new Vue constructor. I tried moving it but it would not render in the right order. Please MAKE SURE YOU use all small leters for the component name (tcomp in my component) as upper case letters will not give you the component either 🙂 this one took me a few minutes to figure out.

 

Finally, the output (not pretty but you will see that the framework works)



 

and if my fibonacci function is correct ...



 

 

Pros:

• MVC like framework


• JavaScript, NodeJS, UI5, AngularJs syntax like (I already knew these)


• Easy way to trouble shoot on the browser


• Small 3rd size library (20KB min+gzip Runtime)


• Plays well with other js libraries


• the biggest selling point for me was that in their documentation page, there is a comparison between this lib and other JS frameworks such as React, Angular, AngularJs, etc

Cons:

• another JS framework to learn, read new documentation, maybe new tools


• there are some node examples that require additional knowledge of it and npm


• maybe too many JS frameworks out there and knowing which one works best/better

 

 

Has anyone used Vue for any other project ?  Please share your thoughts and experiences. Happy weekend

 

[former_member194460]

very nice!

[SergioG_TX]

thank you

[former_member185575]

Vue.js is a nice and easy to understand JavaScript framework – I loved their documentation. You could easily combine it with an OData library or implement the REST functionality with the JavaScript native “fetch” functionality by yourself and use the SAP Cloud Platform as a proxy for accessing data sources. I made a Chuck Norris example with Vue.js and data fetching via SAP Cloud Platform here: https://github.com/denisenepraunig/chuck-norris-jokes-vue-sap-cp

[SergioG_TX]

thank you Denise, I did see the Chuck Norris comment - 🙂 too funny. I am working on doing a part 2 of this vue library - on SCP of course! and i will definitely look into your recommendation -Thank you for reading and suggesting.

[htammen]

Nice article Sergio. It's always good to see what other companies do. I 'm currently exploring Elm. Not only a new framework with new tools but also a new language and paradigm.

If you want to see a SAPUI5 PWA example and learn more about it you could have a look at my presentation at Ui5con 2018

https://youtu.be/Zhn95ttkqm4

Regards Helmut

[SergioG_TX]

thank you Helmut - i 100% agree with you because that is one way to see what ui5 has than others do not... or what other frameworks do and how the ones we use could be enhanced. I usually go about learning and new framework and then comparing vs other ones in use. thank you for sharing your presentation from Ui5con 2018!

 

[mike_howles4]

Sergio,

 

I always enjoy your blogs.  I hope they are getting the attention they deserve.

[SergioG_TX]

thanks Mike!

[S0011572494]

I am trying to run a complex vue applicaton in sap cloud platform (With a webpack build, Vue files, routing and multiple nested components)

Unfortunately my vue components are not rendered..

Has anyone deployed a complex vue app on sap cloud platform with success?

 

I tried it first with a setup of a simple vue-router demo that should have access to the demo nothwind API.



The built distribution package runs fine under an apache httpd server but the custom vue component (router-view) is not rendered. There are no errors visible (console, network calls etc).

App.vue

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <router-view/>

  </div>

</template>



<script>

export default {

  name: 'App'

}

</script>



<style lang="scss">

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

import vueBemCn from 'vue-bem-cn';



Vue.config.productionTip = false;



Vue.use(vueBemCn);



/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import cHome from '@/components/c-home'

import cTest from '@/components/c-test'



Vue.use(Router)



export default new Router({

  mode: 'history',

  routes: [

    {

      path: '/',

      name: 'Home',

      component: cHome

    },

    {

      path: '/test',

      name: 'Test',

      component: cTest

    }

  ]

})

components/c-home.vue

<template>

  <div :class="b()">

    <h1 :class="b('title')">{{ msg }}</h1>

    <h2 :class="b('sub-title')">Test routing:</h2>

    <ul :class="b('list')">

      <li :class="b('item')">

        <router-link :class="b('link')" to="/test">Go to Test</router-link>

      </li>

    </ul>

    <router-view/>

  </div>

</template>



<script>

  export default {

    name: 'c-home',

    // components: {},

    // mixins: [],



    // props: {},

    data() {

      return {

        msg: 'Homepage',

      }

    },



    // computed: {},

    // watch: {},



    // beforeCreate() {},

    // created() {},

    // beforeMount() {},

    // mounted() {},

    // beforeUpdate() {},

    // updated() {},

    // activated() {},

    // deactivated() {},

    // beforeDestroy() {},

    // destroyed() {},



    // methods: {},

    // render() {},

  };

</script>



<style lang="scss">

  .c-home {

    &__title, &__sub-title {

      font-weight: normal;

    }



    &__list {

      list-style-type: none;

      padding: 0;

    }



    &__item {

      display: inline-block;

      margin: 0 10px;

    }



    &__link {

      color: #42b983;

    }

  }

</style>

components/c-test.vue

<template>

  <div :class="b()">

    <h1 :class="b('title')">{{ msg }}</h1>

    <h2 :class="b('sub-title')">Test routing:</h2>

    <ul :class="b('list')">

      <li :class="b('item')">

        <router-link :class="b('link')" to="/">Go to Home</router-link>

      </li>

    </ul>

  </div>

</template>



<script>

  export default {

    name: 'c-test',

    // components: {},

    // mixins: [],



    // props: {},

    data() {

      return {

        msg: 'Test seems to work!',

      }

    },



    // computed: {},

    // watch: {},



    // beforeCreate() {},

    // created() {},

    // beforeMount() {},

    // mounted() {},

    // beforeUpdate() {},

    // updated() {},

    // activated() {},

    // deactivated() {},

    // beforeDestroy() {},

    // destroyed() {},



    // methods: {},

    // render() {},

  };

</script>



<style lang="scss">

  .c-test {

    &__title, &__sub-title {

      font-weight: normal;

    }



    &__list {

      list-style-type: none;

      padding: 0;

    }



    &__item {

      display: inline-block;

      margin: 0 10px;

    }



    &__link {

      color: #42b983;

    }

  }

</style>