Shard — dynamic in-app notifications

A framework for displaying dynamic notifications, alerts and other messages on mobile. Delivered straight from the server as native views.

The problem

Apps all want to send messages to users in different ways — for example a social notification, a prompt about an updated privacy policy or a timely alert. These messages tend to be custom, ad-hoc, and time sensitive. You want to be able to iterate on them quickly.

The problem today is that you need to go through an app store release process and wait for your users to update the app before they can see these messages. If you want to show different UI for different users you need to embed all those variants beforehand into your app. Shard solves this by server-side rendering those views.

Getting Started

Using a declarative view language, views are built on the server and rendered to json.

import Shard from "@visly/shard-node-server"
function SayHello(props) {
return (
<flexbox padding={20} backgroundColor="#2ecc71">
<text fontSize={20} fontColor="#fff">{props.to}</text>
</flexbox>
);
}
app.get(/, (req, res) => {
res.json(Shard.render(<SayHello to="world"/>))
})

The json is translated to native views that integrates seamlessly with your existing app.

import UIKit
import ShardKit
class ShardViewController: UIViewController {
@IBOutlet weak var root: ShardRootView!
var url: URL! = nil
override func viewDidLoad() {
ShardViewManager.shared.loadUrl(url: url) { result in
self.root.setRoot(result)
}
}
}

How does it work?

The process for rendering a Shard on iOS and Android is simple. Instantiate a ShardRootView and provide it with the URL for your server endpoint which is written using a Shard server-side library. This will produce a JSON response describing the UI. This description is then processed by the rust core client library to determine the size and layout of all the elements. Finally we ask the platform specific client implementations to produce views which match this description. In the end all you need to do is add the ShardRootView to your layout, or show it in a popup, insert it into a list, whatever you want.

What are people saying?

Eric Feng @efeng

My only feedback is I wish this were available 4 years earlier.

Congrats (and thank you) @emilsjolander and the @VislyHQ team!

Masood @masoodnusratty

@VislyHQ Dynamic server-side alerts. Brilliant. This would've made my life so much less stressful when submitting iOS builds to the App Store.

Adam Wolff @dmwlff

Super excited for this launch. Server-driven mobile UI makes so much sense. Very happy to see an open-source entrant in this space.

Open source

Shard is entirely open source and we have no plans on changing that. We welcome contributions and aim to build and maintain an open and inclusive community. Join us in GitHub!

Contact us!

Interested in integrating with your app? Email us at hello@visly.app or enter your email and we'll contact you.