...But there are also unknown unknowns. There are things we don't know we don't know.

-Donald Rumsfeld

This is how I felt when I became a Web Developer almost a year ago. I knew very little about not a lot and had no idea what I didn't know. Now, a year in, I know what I don't know and have a plan in my head of how I want to end up knowing it.

What I want to share here is my personal learning methodology/roadmap. This is my vision of what I want to accomplish in the next year and how I want to go about doing it.

My goal is to become a great Fullstack JavaScript Developer. The sort of developer that can take an idea from concept through creation and deployment and write solid, resilient code whilst they are at it. To do this, I need to reduce as much as possible my "code block" when it comes to bringing my ideas to life.

Code block is still a real problem for me. If I have an idea for a project I struggle to just start hacking away at it and I've realised it's caused by three distinct challenges:

  1. Understanding how different technologies puzzle together
  2. Understanding each puzzle piece in isolation
  3. Translating your idea into pieces that fit together in the first place

Put simply - there's understanding the tech e.g. knowing how to write React. Then there's knowing how that piece of tech fits in the context of a larger application and, at a higher level, there's knowing how to architect your application and having a methodology for carving out your idea into code that fits together.

The idea is that within the next year or so, I will have that 10,000ft view of the JavaScript landscape and be able to hack away at what I want to create confidently.

Reverse Engineer for the Final Result

So, are you ready for a good laugh? This is what I want to be able to make:

My App

The same full-stack JavaScript application made four different ways:

  1. Classic monolith - separate front end and backend.
  2. Serverside rendered - front end views are created serverside using a technology such as NextJS.
  3. Serverless - My backend processes are handled in the "cloud" using functions as a service.
  4. Microservices - the backend and front end is split into standalone applications.

Honestly, I have no idea if this is even doable but I'm looking forward to finding out!

For what the app itself is/does, I've also yet to decide but I want it to be pretty substantial. Something with full CRUD functionality, authentication, users, profiles, etc. I found this post useful for ideas.

I also want to use as modern and up to date a technology stack as possible. For example, working from back to front, something like:

  • MongoDB + Mongoose
  • NodeJS / Express /GraphQL
  • ReactJS / Redux / TypeScript
  • Styled Components/CSS Modules

Finally, I want to have it fully tested and build it using test-driven development.

Ok, we know what but how?

These lofty goals are all well and good, but how do I plan to achieve this?

The diagram below shows my (sort of) 3 step method for learning to make these four apps.

Learning Methodology

Step 1 - Incrementally Learn Technologies in Isolation

First and foremost an app is made up of many different technologies, that, in their own right, are complex and are best learned in isolation initially.

In the diagram above I've included React, Redux, and Typescript as possible examples of technologies I would want to learn in isolation before learning how they integrate and overlap.

Step 2 - Gradually layer technologies

Once the basics of a set of technologies are understood in isolation, I would want to then understand how they fit together to create something functional and create a small, throw-away application.

With the example above, perhaps creating a basic frontend app that pulls data from a third-party API.

Step 3 - Frame the technology in the context of the final app

Finally, understanding how these smaller applications fit into the bigger picture. With the example above, this could be looking at sourcing the data from our own database rather than a third-party API.

So there you have it! Check back in a year or so to see if I made it or whether I crashed and burned. I'll certainly try to document the process as I go as well.

If you are a junior dev and you have your own learning roadmap/methodology please do let me know in the comments. If you are a more experienced dev, any comments, help or advice would be hugely appreciated (seriously).

This post is also available on DEV.