Skip to content

Commit 74a9551

Browse files
committed
addressing @davesnx review, thanks Dave
1 parent d9a60d7 commit 74a9551

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

data/success_stories/ahrefs-full-stack-web.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Full-Stack OCaml Web Application With React
2+
title: Full-Stack React Web Application With OCaml
33
logo: success-stories/ahrefs.svg
44
card_logo: success-stories/white/ahrefs.svg
55
background: /success-stories/ahrefs-full-stack-bg.jpg
@@ -21,9 +21,9 @@ why_ocaml_reasons:
2121

2222
[Ahrefs](https://ahrefs.com/) is a Singapore-based SaaS company that provides SEO tools and marketing intelligence powered by big data. Since 2011, they've built their business around OCaml, using it for web crawling and data processing to serve thousands of customers worldwide. Today, they're trusted by 44% of Fortune 500 companies and operate as a lean, self-funded organization focused on efficiency.
2323

24-
By 2017, Ahrefs had built a successful SEO tools business powered by OCaml on the backend, but they faced a bottleneck in web application development. Their frontend was built with PHP and jQuery while their data processing lived in OCaml. Every time frontend developers needed backend data, they had to coordinate with backend engineers to update the APIs.
24+
By 2017, Ahrefs had built a successful SEO tools business powered by OCaml on the backend, but they faced a bottleneck in web application development. Their frontend was built with PHP and jQuery while their data processing lived in OCaml. Every time frontend developers needed backend data, they had to coordinate with backend engineers to update the APIs.
2525

26-
Ahrefs wanted engineers to be productive across the entire stack, but the technology divide made this unnecessarily difficult. The JavaScript tooling used in 2017 for the frontend of the web application was lacking compared to today's TypeScript ecosystem. Ahrefs had already built years of expertise in OCaml. The question became: could they extend OCaml's benefits to the frontend?
26+
The JavaScript tooling used in 2017 for the frontend of the web application was lacking compared to today's TypeScript ecosystem. With BuckleScript and Reason appearing around the same time, they saw an opportunity to use OCaml on both the backend and frontend of their web application.
2727

2828
The challenge was both technical and cultural. Could they transition the entire frontend team to learn OCaml? Even when some of the engineers hadn't used a functional programming language before? Would the benefits of a unified stack outweigh the costs?
2929

@@ -33,21 +33,20 @@ After adopting Reason/BuckleScript around 2017-2020 and migrating to **[Melange]
3333

3434
Now, any engineer in the company can contribute across the entire web application. Thanks to shared types between backend and frontend, coordination overhead is greatly reduced.
3535

36-
Frontend and backend stay in sync: When data structures change, type errors guide developers to update all affected code.
37-
38-
Today, their **5 billion daily frontend requests** are handled by the same OCaml codebase that powers their backend systems. The web application serving **44% of Fortune 500 companies** is built from **1.5 million lines of OCaml code** spanning both frontend and backend.
36+
Today, their public-facing web application belongs to the same OCaml codebase that powers their backend systems. The web application serving **44% of Fortune 500 companies** handles around **500 billion HTTP requests on the backend** and **5 billion HTTP requests on the frontend**, every day.
3937

4038
## Why OCaml
4139

4240
For Ahrefs, extending OCaml to the frontend wasn't about technological purity—it was about simplifying their business.
4341

44-
* **Shared types eliminate coordination overhead** - Using OCaml to express the shape of data exchanged between frontend and backend increases maintainability and simplifies development.
42+
* **One mental model for the entire codebase** - Using a single programming language provides a simpler mental model for developer working on the codebase - no matter what team a developer is on, they can contribute across the entire stack.
43+
* **Shared types eliminate coordination overhead** - Using OCaml to express the shape of data exchanged between frontend and backend increases maintainability and simplifies development. Frontend and backend stay in sync: When the database schema changes, type errors guide developers to update all affected code in the API and even web UI. Vice versa, when the web UI changes, OCaml's type checker guides developers to make related API or database changes.
4544
* **Faster iteration cycles** - Type safety meant changes to data structures propagated safely throughout the entire application without runtime surprises, enabling rapid feature development.
4645
* **Melange bridges ecosystems** - Access to the JavaScript ecosystem (React components, npm packages) while maintaining OCaml's compile-time guarantees meant they didn't have to choose between type safety and ecosystem richness.
4746

4847
## Solution
4948

50-
Ahrefs built their full-stack solution around **[OCaml](https://ocaml.org/)** compiled to JavaScript via **[Melange](https://melange.re/)**, paired with **[React](https://react.dev/)** for the user interface.
49+
Ahrefs built their full-stack solution around **[OCaml](https://ocaml.org/)** compiled to JavaScript via **[Melange](https://melange.re/)**, paired with **[reason-react](https://github.com/reasonml/reason-react)** for the user interface.
5150

5251
The cornerstone of their architecture is **[ATD (Adjustable Type Definitions)](https://github.com/ahrefs/atd)**. Ahrefs developed ATD to generate shared types for their frontend and backend -- initially in BuckleScript.
5352

@@ -66,7 +65,8 @@ Integration with their existing data infrastructure (**[ClickHouse](https://clic
6665

6766
Ahrefs contributes actively to the full-stack OCaml ecosystem, sharing tools that benefit the broader community:
6867

69-
- **[Melange Recharts](https://github.com/ahrefs/melange-recharts):** Production-ready charting components for data visualization applications.
70-
- **[Melange Bindings](https://github.com/melange-community/bindings):** Community-driven repository of JavaScript library bindings.
71-
- **[Melange JSON PPX](https://github.com/ahrefs/melange-json-ppx):** Streamlined JSON handling for frontend applications.
72-
- **[Ahrefs DevKit](https://github.com/ahrefs/devkit):** Utilities and tools for building OCaml applications.
68+
- **[ahrefs/devkit](https://github.com/ahrefs/devkit):** Utilities and tools for building OCaml applications.
69+
- **[styled-ppx](https://github.com/davesnx/styled-ppx):** Type-safe styled components for ReScript, Melange and native with type-safe CSS
70+
- **[server-reason-react](https://github.com/ml-in-barcelona/server-reason-react):** Native implementation of React's Server-side rendering (SSR) and React Server Components (RSC) architecture for Reason
71+
- **[melange-recharts](https://github.com/ahrefs/melange-recharts):** Production-ready charting components for data visualization applications.
72+
- **[melange-json](https://github.com/melange-community/melange-json):** Streamlined JSON handling for frontend applications.

0 commit comments

Comments
 (0)