Star Script

Simplify Web Application Development

Monthly Archives: August 2012

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.

Advertisements

Programming Language that Accepts Arbitrary Input Program

Most programming languages are very selective on the input programs. They have strict grammars and semantic rules. Violation of the rules will result in compilation errors. There is a reason for that – enforcing strict rules are believed to help reducing programming errors.

Enforcing strict rule does not come without its drawbacks. First, it creates a barrier for beginners by enforcing certain amount of learning before they can write their first program. Let’s take a popular programming language Java as an example. The first program a student usually learns is the HelloWorld program:

class HelloWorld {
    public static void main(String[] args) {
    System.out.println("Hello World!");
  }
}

In order to understand and write the above program, a student has to understand quite a few concepts: class, identifier, method, method visibility, class method vs. instance method, string type, string literal, array, statement, method invocation, main method, ‘System’ object, ‘out’ field, println method. Some of the concepts are quite heavy such as the concept of class. Any mistake by the student will lead to compilation errors and therefore frustrations.

Being strict on the input program also puts a burden on the experienced programmers. They will have to constantly carry all those rules in their mind to avoid violating any of them. The penalty for violating the rule is harsh, your program won’t run.

Even after you carefully crafted your program, fixed all the compilation errors, there is still no guarantee that your program is bug free. In fact, no existing technology can detect all the bugs. Now, the question is, is rejecting the user input the only method or best method for reducing bugs. Is there a way that is more friendly to user input without sacrificing the ability to help user reduce bugs. Is it possible to design a programming language that is easy on the beginners yet powerful enough for the experienced? The history of HTML shed some light on this question.

HTML is believed to be one of the easiest to learn computer language in the world. HTML has a very user friendly language specification. It defines many elements as optional, including the <html> element and the <body> element, and asks the browser to automatically compensate for the missing elements. Most browsers go even beyond the specification and handle invalid HTML gracefully. The spirit is, treating HTML authors nicely like treating customers. When they get a little lazy or make a small mistake, don’t penalize them by refusing to render the document, instead, trying the best to recover from errors and render the document as good as it possibly can. This behavior relieved the HTML authors from having to always write perfect HTML. Even if they missed something, their document still gets rendered. The end result is a user agent that can process nearly arbitrary input text. It makes creating web pages easy for the beginners. Anybody can start creating one with minimal learning. In HTML, the Hello World program is simply:

Hello World!

It is the simplest possible form of all the hello world programs!

Unfortunately, HTML is not a programming language, it is not Turing complete. To make it more powerful, there is a desire to supplement HTML with programming language constructs. Several attempts have been made, ranging from server side ASP/JSP/PHP, to the client side JavaScript. All those approaches use some kind of switch that turns the compiler from text processing mode into programming language mode and vice versa. When the compiler is in the text processing mode, it is very dumb. It simply copies the source to the output. When the compiler is in the programing language mode, it is very strict, or as strict as any other programming language would be. Those extensions enhanced the HTML ecosystem. However, they do not bring the same level of ease of use as that of HTML to the programming language world. In turn, only real programmers dare to cross the line to build dynamic web applications.

Star Script is a programming language that tries to bring HTML level of ease of use into the programming language world. The idea is being tolerant to the language user can reduce the barrier of entry and making it easier for beginners.

Star Script compiler will process program with mixed text and programming language fragments. Instead of asking the language users to manually insert markers between text sections and programming language sections, Star Script will automatically detect valid programming fragments from the input text. The un-recognized fragments will be treated as text. Therefore, the hello world program in Star Script is exact the same as that of HTML:

Hello World!

Programming language fragment can be mixed directly with text. For example, the Star Script program that prints out “Hello World!” three times, is

For I = 1 To 3 Hello World! Next

You may wonder that what if you want to print out the source instead of executing it. In Star Script, you can always put a piece of text between double quotes to make sure that it is treated as text, for example:

“For I = 1 To 3 Hello World! Next”

will output the source as oppose to print out ‘Hello World!’ three times.

Being tolerant to the input programs, does not mean being loose in checking the code. Star Script compiler not only detects programming language fragments from the source program, it also checks the grammar and semantic rules. Only when a fragment passes all the checks, it will be generated into executable code. So the generated executable code is as reliable as the one generated by many other programming languages.

What makes Star Script different is when grammar or semantic rules are violated, instead of throwing a compilation error at the language user, the Star Script compiler will try to recover from the violation by converting the invalid fragment into a valid one. Several error recovery strategies are applied at various stage of the compilation process.

  • Defaulting: for example, when a variable is not assigned an initial value, default one will be used.
  • Automatically insert missing statement: for example, when you forget to add return statement to a function declaration, the Star Script compiler will automatically insert a return statement with the default value depending on the function return type
  • Type inference: for example, when a user forgets to assign a type to a newly declared variable, the Star Script compiler will try to infer types from its usage.
  • Type casting: for example, when a user uses incompatible types in an expression, some automatic type casting may be applied.
  • Automatic fix structural issue: for example, when an element is not close, the Star Script compiler will automatically close it.
  • Convert into text output: most other error cases are being converted into text output, such as un-declared name reference, duplicate name declaration etc.

