A designers guide to ( js ) development

A human friendly guide for navigating the expansive domain of development
Code is a vast field with an ever growing ecosystem of knowledge. The decision to start coding can be invigorating, but it can also be daunting. With so many options, we can often be overruled by the tyranny of choice. Where does one start? What language should they choose? Should they prioritize a framework or learn the language’s basics? These are all obstacles I have faced on my path to code, and I’d like to share how I’ve navigated these areas and the resources I’ve found most valuable along the way.

Before diving in, I’d like to say I’m a designer by trade and absolutely love the medium. Design has a special capacity to visualize the conceptual and to turn ideas into comprehensible solutions. However, as a designer in tech, I often saw a gap between what I make and how it transitions into reality. The process felt incomplete to me. I didn’t just want to draw out the plans for the metaphorical chair, I wanted to build it. For me, I desired the capacity to implement. A notion I’m sure many designers feel.

Getting Started

I began my journey into development back in 2017. When I started, I had a foundation in html and css, but javascript was uncharted territory. At the time, javascript had started its meteoric rise in web development, so it felt like a natural area for investigation.

I experimented with a number of courses, but the most impactful overview and best explanation of this new world was The Modern Javascript Bootcamp by Andrew Mead. Andrew approaches the subject of javascript in a practical but comprehensive way. He dives into the fundamentals of the language ( like functions, objects, and types ), explores data storage and transactions, and advances into code paradigms like object oriented programming.

Some other javascript teachers with excellent bootcamp courses include:

Language or Framework?

One of the main obstacles I believe designers face when getting started with javascript is which framework to leverage. However, there is a question that precedes this one: how much of the coding language should you seek to know before investing in a framework?

This reminds me of the classic conflict designers faced when the computer came along. Now that the computer could visualize concepts and create layouts, how necessary was it to learn the craft of finely adjusting type, accurately rendering ideas, or drawing grids? Would the computer replace the craft and knowledge of the designer, eventually automating their job?

As it turns out, the computer would serve only to extend the faculties and knowledge base the designer already possessed.

This is how I like to think about frameworks. They abstract away many of the difficult, manual tasks of code and enhance the developer’s overall proficiency. However, the extent of a framework’s impact relies primarily on the developer’s comfortability with the underlying language. For example, understanding paradigms like object oriented programming will create a mindset of code reusability; having a foundation in asynchronous code will enable you to work with external data sources; array methods like map, filter, and reduce will be your best friends when converting data into UI elements or creating interactive lists.

To this end, my recommendation would be to invest the first part of your journey in understanding and practicing the fundamentals of javascript. The courses I recommended above will be more than sufficient to provide that foundation.

Framing a framework

Frameworks empower developers to build scalable, secure apps and websites with efficiency. At the heart of it, a frontend framework is just a set of standards that enables developers to:

  • create UI components
  • manage and keep state ( an app’s internal data )
  • provide interactive experiences ( clicks, user input, etc. )
  • package their code in a more manageable way

Frameworks emphasize the component as the atomic unit. In previous years, most code would have the html file for structure, the css file for styling, and the javascript file for additional interaction. All of these would occupy separate, and often, robust files. The relationship between a javascript click event and an html button would be buried in a lot of unrelated code. The resulting factor was that the code was tricky to navigate, manage, and debug. Now, many frameworks have started to encapsulate this logic into singular components: html, css, and javascript all underneath the same roof. A developer will have a component for each UI need: a button, a content card, etc. This approach makes it far easier to update specific parts of the site and debug applications. It also empowers greater composability and reusability of the code itself. The component, as opposed to the page, is now the atomic unit.

So many frameworks, so little time

After learning the foundations of javascript, the next move would be to choose a framework and immerse yourself in it. As mentioned previously though, there are numerous choices and without pre existing experience it can be difficult to pick one.

The 3 primary frameworks for javascript to date are:

If you have time to explore, I would recommend React JS, Angular & Vue JS by Maximilian Schwarzmüller. This video series is a great primer and introduction into each of the libraries and how they differ. The syntax is a little outdated, but all of the mental models correspond closely to the foundations of these frameworks. As an aside, there’s an up and coming framework that’s making quite a big splash called Svelte. I’ve honestly not used it, but the simplified syntax and approach to components certainly intrigue me.

If you’re wanting to help your product ship code, then the easy choice would be to learn the framework that your product sits on.

When I switched into learning javascript frameworks, I started with Vue JS. I honestly don’t remember much about the syntax and setup, but I do remember that the mental models were relatively easy to grasp and I was able to construct experiences quickly. However, it was a short lived phase. I transitioned into React early on because the company I worked for, Microsoft, was building their design language with it. And, ultimately, I’m thankful that I did.

So, when assessing a framework, there’s a few questions I would advise:

  • How easy is it for you to use?
  • Can you complete necessary tasks like user interaction, internal state storage, and component composability?
  • Does it have well supported and clear documentation?
  • Does it have an invested, vibrant, and large community?
  • Does it have a growing ecosystem of well supported plugins and libraries? ( I have grown to realize that this is crucial to developing reliant, scalable websites with efficiency )
  • Does the team behind the framework regularly evolve it in a beneficial and performant direction?

