Skip to main content
Redhat Developers  Logo
  • Products

    Featured

    • Red Hat Enterprise Linux
      Red Hat Enterprise Linux Icon
    • Red Hat OpenShift AI
      Red Hat OpenShift AI
    • Red Hat Enterprise Linux AI
      Linux icon inside of a brain
    • Image mode for Red Hat Enterprise Linux
      RHEL image mode
    • Red Hat OpenShift
      Openshift icon
    • Red Hat Ansible Automation Platform
      Ansible icon
    • Red Hat Developer Hub
      Developer Hub
    • View All Red Hat Products
    • Linux

      • Red Hat Enterprise Linux
      • Image mode for Red Hat Enterprise Linux
      • Red Hat Universal Base Images (UBI)
    • Java runtimes & frameworks

      • JBoss Enterprise Application Platform
      • Red Hat build of OpenJDK
    • Kubernetes

      • Red Hat OpenShift
      • Microsoft Azure Red Hat OpenShift
      • Red Hat OpenShift Virtualization
      • Red Hat OpenShift Lightspeed
    • Integration & App Connectivity

      • Red Hat Build of Apache Camel
      • Red Hat Service Interconnect
      • Red Hat Connectivity Link
    • AI/ML

      • Red Hat OpenShift AI
      • Red Hat Enterprise Linux AI
    • Automation

      • Red Hat Ansible Automation Platform
      • Red Hat Ansible Lightspeed
    • Developer tools

      • Red Hat Trusted Software Supply Chain
      • Podman Desktop
      • Red Hat OpenShift Dev Spaces
    • Developer Sandbox

      Developer Sandbox
      Try Red Hat products and technologies without setup or configuration fees for 30 days with this shared Openshift and Kubernetes cluster.
    • Try at no cost
  • Technologies

    Featured

    • AI/ML
      AI/ML Icon
    • Linux
      Linux Icon
    • Kubernetes
      Cloud icon
    • Automation
      Automation Icon showing arrows moving in a circle around a gear
    • View All Technologies
    • Programming Languages & Frameworks

      • Java
      • Python
      • JavaScript
    • System Design & Architecture

      • Red Hat architecture and design patterns
      • Microservices
      • Event-Driven Architecture
      • Databases
    • Developer Productivity

      • Developer productivity
      • Developer Tools
      • GitOps
    • Secure Development & Architectures

      • Security
      • Secure coding
    • Platform Engineering

      • DevOps
      • DevSecOps
      • Ansible automation for applications and services
    • Automated Data Processing

      • AI/ML
      • Data Science
      • Apache Kafka on Kubernetes
      • View All Technologies
    • Start exploring in the Developer Sandbox for free

      sandbox graphic
      Try Red Hat's products and technologies without setup or configuration.
    • Try at no cost
  • Learn

    Featured

    • Kubernetes & Cloud Native
      Openshift icon
    • Linux
      Rhel icon
    • Automation
      Ansible cloud icon
    • Java
      Java icon
    • AI/ML
      AI/ML Icon
    • View All Learning Resources

    E-Books

    • GitOps Cookbook
    • Podman in Action
    • Kubernetes Operators
    • The Path to GitOps
    • View All E-books

    Cheat Sheets

    • Linux Commands
    • Bash Commands
    • Git
    • systemd Commands
    • View All Cheat Sheets

    Documentation

    • API Catalog
    • Product Documentation
    • Legacy Documentation
    • Red Hat Learning

      Learning image
      Boost your technical skills to expert-level with the help of interactive lessons offered by various Red Hat Learning programs.
    • Explore Red Hat Learning
  • Developer Sandbox

    Developer Sandbox

    • Access Red Hat’s products and technologies without setup or configuration, and start developing quicker than ever before with our new, no-cost sandbox environments.
    • Explore Developer Sandbox

    Featured Developer Sandbox activities

    • Get started with your Developer Sandbox
    • OpenShift virtualization and application modernization using the Developer Sandbox
    • Explore all Developer Sandbox activities

    Ready to start developing apps?

    • Try at no cost
  • Blog
  • Events
  • Videos

Getting started with JavaScript application development

April 22, 2020
Dana Gutride
Related topics:
Node.js
Related products:
Red Hat build of OpenJDKRed Hat build of QuarkusRed Hat JBoss Enterprise Application Platform

Share:

    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: February 11, 2024

    Recent Posts

    • How Kafka improves agentic AI

    • How to use service mesh to improve AI model security

    • How to run AI models in cloud development environments

    • How Trilio secures OpenShift virtual machines and containers

    • How to implement observability with Node.js and Llama Stack

    Red Hat Developers logo LinkedIn YouTube Twitter Facebook

    Products

    • Red Hat Enterprise Linux
    • Red Hat OpenShift
    • Red Hat Ansible Automation Platform

    Build

    • Developer Sandbox
    • Developer Tools
    • Interactive Tutorials
    • API Catalog

    Quicklinks

    • Learning Resources
    • E-books
    • Cheat Sheets
    • Blog
    • Events
    • Newsletter

    Communicate

    • About us
    • Contact sales
    • Find a partner
    • Report a website issue
    • Site Status Dashboard
    • Report a security problem

    RED HAT DEVELOPER

    Build here. Go anywhere.

    We serve the builders. The problem solvers who create careers with code.

    Join us if you’re a developer, software engineer, web designer, front-end designer, UX designer, computer scientist, architect, tester, product manager, project manager or team lead.

    Sign me up

    Red Hat legal and privacy links

    • About Red Hat
    • Jobs
    • Events
    • Locations
    • Contact Red Hat
    • Red Hat Blog
    • Inclusion at Red Hat
    • Cool Stuff Store
    • Red Hat Summit

    Red Hat legal and privacy links

    • Privacy statement
    • Terms of use
    • All policies and guidelines
    • Digital accessibility

    Report a website issue