For many developers who have never built a JavaScript web application before, the first steps can be daunting. Our development team has the opportunity to interact with both students that are just getting started and developers with lengthy experience building out complex applications. Even seasoned back-end developers often ask where they can get started with JavaScript. Our response is invariably, "Don't just read. You need to start building things, play with the language to see what it can do."
JavaScript frameworks
Many times they also ask, “Which framework should I learn?” JavaScript frameworks like Angular, Vue, or React generate a lot of excitement, but they confuse the picture of where to start. At this stage, many developers might not want to choose a framework at all, so that they don't lock themselves into a specific technology. If you wonder about these same things, you’re not alone. Fortunately, there are plenty of free resources to help you get started with learning how to build enterprise-quality JavaScript applications.
The other great piece of news is that the JavaScript framework you choose shouldn't have an impact on your application's user experience in the end. If you're putting your content and information architecture first, the framework becomes simply an implementation detail. Speaking from personal experience, it's easy to get excited about a specific framework, but that can lead to long-term disappointment in an environment that changes rapidly. Instead, understanding JavaScript at its core will prepare you for quality web development well into the future.
With that in mind, I wanted to break down an approach that can help you prepare for the world of front-end development. Many of these areas I'll discuss are common across the entire ecosystem of JavaScript development, and the skills learned here are transferable. Instead of only explaining how to start with these, I also wanted to compile a list of resources that can be valuable for getting started.
I look at the application developer growth process as having two basic steps. In the first step, you learn the JavaScript ecosystem, and then web application architecture. Learning about the JavaScript ecosystem involves learning JavaScript and practicing JavaScript coding. You can then build your first Node.js application.
The second step, understanding web application architecture, involves two stages as well. You need to transition your JavaScript skills into building a web application and making architectural decisions for your code. Then, you can make build and deployment decisions for your application. Let's take these steps one-by-one. I won't go into too many details, I’ll just outline the steps and provide resources that can help with making these choices.
The JavaScript ecosystem
We'll start with the first step's two stages, which lead to you writing your first Node.js application.
Learn JavaScript and practice writing JavaScript code
The Mozilla Developer Network (MDN) has a great resource for coming up to speed on JavaScript. This JavaScript reintroduction can help with a high-level overview of the basics and it takes 30–60 minutes to complete. Once you are familiar with the basics, it's important to dive deeper into the language. This part will take time, but understanding the power of JavaScript and some quirks of the language will prove to be invaluable.
JavaScript understanding also provides a solid foundation for any front-end development effort. All frameworks that target browsers end up using JavaScript in some form or another in order to accomplish interactivity. For a deeper dive, the MDN documentation provides a much more in-depth tutorial. I've also found You don't know JS Yet to be an indispensable resource for developers expanding their JavaScript knowledge. The author describes this resource as "a series of books diving deep into the core mechanisms of the JavaScript language."
Building your first Node application
Now that you have a grasp on the language, it's likely that the tutorials mentioned above resulted in a Node application to run your JavaScript. If not, it's helpful to understand the Node.js ecosystem. Browsers can run JavaScript without any help, but a web application that builds upon open source libraries and takes advantage of compiling and bundling assets is essential. This need requires the use of Node.js. To get started with Node.js, I'd recommend starting by exploring Node with this introduction to Node.js. After that, Nodejs.dev also has information on how to install Node.js locally and get started.
Node can be used to execute JavaScript files outside the browser. It is also a key part of building and working with web applications. Node includes a package manager called NPM, which you might have heard of. A key part of NPM is the package.json file that is described in detail also on the Nodejs.dev site.
Most developers will become very familiar with running npm init in an empty directory. This action is almost always the first step in building a Node-based web application. Once the package.json file exists, you can add commands to the scripts: {} section to execute commands. For example, you could add something like this:
"scripts": {
"hello": "echo \"hello\""
}
Save the package.json file. Then, from the command line, run:
$ npm run hello
You should see the output: "hello". The scripts section of this file is powerful. I encourage you to become familiar with package.json and how to execute commands using it.
Now that you have JavaScript foundations and an understanding of how to use Node.js at a high level, it's time to start building your JavaScript web application. There are many choices to make, but without going too far down this rabbit hole, let’s jump into the next steps.
Understanding web application architecture
Now let's get into the second step's two stages, which lead to making your build and deployment decisions for your application.
Transition JavaScript skills to web applications and their architecture
Putting thought into your application architecture before you write a single line of code is an important starting point. I've seen many applications refactored when the developer didn't consider how their application would scale. A component folder with only five files looks organized, but once there are 100 files, it's hard to find what you are looking for. Any decision that will impact every single JavaScript file you potentially create should be carefully considered up-front.
It's easy to become overwhelmed by this process and get stuck in an indecision loop. You can break out of that by identifying established tooling and learning from the examples of others who have done this time and again. To this end, as you make many decisions while building your software, these are good issues to consider before writing any code:
- JavaScript framework choice
- File/folder structure for expansion
- CSS architecture
- Typescript or not
- Code linting
- Test approach
- Routing
- State management and caching layer
Make build and deployment decisions for your application
Once your basic code architecture decisions are made, you'll need to decide on how developers will build and work with the code. You'll also need to look at how the final code will be compiled for production delivery. Earlier choices about frameworks can make these next decisions easier: There are often build tools that come naturally with those frameworks.
I have also found that these decisions are easier to change later on because these layers generally sit outside of the code. Choosing standard tooling options such as webpack or gulp helps quite a bit when considering the following:
- Local developer environment
- Source maps
- Module bundler
- Production optimization
On the PatternFly team, we've put quite a bit of energy and our combined experience into documenting and implementing web application architecture. Our goal is to help teams get started using PatternFly quickly. If you're not familiar with PatternFly, it's an open source design system with guidelines, resources, and more to help you give your application a professional look and feel.
We've more recently focused on delivering React-based applications since we found that the majority of our users were standardizing on that framework. To get started with ReactJS, I'd encourage you to review the Getting Started page on reactjs.org. If you are a designer and want to start learning more about ReactJS development, React for designers is another great resource.
Finally, if you'd like to see all of this in action, check out a ReactJS starter application for getting started with PatternFly.
Final thought
The JavaScript ecosystem is a lot of fun to work with, but it changes rapidly. While that can be overwhelming to many of us who like stability, focusing on the basics and then applying that core knowledge to your web applications will help you be a successful web application developer.
Last updated: June 29, 2020