Opa: Up and Running

Chapter 9. Building Reactive UIs: New Messages with a Real-Time Preview

We will now work on a modal window to post new messages in Birdy. As in the micro-blogging app developed earlier, we want certain markup to be interpreted in a special way. More precisely:

• #topic text should indicate messages about a given topic.
• @user should indicate that the message is directed to the given user.
• http://example.com-like text should be interpreted as links.

Those three elements will be formatted in a special way. This formatting will be shown to the user in a live preview, which is a preview of the final rendering of the message updated with every keystroke. A UI in which the interface reacts continuously to user events is called a reactive UI.

Let’s get started!

Parsing

To analyze all the special elements in our messages, we will need to parse them. Parsing is the process of analyzing text to determine its structure. The code that performs such an analysis is called a parser. Opa offers extensive support for building parsers, so let’s begin by exploring this support.

Note

A popular set of rules for parsing goes by the name context-free grammar (CFG). Opa does not use CFG, and instead uses a newer set of rules known as parsing expression grammar (PEG). You do not need prior knowledge of these rules to understand the concepts presented in this chapter. We just wanted you to know about them!

Parsing is somewhat similar to pattern matching. Pattern matching analyzes an arbitrary data structure and ...