Learning Frontend Development with Javascript and Vue 2.0

Access all articles in sprocket icon.

Published December 10, 2016 by Bill Keck.

Learning Javascript and Vue 2.0

Ok, so from time to time, I share resources that have aided me in my continuing education in programming. As those of you who follow me know, I’ve never been strong in front end development and that is something I’m currently working to change.

I recently reached out to Matt Stauffer, host of the Laravel Podcast, to see if he had a recommendation for learning frontend development. He was nice enough to make a recommendation, but before I tell you what he recommended, let me describe what I’m interested in learning.

I have found numerous tutorials online about html, css, javascript, etc, but the parts never seem to make up the whole. Yes, I can code basic Bootstrap like everyone else, but I never feel like I’m actually doing anything interesting or anything that would lead to a positive user experience.

I’m always lost when I try to conceive of the UX beyond basic Bootstrap. It’s like I want to write a beautiful sentence without having a vocabulary. Learning a word here or there doesn’t seem to help. I want to develop a sense for the flow of the language overall before I try to write anything. What does that mean in terms of UX? I don’t know, which is why I’m looking for help.

I’m a big fan of structure in learning. I’ve gotten so much from Laracasts, which we will talk about more in a minute, that I’m spoiled. I want that level of instruction in all learning.

As useful as Laracasts is, and it is incredibly useful for learning individual tools, it doesn’t help me develop the concept of UX. I want to learn and develop my UX capabilities from scratch. I want to be able to view application development from the standpoint of the frontend.

So I posed this question to Matt Stauffer and he recommended Code School, which is also online video instruction, coupled with online testing, which I really like. The cost of Code School is $29 per month, and it’s totally worth it, the quality of the instruction is awesome.

After completing a beginner course in html 5, I jumped into the javascript Road Trip series. Learning javascript is fundamental to developing a sense for frontend programming. Your application won’t be reactive without it.

I don’t know how you feel about javascript, but I’ve always hated it. Programming in javascript just always felt like a bunch of fragments thrown together in one big or small plate of spaghetti, depending on what the needs of the page are.

Recently, I started working with Vue 2, which is a javascript framework favored by many Laravel developers. It is powerful, but relatively easy to use, which is probably why it’s so popular. Vue 2 is supported by a book, the Majesty of Vue.js 2, which is excellent for learning the basics. I rate it 5 stars.

There’s also a brand new series on Laracasts for Vue 2, Learning Vue 2 step by step, which really showcases the power of Vue 2. It’s another top-notch series from Laracasts, you can’t go wrong there.

I should note that I cover the very basics of Vue 2 as well as creating an ajax-powered datagrid in my book, Laravel 5.4 for Beginners. That includes sorting, searching and pagination. But for more comprehensive learning about Vue, I recommend the Vue book and Laracasts.

With these resources, you can start to get a sense of the architecture and capabilities of Vue 2, and how it can add reactivity to your page. Reactivity is critical to modern design. The Laracasts series shows you, for example, how different components created in view can interact with each other via events. Cool stuff.

In the Code School series, which I’m still working my way through, it tackles the fundamentals of the javascript language, which is easy to overlook when you are coding patchwork in javascript. I tended just to learn what I needed for the moment and often forgot it as fast as I learned it. Now that I have more of a background in javascript, it is making more sense to me, though I still much prefer coding in PHP.

One reason why I always feel like I learn slowly is that I only feel like I know something if I really know it, not if I sort of know it. For example, for the longest time I would see references to the html DOM, domain object model, without really understanding what it is. I had just this fuzzy concept of an object. But what does that mean?

The DOM is a copy of all the html attribute tags, such as body, div, article, etc., held in memory, so that javascript can operate on it. So if you have a div with an id of “container”, for example, you can reference that div in javascript and operate on it. It’s really that simple.

This is why it’s important to study a language from the ground up. Doing so gives you a sense for how things work and why things are done a certain way.

Even as I study javascript, things are changing. ES6, also known as ECMAScript 2015, is a significant update to Javascript and has introduced new syntax and features. It’s a lot to get your head around if you are just starting. If you are not a fan of constant learning, you should have probably picked a career other than programming.

With Laravel Mix, you can easily integrate ES6 syntax and Vue.js into your applications, and there is a great Mix series on that in Laracasts.

Laravel ships with a sample Vue.js component and I cover how to implement that in Laravel 5.4 For Beginners. If you are using Laravel, you will find both Vue.js and Elixir invaluable.

But knowing all that doesn’t make you a great frontend developer. I’m still on the hunt for that. My plan now is to focus on Javascript and reactivity, then move into the more visual parts of the UX. On the javascript side, I expect this to take a year or more.

Learning programming is a journey and I feel like I’m finally well on my way to a deep dive into frontend programming. I still don’t have an artistic sense for it, but that is not my focus yet. I’m going to leave that for the very end, since I believe that in order to achieve artistic success, you must first have command over the tools that you need in order to create it. Javascript is absolutely essential for that.