View Source General Overview

Scenic is a client application framework written directly on the Elixir/Erlang/OTP stack. With it, you can build applications that operate identically across all supported operating systems, including MacOS, Ubuntu, Nerves/Linux, and more.

Scenic is primarily aimed at fixed screen connected devices (IoT), but can also be used to build portable applications.

goals

Goals

  • Available: Scenic takes full advantage of OTP supervision trees to create applications that are fault-tolerant, self-healing, and highly available under adverse conditions.

  • Small and Fast: The only core dependencies are Erlang/OTP and OpenGL.

  • Self Contained: "Never trust a device if you don't know where it keeps its brain." The logic to run a device should be on the device and it should remain operational even if the service it talks to becomes unavailable.

  • Maintainable: Each device knows how to run itself. This lets teams focus on new products and only updating the old ones as the business needs.

  • Remotable: Scenic devices know how to run themselves, but can still be accessed remotely. Remote traffic attempts to be as small so it can be used over the Internet, cellular modems, Bluetooth, etc.

  • Reusable: Collections of UI can be packaged up for reuse with, and across applications. I expect to see Hex packages of controls, graphs, and more available for Scenic applications.

  • Flexible: Scenic uses matrices similar to game development to position everything. This makes reuse, scale, positioning and more very flexible and simple.

  • Secure: Scenic is designed with an eye towards security. For now, the main effort is to keep it simple. No browser, Javascript, and other complexity presenting vulnerabilities. There will be much more to say about security later.

non-goals

Non-Goals

  • Browser: Scenic is not a web browser. It is aimed at a fixed screen devices and certain types of windowed apps. It knows nothing about HTML.

  • 3D: Scenic is a 2D UI framework. It uses techniques from game development (such as transform matrices), but it does not support 3D drawing at this time.

  • Immediate Mode: In graphics speak, Scenic is a retained mode system. If you need immediate mode, then Scenic isn't for you. If you don't know what retained and immediate modes are, then you are probably just fine. For reference: HTML is a retained mode model.

architecture

Architecture

Scenic is built as a three-layer architectural cake.

scene-layer

Scene Layer

At the top is the Scene Layer, which encapsulates all application business logic. The developer will do most of their Scenic work in the Scene layer.

viewport-layer

ViewPort Layer

In the middle is the ViewPort Layer, which acts as a bridge between the Scenes and the Drivers. The ViewPort controls the scene life-cycle (More on that in Scene Overview), sends graphs down to the drivers, and routes user input up to the correct scene.

driver-layer

Driver layer

At the bottom is the Driver layer, which is where knowledge of the graphics hardware and/or remote configuration lives. Drivers draw everything on the screen and originate the raw user input. Developers can write their own drivers, but that will be rare if at all. Dealing with Sensors and other hardware is a different problem space.

mental-model

Mental Model

Scenic is definitely not a browser and has nothing to do with HTML. However, its design attempts to draw analogies to web design so that a developer with experience building web pages will catch on very quickly.

The following terms include HTML analogies as appropriate…

terms-and-definitions

Terms and Definitions

scene

Scene

Scenes are sort of like a web page. Each scene is a GenServer process that contains state and business logic to handle user input. As the device navigates to different screens, it is moving between scenes.

graph

Graph

A Graph is a sort of like the DOM. It is a hierarchical set of data that describes things to draw on the screen. The Graph is immutable in the functional coding sense and is manipulated through transform functions.

primitive

Primitive

Each node in a Graph is a Primitive. There is relatively small, fixed set of primitives, but they can be combined to draw pretty much any UI you need.

component

Component

A component is a Scene, with added sugar so that it can be referenced/used by other Scenes. This allows you to build libraries of reusable components and isolates logic into sensible containers. Standard controls such as Button, RadioGroup, Slider and more are written as components.

style

Style

Styles are sort of analogous to CSS styles. Styles are optional parameters you can add to any primitive in a graph. They are inherited down the graph.

transform

Transform

All positioning, rotation, scale and such is expressed by applying transform matrices to nodes in a Graph. Transforms are inherited down the graph. You will almost never interact directly with the matrices, as there are very easy helpers that manage them for you.

viewport

ViewPort

A ViewPort is a sort of like a tab in your browser. It manages the scene life-cycle, routes graphs to the drivers, and input back up to the scenes. If you want two windows in your app, you need to start two ViewPorts.

driver

Driver

Drivers know nothing about scenes but are able to render Graphs to a specific device. That could be a graphics chip or the network… Drivers also collect raw user input and route it back up to the ViewPort.

input

Input

There is a fixed set of user input data (mouse, keyboard, touch, etc.) that drivers generate and hand up to the ViewPort. The ViewPort, in turn, sends the input as a message to the appropriate Scene. Scenes handle raw user input via the handle_input/3 callback.

event

Event

In response to user input (or timers or any other message), a component can generate an event that it sends up to its parent scene. Unlike user input, if the parent doesn't handle it, it is passed up again to that component's parent until it reaches the root scene. Scenes handle events that are bubbling up to the chain via the handle_event/3 callback. This is analogous to event bubbling on a web page.

If you are new to Scenic, you should read and follow the exercise in Getting Started.

If you want to dig deeper into the structure of a Scene, then read the Scene Overview.