Majesty of Vue.js book Released and it’s Awesome!

Access all tutorials in sprocket icon.

Published April 16, 2016 by Bill Keck.

Majesty of Vue.js now available at Leanpub

My friends, the long dark javascript nightmare is coming to an end. At least that is what it feels like. We live in an exciting time because, with the release of ECMA script 6, javascript is finally starting to resemble syntactically consistent language.

Now I may just be speaking from personal experience, but I have always hated javascript. And when I say hated, I mean hated with a passion. It just seems like such a mess. Even the very idea of stuffing everything into a single file that the browser loads just seemed ridiculous. And then of course there is the spaghetti itself…

Well, things are changing quickly with ECMA script 6 finally supporting modules that let us separate our code. We’ll have to see how long it takes for that feature to become common in browsers.

In the meantime, Laravel Elixir can transpile ECMA script 6 into plain javascript for us, another amazing feature of Laravel. Laracasts has a very good series on elixir that can get you up and running quickly, so I recommend checking that out.

If you are like me, you follow Laracasts religiously, not only for Jeffery Way’s awesome tutorials on PHP and Laravel, but also for current trends. So I found it really interesting that a while back Jeffery started talking about the Vue javascript framework. He predicted it would be big. He was right.

To be honest, when I first saw it, a lot of it went over my head. The series moved quickly and although the videos were interesting, I wasn’t retaining much, always a problem when I’m digesting a lot of new information.

Since we were starting to use Vue at work, I felt the need to start working with it. I incorporated a basic data grid, written in Vue in my ViewMaker plugin for artisan. But I was frustrated that I didn’t know how to include the same functionality as my datatables jquery version, so I started looking around for online tutorials. I watched the Laracasts series again.

I pretty much realized that I wasn’t getting anywhere. That’s no knock on the videos, they’re great, but I didn’t know how to move towards what I wanted. And because Vue is fairly new, I couldn’t find any good examples online.

So this last weekend, I found myself googling “Vue.js book”. And what do you know, just 4 short days ago, a book is released on Vue called the Majesty of Vue by Alex Kyriakidis, Kostas Maniatis and Evan You. I give the book 5 stars, it is extremely well-written.

For anyone who doesn’t know, Even You created Vue.js, and 30% of the proceeds of the book go to Evan You. Hopefully this will help him continue his great work.

I don’t normally refer to a lot of technical books on this site. It’s not because I don’t read them. Most I don’t like because they are riddled with errors, and I try to avoid saying negative things about other people’s work.

So it’s great to be able to talk about the Majesty of Vue because it is an excellent book on Vue js and covers all the important topics, standing you up from scratch in a very intuitive way.

I really loved this book because they gave me little details that stopped me from being tripped up.

For example, they take the time to explain that the instance of Vue will only bind to the first instance of the element named in the Vue constructor. And in their examples, they were binding to Vue to the bootstrap container class.

Now I wanted to follow along in the book by doing everything from inside a laravel app, so I could be comfortable with putting the @ sign in front of the curly braces, since Vue uses the same braces as Blade and you have to escape them or blade will try to parse them. For example, if you had a name variable in your Vue data that you wanted to access inside of blade:



@{{ name }}

The problem I ran into by using blade was that I was already calling the container class from my master page, so when I copied it in again from their examples, it was actually the second instance of the element, not the first, so Vue was not bound to it and it did not work. But because they didn’t overlook a small detail and warned me in advance of that behavior, I instantly knew what the problem was.

As someone who is trying to make a lot of progress with Vue quickly, this was the right book at the right time.

I should point out that the book itself is a work in progress and currently sits at 144 pages, but I have to say, they are a very worthwhile 144 pages. I’m looking forward to seeing the book completed.

I don’t want to say that learning Vue is easy, even though it probably is if you are already proficient in javascript. I don’t live that world however. Even though I’ve read books on javascript, I always felt like a stranger in a strange land, like I was always trying to finish a conversation that someone else had started. But Vue is very digestible. It makes sense. It looks like programming. It has a syntax you can remember.

WordPress will strip out my div tags, but this will give you the idea:


create a div with an id="app"

//vue operates on elements between the opening and closing tag


//and in your script section: 

new Vue({ 

// binds the instance of vue to the element with an id of app 

el: '#app' 

});

That’s all it takes to wire it together, as long as you have a call to the vue.js file via cdn or local file. It works right out of the box.

As someone who has struggled with javascript, I feel like I’m actually learning something. I’m excited about the progress I’m making. I even wrote my first custom filter recently, and it just worked beautifully.

I won’t try to tell you all the great features of Vue, so many others are better at it than I am. I’ll just sum this up by saying that others are calling it the best javascript framework out there, I think they are probably right, and the Majesty of Vue is the perfect book to get you up and running. And at the same time, you’ll be supporting development of the framework, so it’s a win win for everyone.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s