Intro on s20n blog

C++ for the Web with Drogon

Fri, 30 Jun 2023 21:23:07 +0530

Drogon is currently the fastest web server in the world. If you already know a bit of C++, it wouldn’t hurt to try it out. I personally think drogon is great, however I do find its documentation somewhat lacking which is all the more reason to contribute to them. If you find that drogon is right for you, please consider contributing to / sponsoring their project.

In this blog, we’ll see how we can set up a basic REST API using drogon and CMake.

The code snippets I’ve provided apply to macOS and Linux. However, you can still follow along if you’re on windows and have worked with CMake and VS before.

Project Setup

If you’re like me and you don’t mind using CMake with submodules, we can set up drogon like so:

Get the pre-requisite libraries installed in accordance with the official documentation. For macOS, I had to install ossp-uuid and jsoncpp.

Create a CMakeLists.txt in your project root.

touch CMakeLists.txt

Initialize Git in your project root.

git init

Add drogon as a submodule

git submodule add https://github.com/drogonframework/drogon.git external/drogon

Pull drogon’s submodules (trantor)

git submodule update --init --recursive

At this point you’ve got your dependencies setup. Let’s go ahead and add some code for our basic REST API.

Create a new directory for our source files

mkdir src

And add our entrypoint

touch src/main.cpp

Here’s a basic CMakeLists.txt file that will build our project

cmake_minimum_required(VERSION 3.25.2)

project(
 drogontutorial
 VERSION 0.1
 DESCRIPTION "Drogon CMake Tutorial"
 LANGUAGES CXX
)

# compiler flags
set(CMAKE_CXX_STANDARD 20)
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -Wall -Wextra")

add_executable(${PROJECT_NAME} src/main.cpp)

add_subdirectory(external/drogon)

target_link_libraries(${PROJECT_NAME} PRIVATE drogon)

And this will be our src/main.cpp

#include <drogon/drogon.h>
int main()
{
 using namespace drogon;
 app().setLogPath("./")
 .setLogLevel(trantor::Logger::kWarn)
 .addListener("0.0.0.0", 8080)
 .setThreadNum(8)
 .registerHandler("/hello?name={name}",
 [](const HttpRequestPtr& req,
 std::function<void(const HttpResponsePtr&)>&& callback,
 const std::string& name)
 {
 Json::Value json;
 json["result"] = "ok";
 json["message"] = std::string("hello,") + name;
 auto resp = HttpResponse::newHttpJsonResponse(json);
 callback(resp);
 },
 { Get,"LoginFilter" })
 .run();
}

Building and Running the App

So far your directory structure should look something like this:

.
├── CMakeLists.txt
├── external
│ └── drogon
└── src
 └── main.cpp

4 directories, 2 files

Go ahead and create a directory to house our build files

mkdir build && cd build

Now lets generate the Makefile using

cmake ..

and now to compile our application,

make -j$(nproc)

Hopefully after all this, you should find an executable called drogontutorial in the build directory.

let’s run this file to start our server.

./drogontutorial

Now, your server should be listening on port 8080. Test it out by sending your name to /hello

curl http://localhost:8080/hello?name=yourname

And just like that you’ve got a starter project to write your own REST APIs in C++.

If you find this nice, do check out their examples on github.

Until next time!

A Shallow Dive Into Webassembly

Fri, 18 Mar 2022 19:22:00 +0530

If you’ve been following the buzz in the past few years, you must have certainly heard about WebAssembly, the new, low-level, general purpose programming language that can be used to compile code for the web. Webassembly was created by Mozilla and Google to be extremely fast, safe and to bring near native performance to code running in the browser.

Webassembly has been designed with performance in mind. It has been built on top of LLVM which means it will have access to all of LLVM’s optimizations and features.

Webassembly was created by the WebAssembly Community Group in 2015. The goal of Webassembly is to provide a compilation target that has a similar level of performance as native machine code but with the high-level convenience of JavaScript. It is supported by all 4 of the major browser engines today.

But Why WebAssembly?

With the near-native performance promised by WebAssembly, It is quite possible to run really graphically intensive games right in the browser. You surely must have used Figma or atleast heard of it. It’s a really powerful Graphic Design app which runs flawlessly, purely on the browser. The reason for its amazing performance is that It is powered by WebAssembly. Infact I am pretty confident that in the near future Audio/Video and Photo editing on the Web could go mainstream with such a leap in performance.

AssemblyScript

In order to write WebAssembly Code which runs in your browser, you don’t actually need to learn WebAssembly syntax. WebAssembly is better thought of as a compilation target for other higher level languages which are easier to write code in. In fact, if you know Typescript, you can jump right in to AssemblyScript which has approximately 13000 npm downloads each week at the time of this publication.

But if you’re feeling really adventurous, you really gotta try compiling raw C++ into WebAssembly. Yes you heard me right, It is indeed possible to cause a segfault in the browser with your code!

Running C++ in the browser

With WebAssembly, it is possible to call a C++ function in the browser. You could use a toolchain like Emscripten to do this but it is completely possible to compile C++ directly into WebAssembly’s binary format wasm by setting wasm32 as the target for clang++.

Let’s write a function that does bitwise left-shifts and yields the nth power of 2

