JS Questions: What is Node.js?

This is the ninth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is Node.js?

Unlike Ruby (and many other programming languages), JavaScript wasn’t built to be executed outside of the browser. A Ruby program can be run by simply typing the path to the file to be run prepended by ‘ruby’ in terminal:

ruby filename.rb

Node.js (also called simply Node), which is built on the Chrome V8 JavaScript Engine, can be used to run JavaScript code outside of the browser. To try it, download Node and run the Javascript file from terminal:

node filename.js

Nodejs.org refers to Node as a runtime. Runtime environments dictate how a program is executed. All runtime environments have an event loop, or set of instructions how a programming language handles incoming events and dispatches them.

A ‘non-blocking I/O model’ differentiates Node from other runtime environments. Input and output (I/O) refers to the interaction between the processing system and user or other input making a request. A user clicks their mouse, for example, and the server returns requested data rendered in the browser.

In contrast to a non-blocking model, a blocking I/O is one in which JS code cannot run until the previous operation is complete. In other words, the event loop pauses until the process finishes. Node allows asynchronous, non-blocking events to occur, meaning that a process doesn’t need to finish in order for another to start. This allows an application to handle frequent incoming requests with minimal downtime.

Node is widely used to make server-side applications. The server side of an app takes in requests and responds with data to the front end of the application. This allows requests to create, update, or delete data to be persisted in a database, as well as for information to be accessed from the database and rendered in the front end.

Scalability, low latency, and high bandwith are often noted as key benefits of using Node over other server-side options, due to its non-blocking I/O. More information about how Node works as compared to Ruby’s Event Machine, for example, is available on nodejs.org.  There’s also a ‘hello world’ example for creating a server with Node and hosting it on a port.

Node also has a popular JavaScript package manager, npm, which allows developers to install JavaScript packages, pieces of software made available to developers to download and use with their own projects. Some commonly downloaded JS packages include express, react, and babel-core.

“Node’s package manager, npm, has transformed from hosting utility modules for server-side apps to the canonical place to store distributable JavaScript code.” –The future of Javascript in 2017 and Beyond

Finally, node is also open source and has a community of contributors.

Resources

 

 

Advertisements

JS Questions: What’s a JavaScript Engine?

This is the eighth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What’s a JavaScript Engine?

JS engines interpret and execute JavaScript code, usually for a web browser (since JS is commonly used for web development). They are written in lower-level languages such as C++ and C.

An engine must receive the specific version of JavaScript that it has been built to interpret. (There are several versions of JavaScript, as the language becomes updated and optimized for development. The most recent version is ES2017, which can be transpiled to an earlier version of JS in order to be run by a JS engine.)

Browsers have an increasing need to efficiently interpret JS code, because web applications more heavily rely on Javascript, not just to run a few scripts, but as their framework language. While popular modern browsers all have JS engines, there’s still a lot of competition among them to have the fastest engine that can generate the most optimized code.

Examples of JS Engines

  • V8 (Chrome)
  • Spidermonkey (Mozilla)
  • JavaScript Core (Safari)
  • Chakra (IE)

 

Resources

JS Questions: What’s a Transpiler?

This is the seventh in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What’s a Transpiler?

JavaScript transpilers emerged when the latest big update to JavaScript (ES2015) was released, which brought about some major changes to the language (such as arrow functions and classes). These updates have been good for developers, making it easier to write code in an intuitive and concise manner.

Before ES2015, the most recent update to the language had been in 2009, and since 2015, two more updates have been released, ES2016 and ES2017. With the recent rapid changes to JS, web browsers like Chrome, Firefox, and Safari have been unable to maintain compatibility with the language, and transpilers are used to bridge the gap between them.

This table breaks down different browsers’ compatibility with JS versions by feature, giving a sense of the types of issues that must be accounted for by web browsers with language updates.

Transpilers such as Babel take care of this compatibility issue by transforming code to follow earlier conventions the browser can support. Essentially, a transpiler allows a programmer to have the convenience of coding in the most recent version of JS, while still being able to revert the code to an earlier standard. The transpiled code probably won’t be as readable as it would be if it had been written by a programmer (check out Babel’s repl to test this), but it shouldn’t matter–transpiled code will be handed off to the compiler to transform into computer-readable code.

