Why Vue.js?

Vue.js is a progressive web framework which means it can be used as little or as much as you want. Do you want to drop it into an existing page and just use it for one section? No problem. Do you want to build a full SPA (Single Page Application) with components, lifecycle hooks, state management, and application routing? No problem. If you don't know what all of that is, that's fine, Vue.js will grow with your needs.

Vue.js is also extremely fast with a small package size. It's very popular with a growing community and has a large number of packages that can be implemented to add things like drag and drop support or form validation. Vue.js has the 3rd most stars in Github's history and is currently being used by almost 4% of the top 10,000 websites in the world. Vue.js is one of the easiest frameworks to get started with as you don't need to learn JSX or anything like you would with React. Vue.js also has one of the best dev tools we've ever used for debugging a web app.

Let's take a look at some of the features that make Vue.js so great, and what the equivalent would be in FileMaker.

2-Way Data Binding

2-way data binding allows you to bind inputs, text, etc on a website to data stored in Vue so when a change is made to the input/text/etc, that change is automatically reflected in the data, and vice versa. This means everything stays in sync. To a FileMaker dev this might not sound so exciting as almost all of our work involves automatic 2-way data binding, but doing so in a web browser is a bit more challenging.

In the example below, we create about as simple of an app you can get. We have a paragraph tag that displays dynamically the content of 'message'. You can think of 'message' as a field in FileMaker. You'll notice the 'message' property is also declared in our Vue instance.

Then we have an input. This input can be tied directly to our message field by using the v-model directive. Directives are special attributes that help make our HTML interactive and react to changes in the state of our date. Now whatever we type in the field will show instantly in the paragraph tag above it.

Computed Properties

Computed properties allow us to create a value that will be automatically calculated based on the data in our app, and will automatically update if any of the data changes. Think of them as if they are stored calculations in FileMaker, because they will only calculate if a reactive property has changed. This means using Date.now() in a property will always return the date from the first time it ran unless another reactive property is changed.

Below is a simple computed property that will uppercase our message data property, outputting "HELLO" in our second paragraph tag. All of our computed properties will live inside of the computed object, and each property needs to call a function that returns some data. They don't have to return simple strings or numbers, they can return complex object and arrays as well.

Filters

In the previous example, we used a computed property to capitalize our message, but in reality, a better way to do so would be to use a filter. Filters are most commonly used for text, date, and number formatting. They are comparable to the data formatting FileMaker allows in the layout inspector palette. Filters are more flexible in that we can use them over and over, and are not tied to one data property.

The example below is accomplishing the same goal as before, just using filters. Notice that we're still using our message property in the HTML, we just added a pipe symbol to tell Vue that we wish to use a filter to format our text. Filters are declared in much the same way that computed properties are. The only difference is that they take a value as a parameter in the function. Vue.js will automatically use what is on the left side of a pipe symbol as the parameter.

Methods

Vue.js methods are similar to FileMaker scripts. They can be called by events or lifecycle hooks. Events are like object and field triggers in FileMaker and in Vue.js would be things like button clicks, form submits, mouse over, key enter, etc. Lifecycle hooks occur when the Vue instance is created, before it's compiled, compiled, ready, before it's destroyed and destroyed. Think of these as layout and file script triggers.

You define all your methods as functions under the methods object. Methods can take parameters, such as the 'message' parameter being passed in the 'say' function below. To call the method from your HTML we simply use the v-on:click directive, and pass the parameter from there.

Conclusion

Vue.js can help FileMaker developers build highly dynamic web apps on par to the interactivity and responsiveness of a FileMaker application, and can even be used to extend what's possible on a FileMaker layout. And because of similar concepts to FileMaker, Vue should be easier to pick up for FileMaker developers compared to other popular Javascript frameworks. In part 2 of this article, we will build a fully responsive customer portal with the use of Vue and the FileMaker Data API.

If you're interested in extending your FileMaker application with Vue.js, contact DB Services today and let's talk about what we can accomplish together.