extern "C" {
 long long powerOf2(int n) {
 return (1 << n);
 }
}

C++ does Name Mangling which changes the name of the exported function and we won’t be able to call it from the browser if that happens. To suppress this behaviour, we need to wrap the function in extern "C".

The C++ file can be compiled with the command :

clang++ --target=wasm32 --no-standard-libraries -Wl,--export-all -Wl,--no-entry -o power.wasm power.cpp

--target=wasm32 sets the target architecture to WebAssembly
--no-standard-libraries because this target does not support libc++ (discussed later)
-Wl,--export-all exports all symbols (the function powerOf2)
-Wl,--no-entry tells the compiler that there is no main function

Keep in mind that you’re going to need clang++ and thus need to have LLVM installed. You could download the prebuilt packages depending on your OS or build llvm from source

once your wasm binary is generated, you can simply call that function in your webpage like so

<!DOCTYPE html>

<html>
 <head>
 <meta charset="utf-8" />
 <title>WASM instantiateStreaming() test</title>
 </head>

 <body>
 <script>
 WebAssembly.instantiateStreaming(fetch("power.wasm")).then((obj) =>
 console.log(obj.instance.exports.powerOf2(62))
 );
 </script>
 </body>
</html>

Code Based on source: WebAssembly JS-API documentation

Here, We are calling the powerOf2 function with an argument of 62

You can check the output in the console showing 1073741824n and the n indicates that the number is infact a BigInt, which is right as we return a long long from the C++ function.

As mentioned before, libc++ is not supported by the target wasm32, but in case you want to use it, you could target wasi refer to this answer on stackoverflow.

And That’s it! You’ve successfully run C++ in your browser. It’s time now to port all of your legacy code over to the browser. Hope you could follow along with this. Happy memory leaks and race conditions!

Headless CMS vs Traditional CMS

Tue, 22 Feb 2022 17:28:00 +0530

Today is Tue, 22/02/2022. Happy Twosday!

A CMS or Content Management System is a piece of software for digital content management, it can also be used as an enterprise wide digital asset management system, which enables you to manage your digital assets (images, videos, documents and other such files). The CMS comes with a web browser based user interface that allows users to upload content, edit their media files and to control their website.

Headless CMS is a new trend in the CMS world. It is a backend-only solution that provides an API to interact with the content. This type of CMS is often used by developers who want to build their own frontend and don’t want to deal with the complexity of the backend frameworks.

In contrast, traditional CMSs are more common for small businesses who need a simple way to manage their website content. They are also easier for non-technical users who just want to update their website without any coding knowledge.

Why do you need a CMS?

Using a CMS abstracts away a lot of technical intricacies from the content creator. CMSs are specifically designed so that webmasters or site managers can create, modify and organise digital resources in various ways and for various levels of functionality or to provide search engine optimisation (SEO), online marketing automation processes, online sales opportunities, or self-service tools for their customers.

CMSs have changed the world of web development, it has changed the way in which websites are designed and managed. Over 15 million domains on the internet run on some CMS technology like Wordpress, Drupal, Joomla, Shopify to name a few.

Why Headless?

Now, you might be thinking, if it’s way easier to use a traditional CMS like wordpress, why on earth would you want to go through the ordeal of decapitating the CMS and having to write your own frontend?

Well, The main benefit of Headless CMS is that it can be used to create an API for your website, which means you can have more control over your data and how it’s displayed on your site.

This type of CMS also has many other benefits:

Performance: because there is no frontend interface, the server doesn’t have to process as much data and can therefore handle more requests at once. Headless CMSs are also faster than traditional CMSs because they don’t need to load all of the content on every page request, which saves time and resources on both server and client side.

Flexibility: You can use any frontend you want, which means developers can choose the best one for their project. This also means that you don’t have to worry about updating the frontend when there are changes in the backend.

Future-proof-ness: There is no guarantee that the epic looking theme you chose on wordpress or that wordpress itself will still be in the vogue in the future. Does that mean your content is not valuable anymore? Heck no, your content should not die with the platform and using an API like the ones in Headless CMS will ensure that the content can always be shown wherever you please.

JAMstack and the rise of Headless

JAM stands for Javascript, API and Markup. It refers to the approach of decoupling the frontend, backend and the database which you would find on a traditional website and distributing it over these three services.

Basically, a Javascript Application retrieves the content from a latent Headless CMS through an API in the form of pre-rendered static markup. This lets them condense the entire app and serve it over a CDN which leads to blazing fast performance and easily scalable applications.

All this has lead to the rapid adoption of JAMstack applications through platforms like Vercel, Netlify, Github Pages etc. and along with that, brought forth a rise in popularity for Headless CMS platforms.

So What’s the Catch, Chief?

Well, the main disadvantage of headless CMS is that it requires more technical knowledge than traditional CMS. This means that it might not be suitable for beginners who are just starting out with web development.

Apart from the complexity, there’s a cost factor too. You know that wordpress hosting is quite affordable nowadays and the websites who provide really good offers on shared hosting are a dime a dozen. However, you’re going to have to shell out a little bit more if you are going to opt for a headless CMS solution like Strapi. Not to mention the cost of development if you are not really well versed with the tooling.