JS Questions: What is Webpack?

This is the tenth 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 Webpack?

JavaScript-based applications have increasingly complex systems and interactions. They send and receive data; they create a user interface; they have non-JavaScript assets such as styling and images; and they incorporate outside packages of reusable code. The purpose of Webpack is to bring together all the disparate parts and turn them into one file, made readable to the browser rendering the application. This job is called module bundling. 

There are two types of ways that code is transformed in Webpack and these processes are handled by separate entities: loaders and plugins.

Loaders take in the application’s files, turn them into modules that can be read by a JavaScript engine, and add the modules to a dependency graph. A dependency graph is like a map (written in JS) showing how each module is related to other modules.

Different loaders can handle different tasks in the transformation process. The babel-loader, for example, takes in ES2015 (or later) code and transpiles the code to an earlier version of JS syntax.

While loaders create modules, plugins alter the modules to optimize them for computer processing, dependency injection, debugging, and other tasks. The UglifyJS plugin, for example, minifies code in order to make it run faster. 

When all dependencies have been added to the graph and all processes have been run, the static file is handed off to the browser to load.

Webpack can be configured with whichever loaders and plugins a project needs, though there’s also an ‘out-of-the-box’ option for React developers. React, a popular library for building JS front end, has community support for Webpack. The package, Create React App, can be used to generate files for a new React application preconfigured with Webpack. The Webpack-enabled functionality, including hot reloading (which adds, removes, or updates modules, without a page needing to fully reload) make it especially handy.

Other module bundlers exist (Browserify is considered the first of its kind), but Webpack has become an industry favorite.

 

Resources:

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

 

 

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?

A JS engine interprets and executes JavaScript code, usually for a web browser (since JS is commonly used for web development).

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