Vue.js communication part 2: parent-child components

Many Vue.js app components will probably have some sort of parent-child relationship. In this part of the series I aim to talk about common patterns as well as anti-patterns that you should avoid.
If you follow the basic structure you should be safe for the future.
The goal is to understand how to write reusable components that are independent from the parent.

This is the second article of a series of Vue.js communication articles.

Outline

Continue reading

Vue.js communication Part 1: single component

About the series

Communication in Vue.js is one of the first topics you’ll have to learn about. I came from writing Rails front-ends, mostly server side rendered and using a little bit of jQuery here and there when I was starting to write Vue.js code.

Even though these kinds of frameworks have been around for a long time, it might still be a little bit complicated to wrap your head around frameworks that work with components, which are supposed to create separately but need to communicate to work together.

This is the first article of a series of Vue.js communication articles.

Outline

Continue reading

JSFiddle starter for Vue.js

Do you want to create a JSFiddle to shoot out a quick Vue test, proof of concept or bug report?

Vue’s webpack setup gives you section dedicated for your templates.
Most JSFiddles I see have the template in the JS window using Vue’s template attribute.

I’ve prepared a fiddle that lets you use the HTML section.

Check it out:

Please, share your stuff in the comment below to show off your work!

LINK: JSFiddle starter for Vue.js

Continue reading

Guide: How to use Vue.js with jQuery Plugins

UPDATE

I’m not sure I can recommend that for vue2 anymore. I’m not sure what that solution would be but I would probably go for components now.

The original article is here:

Working with Vue can be awesome. But you might know that it can also give you headaches, when you try to combine it with jQuery plugins or other libraries.

The problem is that jQuery works fundamentally different than Vue. Vue renders everything based of the component’s core data. jQuery is mostly meant to do simple click handling and has powerful abilities manipulate the DOM.

When I looked for help myself I have found some unsatisfying solutions where components did do all the initialization work.
Let me show you how I would combine Vue.js and jQuery.

What’s the goal?

In most cases you can omit using jQuery and find a simple Vue based solution to your problem. Modals, sliders and so on are pretty simple with a Vue component and CSS.

So the goal is to use powerful jQuery plugins that cannot be written quickly in Vue.

We will …

  • … use Vue directives to build a bridge to jQuery.
  • … initialize the plugin when the element is attached.
  • … destroy it when the element is detached.
  • … send events to notify the component.
  • … receive events from the component and pass them to the plugin.

Continue reading

6 Strategies to Keeping up with Web Development

JavaScript, CSS and HTML have evolved and are facing constant change. New frameworks, tools and services appear every month. Unfortunately, many web developers fear to lose the connection to web development that they used to have.

Some might even fear not being able to find a new job because they’ve never used Angular or don’t know anything about Webpack.

I experienced the same thing 3 years ago when everything I used to write was server side rendered with a sprinkle of CoffeeScript in a comfortable Rails environment.

“But, how can I keep up with all the new technology popping up?”

There is no direct answer, as there are a handful of ideas to what you can do to set yourself in a better position.

Let’s dive deeper.

Continue reading

7 ways how to define functions in JavaScript

I remember that I was getting confused from time to time when I was learning JavaScript many years ago.

One of the strange things was how people used functions definitions in their code.
When I looked at code at code from friends or co-workers I quickly discovered that there are many ways how to create functions in JavaScript.

But I couldn’t figure out why people choose one over another.

This list will bring offers you a clear understanding of the benefits and downsides of each way.

You’ll write a lot of functions when you become a JavaScript developer.
Time to step up the game.
Continue reading

Your Marionette.ItemView isn’t rendering the template?

If you’re new to MarionetteJS chances are you do the same mistake I did.

Not even the Marionette Gitter group could help me with this. It’s absurd that something that trivial could end up costing me hours of time to solve.

Let’s say you have a Marionette.CollectionView (or a Marionette.CompositeView, as it inherits from it) and a Backbone.Collection ready.

As soon as you pass this collection to a new Marionette.CollectionView, it should iterate over the collection and create a new ItemView for each item in the collection.

In my case it worked like 50%. A HTML Tag appeared for each model in the collection but it was empty.

Here is some supporting code:

/* some content */

I’ve wondered why the onRender and onBeforeRender methods don’t work.

Double-check that you’ve extended from Marionette.ItemView instead of Marionette.View!

This mistake is easy to overlook and then hard to find because there won’t be helpful error logs.

Quote from the documentation:

Note: The Marionette.View class is not intended to be
used directly. It exists as a base view for other view classes
to be extended from, and to provide a common location for
behaviors that are shared across all views.

Marionette.View might be renamed to Marionette.AbstractView in version 3. It would then be more obvious that you shouldn’t extend it directly.

I hope you find this article if you google about Marionette.ItemViews’ templates not being rendered. It would have saved me hours of debugging.

Best,
Christian