« Back to all articles

Isomorphic transports & connectors in SPA design

Written by Jeroen van Veen on 13th March 2015

• WebRTC
• websockets

Isomorphic web applications

Web applications can nowadays easily implement straightforward realtime communication between server and client using websockets, because websockets are common in today’s modern browsers. There have been some libraries like socket.io, that abstracted the transport layer, so older browsers could also benefit from full-duplex transport capabilities. While libraries like these become redundant when websocket support is becoming ubiquitous, the concept itself remains interesting for isomorphic web applications that explore features like ‘holy grail’ prerendering (HGP) and WebRTC transport support.

WebRTC and transport

Once a WebRTC data channel between two browsers is in place, it behaves much like a regular websocket transports. When client code runs on the server, as is happening with HGP, it makes sense to abstract the transport layer, so a view defined in the client code can be routed in a similar manner using an in-memory transport for instance. In this case, the transport abstraction would have the purpose of creating a common way to access any client code, running in different situations and environments.

The same abstraction also fits in the situation where client code running in the browser wants to connect to another browser directly by using a WebRTC data channel. This makes the other browser kind of a server. The client uses the same transport API, while masking the differences between the type of transport (Websocket, Memory, WebRTC). WebRTC for instance has some additional logic to negotiate a connection using STUN. Another type of connection would be a client running in io.js (not a HGP client), using a websocket client connection to connect to another io.js client. Client and server are fluid roles in this situation. They are ‘nodes’ in a p2p-style web application setup.

Meet High5!

Meet High5, the io.js pet-library I have been working on for some time now! It’s basically a playground for isomorphic web application design. It has a notion of  abstracted transports and connectors, using RactiveJS for reactive template rendering and LokiJS for isomorphic database storage. When ready for primetime, the library would be suitable for projects that want to provide a SPA with built-in SEO and optional easy-to-use WebRTC setup.