Web Design Primer
When choosing a library, it is important to assess your application requirements and experience. Some libraries lack documentation, especially if newly released. Mature libraries have an advantage when it comes to community support, documentation, and life-cycle. Younger libraries may be short-lived or require code to be rewritten when new versions are released. However, the benefit of a younger library is that they often employ novel approaches and may be more efficient in execution. Also check for corporate backing when looking at a library. This ensures the code will continue to be supported and updated.
In this chapter, we will look at jQuery (mature) and Vue.js (emerging/young).
The standard is usually to download the library and move the files into your development folder. This process makes sense when you’re developing without an internet connection or if you’re creating a standalone website for an internal network. What makes the web so powerful is its inter-connectivity. So why not leverage this? Why don’t we just link to a host that already has the file so we have less to manage in our files and folders. But don’t just use any host, use a Content Delivery Network.
Content Delivery Networks (CDN)
CDN’s are servers that are typically used to host assets so that sites aren’t bogged down serving them. The advantage is that they are located all over the world, so if a user connects to your website, they can be served assets (images, videos, static code) from the server closest to them. We still need our own server for anything that’s dynamic, meaning anything that changes often. If you’re running a database, you can package what the user needs, while have them download assets elsewhere. The result is a quicker load time.
Another advantage of a CDN is caching. Let’s say your user visits a WordPress blog and is given the jQuery file from a CDN called Cloudflare. Then your user heads over to your site and you’ve linked to the same jQuery file on Cloudflare. The browser has already downloaded it, so there’s no point in downloading it again, it will just use the version it already has. CDNs typically store each version of a file in a separate folder so it will never expire. Your browser caches files for a set period of time before it downloads again. The expiry date can be specified by the CDN to be a very long time.
We’ll be showing you how to use a CDN to use jQuery and Vue.js
To start, you can find the latest version of jQuery on a cdn.js. Simply find the min (minified) version and copy the script tag.
The code you’ve copied should be placed in your HTML document before the closing body tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>
Once that’s completed, you’re ready to write your first line of jQuery code!
Here’s an example of a button that shows and hides all paragraphs in a document:
One of the benefits of jQuery is its use of CSS-like targeting to control your interactions. To target an element, we just use its name, in this example, it’s button. We then specify the interaction as a click. The function that follows runs when the button is clicked and targets the all paragraph elements on the page to toggle. By switching out toggle for slideToggle, we can animate the paragraphs to vertically slide in and out of view.
Try changing the toggle to slideToggle and adding more paragraphs to the document. Then load the page in a browser and click on the button to see jQuery’s magic in action. Another function to try is fadeToggle.
To create a counter, we will need to use a variable to hold the current count. The counter will be set to zero by default. Each time a button is pressed, it will increment by one and the value will be output in HTML. To do this, we need to specify the output location and the button. Instead of using HTML elements (button, p or a), we will use id attributes.
Just like jQuery, including Vue.js is as simple as a script element link from a CDN.
Hello Name Example
In the above example, we must first define a div to run our example. All HTML that will be acted upon will be nested within the div. The input element as an attribute of v-model, which is a Vue.js attribute that allows us to link the input content to the span element with an attribute of v-html. Notice that both have a value of username, allowing the input and the span to relate to each other.
There is no need to explicitly output the number. Vue.js handles this because it’s directly linked to the v-html attribute. We’ve also skipped the need to define a function because we can run an arithmetic process directly on a click action. For more complex operations, a function can be called using v-on:click=”functionName”. We’ve done away with about 10 lines of code using Vue.js compared to jQuery.