Rhyme Language

• Rhyme is a language that is used to build Progressive Web Apps
• It is a high level, simple, declarative language that is easy to learn for beginners
• It masks a lot of complexity in the underlying platform to make it easier to build apps

Rhyme Language

• Rhyme is a language that is used to build Progressive Web Apps
• It is a high level, simple, declarative language that is easy to learn for beginners
• It masks a lot of complexity in the underlying platform to make it easier to build apps

1 Directives

• Directives in rhyme are special build time instructions
• They do a fews things:
  • Define global app configuration : language, timezone, etc
  • Define certain build time entities like users, roles, etc
• Directive are any lines that start with a # character followed immediately the directive name (no space) -- examples: #language englosh, #timezone America/New_York, #user bob employeee 123
• You can "comment out" a directive line the the build process will ignore it:

// The following directive is ignored:
//#language english
#language french

1.1 Important Security point regarding directives

• There may be sensitive information included in directives. The build process guarantees to remove all information in the app client side code.
• But it is important that the user does not share the "raw" rhyme source code with anyone without those directives removed.

2 Blocks

• Block are the fundamental building blocks of an app written in Rhyme
• Blocks are used to create the UI of an app
• Blocks are delimited with square brackets: example: [block]
• Blocks names are enclosed within the square brackets: example: [block-name]

Example:

[block]
[block]
[my-block]

2.1 Passing Arguments into Blocks

• Blocks can be optionally be passed variables as arguments
• This is done by including variables names after the block name seperated by spaces
• For example [summer-registration $a $b] passes the variables $a and $b into the summer-registration block

[summer-registration $name]
.text "Hello, $name!"

2.2 Navigating between blocks

• You can navigate between blocks several ways:
  • use the goto command: goto [block-name]
  • use a .element that includes a block as an argument that embeds navigation behavior: .button "Registration" [registration-block]

2.3 Special blocks in Rhyme

• There are some special/reserved blocks in a rhyme app:
  • [start]: the first block to be executed, top level block
    • equivalent to the main page or index.html in other languages
  • [init]: the initialization block run once when the app starts
    • runs only once when the app starts

2.3.1 Initialization Block

• The init block is run once and only once when the app starts
• Any lines defined at the top of a rhyme source file that are before the start block are assumed to be part of the [init] block

To illustrate, with the following rhyme code:

$foo = "bar"

[start]
.text $foo

The $foo = "bar" line is automatically part of the [init] block.

The following code is equivalent to the above:

[init]
$foo = "bar"

[start]
.text $foo

2.3.2 Start Block

• The start block is the one required block in a rhyme app
• It represents the starting point of the app
• It is the first block that is executed when the app is run

Example:

[start]
.text "Hello, world!"

3 Comments

• You include line comments in rhyme by starting the line with a double slash: //
• Additionally, comment can be added to the of a line of code with a double slash and a space: // comment
• There are no block comments in rhyme.

Example:

// This is a line comment
$age = 10; // This is a comment after a line of code

4 Colors in Rhyme

• The rhyme langauge includes a full set of built in colors.
• All colors start with a # prefix: example: #red or #blue

Example:

// This will display the text in red
.text "Hello, world!" #red

4.1 Advanced Color Topics

4.2 Example Color Definitions

4.3 Base Colors

The following built-in or base colors are defined for rhyme:

• #red
• #pink
• #purple
• #deep-purple
• #indigo
• #blue
• #light-blue
• #cyan
• #teal
• #green
• #light-green
• #lime
• #yellow
• #amber
• #orange
• #deep-orange
• #brown
• #blue-grey
• #grey

4.4 Color Hues for built-in colors

• Each base collect can have an optional hue number suffix from 1 to 10.
• 1 represens the lightest hue of the color
• 10 represens the darkest hue of the color

Examples:

• #red1 - lightest red

• #blue10 - darkest blue

• If no hue number is specified, the hue of 6 is implied: e.g. #red is the same as #red6

5 Variables

5.1 Variable Name Examples

$foo = "bar"

5.2 Examples of invalid variable names

myvar // MUST start with a $
$1  // cannot start with a number
$My-var // should not have capital letters
$my var // cannot not have spaces
$myvar! // should not have special characters

5.3 Number Variables

• rhyme does not differentiate between integers and floats

5.4 Text Variables

6 Literal types in Rhyme

• Rhyme has the following literal types:

  • text : like a string in other languages
  • number : covering both integer and floating point numbers
  • switch : like a boolean in other languages
  • date : uses a standardized YYYY-MM-DD format, e.g. 2024-01-01; quotes not needed
  • time: uses a 24 hour format HH:MM, e.g. 12:00; quotes not needed
  • color: starts with a # sign e.g. #red, #ab12dd
  • record or item: like a object in other languages

• Assignment to variabe examples:

  • $name = "John"
  • $age = 30
  • $is_admin = true
  • $created_at = 2024-01-01
  • $updated_at = 09:00
  • $is_active = true