After automatically fixing the grammar and semantic rule violations and before the code generation is performed, the Star Script compiler generates a completely valid abstract syntax tree internally which conforms to all the Star Script language grammar and semantic rules. From that point onward, Star Script compiler is dealing with a valid program as if it was originally written by its user.

To help user identify programming issues, Star Script compiler can output the abstract syntax tree or modified source, so the language user can inspect or compare whether the Star Script compiler understands their program correctly. Potentially, these infomation can be displayed in the IDE as instant feedback to help user while they are writing the code.

As an example, if the user forget to add the ‘Next’ keywords when trying to print out ‘Hello World!’ three times like the below program:

For I = 1 to 3 Hello World!

Star Script will simply print out the source.

Star Script is very tolerant to the input program. One of the design goals for Star Script is being able to process arbitrary input text. The Star Script compiler is very close to this goal. If you are interested, please try out the Star Script at MyEzApp online service, or download the standalone version from the Star Script official langauge site.

Star Script has many other features. I will discuss them in details in later posts. Please feel free to share your thoughts. Thanks!

What is My IP?

Sometimes, it is useful to know your own public IP address. Using MyEzApp, it is very easy to do. The two line script below will achieve it:

use /web/http
http.request().getRemoteAddr()

This script is hosted at http://www.myezapp.com/pub/myip.ws. Have fun!

Landing Page Builder

Landing page template now becomes landing page builder, with multiple templates available and step by step guide helping you to create beautiful landing pages. Below is an example:

The generated application also contains a nice monitoring dashboard:

The source code of the landing page is written in Star Script. Below is the sample code

use ../templates/elegant

<elegant
  tracking_id="UA-576369-5" 
  title="Ez Landing - Landing Page Made Easy" 
  keywords="landing page, online marketing, template, landing page template"
  style="default"
  >
  
  <header 
    logo="landapplogo.png" 
    tagline="Easy Landing Page"
    href="http://www.myezapp.com/pub/system/script/script.ws"
  />
  
  <showcase><img style="width:600px; height: 325px;" src="landingads_s.png"/></showcase>
  
  <points>
    <point name="Quick & Easy" 
      icon="/pub/system/script/landtemp/res/icon1.png">
      Multiple templates, multiple styles. One click publishing. 
        No need for designer. No need for IT department.
    </point>
    
    <point name="White Label" icon="/pub/system/script/landtemp/res/icon2.png">
      Control every pixel on the page. Use your own domain. 
      No annoying 'sponsored by' link. 
    </point>
    
    <point name="Full Control" icon="/pub/system/script/landtemp/res/icon3.png">
      Come with complete source code, includes landing page, tracking and 
      dashboard. Customize & enhance as you wish.
    </point>
  </points>
   
  <action label="Learn More" href="http://www.myezapp.com/pub/help/land.ws"/>
  <action label="Start Now!" href="http://www.myezapp.com/pub/system/script/script.ws"/>

  <footer copyright="© 2012 MyEzApp Inc.">
    <link label="About" href="http://www.myezapp.com/pub/about.ws"/>
    <link label="Pricing" href="http://www.myezapp.com/pub/pricing.ws"/>
    <link label="Terms" href="http://www.myezapp.com/pub/terms.ws"/>
    <link label="Privacy" href="http://www.myezapp.com/pub/privacy.ws"/>
    <link label="Contact Us" href="http://www.myezapp.com/pub/contact_us.ws"/>
    <link label="Help" href="http://www.myezapp.com/pub/help/index.ws"/>
  </footer>
</elegant>

Does it look like a program? Not quite. It’s more like HTML. From template user’s perspective, it is declarative programming.
From landing page developer’s perspective, it is standard object oriented programming. Below is a snippet:

use /web/wpage
use /web/wcomponent
use /web/http
use /comp/slides

use ../landingpage

class simple implements landingpage.renderer
  func render(page as landingpage) as node.element
    page.useCss("simple_" + page.style + ".css")
    var header_logo = "http://www.myezapp.com/pub/system/script/landtemp/res/yourlogo.png"
    var header_line = "Your Catchy Slogan"
    var header_logo_href = "/"
    var header_contact as string
    
    if page.header <> null then
      header_logo = page.header.logo
      header_line = page.header.tagline
      header_logo_href = page.header.href
      header_contact = page.header.contact
    end
    return <body>
      <landingheader logo=header_logo tagline=header_line logo_href=header_logo_href contact=header_contact/>
      <landingbody showcase=page.showcase points=page.points action=page.action slide_height=page.slide_height slide_width=page.slide_width subscribe=page.subscribe/>
      <landingfooter footer=page.footer/>
    </body>
  end
end

Both declarative programming and object oriented programming are supported in Star Script. It is really nice.

Learn More or Try it now!