#JavaScript Posts

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional freelance software engineers in the Toptal network.
Subscribe for daily updates today and check out the wealth of technical resources and videos published by the Toptal network.
Ionic 2 vs. Ionic 1: Performance Gains, New Tools, and a Big Step Forward

The Ionic project is rapidly gaining in popularity and is one of the most popular open source projects worldwide. With the recent announcement of the stable version of Ionic 2, this is the perfect time to underscore the Ionic 2 and its predecessor.

In this post, Toptal software engineer Julien Renaux outlines the major changes Ionic 2 brought to the platform and explains how to put these new features to good use.

Continue reading →
Immutability in JavaScript using Redux

In an ever growing ecosystem of rich and complicated JavaScript applications, there’s more state to be managed than ever before: the current user, the list of posts loaded, etc.Managing state can be hard and error prone, but immutability and Redux- a predictable state container for JavaScript apps- can help significantly.

In this article, Toptal Programmer David Xu talks about managing state using immutability with Redux, a predictable state container.

Continue reading →
A Guide to Managing Webpack Dependencies

The Webpack module bundler processes JavaScript code and all static assets, such as stylesheets, images, and fonts. However, configuring Webpack and its dependencies can be cumbersome and not always a straightforward process, especially for beginners.

In this article, Toptal Software Engineer Andrej Gajdos provides a guide with examples on how to configure Webpack for different scenarios and points out the most common pitfalls connected to project dependencies and their bundling when using Webpack.

Continue reading →
Make Your Web Front-end Reliable with Elm

If you’ve spent your fair share of time developing web front-ends, you know that no amount of libraries and plugins are sufficient enough to make the development experience pleasant. Unpredictable event chains, complex data binding, and lack of structured data modeling only makes things worse.

Elm, a programming language built for front-end development, cuts to the root of all these problems and solves them there.

In this post, Toptal Software Engineer Stanislav Davydov provides a detailed guide to Elm and shows us how The Elm Architecture solves some of the most fundamental challenges of front-end development.

Continue reading →
The Definitive Guide to DateTime Manipulation

In the realm of software development, time and date manipulation is considered by many to be a difficult task. Complicated time zone rules, leap seconds, differences in locale-specific formatting, etc., force us to immediately resort to popular time and date manipulation libraries. We often use these libraries without thinking about how exactly they work, which can lead to all sorts of obscure bugs in our software.

In this article, Toptal Freelance Software Engineer Punit Jajodia gives us an in-depth introduction to some concepts and best practices to avoid a few of the obvious issues related to changing the time and date in our applications.

Continue reading →
Gulp: A Web Developer's Secret Weapon for Maximizing Site Speed

When dealing with web-based projects that run in the production environment, being able to build and deploy changes quickly is a top priority. However, repetitive processes such as building front-end assets, when not automated, can be prone to critical errors.

In this article, Toptal Freelance Software Engineer Anton Kanevsky shows us how Gulp can solve various challenges of build automation through simple JavaScript routines.

Continue reading →
Web Audio API: Why Compose When You Can Code?

Meet Web Audio API, a powerful programming interface for controlling audio on the web. Gone are the days when the web browser could rarely play a sound file correctly. With this API, you can now load sound from different sources, apply effects, create visualizations, and do much more.

In this article, Toptal Freelance Software Engineer Joaquín Aldunate shows us how to unleash our inner musician using Web Audio API with the Tone.js framework by giving us a brief overview of what this API has to offer and how it can be used to manipulate audio on the web.

Continue reading →
Bidirectional Relationship Support in JSON

Ever tried to create a JSON data structure that includes entities with bidirectional relationships? If you have, you know that this often results in errors or exceptions being thrown.

In this article, Toptal Freelance Software Engineer Nirmel Murtic provides a robust working approach to avoiding these errors when creating JSON structures that included entities with bidirectional (i.e. circular) relationships.

Continue reading →
Write Code to Rewrite Your Code: jscodeshift

How many times have you used the find-and-replace functionality (or RegEx) across a directory to make changes to JavaScript source files? Up your refactoring game by using codemods, scripts used to rewrite other scripts.

In this article, Toptal Freelance Developer Jeremy Greer walks us through three common uses of codemods, using the toolkit “jscodeshift”.

Continue reading →
Toptal's Quick And Practical JavaScript Cheat Sheet: ES6 And Beyond

