28 Client-side Languages and Frameworks

This textbook focusses on raw JavaScript. For beginners, a grounding in the basic features of the JavaScript language will go a long way. It is a necessary prerequisite to set you up for working with newer languages and frameworks, whether on the client side, the server side, or in a completely different context. Knowing JavaScript is one of the most future-proof skills you can have as a software developer in the fast-changing world of full stack web development.

Below is a short roundup of currently popular languages and frameworks, both new and old, that build on raw JavaScript.

TypeScript

JavaScript’s dynamic and weak typing can be both a blessing and a curse. Not having to worry about types and type conversions can lead to rapid prototyping and exploration of ideas, but when misused it can also lead to buggy code that is difficult to maintain. TypeScript is a language that was developed at Microsoft and first released in 2012. It’s based heavily on JavaScript. In fact, it is not too far off the mark to say that TypeScript is really just JavaScript with a static and slightly stronger type system.

Working in TypeScript requires a compiler. But TypeScript code does not compile to machine language like a traditional compiler would, it compiles to JavaScript (this is sometimes referred to as “transpiling“). The big advantage TypeScript offers is that it enforces type compatibility at compile time. Every variable must be declared with a type, and any attempt to assign the wrong type of value to a variable, or even to compare it to the wrong type of value, results in a syntax error.

In the examples below, x and y are forced to the types number and string respectively:

let x: number = 23; 
let y: string = "5";

if (x == y) {console.log("equal");}
y = x;
x = "hello";

The following legal statement in JavaScript is also an error in TypeScript because the variable is undeclared:

z = 13.5;

At the time of writing, TypeScript is experiencing a surge in popularity.

React

React is a JavaScript framework created at Facebook and made publicly available in 2013. It allows the easy creation of custom HTML elements that can be re-used in different contexts. For example, you might define a custom component for a shopping list that contains input elements and controls, and then put it onto a web page with a <ShoppingList> tag.

Each component has a render method that is called automatically by the React system whenever the state (attributes) of that component changes. In the React framework, programmers do not have to manipulate the DOM directly. They just write code to render an element into the DOM. React decides when the DOM should be updated and uses the render methods of all objects on the page to make the changes in the most efficient way it can.

React is a great way to build large-scale web apps out of reusable components, but it is a sophisticated framework that requires a strong understanding of the underlying JavaScript, and if you just want to produce a small app quickly, the React overhead may slow you down.

JQuery

Web Developers are always struggling with browser compatibility. This has become less of an issue in the last 10 years, but it remains the case that code written and tested on one browser may work slightly differently on another. The jQuery library was developed around 2006 to add compact and powerful DOM manipulation methods that would be 100% compatible across browsers. It remains a very popular library today.

The basic move in jQuery is to define a jQuery object using a CSS selector, then chain method calls onto that object to apply changes to all elements that match the selector. For example, the command below retrieves all p elements with a class of important and sets their color, title, and text:

$("p.important").html("Alert!").css("color","red").attr("title","warning");

jQuery also makes DOM animation very easy. The line below makes all div elements with a class of disappear fade out over 1000 milliseconds:

$("div.disappear").fadeout(1000);

BootStrap

BootStrap was created at Twitter and released as open source in 2012. It is more of a CSS framework than a JavaScript framework, using a vast library of pre-defined CSS classes to enable clean, consistent, and responsive web page design. However it does also contain JavaScript components for animations, slide shows, pop up menus, and other commonly desired components. JavaScript developers can leverage BootStrap to avoid re-inventing the wheel for many aspects of the user interface.