The Node/Vue ecosystem

I’m learning Vue.js for a project at work, and I’m once again reminded how much of learning to code is about connecting the dots. I think of coding, in say, JS, as coming up with clever functions, refactoring, debugging, optimizing, writing beautiful algorithms. But, I’m going through Vue tutorials, and I feel like when I first learned Rails. Before I can even think about logic, I need to understand that (I’m oversimplifying):

  • Node is a back-end JS runtime
  • Express makes writing Node code easier
  • Mongo is a noSQL database, meaning it stores
  • Mongoose makes it easy to create and store and validate objects by using models
  • package.json keeps track of my dependencies and environment
  • NPM allows me to fetch libraries or dependencies for my app
  • Node allows me to write and export modules, including code from one file in others
  • Middleware is anything that happens to my request once a server receives it
  • Axios is the npm package we use to send requests because it supports promises out of the box
  • Babel compiles my code to ES6 on the front endd for older browsers
  • ES6 is the a more current, widely-adopted version of JS that includes important syntax updates; I don’t have to use it, but it’s important to understand. Vue runs on features (like import) found in ES6, I think.
  • Webpack compiles my JS files into one… I think?
  • Vue is a front-end JS framework that allows me to bind data and reuse components
  • Vue-cli is a tool that creates a Vue app scaffold and sets up my transpilation (with Babel) and compiles my files (with Webpack)
  • Vue instances and components are… let me get back to you on that.
  • BootstrapBulma, Skeleton or the NYC Opportunity Pattern Library are CSS libraries that helps me write pretty-looking elements – buttons, navbars, and so on quickly

This is the stuff that’s always been hardest for me, and the inspiration for Hackterms (which has been helpful, but definitely not sufficient). Each of the tools above has neat and expansive tutorials, but very few sources explain how the hell all these concepts connect – what fundamental purpose each solves. Maybe I just never realized that webdev is about understanding these connections as much as it is about writing beautiful functions. Anyway, I’m in the thick of it now, and once I get the flow of things, I’ll never cease trying to explain it in the simplest way possible. And in the short run, I’ll write an update post on, maybe even with an infographic to help illustrate how it all works.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s