javascript

Today, Drupal developers must acknowledge that when building a rich, stateful user-facing interface, it is best to use a modern JavaScript framework. Although less framework-driven JavaScript approaches like vanilla JavaScript and jQuery were good enough for many years, I have started to realize that my criteria for whether a piece of UX “should use a framework” has gotten pretty darn low.

Fortunately, even if Drupal is serving your site’s pages, it is possible to make use of React to build components. Some people refer to this method as “progressive decoupling.”

In the below learn how using Google Chrome's built-in DevTools I was able to debug javascript in Chrome that improved the page load time for our client.

I was recently in a situation where, in trying to optimize a site for performance reasons, I needed to track down what was generating some above-the-fold content. Specifically, this was a client's site that we had inherited as part of a Drupal support contract. On mobile-sized screens, the homepage was displaying a banner ad for the company's mobile app, which provided a download link for the app.

Javascript has a reputation in developer circles as a terrible language. It’s classless, loosely typed, and plagued by cross browser issues. Douglas Crockford, author of JavaScript: The Good Parts, said “JavaScript contains some of the best ideas ever put into a programming language and it contains some of the worst ideas ever put into a programming language.” It was created in just 10 days in 1995, and not standardized by ECMA until almost 3 years later. Microsoft initially decided not to implement the new standards, almost putting an end to the language in its infancy.

Back in June some of our crew attended Dinosaur JS conference in Denver, CO.

There were talks ranging from V8’s JS optimization (even had some assembly language slides in there) to demonstrating the creation of an homage to an abstract artist with JavaScript code.

This all got me thinking about TypeScript, Closure compiler, etc... and JS performance and development in general. But I have to admit, I was struggling to see how these technologies could benefit us in Drupal since most of our JS is done in Drupal.behaviors.

This presentation from DrupalCamp Atlanta 2015 covers a discussion on the d3.js library for an audience of site builders, themers, and developers.

Data-Driven Documents or D3 refers to a javascript library combining html, css and sag to build graphic visualizations for data. The d3.js library uses scalable vector graphics to generate charts, graphs and maps that are scalable and interactive.

Check out the session recording below. It covers: 

One of Drupal’s best practices is to break up the site’s CSS and JavaScript into smaller files to make maintenance easier. Along with this, many modules will include their own CSS and JS files, so before long a site may have twenty, thirty, or more CSS and JS files that are downloaded by the visitor in order for the site to look and work correctly.