JavaScript at WWT Application Services

<p>While the JavaScript domain is ever-changing, there are some frameworks and areas of focus that we emphasize.</p>

Areas of Focus

React

<p><a href="https://reactjs.org/" target="_blank">React</a> from Facebook has been around for over 7 years now and is the most common framework used on teams at Application Services.</p><p>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.</p><p>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.</p><p>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 <a href="https://app.pluralsight.com/library/courses/using-react-hooks/table-of-contents" target="_blank">this PluralSight course</a>.</p>

Angular

<p>Google launched <a href="https://angular.io/" target="_blank">Angular</a> 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.</p><p>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 <code>ngrx</code>, the Angular wrapper of <code>rx.js</code> that allows for state management and data flow.</p><p>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.</p><p>For a talk around what you can do to help organize and structure an Angular project, check out <a href="https://app.pluralsight.com/course-player?clipId=3e50aafd-935e-4791-ab7a-b850e4976c0a" target="_blank">this PluralSight video</a>.</p>

NodeJS

<p><a href="https://nodejs.org/en/" target="_blank">NodeJS</a> 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.</p><p>Coupled with NodeJS is <a href="https://www.npmjs.com/" target="_blank">NPM</a>, 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.</p><p>Some helpful libraries to be familiar with when working in NodeJS are:</p><ul><li><code>fs</code> - File System, allows for reading, writing, and watching files and directories.</li><li><code>child_process</code> - Allows for creation of other process, including other instances of node for multithreading.</li><li><code>express</code> - ExpressJS is probably the most common library uses for creating simple servers and APIs.</li><li><code>hapi</code> - HapiJS is a strong alternative to ExpressJS.</li><li><code>http-server</code> - If all you need is a static file server, this command line utility can get you up and running very fast.</li></ul>

On the Rise

<h3>Vue</h3><p><a href="https://vuejs.org/" target="_blank">Vue</a> 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 <a href="https://app.pluralsight.com/course-player?clipId=9c51f64c-1634-4727-880b-8b46eb8126bf" target="_blank">this PluralSight course</a>.</p><h3>Svelte</h3><p>The main concern <a href="https://svelte.dev/" target="_blank">Svelte</a> 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 <a href="https://app.pluralsight.com/library/courses/svelte-getting-started/table-of-contents" target="_blank">this PluralSight course</a>.</p><h3>Deno</h3><p><a href="https://deno.land/" target="_blank">Deno</a> (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 (<code>import</code> syntax) rather that CommonJS's <code>require</code>. Visit <a href="https://deno.land" target="_blank">deno.land</a> for more information.</p>

New to JS?

<p>If you're just starting out in JavaScript, we've got some resources to get you on your feet.</p><p>We recommend using <a href="https://app.pluralsight.com/library/" target="_blank">PluralSight</a> to find courses relevant to your specific interests, although<a href="https://app.pluralsight.com/library/courses/javascript-getting-started/table-of-contents" target="_blank"> here's a good place to get started</a>.</p><p>There are many other resources available in our <a href="https://wwt.sharepoint.com/sites/DeveloperPrincipalEngineers/SitePages/JavaScript-Learning-Guide.aspx" target="_blank">JavaScript Learning Guide</a>, but if you want a very comprehensive language guide, you can check out <a href="https://javascript.info/" target="_blank">javascript.info</a>.</p><p>We also are working on a roadmap for how to learn JavaScript (link soon).</p>