Starting with Vue.js

Lately, I’ve been a little indecisive on which JavaScript framework or library to dive into next. Based on all of the job descriptions I’ve been plowing through, any front-end and even most full-stack web development roles require proficiency with a number of different JavaScript frameworks.

Vanilla JavaScript is Not Enough

A lot of advice directed at junior web developers that I’ve come across online stresses the importance of mastering JavaScript before attempting to level up with frameworks. Some even suggest that a junior developer that knows a framework or two isn’t as valuable as one with a just a solid understanding of pure JavaScript.

However, that advice doesn’t seem to take into account job descriptions and phone screens that specifically filter out candidates who haven’t populated their resumes with certain frameworks. With jQuery and Uni.js as the only JavaScript libraries in my tool belt, I figured it was time to gear up with another.

Picking the Next One

For a while, I was researching various JavaScript frameworks and ranking them based on job demand in my region, ease of learning, availability of guides and tutorials, and figuring out the pros and cons of the actual frameworks themselves.

AngularJS and Angular

AngularJS and Angular were the clear winners in my market. Besides being in demand, a big appeal for me was the MVC framework, which I wanted to learn with JavaScript since I enjoyed using it with Ruby on Rails. The MVC structure may also be better for a junior developer to learn and develop good habits with.

Although AngularJS is supposedly on its deathbed (with the arrival of Angular 2 and Angular 4), I still had a little interest in learning it in order to appreciate Angular in the future. Angular seems like a massive framework geared more toward enterprise-sized applications and having to also learn and use TypeScript didn’t get me too excited.

React

React was next big dog on the list. In contrast to the two previous frameworks, React is just a library that deals with the view alone. A company I interviewed with relied heavily on React, so I chose to dive in head first with a quick tutorial on building a video uploading, displaying, and sharing app. I created my Miniflix app but didn’t as much out of it with understanding React as I got dev ops practice with Auth0, Cloudinary, and Heroku. I have a lot to learn and from the opinions I’ve read online, React requires plenty of time, patience, and practice.

Vue.js

One week after my interview with the React company, I had a great interview for a front-end web developer role at a different company that used Ruby, JavaScript, and jQuery without any other major JS framework. However, the lead developer informed me that his aim is to adopt a new JavaScript framework or library for their user interfaces. And that framework was Vue.js.

I asked the lead dev why he chose Vue.js over something like React and described it basically as a summary of this article. It piqued my interest. So what did I do? I naturally researched more about Vue.js, its comparison to Angularjs and React, and comparison to other frameworks, then made up my mind to learn it and start my next app with Vue.js.

What is Vue.js?

Vue.js is a JavaScript library that deals with just the view and is used for building user interfaces. From Vuejs.org:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue.js is very similar to React in scope and AngularJS in syntax, except a lot simpler and lighter than each. Some concepts from both are borrowed, like AngularJS’s templating and React’s one-way data binding, utilization of a virtual DOM, and component architecture.

In my next post, I’ll discuss my first app developed with Vue.js and how surprisingly easy it was to learn by doing.

Summary

Cason Lane needed a revamped digital calling card for his business communications consultancy. Main client concerns included site rendering speed, search engine optimization, security, and a new design that maintained the recognizable brand image.

A transition was made from a slow-loading and clunky Wordpress theme to a modern and clean custom site design that was developed with Hugo, a static site generator. Swapping the unnecessarily heavyweight Wordpress CMS along with its slow-loading database and plethora of plugins for a static site greatly helped reduce page load speeds from 20+ seconds to under 1 or 2 seconds. Without a database, the site no longer had to make dynamic requests to load and display content quickly. Removing the database also eliminated the main security vulnerability.

The site was redesigned from scratch by my friend, John Laue, based on client needs. Since the whole site was being built up from scratch, no bloat from unnecessary Wordpress themes or excess plugins was added to create the look and functionality desired. With SEO in mind from the beginning and with site speed being of utmost importance, best practices were applied in sync with content to bring the client’s web presence to the front page of Google.

Tools

Hugo
Foundation
JavaScript
Animate on Scroll
Webpack

Summary

Lincoln Property Company is the second largest property management company in the US with over 184,000 units under management. In late 2018, I developed an interactive infographic that presents the current state of consumer trends and behaviors in an easily digestible manner.