Software engineers are always searching for the best tools and guides to help them be more productive and allow them to spend less time reading long technical specifications.

Today, Toptal is pleased to present a new resource to the community: the JavaScript Cheat Sheet - ES6 and Beyond. Toptal’s JavaScript Cheat Sheet is a quick, easily understandable reference guide. It is free to download and includes all the new and exciting features introduced with ES6 as well as the future experimental features from ES7.

Continue reading →
Using Scala.js With NPM And Browserify

Today, writing applications in languages that compile to JavaScript is a very common practice. Scala developers, for example, can use Scala.js and have the same language for both the server and the client. That said, Scala’s compiler and standard dependency management tools are too limiting in the modern JavaScript world.

In this article, Toptal Freelance Software Engineer Michele Sciabarra shows us how to integrate Scala.js with the plethora of JavaScript modules available on NPM, using tools like Browserify, and explains how to do this without even having to install Node.js.

Continue reading →
Programming Visually With Node-RED: Wiring Up The Internet Of Things With Ease

Node-RED, built on Node.js, is a tool designed for programming visually without having to write any code. It comes equipped with a browser-based flow editor that allows hardware devices and APIs to be connected with each other easily, making it an ideal tool for rapidly developing programs for IoT devices.

In this article, Toptal freelance software engineer Jesús Darío Rivera walks us through the process of building a simple program using Node-RED and Netbeast along with a virtual light bulb plugin that mimics the capabilities of a real smart bulb.

Continue reading →
Gulp Under the Hood: Building a Stream-based Task Automation Tool

Streams are a powerful construct in Node.js and in I/O driven programming in general. Gulp, a tool for task automation, leverages streams in elegant ways to allow developers to enhance their build workflow.

In this article, Toptal engineer Mikhail Angelov gives us some insight into how Gulp works with streams by showing us step-by-step how to build a Gulp-like build automation tool.

Continue reading →
The 9 Most Common Mistakes That Ionic Developers Make

Ionic is extremely popular at the moment, and it has revolutionized the hybrid application industry in a way that nobody could have imagined. However, over time, the best practices and tooling for Ionic have not progressed in the same way. As a result, the number of pitfalls that developers need to look out for when working with Ionic is still high.

In this article, Toptal Freelance Software Engineer Julien Renaux outlines the most common mistakes that Ionic developers should know.

Continue reading →
Writing Testable Code in JavaScript: A Brief Overview

Writing code that is easily testable takes some effort and planning. However, some patterns exist that can be used to write simple and functional code, making it easier to test them when the time comes.

In this article, Toptal engineer Joshua Mock shares some useful tips and patterns for writing testable code in JavaScript that are both simple to understand and simple to implement.

Continue reading →
React, Redux and Immutable.js: Ingredients for Efficient Web Applications

Unlike most front-end web frameworks, React’s aim is to solve the various challenges of building user interfaces that rely on changing data. Although React is a simple JavaScript library and is easy to get started with, it is still possible to misuse it in ways that deny the web app from reaping the benefits that React has to offer.

In this article, Toptal engineer Ivan Rogic demonstrates the synergy of React, Redux and Immutable.js, and shows how these libraries together can solve many performance issues that are often encountered in large web applications.

Continue reading →
What's New in ES6? Perspective of a CoffeeScript Convert

CoffeeScript allows developers to make the most out of JavaScript-based platforms without having to jump through its awkward language hoops. However, with the introduction of ES6 features into major JavaScript engines, plain JavaScript is now nearly as friendly and powerful out-of-the-box as CoffeeScript.

In this article, Toptal engineer William Coates shares his findings on ES6 from the perspective of a CoffeeScript convert.

Continue reading →
NodeOS: The JavaScript Based Operating System

An operating system written in Node.js? Yes, it exists, and it’s called NodeOS. Think for a second about the progress Node.js has made in the short time it’s been around. Now, imagine the same thing happening with an operating system.

In this article, Toptal engineer Danny Morabito introduces us to NodeOS, guiding us with a step-by-step tutorial on how to create our first NodeOS application using nothing more than Node.js.

Continue reading →
The GWT Toolkit: Build Powerful JavaScript Front Ends Using Java

The GWT Web Toolkit, formerly known as Google Web Toolkit, is a set of development tools for building and optimizing complex browser-based applications using the Java programming language. What makes GWT not “yet another Java tool to write web apps,” is the fact that the heart of the toolkit is a compiler that converts Java into JavaScript, enabling developers to write front-end web applications while leveraging all of Java’s strengths.

