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:
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:
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:
Cons:
Has anyone used Vue for any other project ? Please share your thoughts and experiences. Happy weekend
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
- SAP Managed Tags:
9 Comments
