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. 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 is to create a simple and old-school website on localhost, with navigation and basic form processing. Just to get the basics of Hacklang.

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) partial 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. 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.

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

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. You need to wrap 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 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 running?hh_client?to your cli, proceed to?tools?for IDE integrations.

Running the HHVM server

Open your terminal and type the following:

hhvm -m server -p 8080        

Now, pull-up your browser and go to:

https://localhost:8080/index.hh        

Go back to our index.hh page and update using the following code:

<?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 assignble to get the same effect.

[To be continued…]

You can follow my medium account for updated post.