Continue reading →
Ultimate In-memory Data Collection Manipulation with Supergroup.js

In-memory data collection manipulation is something that we often need to do in data-centric reporting and visualization applications. When needed, we often tend to resort to complex loops, list comprehensions, and other suboptimal means, which can easily end up being a huge mess of hard-to-maintain spaghetti code. Supergroup.js is an in-memory data manipulation library that can be used to solve some common data manipulation challenges on limited datasets.

Continue reading →
Ractive.js - Web Apps Made Easy

Ractive.js provides powerful capabilities for web app development in a way that is refreshingly simple to learn and use. In this article, Toptal Engineer Eugene Mirotin walks you through the process of building a simple Ractive search app, demonstrating some of Ractive’s key features and the ways in which it helps simplify web app development. Code samples are provided and explained.

Continue reading →
Navigating the React.JS Ecosystem

In this article, I’ll go through some of the interesting features and libraries that are available to use with React. Even if you don’t plan on using React, taking a look at its ecosystem is inspiring. You may want to simplify your build system using the powerful, yet comparatively easy to configure, module bundler Webpack, or start writing ECMAScript 6 and even ECMAScript 7 today with the Babel compiler. So, let’s explore the React ecosystem!

Continue reading →
Let LoopBack Do It: A Walkthrough of the Node API Framework You've Been Dreaming Of

While Ruby has Rails and Python has Django, the dominant application development framework for Node has yet to be established. But, there is a powerful contender gaining steam: LoopBack, an open source API framework built by StrongLoop, the creators of Express.

Let’s take a closer look at LoopBack and it’s capabilities by turning everything into practice and building an example application.

Continue reading →
SVG Text Tutorial: Text Annotation on the Web

Texts are an integral part of user interfaces. In many cases, text annotation plays a vital role in grabbing the user’s attention or allowing the user to decorate and highlight the content they produce.

In this article, we walk through the ins and outs of an open source JavaScript library built for annotating texts on the web.

Continue reading →
Application Development with Rapid Application Development Framework AllcountJS

AllcountJS is an emerging open source framework built with rapid application development in mind. It is based on the idea of declarative application development using JSON-like configuration code that describes the structure and behavior of the application.

In this article, we walk through a step-by-step tutorial for prototyping a data oriented web application using AllcountJS.

Continue reading →
MIDI Tutorial: Creating Browser-Based Audio Applications Controlled by MIDI Hardware

Modern web browsers provide a rich set of APIs; some of which have been around for a long time, and have since been used to build powerful web applications.

Web Audio API has been popular among HTML5 game developers, however, the Web MIDI API and its capabilities have yet to be utilized. In this article, Toptal engineer Stéphane P. Péricat guides you through the basics of the Web MIDI API, and shows you how to build a simple monosynth to play with your favorite MIDI device.

Continue reading →
Making an HTML5 Canvas Based Game: A Tutorial Using AngularJS and CreateJS

There are many programming platforms used to develop games, and there are a plethora of devices to play them on, but when it comes to playing games in a web browser, Flash-based development still leads the way.

What if we could port these games to HTML5 Canvas technology and play them on mobile browsers as well? In this article, Toptal engineer Avinash Kaza gave a solution to this.

Continue reading →
React.js View State Management Tutorial

One of the biggest and most common problems in front-end web development is state management. A developer is constantly focused on keeping the state object in sync with its view and the DOM representation. Users can interact with the application in many ways and it’s a big task to provide a clean transition from one view state to another.

We will see how using React JavaScript library can help us reduce application complexity and offload UI transitions from our application.

Continue reading →
JavaScript Promises: A Tutorial with Examples

Promises are a hot topic in JavaScript, and you should definitely get acquainted with them. They are not easy to wrap your head around, it can take a few articles, and a decent amount of practice to comprehend them. Aim of this article is to help you understand Promises, and nudge you to get more practice using them.

Continue reading →
Simple Data Flow in React Apps Using Flux and Backbone: A Tutorial with Examples

React.js is a fantastic library. It is only one part of a front-end application stack, however. It doesn’t have much to offer when it comes to managing data and state. Facebook, the makers of React, have offered some guidance there in the form of Flux. I’ll introduce basic Flux control flow, discuss what’s missing for Stores, and how to use Backbone Models and Collections to fill the gap in a “Flux-compliant” way.

