The basics of creating a website using Hacklang+HHVM

Disclaimer: For educational purposes only. Not intended to “boo!” Hacklang or PHP.

While I’m taking my journey to Hacklang (Programming language by Facebook). I found out that their documentation is not that detail especially for newbie. That is why I created this post as my reference and warning signs to others who taking Hacklang. Since, this is a journey. I’ll continue to update and improve this post based on your feedbacks and my “Eureka!” moment.

The main task here is to create a simple and old-school website on localhost, with navigation and basic form processing. Just to get the basics of Hacklang. Although the best practice and modern way, is using autoload or the Composer-way. For the sake of simplicity, let’s skip that for now.

Let’s start the engine. Shall we.

Create Project

I’m assuming you’ve already installed HHVM. So, let’s start the project by creating a new folder and name it hacklang and inside the folder, create index.hh, contact.hh and _sections.hack for now.

Typechecker Modes

Hacklang has three different modes, (1) decl, (2) partial and (3) strict and it can define each of your files like this:

<?hh // strict: This is currently the recommended header. All your functions/methods must have their return types, parameters types must be annotated and properties must have type annotations except constructors, destructors and closures.

<?hh // partial: This loosens several restrictions to ease migration from other languages. It does all the typechecking it can, but it doesn’t require type annotations. Partial-mode is fit for top-level code to serve as an entry point specially for superglobal like GET and POST.

<?hh: Depending on the version of HHVM/Hack, this may be equivalent to strict, partial, or throw an error. It is strongly discouraged for both new and existing code.

Since this is our new project and we are not migrating a php-based to Hacklang and we want also to take advantage the typechecker. We no longer have to use the .php extension and decl-mode. We are going to use partial-mode in index.hh, and contact.hh and strict-mode to _sections.hack. A .hack extension is by default strict-mode and we no longer need to put <?hh // strict.

Our first echo

Now, open your index.hh and put the code below. This approach is PHP-way.

<?hh //partial
echo "Romans 6:23";

Running the typechecker in cli.

Let’s check our index.hh, but first, we must have to create .hhconfig inside of our project folder by running touch .hhconfig in your cli. If you are using Ubuntu and you won’t able to see this file, just hit CTRL+H inside your project folder. Because a file that starts with a . (dot) is a hidden file. Now, let’s run the typechecker by running the command: hh_client index.hh

Get Eljay’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

You should get the following error:

Toplevel statements are not allowed. Use __EntryPoint attribute instead.

To fix the following issue, let’s update our code below and run again the command: hh_client index.hh

<?hh // partial
<<__EntryPoint>>
function home(): void {
    echo "Romans 6:23";
}

This should be working now. The catch here, is you can’t just echo out your text or mix up with html unlike in PHP. Hacklang was inspired with C++. You need to wrap it with your function. Don’t forget the <<__EntryPoint>> attribute because you might have several functions and the way to tell which one is “main” is by adding <<__EntryPoint>>attribute. In Dart, just give it a name to your function with main()and it will automatically know that this is the main entry point.

Running the typechecker in non-cli

If you want an instant feedback from the typechecker without manually running hh_client to your cli, proceed to tools on their documentation for IDE integrations.

Running the HHVM server

Now, open your terminal and type hhvm -m server -p 8080 and go to http://localhost:8080/index.hh

Go back to our index.hh page and update using the code below, refresh your browser and you should see a link Call.

<?hh // partial
<<__EntryPoint>>
function home(): void {
    echo '<a href="contact.hh?name=Eljay">Call</a>';
}

And in our contact.hh page, add the following:

<?hh // partial
<<__EntryPoint>>
function contact(): void {
    echo 'I am: ' . $_GET['name'];
    echo '<a href="index.hh">Home</a>';
}

Nothing too special, it’s just a link for Home and Contact page. The problem here is we don’t have checking for $_GET['name']. We can do this in PHP echo 'I am ' . $_GET['name'] ?? '';or echo 'I am ' . isset($_GET['name']) ? $_GET['name'] : '';but since we are in the territory of Hacklang, there are rules that we need to be aware of.

isset, empty and unset expressions are only allowed in partial-mode but not in strict-mode. The Hacklang-way when checking the existence of array elements is by using the built-in function array_key_exists instead of isset or empty. HHVM heavily optimizes calls to array_key_exists so no need to worry about the performance. For unset, just assign null to the variable to get the same effect.

Go back to our previous problem, since we can’t do inline ternary operator and null coalescing operator in an echo statement. The dirty and quick fix is to move those logic out in the echo statement.

<?hh // partial
<<__EntryPoint>>
function contact(): void { 
    $name = $_GET['name'] ?? '';
    echo 'I am: ' . $name;
    echo '<a href="index.hh">Home</a>';
}

or used the array_key_existsto take advantage the typechecker.

<?hh // partial
<<__EntryPoint>>
function contact(): void { 
    echo 'I am: ' . getParam($_GET['name']);
    echo '<a href="index.hh">Home</a>';
}
function getParam(string $key): ?string {
    if (!array_key_exists($_GET, $key)) {
        return null;
    }
    $value = $_GET[$key];
    return is_string($value) ? $value : null;
}

[To be continued…]