Here’s what I learnt about Vue.js while building a USA Roadtrip App.

jackLyons JavaScript, Life, Web Development Tags:
0
USA City Search App

Over the past six months I have been living and road tripping across the United States. While I was on the road I decided to learn about the super-hot-and-trending Vue.js framework and build a USA Roadtrip App along the way. There’s a reason why Vue is so damn popular, and I will share some insights in this post. But I had to find that out for myself so I understood what all the fuss was about. What better way to test it out than to build a side project 🙂

As for inspiration – well, that wasn’t too hard. My partner and I love exploring new places but definitely want to know a thing or two about the place before we go. Namely, where to find amazing coffee! We love checking out new cafes but actually really hate the process of logging onto Yelp, Zomato, TripAdvisor and the like. So I built an app that searches over 1,000 towns and cities across the United States each with their own top 10 list of great cafes.

You can view my USA City Search App on Glitch by clicking here. (if it takes a while to load it’s because it’s hosted on Glitch and needs to be woken up!)

Of course, now that the app is underway, I definitely want to add some cooler features. At the moment I have a simple google map interface, a daily weather interface and a Google Places map (which actually kinda sucks as their API is so restrictive). The main reason I started this project was because I received a ton of emails and comments about my other post on accessing Yelp’s API.

I had a blast building this site as I really got to dig into Vue and take advantage of the incredibly simple to use Vue Webpack template starter. You can literally get up and running with a fully fledged Vue.js and Webpack build in less than two minutes.

Some things I learnt using Vue.js:

  • If you have never touched a modern JS framework but desperately want to learn, then Vue.js is for you! The syntax is simple and the doc’s are well written, plus there are some really great online courses for sale on Udemy for under $20. Here are two courses I can personally recommend:
  • The more you build within a component, the more you realise that things could probably be broken into smaller, more manageable micro-components. Spend some extra time upfront to really understand the architecture of your app and the different states you want to see.
  • Passing props from parent components down to children, and emitting events from children back up to parent’s can get messy quickly. Again, think about what sorts of actions the user will perform on the site. Generally there is a lot more going on that you initially think. If you have multiple child components, maybe it is time to start thinking about Vuex for state management.
  • Use v-cloak so that your app doesn’t render prematurely with the {{ curly braces }} around all your variables! Here’s a simple article that explains the concept in more detail.
  • I used the BULMA css library for this project (again, another first). It is pretty lightweight and basic, which means you need to do a lot of the data-driven heavy lifting to make your components come to life.
  • Unlike Bootstrap, you can’t just add jQuery to the mix and everything works out of the box. However, there is a pretty new BULMA centric Vue library out there. It’s called Buefy and it could save you a lot of time and potential headaches when managing the data within your HTML.
    • That being said, there’s nothing like learning from scratch. By writing your own components you will be much better off when  using these libraries in the future.
  • There is some hesitancy around SPA’s and indexing from Google. I haven’t had much luck with this app, but that’s because it’s hosted on Glitch as a free service. I don’t know if Vue.js passes the test when it comes to Google successfully crawling your Single Page App. However, I have found some helpful posts out on the interwebs:

This app is certainly still a work in progress and could do with quite a refactor. For starters I would probably want to introduce Vuex and maintain state in a store. After that I would want to think about additional features. I wanted to find an API that would give me data on “Things to do” in a city. I also wanted to find some data on Hotels and accommodation, however that seems almost impossible. Most hotel API’s cost a lot of money!

Anyhow, if you have any feedback or suggestions then please get in touch. You can leave me a comment below or open an issue on my Github Repo.

If you’re thinking about learning Vue then all I can say is Heck Yes! It is an awesome framework and such a great tool to have in your 2018 JavaScript arsenal. Be sure to check out these courses on Udemy to level up and seriously have a shot at a solid tech career in modern web development!

 

Sign up to receive up-to-date web tips, tricks and code hacks!