As a web developer, there is always that nagging feeling that you’re being left behind. For me, this is even more apparent for full-stack developers working in a smaller team, who have to keep on top of the full spectrum of technology that makes up a successful web application (front end, back end, database, DevOps, cloud - plus in my case, anything else vaguely IT related that my employer throws at me).
Most developers will now have some experience of using front-end frameworks like React, Angular and Vue.js (to name but three).
However, how do you make that initial transition from the familiarity of a typical web application that relies on jQuery for interactions? Not wanting to be left behind, I decided it was time to learn.
My thinking is that there must be a large number of developers in a similar position to me, so I thought I’d write this series of blog posts to share my experiences.
First step was to look at front-end frameworks and pick one as a starting point.
I looked at React, Angular and Vue.js - which seem to be the most popular three frameworks. Although my ultimate goal is to learn React (or perhaps have a working knowledge of all three), I picked Vue.js as the starting point.
If you're new to these frameworks, Vue.js seems to be a simpler transition from traditional HTML/jQuery pages.
To build an actual production application - yes, you may well have to become familiar with Node.js, Typescript and build processes. However, to play around with the basics, all you need is a single hand-written HTML file, with the Vue.js distribution included from a CDN (just like you would with jQuery).
As you dive in to what is pretty much a seismic change in front-end development, this sort of simplicity (and indeed familiarity) is very welcome.
So let’s start with a Hello World example:
As you can see, we're including Vue.js (the development version) from a CDN.
In the body of the document, I've created a <div> element with the id "vue" (this can be whatever you choose). Inside that element, I've included an <h2> tag, with the contents {{message}}
Then, looking at the <script> block, I defined a new Vue class object, tell it to bind it to the element #vue, and with one data property called message.
The result when viewed in the browser, is that Vue transforms our <div> into
That's enough for the first blog - which only meant to be a hello world introduction. Future blogs will cover the functionality of Vue.js in more detail.
I hope someone finds this useful, but please do use the comments box to provide any feedback.
Most developers will now have some experience of using front-end frameworks like React, Angular and Vue.js (to name but three).
However, how do you make that initial transition from the familiarity of a typical web application that relies on jQuery for interactions? Not wanting to be left behind, I decided it was time to learn.
My thinking is that there must be a large number of developers in a similar position to me, so I thought I’d write this series of blog posts to share my experiences.
First step was to look at front-end frameworks and pick one as a starting point.
I looked at React, Angular and Vue.js - which seem to be the most popular three frameworks. Although my ultimate goal is to learn React (or perhaps have a working knowledge of all three), I picked Vue.js as the starting point.
If you're new to these frameworks, Vue.js seems to be a simpler transition from traditional HTML/jQuery pages.
To build an actual production application - yes, you may well have to become familiar with Node.js, Typescript and build processes. However, to play around with the basics, all you need is a single hand-written HTML file, with the Vue.js distribution included from a CDN (just like you would with jQuery).
As you dive in to what is pretty much a seismic change in front-end development, this sort of simplicity (and indeed familiarity) is very welcome.
So let’s start with a Hello World example:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
</head>
<body>
<div id="vue">
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: "#vue",
data: { message: "Hello World!" }
});
</script>
</body>
</html>
As you can see, we're including Vue.js (the development version) from a CDN.
In the body of the document, I've created a <div> element with the id "vue" (this can be whatever you choose). Inside that element, I've included an <h2> tag, with the contents {{message}}
Then, looking at the <script> block, I defined a new Vue class object, tell it to bind it to the element #vue, and with one data property called message.
The result when viewed in the browser, is that Vue transforms our <div> into
<div id="vue">
<h2>Hello World!</h2>
</div>
That's enough for the first blog - which only meant to be a hello world introduction. Future blogs will cover the functionality of Vue.js in more detail.
I hope someone finds this useful, but please do use the comments box to provide any feedback.
Comments
Post a Comment