{"id":269935,"date":"2018-04-24T06:36:36","date_gmt":"2018-04-24T13:36:36","guid":{"rendered":"http:\/\/css-tricks.com\/?p=269935"},"modified":"2018-04-24T06:36:36","modified_gmt":"2018-04-24T13:36:36","slug":"server-side-visualization-with-nightmare","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/server-side-visualization-with-nightmare\/","title":{"rendered":"Server-Side Visualization With Nightmare"},"content":{"rendered":"

This is an extract from chapter 11 of Ashley Davis\u2019s book Data Wrangling with JavaScript<\/em> now available on the Manning Early Access Program<\/a>. I absolutely love this idea as there is so much data visualization stuff on the web that relies on fully functioning client side JavaScript and potentially more API calls. It\u2019s not nearly as robust, accessible, or syndicatable as it could be. If you bring that data visualization back to the server, you can bring progressive enhancement to the party. All example code and data<\/a> can be found on GitHub.<\/p>\n

When doing exploratory coding or data analysis in Node.js<\/a> it is very useful to be able to render a visualization from our data. If we were working in browser-based JavaScript we could choose any one of the many charting, graphics, and visualization libraries. Unfortunately, under Node.js, we don\u2019t have any viable options, so how otherwise can we achieve this?<\/p>\n

We could try something like faking the DOM under Node.js, but I found a better way. We can<\/em> make our browser-based visualization libraries work for us under Node.js using a headless browser<\/em>. This is a browser that has no user interface. You can think of it as a browser that is invisible. <\/p>\n

I use Nightmare<\/a> under Node.js to capture visualizations to PNG and PDF files and it works really well!<\/p>\n

<\/p>\n

The headless browser<\/h3>\n

When we think of a web-browser we usually think of the graphical software that we interact with on a day to day basis when browsing the web. Normally we interact with such a browser directly, viewing it with our eyes and controlling it with our mouse and keyboard as shown in Figure 1.<\/p>\n

\"\"
Figure 1:<\/strong> The normal state of affairs: our visualization renders in a browser and the user interacts directly with the browser<\/figcaption><\/figure>\n

A headless browser on the other hand is a web-browser that has no graphical user interface and no direct means for us to control it. You might ask what is the use of a browser that we can\u2019t directly see or interact with.<\/p>\n

Well, as developers we would typically use a headless browser for automating and testing web sites. Let\u2019s say that you have created a web page and you want to run a suite of automated tests against it to prove that it works as expected. The test suite is automated, which means it is controlled from code and this means that we need to drive<\/em> the browser from code.<\/p>\n

We use a headless browser for automated testing because we don\u2019t need to directly see or interact with the web page that is being tested. Viewing such an automated test in progress is unnecessary, all we need to know is if the test passed or failed — and if it failed we would like to know why<\/em>. Indeed, having a GUI for the browser under test would actually be a hindrance for a continuous-integration or continuous-deployment server, where many such tests can run in parallel.<\/p>\n

So headless browsers are often used for automated testing of our web pages, but they are also incredibly useful for capturing browser-based visualizations and outputting them to PNG images or PDF files. To make this work we need a web server and a visualization, we must then write code to instance a headless browser and point it at our web server. Our code then instructs the headless browser to take a screenshot of the web page and save it to our file system as a PNG or PDF file.<\/p>\n

\"\"
Figure 2:<\/strong> We can use a headless browser under Node.js to capture our visualization to a static image file<\/figcaption><\/figure>\n

Nightmare<\/a> is my headless browser of choice. It is a Node.js library (installed via npm) that is built on Electron<\/a>. Electron is a framework normally used for building cross-platform desktop apps that are based on web-technologies.<\/p>\n

Why Nightmare?<\/h3>\n

It\u2019s called Nightmare, but it\u2019s definitely not a Nightmare to use. In fact, it\u2019s the simplest and most convenient headless browser that I\u2019ve used. It automatically includes Electron, so to get started we simply install Nightmare into our Node.js project as follows:<\/p>\n

npm install --save nightmare<\/code><\/pre>\n
That\u2019s all we need to install Nightmare and we can start using it immediately from JavaScript!<\/p>\n
Nightmare comes with almost everything we need: A scripting library with an embedded headless browser. It also includes the communication mechanism to control the headless browser from Node.js. For the most part it\u2019s seamless and well-integrated to Node.js.<\/p>\n
Electron is built on Node.js and Chromium and maintained by GitHub and is the basis for a number of popular desktop applications.<\/p>\n
Here are the reasons that I choose to use Nightmare over any other headless browser:<\/p>\n