MandalaTV
Personal and Professional Blog of Rich Hauck

My Portfolio Site 2017 (and why I chose Vue.js)

by: Rich Hauck

The task of my portfolio redesign wasn’t neglected like the last go-around, but it’s never easy. Still, It’s refreshing to finally emerge from my cocoon and reflect on how my technology decisions have changed over the years. I was never fully satisfied with my last iteration, and decided to see if I could rebuild what was my Flash portfolio site in the early 2000s, except this time, responsively and using Web Standards.

You can see my portfolio site at http://www.hauckinteractive.com.

Here’s a quick comparison of what’s changed since the last iteration (2013-2015):

Styling: SASS and CSS Grid Layout

In 2013, I was using Bourbon Neat. By 2015, I had moved onto Susy, as I liked its simplicity and didn’t feel I needed Bourbon’s polyfills. I almost started using Susy for my layout, but the release of Susy 3 in June 2017 convinced me that Susy had realized it had reached its end-of-life and that it had become a polyfill for the CSS grid, the new standard.

While I am using CSS grid in some places, it turns out I had to rely far more on absolute-positioned elements. While CSS grid support was rolled out for all the major browsers earlier this year, support for animating properties like grid-template-columns and grid-template-rows have yet to come to fruition.

Packaging: Webpack

I have been using GulpJS as a part of my typical workflow, but Vue CLI uses Webpack, so there was no need to complicate things.

Package Management: NPM

For package management, I’ve abandoned the new deprecated Bower in lieu of Yarn, but in this particular project I stuck with good ol’ NPM.

Framework: Vue.js

I’ve read plenty of articles comparing modern JavaScript frameworks, with many of them concluding “it’s a matter of preference” or “they’re all good”. Of course, the best way to come to a conclusion is to test them out.

In 2013, I chose Angular JS (v1.2). The newest version of Angular (v4.2.4 as of this writing) is a beast, and I can see it being a reliable tool for a LARGE application. For my small portfolio, however, I ruled it out. While I love TypeScript, one of the big reasons is one you might commonly hear–working in Angular is like working in another language written in JavaScript.

Performance-wise, modern JS frameworks are all fast (see this impressive benchmark table!), but I wanted a popular framework that utilized virtual DOM rather than something that manipulated the DOM. This led me to React and Vue.js.

I’d been fortunate enough to recently work on a large React project, and I was curious to see how Vue.js compared. Frankly, doing any kind of search comparing the two will give you a deluge of first-hand accounts of developers “graduating” to Vue.js over React.

After having worked with both, my conclusion is, I prefer React, but would choose Vue.js.

A funny response, I know. Why, do you ask? What I like about React is its OOP-like class structure, but most of all, the render() method, which requires whatever HTML you’re outputting to be rendered beforehand. You’re not seeing output littered with conditionals and foreign syntax (v-bind:) attributes. You’re also not seeing <template> HTML beside <script> code beside <style> syntax.

React Syntax (perhaps slightly more verbose but clean):

class HelloWorld extends React.Component {
render() {
   return   
&amp;lt;div&amp;gt;Hello {this.props.name}&amp;lt;/div&amp;gt;;
   }
}

ReactDOM.render(&amp;lt;HelloWorld name="Rich" /&amp;gt;, mountNode);

Now, I’m certain that anyone that knows Vue.js will counter with the fact that you can use JSX syntax (along with its ugly htmlFor and className custom attributes) and a render() method with Vue. The thing is, I doubt many people will, and that’s okay. I didn’t switch to such syntax, primarily because Vue’s Essentials documentation led the way.

So what do I like about Vue?

  • It’s approachable. I didn’t need Webpack to get a “Hello World” test up-and-running–I simply included a <script> in my page and witnessed the magic. This tidbit may be trivial for advanced application developers, but the low barrier appeals to beginners. It’s that kind of appeal that helps build a strong community.
  • Built-in router. No third-party choices to be made, here. I don’t understand why Facebook wouldn’t make such an official package for React.
  • Web Component format. Vue mimics the structure of a web component, and while I didn’t write any scoped styling in my components, it’s handy to have. I know, I just complained about the structure, but I’ll come kicking and screaming with any open-source standard.
  • VueX. Like  VueRouter, Vue comes with a defacto state management.

The biggest reason, however, is the license. Apache has labeled React Category-X. According to WP Tavern, React users are petitioning to get Facebook to change the license.

I’ve read the Facebook FAQ and heard how even large corporations like Apple continue to use React, but I’m a proponent of open-source software and would feel better about using it if they just changed the license.

I confess that this won’t prevent me from using React, again–as a matter of fact, I will likely move the front-end of this blog to it. Furthermore, the U.S. industry still uses it heavily compared to Vue, and I need to remain marketable.

So, there’s my stance on it. I am paying particular attention to which framework WordPress will choose for its core, but it will definitely be interesting to see where the entire industry goes. I’d encourage others to try these frameworks out, themselves.


Categories:HTML5 javascript webdesign
Comments: 0

Leave a Reply

About Rich Hauck

Rich Hauck

I'm a creative technologist at Hauck Interactive, Inc. and an adjunct instructor at HACC. I live in Harrisburg, Pa. with my wife and two boys. I enjoy good coffee, Trappist beers, Orioles baseball, and good design.


Archives