Simplify Web Application Development
Introducing Star Script (7): Component and Tag
November 30, 2011Posted by on
Enabling users to easily create and use component is an important design goal of Star Script. It is so important that Star Script has special language syntax to support it. The syntax that helps with component construction and usage is called tag, similar to the tag syntax in HTML/XML.
Tags, AKA markup, is considered “declarative” way of programming and easier for non-programmers to pickup. That’s why Star Script chooses tag to represent component. Integrating tags into a programming langauge allows user to avoid programming in certain use cases, such as UI declaration, content authoring, object value initialization, etc. When properly implemented, it can promote component oriented programming and improve the usability of a programming language.
Currently, in most programming languages, tags are not natively supported. Usually, they are treated as text and processed using language specific DOM libraries. There are a few languages that supports XML literal such as E4X, JavaFX, and Visual Basic. The functionality of the tag in those languages are quiet limited. Tags in those languages are mostly designed as a shorthand for creating XML fragment or constructing objects.
Star Script adopted an approach that treat tag as a first class citizen of the programming language. Below are some of the design points:
- Easy tag definition: tag can be defined either by a function or a class. Any function can be called using tag syntax.
- Tag has well-defined life cycle: tags go through four stages of their life cycle definition, instantiation, configuration, and rendering
- Tag can be nested within other tags
- Tag can be nested within other language structure
- Tag can be assigned to variable or returned from function
Let use a simple example to illustrate some of the above points.
func row(n as int) <tr> <td>n<td><td>n * n<td> </tr> end <table> for i = 1 to 2 <row n=i/> next <table>
The output of above program is
<table><tr> <td>1<td> <td>1</td> </tr><tr> <td>2<td> <td>4</td> </tr></table>
As you can see from the example, for-statement can be embedded inside the table tag, and row tag can be part of the for-statement body. for-statement will execute and call the row function three times, each time with different parameter. The row function will render one row of the table, each time it is called.