Fifthtry

Routing is Hard

In “old style” web apps, routing is performed on backend. Backend knew what page is requested, knew what data needed by what page, generated html specific to that page, and included css and js needed for that page along with response.

In single HTTP request, browser gets the content requested by user.

In the single page application approach, backend serves a single catchall html page for all requests, which is typically a largely empty page, with includes a javascript. Javascript, lets call it “main” or “router” javascript, then loads, in frontend, and analyses the document.location, does routing on frontend: figures out what page is requested, and loads javascript specific to that page, finally the page specific javascript after loading, makes a API request to fetch data needed for that page, and on getting the the data, renders it in browser.

Here we take four (original html, main js, page specific js, and finally api request) http request to show content.

Of course most frontend frameworks offer a few optimizations to help solve this architectural issue.

Server Side Rendering (SSR)

This is an optimization by backend to try do the entire thing that browser does, on the backend, so the original HTTP request returns pre-rendered html content.

In this scheme, the entire 4 http request dance still happens on the frontend, but during that dance, end user gets to see the HTML content, potentially interact with it minimally, and finally when data is loaded, the original HTML is “hydrated”.

The hydration step is potentially dangerous, can lose user’s input, or can lead to screen “flash”.

SSR is done both to let users see something in browser sooner, and to assist crawlers like google-bot so your page can be indexed correctly.

Data in HTML

Independent of SSR, or along with it, the API request can be avoided, if backend does routing, knows for what route, what APIs are needed, calls the API on the backend, and includes the returned data in the HTML.

The page specific javascript then first looks for data in the HTML itself, and if not present only then calls API.

Javascript Bundles

Lets look at the “main” javascript and page specific javascript. If your site has only a few pages, all the javascript can be bundled in a single javascript file. This leads to more javascript loaded than needed, and does not scale with site size: a site with too many pages will be really slow with single bundle approach.

To mitigate this, sites split themselves in multiple bundles, but this becomes a hard problem really fast, needing constant tweaking, maybe even machine learning. Basically how do you decide what pages to bundle together? If your decision is not good, say you bundled A and B together, not good means user went from A to C, so bundling B was useless.

Table Of Content

What is Realm?

A Bit On Motivation

Routing is Hard

What does Realm do?

Backend Data And Type Safety

Tutorial

Quick Start Realm Tutorial

In Depth Tutorial (not ready)

Nix
Shell
Doit
Hello Rust
Hello Elm
Hello Static Files
Hello Server Side Rendering
Pre-Commit Hooks

Routing, Request And Response

Frontend, Data, Navigation, And APIs

How To Guides

File Upload

Backend: S3 File Upload
Authenticated File Serving
Frontend: Uploading Files From Elm

How to use storybook?

How to implement “loading..”?

Docs

Realm.In

Realm.Storybook.Story

realm::In

realm::Context

realm::Result

realm.magicSlice

realm::RequestConfig

Environment Variables

Internals - Only for Realm Developers, not Users

“Realm DATA”
iFrame Controller
Shutdown Routine
Testing Internals

Change Log

Get Realm Starter Working

Transparent Offline Feature

How to make http requests in Realm?

Development

Replay Testing

Tutorial: ToDo App

Realm Testing

Enhance Realm Starter

Double Load Issue

Deploy To Heroku Button

End failure

Realm-Starter Github Template

Proposal: Tracker And Visit

Proposal: Activity Store

Proposal: Bundling

Proposal: Retry On Network Error

Storybook: Editable JSON

Storybook: Notes

Storybook: Reference

Backlog

Readings

Change Log

How to Publish

Testing

Code Snippets

Skip rustfmt For Some Section

Close Modal Dialog When Clicked Outside

Ignoring Lints In Python

Ignoring Lints (clippy and rustc warnings) In Rust

Handle DateTime in Rust & Elm

Handle CiText value read in Rust

Transport Enum Type to and fro Rust/Elm through JSON