Continue reading →
Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make

At first blush, JavaScript may seem quite simple. Yet the language is significantly more nuanced, powerful, and complex than one would initially be lead to believe. Many of JavaScript’s subtleties lead to a number of common mistakes – 10 of which we discuss here – that are important to be aware of and avoid in one’s quest to become a master JavaScript developer.

Continue reading →
Ember Data: A Comprehensive Tutorial for the ember-data Library

Ember Data is a library for robustly managing model data in Ember.js applications. Ember Data provides a more flexible and streamlined development workflow, minimizing code churn in response to what would otherwise be high impact changes. This thorough guide introduces Ember Data’s key constructs and paradigms, demonstrating the value it can provide to you as a developer.

Continue reading →
Polymer.js: The Future of Web Application Development?

A year after Google’s launch of Polymer, Toptal engineer Alejandro Hernandez takes it out for a test drive to see if it’s yet ready for prime time. This post explores the maturity and stability of Polymer.js as a foundation for large-scale application development. The results and conclusions from this analysis are provided, along with an introductory overview of the technology.

Continue reading →
JavaScript Prototype Chains, Scope Chains, and Performance: What You Need to Know

JavaScript is much more nuanced than most developers initially realize. Even for those with more experience, some of JavaScript’s most salient features continue to be misunderstood and lead to confusion. One such feature, described in this article, is the way that property and variable lookups are performed and the resulting performance ramifications to be aware of.

Continue reading →
Hosting a Tech Conference for a Software Developer Network: The CordobaJS Event

Beyond its beauty, in recent years Córdoba has been enjoying a rapidly growing reputation as a technology center, one that may soon rival Buenos Aires as Argentina’s main technology hub. Last month, Toptal coordinated and hosted a highly successful and well-attended JavaScript Technical Conference in Córdoba, Argentina. Read about how the event came together and the vibrant network of software developers in and around Córdoba.

Continue reading →
A Guide to Building Your First Ember.js App

As modern web applications do more and more on the client-side (the fact itself that we now refer to them as “web applications” as opposed to “web sites” is quite telling), there has been rising interest in client-side frameworks. There are a lot of players in this field but for applications with lots of functionality and many moving parts, two of them stand out in particular: Angular.js and Ember.js.

Angular.js has already been introduced on this blog, so we’re going to focus on Ember.js in this post, in which we’ll build a simple Ember application to catalog your music collection. You’ll be introduced to the framework’s main building blocks and get a glimpse into its design principles.

Continue reading →
A Year Building a WebRTC Application: Lessons in Startup Engineering

I’ve been an Engineer at Toptal for just about one year now, working on the same project since I joined the network: Ondello, a service that connects doctors and patients over WebRTC.

When I first joined Ondello, I was hired as a Senior Ruby on Rails Developer, tasked to build a service up from scratch. These days, we’re a team of multiple developers working on a fairly large, complex system.

With this post, I’d like to share the story behind Ondello. Specifically, I’d like to talk about: how a simple application became not-so-simple, and how our use of cutting-edge technologies posed problems I’d never considered before.

Continue reading →
A Step-by-Step Tutorial for Your First AngularJS App

If you haven’t tried AngularJS yet, you’re missing out. The framework consists of a tightly integrated toolset that will help you build well structured, rich client-side applications in a modular fashion—with less code and more flexibility.

One of the reasons I love working with AngularJS is because of its flexibility regarding server communication. Like most JavaScript MVC frameworks, it lets you work with any server-side technology as long as it can serve your app through a RESTful web API. But Angular also provides services on top of XHR that dramatically simplify your code and allow you to abstract API calls into reusable services. As a result, you can move your model and business logic to the front-end and build back-end agnostic web apps. In this post, we’ll do just that, one step at a time.

Continue reading →
Why The Hell Would I Use Node.js? A Case-by-Case Tutorial

Node.js shines in real-time web applications employing push technology over websockets. What is so revolutionary about that? Well, after over 20 years of stateless-web based on the stateless request-response paradigm, we finally have web applications with real-time, two-way connections, where both the client and server can initiate communication, allowing them to exchange data freely. This is in stark contrast to the typical web response paradigm, where the client always initiates communication. Additionally, it’s all based on the open web stack (HTML, CSS and JS) running over the standard port 80.

Continue reading →