A designers guide to ( js ) development
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.
Language or 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
reduce will be your best friends when converting data into UI elements or creating interactive lists.
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
So many frameworks, so little time
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.
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:
- React by Tyler McGinnis
- React Hooks by Tyler McGinnis
- React for Beginners by Wes Bos
- Mastering React by Mosh
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
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:
- connect with local data sources
- set up SEO for all pages
- connect with external CMS’s
- optimize site images
- and much, much more
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:
- site analytics with lighthouse scores
- blazing fast site builds with incremental builds
- a rich ecosystem of site templates
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
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.
Practically, some of the functionality you can access with Node.js includes:
- setting up servers and apis
- running code compilation processes ahead of run time
- access to an incredible library of functionality
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.
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.
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!