The infographic displays digital marketing statistics about sourced from a variety of sources. The information is displayed with eye-catching animations that are initiated by a user’s scroll behavior.

Tools

Foundation
jQuery
Ruby on Rails
Animate on Scroll
ScrollMagic
GreenSock

Summary

One of my largest projects came in the fall of 2018 with AMP Residential, a property management company whose goal was to launch an entire suite of websites for a portfolio of 30+ multifamily properties. A theme requiring extensive customization capabilities to fit the different needs of all properties and their websites was needed.

The design was challenging because of several offset elements that needed repositioning and resizing for different viewports and many sections demanded conditionality to fit the content of each site, but it was a fun puzzle to solve. It’s become a favorite build of mine.

Some of the sites built with this theme include RiverFront Towers, Stone Ridge Apartments, and Woodland Creek Apartments.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Morada Plano is a luxury apartment complex located in the Plano Arts District and Historic Downtown Plano. In the summer of 2018, I developed another custom property site for Southern Land Company.

For this build, I implemented new UX features requested by the client and designer like parallax scrolling, SVG animations, counter animations, and an Instagram feed.

Tools

Foundation
jQuery
Ruby on Rails
ScrollMagic

Summary

Avenue5 Residential is a multifamily property management company with 40,000 units and 200 properties across the United States. Although they sustained a large online presence, a number of their properties websites were in need of fresh, updated design and functionality. In early 2018, I developed a custom site theme that was applied to a number of websites under their portfolio of properties that was moved to a Ruby on Rails platform.

Two of the property sites undergoing transformation included Boulder Canyon and Canyon View.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Vertis Green Hills is a Southern Land Company residential community made up of luxury apartments with onsite dining and shopping in Nashville, TN. I developed the site in late 2017 while the property was finishing construction and anticipated for opening in 2018.

Tools

Foundation
jQuery
Ruby on Rails

Summary

Miniflix is an experiment in building a React app with Create React App and Auth0. I built a single-page app with a user login system that serves videos through Cloudinary.

Tools

Auth0
Bootstrap
Cloudinary
Create React App
React

Summary

Osprey is an open source Hugo theme that I designed and developed to use for my own portfolio site. I have been maintaining and improving it with the support of the Hugo community on GitHub since 2017.

Tools

Summary

Rhino Linings Spray Foam Insulation, newly formed division of Rhino Linings Corporation, required a corporate website that could reach both consumers and clients. Using Wordpress, I built a site that served as a valuable marking asset.

Tools

Wordpress

Summary

Rugged Fellows Guide is a lifestyle blog created as a personal project to experiment with the Wordpress platform, web design, digital marketing, and SEO fundamentals. Within the first 6 months, the site generated as many as 30,000 sessions per day.

Tools

Wordpress

Summary

LEARN academy is a full-stack web development bootcamp in San Diego, CA. The website required optimization in terms of speed and organic search engine rankings. Assets were optimized, page loading speed improved, and pages were restructured according to modern SEO standards so that content could be properly crawled by search engines.

Tools

Google PageSpeed Insights
Google Search Console
Ruby on Rails

Summary

VolunteerUp is a Ruby on Rails app that connects volunteers with non-profit organizations. It was built in a 2-week sprint on a team of 7 developers as a final project during the LEARN Academy full-stack Ruby on Rails course. My primary involvement was developing the component for searching and filtering organizations and events within the application as well as some UI/UX guidance.

Tools

Kaminari
Filteriffic
Ruby on Rails

About

Work

Blog

Contact

Vanilla JavaScript is Not Enough

Picking the Next One

AngularJS and Angular

React

Vue.js

What is Vue.js?

Starting with Vue.js

Vanilla JavaScript is Not Enough

Picking the Next One

AngularJS and Angular

React

Vue.js

What is Vue.js?

Cason Lane Communications

Summary

Tools

Lincoln Property Company

Summary

Tools

Amp Residential

Summary

Tools

Morada Plano

Summary

Tools

Avenue5 Residential

Summary

Tools

Vertis Green Hills

Summary

Tools

Miniflix

Summary

Tools

My Resume

Osprey

Summary

Tools

Rhino Linings Corporation SPF

Summary

Tools

Rugged Fellows Guide

Summary

Tools

LEARN academy

Summary

Tools

VolunteerUp

Summary

Tools