Over time, I have found that React has met all of these needs for me. React has continually moved from imperative code to declarative code. What this means is that their code paradigms prioritize what developers want to achieve instead of how to achieve it. Less ceremonial code and hoops to jump through to achieve desirable outcomes like user interaction, hiding and showing elements, and updating data in the app. Also, React has an incredible of community of developers behind it which means widespread community support, blog posts, educational platforms, and even frameworks on top of React ( more on that soon ). Based off of personal experience, I would highly recommend React to any designer looking to learn a framework.

Here are a few of my favorite resources for React:

Frameworks on frameworks

The more daunting parts of development often revolve around the ecosystem of needs that extend beyond the granular tasks of code. Some of these needs include:

  • overall site performance
  • storing and querying data
  • SEO enhancement
  • app navigation / routing
  • page creation
  • connected workflows for deployment

Frameworks certainly make the job of development far easier. But because many of them center around component creation, many of the other tools needed for site production are left to other libraries and services. While this leaves room for other tools to provide the best in class experiences, it requires individuals to do research into other options, learn new libraries, and understand configurations. Speaking from personal experience, this can be overwhelming and discouraging for any newcomer to the javascript framework world.

Within recent years, new frameworks have been popping up that extend current JS libraries like React and Vue. These frameworks use the syntax provided by the underlying JS library and then add in new technologies to accommodate other needs, like site performance, storing and querying data, and app routing.

Some of the most popular frameworks include:

I work for Gatsby so they would be my first suggestion for React developers. Gatsby’s documentation is world class and they have tutorials for a huge range of Gatsby sites. Gatsby also comes equipped with a robust library of plugins that enable developers to:

Perhaps Gatsby’s biggest claim to fame is how lightning fast and performant their sites are out of the box. Regardless of which meta framework you choose, they can be incredibly beneficial for overall site development and the end user experience.

Deployment: are we live yet?

Deployment has often been one of the other significant hurdles in shipping a production ready site. Back in the day, we had FTP (file transfer protocol) clients that allowed us to upload our static files to a hosting server. Thankfully many tools are emerging in the hosting space leveraging workflows like CD, or Continuous Deployment, to empower seamless deployment. CD enables developers to push their site to an open source platform, like Github, and automatically trigger a deployment of their site to an end state, client facing URL.

One of the forerunners in this space is Netlify. Among their many offerings, is their primary CD service where you can connect a git repository and have your site up and running on a URL in seconds. They also deploy from the edge. The edge is a reference to CDNs, or content delivery networks. The primary function of a CDN is to serve your content from the closet location to the user. The closer the location, the faster your site loads, and this makes everyone happy.

Shameless plug: Gatsby also has a service for Continuous Deployment. It’s called Gatsby Cloud, and we have been hard at work making it a world class product. It performs similar operations to Netlify though we do seek to diverge in certain areas. At the time of writing this article, some of the key differentiators we boast of are:

Alternatively, if you decide to go the Next JS route, they also have a deployment service called Vercel. Regardless of which service you choose, the great news is that there now exists easy, accessible options to quickly deploy your site to the world.

Going full-stack with Node.js

For much of javascript’s history, it occupied the front-end zone of the web. When we go to a site, the client makes a request to the server for that site’s resources. The browser can only read and interpret 3 types of files: html, css, and javascript. So, these are the only file types that the server sends back to the client. And vice versa, the server can only run machine level code or else there must be a custom engine built to run a particular language. For much of the web’s early existence, languages like PHP, Python, and Ruby we’re the primary server-side languages.

Why does this matter? Well, if you wanted to work with databases or store code on a server, you had to learn different languages: a significant mental shift and time hurdle for any front-end developer.

Node.js to the rescue. Node.js is javascript that runs outside of the browser. How does it do this? It uses Google Chrome’s V8 engine to run its code on a server. Now, you can be a full-stack developer with just one language: javascript.

Practically, some of the functionality you can access with Node.js includes:

Unless you are looking to go full-stack, you may not find yourself writing a lot of Node js code. You will however need to install it to leverage frameworks and the powerful library of packages on npm. If you are interested in going deep on Node js, I would highly recommend Andrew Mead’s course, The Complete Node.js Developer Course.

Deep Learning

Development like design is an ever evolving journey. And like design, there will always be more tools, abstraction layers, and opportunities to speed your process up. But, it should be noted that these are still just tools that use plain javascript at their core. Just as the essence of good design is still typography, space, color, concept, and human empathy, and Figma is a tool for carrying out these ideas with ease and at scale.

To that end, deep learning on the subject of javascript and the processes the js engine goes through to execute code can be invaluable to effectively using these tools. Here are a few of my favorite deep dive courses on javascript:

Basically anything Frontend Masters produces, I’m behind it. I’m also a big fan of Learn with Jason. His video series does an excellent job of working through high value dev tasks with key experts in the industry. Furthermore, many of the teachers I mentioned in previous sections also have a wealth of material for the different stages of the developer journey.

Parting words

As you embark on the developer’s journey, my central piece of advice would be to have fun with it. Value repetition because it’s the key to retention. If you don’t understand something, replay the tutorial, seek other articles, or take a break, go for a run, and return later. I can say with all honesty that most portions of development have had an aspect of intimidation to me, but the more you immerse yourself in this ecosystem, the more the ideas and syntax start to gel. Comb through others’ open source projects on Github. Observation can be a valuable teacher.

I hope this article has provided you with some valuable foundations. I love hearing about others’ journeys, so get at me on twitter when you reach some of your milestones. Now go forth and code!