TL;DR
In this post, you’ll learn how to use Vue CLI to build a Vue.js 3 application for searching Giphy’s GIFs by using their API.
Introduction – The War is Over
Let’s be honest; even those of us that actually don’t hate the JavaScript ecosystem can understand the frustration with the fact that new JS frameworks are popping up all the time.
This was especially true some 2-3 years ago. However, it seems that the craziness has settled down a bit and that the war is seemingly over. For now. These top four (top 5 lists are overrated 😉) frameworks established themselves:
I added the number of Github `*’s (at the time of this writing), but I don’t want you to read into that too much 🤗
Analysis paralysis will, well, paralyze you!
You could argue that there are other options like Ember, Mithril, or good ‘ol jQuery even! However, this tweet says it all:
Developers are fighting over which frontend framework is better.. it’s not like users know or care. They mostly care about the User Experience. UX should be our focus on the frontend.
Personally, I stuck to the Angular bandwagon ever since version 1.0, but that started losing it’s ooomph after version 2.
I believe that Vue.js (due to its progressive and flexible nature) is a perfect fit for the teams that have to rewrite old codebases one step at a time. However, you can also use it as a full-blown framework if you wish.
Personally, React’s JSX just seems wrong, and some people, smarter than me, swear by that being TheRightWay™, and I guess we’re not here to discuss tastes…
General’ framework war’ kind of questions I tend to answer in the following way:
Please just stop with the analysis paralysis already.
Do your research, pick a framework (any framework for that matter) that the community is using, use it, and see how far it gets you.
All these talks about X being slow or Y being better just make no sense until you try it yourself for your use case and preference.
Besides, nowadays the speed will not be a deciding factor among the top JS frameworks.
With all this out of the way, fasten your seatbelts, take a venti (or trenta) sized cup of coffee, and let’s go do something practical! 💪
If you care about the hardcore metrics ⏱️ and want to check out some detailed comparisons between popular frontend frameworks, here are a few blog posts.
The Demo App
As said in the intro, we’ll build an application for searching (and showing) Giphy GIFs by using their API.
You can fork the complete source code on Github.
I’m using Vue.js 3, and I’ll be referring to it as just Vue.js in the rest of this post.
Prerequisites
Make sure that you have the following tools installed:
- Node.js – here’s a free but outdated step by step guide/book for both Windows and Mac. Or, really, just go to the main website and download the executable for your machine
- Git – here’s a fun getting started tutorial in case you’re new to it
Vue CLI
As their docs say:
Vue CLI aims to be the standard tooling baseline for the Vue ecosystem. It ensures the various build tools work smoothly together with sensible defaults so you can focus on writing your app instead of spending days wrangling with configurations. At the same time, it still offers the flexibility to tweak the config of each tool without the need for ejecting.
To install Vue CLI, run the following command (in your Terminal):
npm install -g @vue/cli
You can confirm that the installation went well if you run vue and get an output with usage information.
⚠️ Just for reference (in case you follow this tutorial at a later stage and something is not the same as I output it here), my version (get the output by running
vue --versionin your Terminal) as of this writing is@vue/cli 4.5.12.
Start a new app with Vue CLI
We’ll call our app, originally 🙈, giphy-search. So, to start a new app using Vue CLI, run:
vue create giphy-search
Make sure you select the option ❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) and press ENTER.
You should get an output similar to this:
Vue CLI v4.5.12
✨ Creating project in /Users/nikola/DEV/BLOG/giphy-search.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
🚀 Invoking generators...
📦 Installing additional dependencies...
📄 Generating README.md...
🎉 Successfully created project giphy-search.
After this command finishes, let’s cd into the project and run it:
cd giphy-search
npm run serve
You should get this output:
DONE Compiled successfully in 3178ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.8.189:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
You should see the following page in your browser if you open http://localhost:8080.
Folder structure
Now, let’s open this project in the editor of your choice (I’m using Visual Studio Code), and you should see something like this:
This is an introduction tutorial, to get you running fast, so I won’t be going into any specific details and will be only focusing on the src folder.
Add content
OK, so let’s add something to our app.
But, where to start? 🤔
Well, one of the first things I do when I come to a project for the first time is to look at the generated output. Then I try to find the strings corresponding to that output within the source code.
So, if you search for the string Welcome to Your Vue.js App, you’ll see the string is within the App.vue file. This file contains the following code:
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Without knowing much about Vue.js, you can see where you would change the Welcome to Your Vue.js App text. So, let’s change that to Welcome to GiphySearch. While you do that, also remove the contents of the style tag.
In the App.vue file, we have a template tag that contains a standard HTML img tag and an HelloWorld tag, which is a so-called component. Here’s the link to the documentation where you can learn more about components.
Add an input and a button
Our basic application should have one input field and one button.
To do this, adjust the template in the HelloWorld.vue file to contain only this:
<div class="hello">
<h1>{{ msg }}</h1>
<input name="search" />
<button>Search</button>
</div>
Actions
Having a simple search input field and a button doesn’t do much. We want to click the button, and we want to output something to the console just to verify it’s working correctly.
So, this is how you define a function that will handle a button click in Vue.js:
<button @click="performSearch">Search</button>
But, if you open your DevTools now and click the Search button, you’ll get an error like:
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of native event handler
at <HelloWorld msg="Welcome to GiphySearch" >
at <App>
warn @ runtime-core.esm-bundler.js?5c40:38
logError @ runtime-core.esm-bundler.js?5c40:211
handleError @ runtime-core.esm-bundler.js?5c40:203
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:327
runtime-core.esm-bundler.js?5c40:217 Uncaught TypeError: _ctx.performSearch is not a function
at Object.onClick._cache.<computed>._cache.<computed> (HelloWorld.vue?fdab:6)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:327)
That’s because we haven’t defined the performSearch function anywhere.
Let’s do that now. In the HelloWorld.vue file, add the following function definition inside the script tag, methods object property:
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
performSearch() {
console.log('clicked');
}
}
};
</script>
We defined the performSearch function, which doesn’t accept any parameters and it doesn’t return anything. It just outputs clicked in the console.
Gather input
What if we would like to output (to the console) the string that someone typed in the input field?
Well, first we need to add a new attribute to the input field:
<input name="title" v-model="searchTerm">
The v-model is a directive that instructs Vue.js to bind the input to the new searchTerm variable.
Finally, change the performSearch function to this:
performSearch: function() {
console.log(this.searchTerm);
}
Technically, you could write this a bit differently, passing the
searchTermvariable into theperformSearchfunction as a parameter:performSearch: function(searchTerm) { console.log(searchTerm); } <button @click="performSearch(searchTerm)">Search</button> I'd love to hear from you in the comments which approach is better in your opinion.
Giphy search API
Finally, we come to the cool part 🥶, and that is to fetch some data from the Giphy API and show it in our app.
How do we get this API? Well, if you do a simple Google search for giphy api and open the first link, you’ll get the documentation for their API.
You need to follow these instructions to create an account (and an app) to get an API key. You don’t need an SDK solution at this point (you may want to go that route if you’re going to make a mobile app that shows these images).
After you obtain your API key through their dashboard, you’re going to be able to make search (they offer a bunch more) API requests through their API explorer.
An API URL (obviously, with the fake API key) may look like this: https://api.giphy.com/v1/gifs/search?api_key=AbC&q=cats&limit=10&offset=0&rating=g&lang=en
Great, now we see what kind of a request we need to create to search Giphy’s GIF database for a certain term.
If you open this link in the browser, you’ll see that the service returns something like:
In the next section, we’ll cover retrieving this data within our app.
⚠️ Since Giphy’s rules now require you to add attribution, make sure you add it. I added the image in the footer with a link to their docs.
Vue.js HTTP requests
We have several options for making HTTP requests in Vue.js, and some may see this flexibility as a pro, and some may see it as a con. Either way, for more options, check out this post.
I chose to go with Axios, as it’s a very popular JavaScript library for making HTTP requests. It’s an HTTP client that makes use of the modern Promises API by default (instead of the not so nice JavaScript callbacks 🙂) and runs on both the client and the server (i.e., Node.js).
In your Terminal enter the following command to install Axios via npm:
npm install axios --save
Import Axios in the HelloWorld.vue file just after the script tag:
import axios from "axios";
The performSearch function should now look like this:
let API_KEY = 'getYourOwn';
let link = `https://api.giphy.com/v1/gifs/search?api_key=${API_KEY}&limit=25&offset=0&rating=g&lang=en&q=`;
let apiLink = link + this.searchTerm;
axios
.get(apiLink)
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
});
Just for reference, to put it all in one listing, the contents of the HelloWorld.vue file should be:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<input name="search" v-model="searchTerm" />
<button @click="performSearch()">Search</button>
</div>
<a href="https://developers.giphy.com/docs/api#quick-start-guide">
<img src="giphy.png" alt="" class="giphyAttribution" />
</a>
</template>
If you run the app and enter something in the input box, and then click the search button, you’ll see something like this in your console log:
You can see that we’re getting an object that in its data property has another data property (so meta 😎) that’s an array with 25 objects, which holds the information about the images we’ll show in our app.
Well, after a tongue twister in the previous sentence, this is all great, but we don’t want to be logging our objects to the console; we want to show them in our app! 🙂
To show the GIF, you can choose any of the properties under the images object, and use the url property. I used fixed_height_small in my example.
We don’t want to just show one image but all of the images. We can use the v-for directive for that:
<img v-for="g in giphies" :key="g.id" :src="g.images.fixed_height_small.url" />
For reference, here’s the full listing of HelloWorld.vue file:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<input name="search" v-model="searchTerm" />
<button @click="performSearch()">Search</button>
<img v-for="g in giphies" :key="g.id" :src="g.images.fixed_height_small.url" />
</div>
<a href="https://developers.giphy.com/docs/api#quick-start-guide">
<img src="giphy.png" alt="" class="giphyAttribution" />
</a>
</template>
B e a utiful
At this point, if we take a look at the app and search, for example, for ‘cat coding’ we’ll get this:
Although the result doesn’t look sleek (ha!, far from it 😳), our code does exactly what it’s supposed to do. If you want it to look nicer, feel free to add more CSS.
Bulma is a cool framework that I used in the JWT authentication in an Angular application with a Go backend post in case you’re interested in taking a look.
Conclusion
In this tutorial, you learned how to get started with using Vue.js 3 by building an application for searching Giphy’s GIFs by using their API.
Please leave any comments and feedback in the discussion section below, and thank you for reading!
TL;DR
In this post, I’ll show you some pictures and notes from the very first .debug conference.
⚠️I know, I know, this post comes veeeery late after the conference was already finished 🤦, but I figured that this will (sadly) most probably be the only one I’ll attend the whole year, so I might as well share and recall how it was.
The Swag, oooh the Swag
I was impressed by the amount of stuff they put in the rucksack (oh yes, there was a rucksack too 😊). Yeah, sorry, the chocolate didn’t make it intact to the picture time 😛
I’ll now go through all the sessions that I attended, share a few pictures and notes.
A new World for Your App, Justyna Jaworska
- Basically talking about the ‘business opportunity’ to build stuff for this platform
10 types of devs you’ll meet at the conference, Dora Kalneus (Militaru)
- speakers, thought leaders, hipsters, influencers, nomads, entrepreneurs, consultants, blockchain something something 🙂, hackers, #iamdeveloper
- awesome presenter, great flow
- “Suffering unites people”
- Personal branding is about creating an opportunity for you to grow
Companies without designers are building a catastrophe, Tom Kozačinski
- “Just build it doesn’t work in big companies anymore”
- “Never hire on the lower end of the salary spectrum”
- “Rather than focus on artifacts, we focus on prototypes and validating those prototypes in Discovery, with the added benefit that the prototype serves as the spec for Delivery.
Panel discussion on how to get paid for your work and knowledge
- Luka Abrus
- gap getting tighter for seniors
- Agreed that people once coming from the college have to have projects behind them
- Government is not helping at all
- Alan Sumina
- Our tax system is like Swiss cheese and they weren’t prepared for ‘pausalni’
- Tatjana Barančić
- People stopped going to Ireland
- We see a lot of developers coming back now
- ‘Pausalci’ that work in a freelancer setup will have no problems
- Hrvoje Balen
- We are stupid as people will just start companies outside of our country.
- Lower the tax on work and increase on real estate (only 8%!?), as otherwise, we’re turning into a renting country
Devonomics – Expanding the developer horizons, Srdjan Vranac
- “Later equals never”
- “Never talk about technical debt” – 🤔🤦 oh, really?
- “Your mandate as a software engineer is to find solutions for the problems presented, with acceptable compromises between time, cost and quality, with buy-in from the management/leadership.”
- Time to market is the only metric – shorter TTM -> more money
- Everyone is a salesperson!
AI in banking, Draženko Kopljar
- “AI is a buzzword for sales people so they can sell stuff easier” 🙂
Panel discussion about ‘the life after coding’
- Mihaela Smadilo
- It’s hard to make the switch to manager, and communication skills are the key
- Tomislav Grubisic
- Regular 1on1 check-ins are key
- Luka Kladaric
- Your knowledge evolves, so if you work on a new technology you’ll actually have it easier to learn new things
- Oleg
- “Most CEOs are complaining that devs are bad”
- Personally, I think that the panelist was pushing this question of “what are you gonna do at 60!?”, and they were trying to explain to him but with no luck. Even to, it seemed, a point of irritation.
- Sven
- I think that the main motive nowadays is that people work on interesting things
From diploma to Google, Maja Bilic
- This was an awesome presentation, should have been the keynote yesterday
- Imposter syndrome is real
- The important thing is to like things that you do
- NTH sucked: on the third day became the design team lead, then the web team lead – I knew exactly nothing about this!
- Did a lot of retrospection and thinking what I want to do
- Got two jobs in Google – and then had to make a decision
- Putting things on the paper and weighing is bullshit as you always deep down have an actual decision you want to do
- I make a decision, tell everyone, sleep on it. If I don’t regret it, then I actually execute on it.
- People need growth and challenge that’s out of their comfort zone
- Interview to realize what’s your value on the market
- I was so disappointed that there’s no ideal organization – but here’s your chance to bridge the gap
- A good manager will give you feedback on your performance but also tell you what you need to work on
- Change is what brings progress as that yields a lot of spaces that aren’t covered
- Titles don’t say anything about what you actually do
- Know something that no one else knows
- Never say that’s not my job, and always know what you’re doing
- Ask for feedback
- Know when to move on: when there’s nothing that excites you
- Mentor – you have to click with this person to ask what to do at a certain problem point
- Good team, interesting job and opportunity to learn – money comes after this
10 mistakes I did as a young IT guy, Luka Abrus
- I thought that people will appreciate my code
- Vanity metrics
- Today we’re actually celebrating when we see good metrics and not when we launch!
- I thought I knew what customers want
- I loved emails and didn’t wanna go and meet with people
- As an employer, I was slow to fire
- I thought that money was the most important
- I didn’t know how to make a good project deal
- I didn’t know when to say ‘go to hell’ to the client
- I applied to things I didn’t have the competency for
Experiments done in business and life, Martin Stenkilde
- “As long as you learn something from the failure, everything is great”
Tech Leadership: People + Technology, Kátia Nakamura
- Ooof, didn’t resonate with me
- I totally disagree that someone **shouldn’t ask something in the public Slack channel
- Does 1on1s every other month – come on, seriously?!
- Agree only on the last point that you have to have people that take care of other people, and the importance of (written) communication
Hairy Developer and the Sorcerer’s Startup, Shahyar Ghobadpour
- Great presenter!
- Learned how to be tough after they got evicted
- Office politics is real and it’s not always about how good you are
- Learn as much as you can anywhere you go
- Risk, but research beforehand
- Be good with people, time, skills – if you aren’t, then find a matching partner
Till next time, stay safe 🙏