JavaScript Development

React from Facebook has been around for over 7 years now and is the most common framework used on teams at Application Services.

React works by creating a virtual DOM model that the engine then uses to reshape the real DOM. The developer is able to create components using JSX to write HTML directly in JavaScript and create a hierarchy very similar to a real HTML document, but able to use JavaScript directly alongside the elements it will affect, listening for events, updating classes, text, and values.

Redux is often used alongside React to manage data and app state that needs to be accessed across multiple areas in the app, although it is not required and pertains more to applications that reach a certain level of complexity. There are also many alternatives to Redux, which we will be having a Community Meetup on shortly.

Some of the more recent features added to React include the Hooks API, which allows for the creation of functional components that can maintain state and references. For an overview of hooks, consider watching this PluralSight course.

Google launched Angular 2.0 in 2016, but its predecessor, AngularJS, is over 10 years old. AngularJS remains very common in more older applications, but the vast majority of new projects are started Angular instead due to the better workflow, tooling, and performance. Angular is the second most common frontend framework used on teams Application Services, and AngularJS also saw its fair share of use, although it is more common to see conversions from AngularJS to Angular now.

Angular is a strongly opinionated framework, opting for TypeScript by default for type safety and including a robust command line interface and compiler. Angular also provides its own utilities for tasks such as routing and requests, and is very often coupled with ngrx, the Angular wrapper of rx.js that allows for state management and data flow.

One of the major recent updates to Angular was the release of Ivy, a new view engine for translating Angular components into what you see in the browser. Ivy is meant to allow for smaller bundle sizes, faster performance, and simpler applications.

For a talk around what you can do to help organize and structure an Angular project, check out this PluralSight video.

NodeJS brought JavaScript to the desktop over 11 years ago and is mainly used for the creation of simple servers or APIs. The benefit of NodeJS for servers comes from JavaScript's emphasis on event-driven code, which ensures very low CPU usage when no code is running.

Coupled with NodeJS is NPM, the Node Package Manager, which provides access to over 1 million packages ranging from simple utilities to frontend frameworks to command line functions. NPM also provides ways to run commands once (NPX) and uses the package.json for quick project-level scripts.

Some helpful libraries to be familiar with when working in NodeJS are:

• fs - File System, allows for reading, writing, and watching files and directories.
• child_process - Allows for creation of other process, including other instances of node for multithreading.
• express - ExpressJS is probably the most common library uses for creating simple servers and APIs.
• hapi - HapiJS is a strong alternative to ExpressJS.
• http-server - If all you need is a static file server, this command line utility can get you up and running very fast.

You might also consider checking out some of the content created by WWT such as:

• What is CORS (Cross-Origin Resource Sharing)? by James Hoekzema
• RESTful Web Services with Node.js and Express by Jonathan Mills

TypeScriptis by far the most common flavor of JavaScript and arguably close to being more popular than writing in vanilla JavaScript itself. TypeScript – as the name implies – adds types to JavaScript as well as some other syntactic sugar such as decorators to allow for more “compile” / IDE level error checking. The major frameworks (React, Angular, etc.) all support writing in TypeScript and many other major libraries are gaining the support.

With interest in TypeScript growing, there have been some new content on the Platform:

• TypeScript Records and Mapped Types by Dave Morse
• Protecting the Boundaries of a TypeScript App With Redux by Nick Perrin
• Typescript: Beyond the Type Hype by Josh Hollandsworth

If you are interested in learning TypeScript, the Official Docs are a great place to start, as well as this list of PluralSight Courses.

Vue

Vue is actually the framework of choice for WWT's IT department and has recently been used by a couple of teams in Application Services. Vue is often described as striking a balance between the free-form world of React and the rigid guidelines of Angular. Learn more about Vue in this PluralSight course.

Svelte

The main concern Svelte as a framework tries to address is eliminating framework overhead, or rather to move that overhead into a compile step. Svelte focuses on converting components into Vanilla HTML, CSS, and JS for better performance and smaller package sizes. Learn more about Svelte in this PluralSight course.

Deno

Deno (Node backwards) is a relatively recent creation by the original creator of NodeJS, Ryan Dahl. The goal is to create NodeJS the way it “should” have been: much more aligned with how browsers have been set up. It runs in TypeScript for type safety, all features that could be a security concern are locked by default, and ESM is used (import syntax) rather that CommonJS's require. Visit deno.land for more information.

If you're just starting out in JavaScript, we've got some resources to get you on your feet.

We recommend using PluralSight to find courses relevant to your specific interests, although here's a good place to get started.

There are many other resources available in our JavaScript Learning Guide, but if you want a very comprehensive language guide, you can check out javascript.info.

We also have a roadmap for How to Learn JavaScript.

In addition, you can checkout Test Driven Development in JS, which goes into some more specific areas of testing past what is covered in the TDD 101 course.