Clarifying AR, VR, MR, and XR concepts using the 'Window vs Door' analogy. Sharing practical experience of reducing e-commerce return rates from 30% to 8% by implementing AR features.
Public APIs face unexpected traffic floods without proper protection. Rate limiting, API key management, and IP restrictions to protect your API.
Started with admin/user roles but requirements grew complex. When RBAC isn't enough, ABAC provides attribute-based fine-grained control.
With 3 services needing separate logins, SSO unified authentication. One login grants access to everything.
Password resets were half my support tickets. Passkeys eliminate passwords entirely, but implementation is more complex than expected.
Last year, I was working as a lead developer at a furniture e-commerce startup. Our biggest headache was the Return Rate. Nearly 30% of our sales were evaporating due to returns.
The #1 reason for returns was always the same: "It looked great in the photo, but it's too big (or small, or the wrong color) for my living room."
Shipping costs were bleeding us dry, but the bigger issue was the negative customer experience ("I failed my purchase"). We tried suggesting customers use measuring tapes, but let's be honest—that's terrible UX.
That's when I pitched an idea at the team meeting: "CEO, what if we let users place furniture virtually in their rooms using their mobile cameras (AR), just like IKEA?"
Initially, there was skepticism. "Isn't that just for games like Pokemon GO?", "Won't it cost a fortune to develop?", "Can we web developers even do that?"
But I was confident. After three weeks of prototyping a WebAR feature, the results were astonishing. The return rate plummeted from 30% to 8%. Customers unanimously said, "I felt confident buying it after seeing it placed in my room."
This experience taught me a vital lesson: "AR/VR is not just entertainment. It is a powerful tool for solving real business problems." Today, I want to clarify the confusing concepts of AR, VR, MR, and XR from a developer's perspective and share how you can apply them in practice.
AR, VR, MR, XR... too many acronyms. Here is the most intuitive model to understand them: "Window vs Door."
XR = AR + VR + MRNow, let's switch to developer mode. "How do we implement this in code?"
AR isn't just floating an image over a camera feed. The key is "Knowing that the floor is a floor." The technology that enables this is SLAM (Simultaneous Localization and Mapping). Using cameras or LiDAR sensors, it identifies feature points in the space, draws a 3D map in real-time, and tracks your device's position within it.
Web-based AR is the most accessible because users don't need to install an app.
<!-- Simple Marker-based AR Example -->
<html>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<body style="margin: 0; overflow: hidden;">
<a-scene embedded arjs>
<!-- When camera detects 'Hiro' marker -->
<a-marker preset="hiro">
<!-- Display a yellow 3D box on top -->
<a-box position="0 0.5 0" material="color: yellow;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
With just these 10 lines, you can run AR on a mobile browser. Of course, for commercial-grade services, you'll need to dive deep into Three.js or R3F (React Three Fiber).
While WebVR (WebXR) exists, high-performance VR content is mostly built with game engines.
// Unity C# Example: Pulling a VR Trigger
using UnityEngine;
using UnityEngine.XR;
public class VRGun : MonoBehaviour {
void Update() {
// Detect trigger press on Right Hand controller
if (InputDevices.GetDeviceAtXRNode(XRNode.RightHand).TryGetFeatureValue(CommonUsages.triggerButton, out bool isPressed) && isPressed) {
Fire(); // Shoot logic
}
}
}
In 2024, Apple changed the game with the Vision Pro. Apple avoids terms like 'VR' or 'AR' and pushes "Spatial Computing".
Traditional computers were trapped inside a 2D rectangular 'Monitor'. The mouse cursor only had x, y coordinates. Spatial Computing turns "Your entire room into a monitor". App icons float in mid-air, and you click with hand gestures and eye tracking.
If you are considering adding AR/VR features, follow these criteria:
It's not all sunshine and rainbows. Here are the hurdles I faced:
Until now, we've only built 2D websites trapped inside <html> and <body> tags.
But the web is expanding into 3D and into the space around us.
Just like my experience reducing returns with AR, focus not on the tech itself, but on "What problem does this solve for the user?" Even outside the monitor, the space for your code to run is infinite.