Sources

 

 

JS Questions: What is jQuery?

This is the sixth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is jQuery?

JQuery is a widely-used JavaScript library that makes it easier to access and manipulate DOM elements with JavaScript.

Developing with pure JavaScript is relatively tedious and time consuming, because it takes a lot of work to access DOM elements and assign any changes I may want to make to them. With vanilla JS, I’d have to grab an array of elements by class name, for example, and then iterate through those elements and remove a class. With jQuery, though, I can find elements by class and update them in one step.

 

JQuery can also be used to simplify tasks such as making animations, handling client-side events (such as a click), and making AJAX requests. Another benefit of using jQuery in contrast in vanilla JS is that the library has cross-browser compatibility built-in, meaning webpages built with jQuery generally should work the same across all browsers.

 

In recent years, many new JavaScript libraries and frameworks have emerged. JQuery has fallen from popularity as new techniques and approaches have moved to the forefront, but for small webapps, such as a single page JavaScript game, jQuery may still the the right choice.

Sources

JS Questions: What is a First-Class Function?

This is the fifth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is a First-Class Function?

In JavaScript, functions can be assigned to variables, passed as arguments to other functions, returned by functions, and stored in data structures. Basically, functions are instances of JavaScript’s Object type, just like strings or arrays.

Below is an example of a JavaScript arrow function being assigned a variable name, exclaim. JavaScript’s map function is called on an array of words, and passes in the exclaim function as an argument. These are two ways first-class functions can be used.

When a function takes in another function as an argument and/or returns a function as its value, it is known as a higher-order function. The map example above is a higher-order function.

A function passed as an argument to another function is known as a callback function.

Not all programming languages have first-class functions. With Ruby, for example, methods cannot be assigned to variables or be passed to other methods.

Sources

JS Questions: What is JSON?

This is the fourth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is JSON?

JSON, or JavaScript Object Notation, is a syntax that is useful for sending and receiving server data. Since a server can only send and receive data as text, JSON is used to convert data into text, as well as transform text received from a server into an easily readable format for developers. These transformations are made using the JSON.stringify() and JSON.parse() methods, respectively.

Modern webpages frequently make requests using the AJAX request and response cycle. Once a response has been received, it can be parsed to JSON. From there, a developer can access data in the JSON object.

JSON is compatible with many programming languages (not just JavaScript). A ruby developer can treat the JSON object like a ruby hash, for example, using dot or bracket notation to access nested key-value pairs. A JavaScript programmer would treat the JSON object like a JavaScript object.

The data types that can be converted with JSON are:

  • number
  • string
  • boolean
  • array
  • object
  • null

Sources

 

 

JS Questions: What is AJAX?

This is the third in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is AJAX?

Websites used to be composed of static HTML pages. Each time a user interacted with the DOM, the entire page reloaded. AJAX, short for Asynchronous JavaScript and XML, is a bundle of technologies that allow web pages to be updated without completely reloading.

AJAX uses a functionality built into modern browsers called the XMLHttpRequest object, which has certain methods and properties that let web pages get data from a server.

The flow of an AJAX request and response cycle begins with an XMLHttpRequest object being created. Then the .open method is called on the object, which takes in three parameters:

  1. the type of request, GET or POST
  2. a URL to the requested data
  3. a boolean value of whether to send the request asynchronously. An asynchronous request means that other JavaScript functions can run while the response is being prepared and sent back from the server.

The .send method is then called on the XMLHttpRequest object, sending it to the server. The server processes the request and creates a response, returning data to the browser.

The data can be returned as XML (hence the XML part of the acronym), though it’s now more common to convert the data to JSON format, which simply allows developers to interact with data as if it’s a JavaScript object.

Using that JSON data, a portion of a web page’s HTML could be updated. For example, a JavaScript function could use HTML to create an unordered list, and append list items with text from the data.

Sources