Web Development with HHVM and Hack 1: Hello World

This post will serve as a brief overview of web development with HHVM and Hack. This is the first of many posts teaching web development with HHVM and Hack.

Overview

Frameworks drive web development. They abstract away tedious work that goes into programming a web server and leave the essentials to the programmer: specifying routes, handling models, and writing backend logic. Some of the most popular frameworks today are Django, Node.js, Ruby on Rails, and Laravel for PHP. However, one framework that is seldom discussed is HHVM and Hack.

HHVM, or HipHop Virtual Machine, is a virtual machine developed by Facebook for PHP that offers better performance than traditional PHP interpreters for the web. HHVM can do this because it turns PHP code into compiled code, which is faster than interpreted code. Hack is a programming language built on PHP for the HHVM. Hack provides type checking, which reduces time spent debugging and increases the security of your code. It also has great support for async code, which helps your code scale.

The main drawback to HHVM and Hack is that it is not as popular as other frameworks. Historically, this may have been due to the difficulty of deploying a web application built on HHVM and Hack. However, this is becoming less and less true as sites like Heroku now support HHVM and Hack applications. Not to mention, HHVM and Hack were created by Facebook, so both are continuously improved by a web-focused company.

Installation

In this tutorial, we will get Hack and HHVM installed and run a simple web server that says “Hello World!” Do not worry if you do not understand everything now, future posts will explain every piece of code written. To run Hack programs, we need to install HHVM. Installing HHVM is easiest for Linux and MacOS. Installing HHVM for Windows is tricky. I wrote a tutorial for how to do so here: https://medium.com/@mikeabelar/web-development-with-hhvm-and-hack-getting-setup-with-windows-a046ac09603a

You want to install the prebuilt packages.

After installation, verify that HHVM is installed by typing

hh_client

into a terminal. It should return an error saying that it cannot find a .hhconfig file.

Writing Hello World

Create a new folder for your Hello World application. Start by creating a .hhconfig file:

touch .hhconfig

The hhconfig file is a project settings file for your Hack project. We will not deal with this file in this tutorial.

Then, create a .hh file (file extension used for Hack files) titled index.hh:

touch index.hh

Then paste the following contents in the file:

<?hh // strict
<<__EntryPoint>>
function main(): noreturn {
 print("Hello, world!\n");
 exit(0);
}

The <?hh declares that the file will be a Hack file (as opposed to a php file). This is needed for every Hack file with a .hh extension. The “// strict” comment tells HHVM which mode to use when type checking the Hack file. The strict mode, which we have declared, will catch the most code style and security violations.

NOTE: Alternatively, we could have called the file index.hack (and use the .hack extension), and we would not need that first line with <?hh //strict (as now we use the .hack file extension). However, I wanted to show you the old way of declaring Hack files. Going forward, we will use .hack as the file extension.

The main block of code:

<<__EntryPoint>>
function main(): noreturn {
 print("Hello World!");
 exit(0);
}

prints “Hello World!”

<<__EntryPoint>> lets the compiler know that below this line is the function to run upon execution of the program.

function main(): noreturn { defines a function called main. The function does not return anything, as noted by : noreturn. Note: we do not need the function to be called main for the code to run (Unlike other languages like Java).

print("Hello World!\n"); Actually prints “Hello World!”. Finally, we quit the program with exit(0);

Running The Code:

Before running our code, we should make sure that the type checker has not identified any problems with our code by running:

hh_client index.hh

It should start up a type checker server on your machine and then report: “No errors!”

Now, we need to start our server so we can see the result in our web browser. Run:

hhvm -m server -p 8080

This starts the local server on port 8080. Then, open a web browser and navigate to http://localhost:8080/index.hh

You should see:

And there we go! We have written a web page saying Hello World! in Hack!

In the next tutorial, we will begin our exploration of Hack by looking at expressions: https://medium.com/@mikeabelar/web-development-with-hhvm-and-hack-expressions-c038182a9367