Introduction – The War is Over<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/CseGOCb.png\")
<\/p>\n
Let’s be honest; even those of us that actually don’t hate<\/a> the JavaScript ecosystem can understand the frustration with the fact that new JS frameworks are popping up all the time.<\/p>\n 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 \ud83d\ude09) frameworks established themselves:<\/p>\n 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 \ud83e\udd17<\/p>\n You could argue that there are other options like Ember, Mithril, or good ‘ol jQuery even! However, this tweet<\/a> says it all:<\/p>\n \n 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.\n<\/p><\/blockquote>\n Personally, I stuck to the Angular bandwagon ever since version 1.0, but that started losing it’s ooomph<\/em> after version 2.<\/p>\n 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<\/strong>. However, you can also use it as a full-blown framework if you wish.<\/p>\n Personally, React’s JSX just seems wrong<\/em>, and some people, smarter than me, swear by that being TheRightWay\u2122, and I guess we’re not here to discuss tastes…<\/p>\n General’ framework war’ kind of questions I tend to answer in the following way:<\/p>\n \n Please just stop with the analysis paralysis<\/a> already.<\/p>\n 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.<\/p>\n 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.<\/p>\n Besides, nowadays the speed will not be a deciding factor among the top JS frameworks.\n<\/p><\/blockquote>\n 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! \ud83d\udcaa<\/p>\n \n If you care about the hardcore metrics \u23f1\ufe0f and want to check out some detailed comparisons between popular frontend frameworks, here are<\/a> a few<\/a> blog posts<\/a>.\n<\/p><\/blockquote>\n As said in the intro, we’ll build an application for searching (and showing) Giphy<\/a> GIFs by using their API<\/a>.<\/p>\n You can fork the complete source code on Github<\/a>.<\/p>\n \n I’m using Vue.js 3, and I’ll be referring to it as just Vue.js in the rest of this post.\n<\/p><\/blockquote>\n Make sure that you have the following tools installed:<\/p>\n As their docs say<\/a>:<\/p>\n \n 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.\n<\/p><\/blockquote>\n To install Vue CLI, run the following command (in your Terminal):<\/p>\n You can confirm that the installation went well if you run \n \u26a0\ufe0f 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 We’ll call our app, originally \ud83d\ude48, Make sure you select the option You should get an output similar to this:<\/p>\n After this command finishes, let’s You should get this output:<\/p>\n You should see the following page in your browser if you open http:\/\/localhost:8080.<\/p>\n Now, let’s open this project in the editor of your choice (I’m using Visual Studio Code<\/a>), and you should see something like this:<\/p>\n 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 OK, so let’s add something to our app.<\/p>\n But, where to start? \ud83e\udd14<\/p>\n 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.<\/p>\n So, if you search for the string Without knowing much about Vue.js, you can see where you would change the In the App.vue file, we have a Our basic application should have one input field and one button.<\/p>\n To do this, adjust the 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.<\/p>\n So, this is how you define a function that will handle a button click in Vue.js:<\/p>\n But, if you open your DevTools now and click the That’s because we haven’t defined the Let’s do that now. In the We defined the What if we would like to output (to the console) the string that someone typed in the input field?<\/p>\n Well, first we need to add a new attribute to the input field:<\/p>\n The Finally, change the \n Technically, you could write this a bit differently, passing the Finally, we come to the cool part \ud83e\udd76, and that is to fetch some data from the Giphy API and show it in our app.<\/p>\n How do we get this API? Well, if you do a simple Google search for You need to follow these instructions<\/a> 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).<\/p>\n After you obtain your API key through their dashboard, you’re going to be able to make 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<\/p>\n Great, now we see what kind of a request we need to create to search Giphy’s GIF database for a certain term.<\/p>\n If you open this link in the browser, you’ll see that the service returns something like:<\/p>\n In the next section, we’ll cover retrieving this data within our app.<\/p>\n \n \u26a0\ufe0f Since Giphy’s rules now require you to add attribution<\/a>, make sure you add it. I added the image in the footer with a link to their docs.\n<\/p><\/blockquote>\n 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<\/a>.<\/p>\n\n
Analysis paralysis will, well, paralyze you!<\/h2>\n
The Demo App<\/h2>\n
Prerequisites<\/h2>\n
\n
Vue CLI<\/h2>\n
npm install -g @vue\/cli<\/code><\/p>\nvue<\/code> and get an output with usage information.<\/p>\nvue --version<\/code> in your Terminal) as of this writing is @vue\/cli 4.5.12<\/code>.\n<\/p><\/blockquote>\nStart a new app with Vue CLI<\/h2>\n
giphy-search<\/code>. So, to start a new app using Vue CLI, run:<\/p>\nvue create giphy-search<\/code><\/p>\n\u276f Default (Vue 3 Preview) ([Vue 3] babel, eslint)<\/code> and press ENTER<\/code>.<\/p>\nVue CLI v4.5.12\n\u2728 Creating project in \/Users\/nikola\/DEV\/BLOG\/giphy-search.\n\ud83d\uddc3 Initializing git repository...\n\u2699\ufe0f Installing CLI plugins. This might take a while...\n\ud83d\ude80 Invoking generators...\n\ud83d\udce6 Installing additional dependencies...\n\ud83d\udcc4 Generating README.md...\n\ud83c\udf89 Successfully created project giphy-search.\n<\/code><\/pre>\ncd<\/code> into the project and run<\/code> it:<\/p>\ncd giphy-search\nnpm run serve\n<\/code><\/pre>\nDONE Compiled successfully in 3178ms\n\nApp running at:\n - Local: http:\/\/localhost:8080\/\n - Network: http:\/\/192.168.8.189:8080\/\n\nNote that the development build is not optimized.\nTo create a production build, run npm run build.\n<\/code><\/pre>\n![\"\"](\"https:\/\/i.imgur.com\/xbePr2wl.jpg\")
<\/p>\nFolder structure<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/mbfO9D7l.jpg\")
<\/p>\nsrc<\/code> folder.<\/p>\nAdd content<\/h2>\n
Welcome to Your Vue.js App<\/code>, you’ll see the string is within the App.vue<\/code> file. This file contains the following code:<\/p>\n<template>\n <img alt=\"Vue logo\" src=\".\/assets\/logo.png\">\n <HelloWorld msg=\"Welcome to Your Vue.js App\"\/>\n<\/template>\n\n<script>\nimport HelloWorld from '.\/components\/HelloWorld.vue'\n\nexport default {\n name: 'App',\n components: {\n HelloWorld\n }\n}\n<\/script>\n\n<style>\n#app {\n font-family: Avenir, Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n text-align: center;\n color: #2c3e50;\n margin-top: 60px;\n}\n<\/style>\n<\/code><\/pre>\nWelcome to Your Vue.js App<\/code> text. So, let’s change that to Welcome to GiphySearch<\/code>. While you do that, also remove the contents of the style<\/code> tag.<\/p>\ntemplate<\/code> tag that contains a standard HTML img<\/code> tag and an HelloWorld<\/code> tag, which is a so-called component. Here’s the link to the documentation<\/a> where you can learn more about components.<\/p>\nAdd an input and a button<\/h2>\n
template<\/code> in the HelloWorld.vue<\/code> file to contain only this:<\/p>\n<div class=\"hello\">\n <h1>{{ msg }}<\/h1>\n\n <input name=\"search\" \/>\n <button>Search<\/button>\n<\/div>\n<\/code><\/pre>\nActions<\/h2>\n
<button @click=\"performSearch\">Search<\/button><\/code><\/p>\nSearch<\/code> button, you’ll get an error like:<\/p>\nruntime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of native event handler\n at <HelloWorld msg=\"Welcome to GiphySearch\" >\n at <App>\nwarn @ runtime-core.esm-bundler.js?5c40:38\nlogError @ runtime-core.esm-bundler.js?5c40:211\nhandleError @ runtime-core.esm-bundler.js?5c40:203\ncallWithErrorHandling @ runtime-core.esm-bundler.js?5c40:157\ncallWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163\ninvoker @ runtime-dom.esm-bundler.js?830f:327\nruntime-core.esm-bundler.js?5c40:217 Uncaught TypeError: _ctx.performSearch is not a function\n at Object.onClick._cache.<computed>._cache.<computed> (HelloWorld.vue?fdab:6)\n at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)\n at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)\n at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:327)\n<\/code><\/pre>\nperformSearch<\/code> function anywhere.<\/p>\nHelloWorld.vue<\/code> file, add the following function definition inside the script<\/code> tag, methods<\/code> object property:<\/p>\n<script>\nexport default {\n name: 'HelloWorld',\n props: {\n msg: String\n },\n methods: {\n performSearch() {\n console.log('clicked');\n }\n }\n};\n<\/script>\n<\/code><\/pre>\nperformSearch<\/code> function, which doesn’t accept any parameters and it doesn’t return anything. It just outputs clicked<\/code> in the console.<\/p>\nGather input<\/h2>\n
<input name=\"title\" v-model=\"searchTerm\"><\/code><\/p>\nv-model<\/code> is a directive that instructs Vue.js to bind the input to the new searchTerm<\/code> variable.<\/p>\nperformSearch<\/code> function to this:<\/p>\nperformSearch: function() {\n console.log(this.searchTerm);\n}\n<\/code><\/pre>\nsearchTerm<\/code> variable into the performSearch<\/code> function as a parameter:<\/p>\nperformSearch: function(searchTerm) {\n console.log(searchTerm);\n}\n\n<button @click=\"performSearch(searchTerm)\">Search<\/button>\n\nI'd love to hear from you in the comments which approach is better in your opinion.\n<\/code><\/pre>\n<\/blockquote>\nGiphy search API<\/h2>\n
giphy api<\/code> and open the first link<\/a>, you’ll get the documentation for their API.<\/p>\nsearch<\/code> (they offer a bunch more) API requests through their API explorer<\/a>.<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/WaR9pdjl.png\")
<\/p>\nVue.js HTTP requests<\/h2>\n