Important Docs and Techs for SPA Development in 2020 Q4?

I have about 10 years of experience as a software engineer, but most of it on the back end. Now I am trying to make a bit of a pivot and create an SPA (and if that goes well, more SPAs after that). Seamless control with keyboard and mouse are important to what I’m trying to do. This is a self-directed solo project for now (more people might join later), so I can choose how to go about it. I’ve been working on this a bit and selected the following technologies as a starting point:

  • Vue
  • Vuex
  • Vue SFC
  • TypeScript

After a couple days struggling with manual webpack configuration, I tried the Vue CLI, and it quickly got me where I was trying to go.

I’ve already developed a few “for the purposes of learning” apps and one of them is getting a little complex, and I’ve had to diagnose a number of bugs. My lack of expertise on the front end has made that a lot slower.

One of the most empowering things I’ve done to overcome that recently has been to read the DOM Level 3 UI Events document. I’ve read most of the Vue, Vue CLI, and Vue Loader documentation, including the Vue SFC specification.

Are there other documents or technologies or libraries you would recommend (to an experienced software engineer, but a relative beginner in browser technologies) as very important to modern SPA development (to go along with Vue)?

You don’t mention what languages you used on the server, so filter out any of my suggestions that don’t apply.

First up, make sure you learn JavaScript properly. Some highlights include scoping (including arrow functions) and asynchronicity (including promises).

Then CSS. Understanding how selectors work is really important. Then layout stuff such as the box model and the display property. Flex layout is worth studying in particular.

Browser tools. Make sure you are all over those. Trying to learn the tools when you’re also trying to fix a bug is not a great combination. It’s much better to learn how to use the tools when your code is working fine so you aren’t fighting more unknowns than are strictly necessary. While the Vue Devtools can be useful, I personally find the standard, built-in browser developer tools to be more than sufficient to debug most problems. The tabs for Elements, Console, Sources and Network in particular.

As for specific debugging tips:

  1. Use console logging to find problems. Client-side logging is not like server-side logging, you generally put it in temporarily to debug a problem and then take it all out again.
  2. Get familiar with the debugger statement and breakpoints.
  3. For layout/CSS problems you need to use the Elements tab of the developer tools. You will waste a lot of time if you try to debug layout problems by just staring at your code.

Aside from Vue’s official supporting libraries, axios is a common addition in most projects.

Thank you @skirtle, I appreciate it.

On the server side I’ve used mostly Go (now and recent years) and Perl (years ago), and smaller amounts of Python, C#, C, C++, Ruby, and Scheme