How to Replace jQuery with Vue

I’m willing to bet that there are a lot of developers out there who still reach for jQuery when tasked with building simple apps. There are often times when we need to add some interactivity to a page, but reaching for a JavaScript framework seems like overkill — with all the extra kilobytes, the boilerplate, the build tools and module bundlers. Including jQuery from a CDN seems like a no-brainer.

In this article, I’d like to take a shot at convincing you that using Vue.js (referred to as Vue from here on), even for relatively basic projects, doesn’t have to be a headache, and will help you write better code faster. We’ll take a simple example, code it up in jQuery, and then recreate it in Vue step by step.

What We’re Building
For this article, we’re going to be building a basic online invoice, using this open-source template from Sparksuite. Hopefully, this should make a refreshing change from yet another to-do list, and provide enough complexity to demonstrate the advantages of usi..

Read more »

SitePoint Premium New Releases: Swift, Icon Design, and Vue

We're working hard to keep you on the cutting edge of your field with SitePoint Premium. We've got plenty of new books and mini-books to check out in the library — let us introduce you to them.

Hands-On Full-Stack Development with Swift – Packt
Build full-stack shopping list apps from scratch for web and mobile platforms using Xcode, Vapor, and Swift. Increase developer productivity by creating reusable client and server components. Develop back-end services for your apps and websites using Vapor framework.

Read Hands-On Full-Stack Development with Swift.

An Introduction to Data Visualization with Vue and D3.js
Learn how to visualize data in your Vue project with charts and graphs, to better convey and communicate information. In this tutorial, you’ll do so using the D3.js library, which combines powerful visualization components and a data-driven approach to DOM manipulation.

Read An Introduction to Data Visualization with Vue and D3.js.

The Icon Handbook
The Icon Handb..

Read more »

React Hooks: How to Get Started & Build Your Own

React Hooks are special functions that allow you to “hook into” React features. For example, the useState hook allows you to add React state to a functional component. useEffect is another hook that allows you to perform side effects in function components. Side effects are usually implemented using lifecycle methods. With hooks, this is no longer necessary.

This means you no longer need to define a class when constructing a React component. It turns out that the class architecture used in React is the cause of a lot of challenges that React developers face every day. We often find ourselves writing large complex components that are difficult to break up. Related code is spread over several lifecycle methods, which becomes tricky to read, maintain and test. In addition, we have to deal with the this keyword when accessing state, props and functions. We also have to bind functions to this to ensure they are accessible within the component. Then we have the excessive prop drilling probl..

Read more »