Star Script

Simplify Web Application Development

Simplify Web Application Development with Star Script

Traditional web application development often uses a separate programming language and templating engine. Templating engine is an area that usually causes a lot of pains for the developers. First, templating engines have not-so-user-friendly syntax. You will need to learn how to define placeholders, conditions and loops, often in a strange syntax. Second, templates are usually text based and error prone. Third, developers need to do a lot of context switch between the programs and templates, which is a burden that affects productivity.

Star Script combines a programming language with a templating engine smoothly. So you can do everything in one place. Let me show you an example first. Assuming we want to create the below multiplication table:

1 2 3 4 5 6 7 8 9
2 4 6 8 10 12 14 16 18
3 6 9 12 15 18 21 24 27
4 8 12 16 20 24 28 32 36
5 10 15 20 25 30 35 40 45
6 12 18 24 30 36 42 48 54
7 14 21 28 35 42 49 56 63
8 16 24 32 40 48 56 64 72
9 18 27 36 45 54 63 72 81

Just try to imagine how you would do it in your favorite programming language/template engine. Now, compare it with the below Star Script code:

<table border=1>
  for i = 1 to 9
    <tr>
      for j = 1 to 9
        <td>i*j</td>
      next
    </tr>
  next
</table>

I can safely bet, the non-Star-Script version is probably a little longer and looks less concise.

Star Script also supports custom tags, which is suitable for packaging web component. Let me illustrate this point by creating a page with header/footer and a tab component. Below is the source code:

use /comp/ezpage
use /comp/tabs

<ezpage>
 <tabs>
   <tab title="title 1">content 1</tab>
   <tab title="title 2">content 2</tab>
  </tabs>
</ezpage>

This will render the below page:

If you are a page author, you can now focus on what you do best – authoring the content; and leave the programming logic to the component developers.

If you are a component developer, you may ask, how do I define a new tag? It is really easy in Star Script. Any function can be used as a tag. You can also declare class – as in object oriented programming – and use them as tags. Let me show you a tag defined by a function. Assuming we need a component that will wrap its content inside a colorful box:

func colorful_box(color as string)
  var content = system.getContent()
  <div style=("padding:10px;background-color:"+color+";")>content</div>
end

The component user can use it in the below code:

<colorful_box color="red">
  Hey, I am inside a colorful box.
</colorful_box>

The output is

<div style="padding:10px;background-color:red;">
  Hey, I am inside a colorful box.
</div>

As you can see, the component developer and component users are separated. The component developer creates the function. They are the ones that need to have a lot of programming language knowledge. They need to know the concept of function, parameters, return values etc. The component user uses the tag called “colorful_box”. They need to be familiar with the basic markup language syntax. They need to know the tag name. They need to know that the new tag takes an attribute called “color”. That’s it. They don’t have to worry about function, parameters, programming etc. For them, it is declarative programming. Isn’t it neat?

The colorful_box example is quite trivial. It mainly shows you that you can wrap a piece of html snippet in a function and re-use it as tags somewhere else. Star Script strongly encourage code re-use and re-usable cmoponent based programming.

The tab component in an earlier example is more sophisticated. It is based on the excellent jQuery UI component library. If you are familiar with the jQuery UI component architecture, you may remember that, for many components, you will need to do the below several tasks:

  • task 1: include proper JavaScript and CSS dependencies
  • task 2: create placeholders in your HTML and fill it with desired content.
  • task 3: after the placeholder or on document ready event, call a special function to render the component

The above three tasks need to go into three different places of a page. You need to make sure that the element “id” matches between task 2 and 3. JavaScript/CSS dependencies are included in the proper order without duplicates. If you are using the same component multiple times on the same page, you need to make sure that they are using different “id”. Those tasks are pretty simple, but pretty boring. Doing manually, it is error prone. With Star Script, you can wrap all that up into the “tabs” tag and have a peace of mind that all those boring things are taken care of.

How about seperation of concern? You may ask. Should we seperate presentation logic from business logic? I think yes. Seperation of concern is good programming practice. It is enabled in Star Script but not enforced. Just like seperation between component developer and component user, it is a logical seperation. There is nothing prevent you from both writing tag function and using tag in your code. As a reference, there are many sample applications on MyEzApp.com which you can install with source code. Many of them follow strict MVC pattern.

Now, before you try it out, you may be interested in the performance and reliability of Star Script. Behind the scene, Star Script works similar to JSP. It generates static Java source code and compiles it into Java classes. At runtime, the JVM only loads the script class once. On every request, a script object is created, which holds the state of the script. When request is completed, the script object is garbage collected by the JVM. Therefore, Star Script has similar performance and reliability characteristic as JSP. At the high level, it means, first time when you run a script, you will need to pay for the compilation which can take 100 milliseconds per script on an avarage machine. Once the script is compiled, it is running at close to Java native speed. Star Script can be used to develop sophisticated web site. Every page on the MyEzApp.com is written in Star Script.

If you are not quite sure that you will use Star Script for your dynamic web application. You can use Star Script offline to manage your static html pages such as the tutorial pages. Wouldn’t it be nice if you can write your tutorials like the below?

use /comp/ezpage
use /comp/tutorial

<ezpage>
 <tutorial title="My Tutorial">
  <section title="Section 1">
   <para>paragraph 1</para>
   <para>paragraph 2</para>
  </section>
  <section title="Section 2">
   <para>paragraph 1</para>
   <para>paragraph 2</para>
  </section>
 </tutorial>
</ezpage>

And generates pages like:

I use the term “offline” because you can write the output of Star Script program into a file using the “-out” parameter. This way, you can manage your content source in Star Script and generate the static html files at build time.

Star Script has a lot of other features, such as built in database function, native functions, etc. I will discuss more in the future.

Interested in trying it out? You can download the Star Script compiler free from http://www.starsrc.org. Or you can try it out online at MyEzApp.com.

Thanks for reading! Please feel free to drop me a line if you have any comments.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: