How a Front-End Framework Helped Me With Becoming "Full-Stack"
My experience going from back-end programmer to full-stack developer, and how picking up a front-end framework made all the difference.
- Career
- Full-Stack
- JavaScript
- Vue.js
This post was originally published on ITNEXT in April 2018.
In this post I’m going to talk about my experience going from a back-end programmer to a full-stack developer, and how picking up a front-end framework was the turning point that made it possible.
Background
I started my programming career as a back-end programmer. My first job was writing PHP using the CakePHP framework. I worked like this for about 2 years, writing back-end code together with some Vanilla JavaScript to make pages interactive. I knew the basics of HTML and CSS so that wasn’t a problem for me, but I never felt comfortable doing front-end development because of JavaScript.
My opinion of JavaScript was that it was a messy language without any real structure. A lot of problems arose from the lack of type checking and the inconsistency in the browser implementations of JavaScript APIs. So it was my “necessary evil” language and I tried to avoid it where possible.
How I started using Vue.js
My company started a new project where they wanted to build a web application with a rich user interface. A colleague of mine had heard about Vue.js and was excited about it. Together we did a Proof of Concept and we both got excited about it. The project was approved and Vue.js became the front-end framework of choice.
Now, about a year and a half later I’m comfortable calling myself a full-stack developer. Vue.js played a huge role in this transformation, mainly because of the following reasons.
Vue components
Before Vue.js, I had to keep track of the DOM state manually. You needed to find a DOM element by its ID or class, then change its properties. This would get messy quickly and was a nightmare to maintain.
Vue.js works with the concept of components. A component is a Vue instance with a name. All of the HTML, JavaScript and CSS that belongs together gets placed in a single .vue file. The component has a clearly defined interface by using props (input) and $emit (output). These components are reusable across your application.
<template>
<div class="user-profile">
<h1>{{ user.name }}</h1>
<p>{{ user.bio }}</p>
<button @click="follow">Follow</button>
</div>
</template>
<script>
export default {
name: 'UserProfile',
props: {
user: {
type: Object,
required: true
}
},
methods: {
follow() {
this.$emit('follow', this.user.id);
}
}
}
</script>
<style scoped>
.user-profile {
padding: 20px;
}
</style>Instead of spaghetti code spread across multiple files, you now have a clear and concise component. All the code that belongs to a feature is in one place.
V-model
One of the things that amazed me when I first used Vue.js was v-model. With v-model you can create a two-way binding on form elements. This means that when the user types something into an input field, the variable is automatically updated without you having to write any event listeners.
Before Vue.js I had to manually set up event listeners on input elements and update variables accordingly. The combination of this with DOM manipulation made simple forms unnecessarily complex. With v-model this is a thing of the past.
Easy to implement in existing applications
One of the things that sold me on Vue.js was that it doesn’t require you to rewrite your entire application. You can add Vue.js to any existing application by simply adding a script tag and start using it on a specific part of the page.
<!DOCTYPE html>
<html>
<head>
<title>My existing app</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<!-- Existing page content below -->
<div class="legacy-content">
<p>This is existing content that stays as-is.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello from Vue!'
}
})
</script>
</body>
</html>This was a game changer for me. I could start using Vue.js in small parts of the application and gradually migrate the rest. It lowered the barrier to entry significantly.
Data driven
One of the core concepts of Vue.js is that the UI is data driven. Instead of manually manipulating the DOM, you change the data and Vue.js takes care of updating the UI. This is made possible by the Virtual DOM.
The Virtual DOM is a JavaScript representation of the real DOM. When data changes, Vue.js creates a new Virtual DOM and compares it with the previous one (this is called “diffing”). Only the parts that have changed are updated in the real DOM. This makes updates very efficient.
// Without Vue.js — manual DOM manipulation
document.getElementById('counter').textContent = count;
document.getElementById('button').disabled = count >= 10;
// With Vue.js — data driven
data() {
return {
count: 0
}
}
// The template automatically reflects the data:
// <span>{{ count }}</span>
// <button :disabled="count >= 10">Click me</button>This shift in thinking — from “how do I update the UI” to “what should the data look like” — was one of the biggest mental shifts I made as a developer. It made front-end code much easier to reason about.
Conclusion
Vue.js gave me a structured way to write front-end code. The component system, the reactivity model, and the gentle learning curve all contributed to me feeling comfortable doing front-end development for the first time.
Before Vue.js, front-end development felt chaotic and hard to maintain. After Vue.js, it felt like a first-class discipline with proper patterns and structure — similar to what I was used to on the back-end.
Wrapping up
If you’re a back-end developer who feels uncomfortable with front-end development, I’d recommend giving Vue.js a try. It bridges the gap between the structured world of back-end development and the historically chaotic world of front-end JavaScript.
The low barrier to entry means you can start small — add it to a single page or widget — and grow from there. A year and a half after picking it up, I’m writing full Vue.js applications and actually enjoying front-end development. That’s something I never thought I’d say.