Wednesday, January 26, 2011

Request For Comment: JQuery Form Builder Plugin

The JQuery Form Builder Plugin is the first JQuery plugin created by me. Finally, the first demo of the Form Builder went live and hosted in Google App Engine (GAE) at http://jquery-form-builder-plugin.appspot.com/.


Please take note that the live demo was tested in Firefox and Google Chrome browser only, if you see some thing odd for the layout and found some issues when running the Form Builder in your browser, please create an issue report included browser version and OS at http://code.google.com/p/jquery-form-builder-plugin/issues/list.

I would like to seeking your reviews, comments and advices for Design, API and Source Code of the project. Please let's me know if you have more efficient way to do the same thing, let's me learn from you.

The missing portion of the project is implementation of QUnit test suites, if you have expertise in QUnit, we welcome your contributions and advices.

You can find out more information about the project at http://code.google.com/p/jquery-form-builder-plugin/

Lastly, you are invited to join the project discussion forum at http://groups.google.com/group/jquery-form-builder-plugin to tell us what you think about the project.

Thanks for reading.

Wednesday, January 12, 2011

FreeMarker vs. GSP for Dynamic Template Rendering

I find out that there are two ways in Grails to render dynamic template (String template), using FreeMarker and GSP. FreeMarker support enabled by freemarker plugin and freemarker-tags plugin. Special thanks to Jeff and Daniel creating these plugins, it will be less options for Grails view technology without their contribution. Given two options, I need to perform some micro-benchmarking to find out which one is the appropriate technology for given requirements.


The Objective
To evaluate and decide which template engine (FreeMarker or GSP) to use as Form Template of the Grails Form Builder Plugin.


The Result
FreeMarker is the winner. By perform rendering 100 times for the same template, GSP need 119,946ms and FreeMarker need approximately 1/4 of GSP, 32,749ms (Surprise? Yes, I am surprised about the performance of FreeMarker over GSP in dynamic template rendering).


How I Did It 
The Benchmark Case
The dynamic template was created based on the following domain class:
package test_freemarker2

class Test1 {
    int prop1
    String prop2
    Date prop3
   
    static constraints = { prop2 blank:false }
}


The FreeMarker's template rendering code:
new Template("freemarkerTemplate",
             new StringReader(freemarkerTemplateCode),
             freemarkerConfig.configuration)
            .process([test1Instance: test1Instance, flash:flash], out)


The GSP's template rendering code:
groovyPagesTemplateEngine.createTemplate(gspTemplateCode, 'gspTemplate').make([test1Instance: test1Instance]).writeTo(out)

As the template code (freemarkerTemplateCode and gspTemplateCode) was too lengthy, I will not describe it here (You can download the complete source code of the application here to run the benchmark test in your own environment).

The Benchmark Application
I run the benchmarking tests with the following steps:
  1. Start the application using grails run-war.
  2. After the application was started, open or refresh the URL http://localhost:8080/freemarker-vs-gsp/benchmark/index in your browser. You will see the following screen:
  3. Click on "FreeMarker" link and wait for test completion and shutdown the application. Do the same for "GSP", start from step 1.
The Environment
Operating System: Puppy Linux 4.3.1
JDK:  1.6.0_20
Grails: 1.3.6
Processor: Intel Pentium M 1.5GHz
Memory: 1285MB

The Source Code
You can download the complete source code of the application and run it yourself.

Conclusion
Even the winner of this benchmark test is FreeMarker, the benchmark code was written based on my limited knowledge of FreeMarker and GSP. You may have better way to write optimized code than I do, please let's me know if you found a better way.

Edited on 28 Jun 2012: Please see the part 2 of this post.

    Friday, January 7, 2011

    JQuery Form Builder Plugin Project 0.1 Roadmap

    These few days, I working hard on the JQuery Form Builder Plugin Project and attempt to get it up and running as soon as possible. Finally, I just finished lay the solid foundation for future grow of the project.

    Following tasks have been completed:
    While rushing for this project in the past few days, I realized that I haven't defined proper plan and project target for release 0.1. Let's come out proper roadmap. (Edited on 26-Jan-2011: The project roadmap was revised to have shorter and consistent release cycle, please see the updated roadmap at http://code.google.com/p/jquery-form-builder-plugin/wiki/Roadmap)


    The following two group of fields supported by the JQuery Form Builder Plugin:
    Standard FieldsFancy Fields
    • Single Line Text (Text Box) [0.1]
    • Number (Digit & Decimal) [0.1]
    • E-mail Address [0.1]
    • Web Address [0.1]
    • Multi Line Text (Text Area)
    • Multiple Choice (Radio)
    • Checkboxes
    • File Upload
    • Name
    • Date (Date Picker)
    • Time
    • Phone (International & US) [0.1]
    • Mailing Address
    • Currency
    • Plain Text [0.1]
    • Rich Text (Html Text)

    All fields marked with [0.1] above will be targeted for 0.1 release and developed in the following order:
    • Plain Text (Development Started)
    • Single Line Text
    • Number
    • E-mail Address
    • Web Address
    • Phone
    A picture worth more than thousand words, I have mocked up the following screen so that you can visualize the deliverables of 0.1 release (will be hosted in Google App Engine platform):

    Any feedback is welcome and highly appreciated. You are invited to join the discussion group of the project, tell us what you think, see you there!

    Saturday, January 1, 2011

    Kick Off JQuery Form Builder Plugin Project

    What is Form Builder?
    A GUI or WYSIWYG tool that allowed you to create online forms in web browser without any programming knowledge.

    The project
    The JQuery Form Builder Plugin project is a brand new project that licensed under Apache 2.0 kicked off by me on the first great day of the new year, 1-1-11 that implementing Form Builder as JQuery Plugin and using JQuery UI as widgets.

    The JQuery Form Builder Plugin project implements the front-end of Form Builder, another sister project Grails Form Builder Plugin implements the back-end of Form Builder using Grails Framework. Please take note that the JQuery Form Builder Plugin is back-end natural, you are welcome to implement the back-end of Form Builder using any language, framework and platform you preferred.

    Origin of the project and motivation behind
    Since I kicked off the Grails Form Builder Plugin project 2 months ago, I found an open source JQuery Form Builder which I think likely to meet my project requirements.

    However, when I dig into the codes and attempt to refine it few days ago, I find out that the project have one critical issue: It is not design to support extensibility and modularity. I can see that if I use it as initial code base of Grails Form Builder Plugin's front-end, I will have problem to extend it to support additional widgets and will have hard time to maintain it. That's how the born of JQuery Form Builder Plugin project that intended to solve this issue.

    Nevertheless,  the JQuery Form Builder remained to be very good reference for the JQuery Form Builder Plugin Project. Just drop me a mail if you are interested to join this project.

    Happy New Year 2011!


    Saturday, March 13, 2010

    Gather Inputs from Visitors and Readers

    I am user of Google Apps Standard Edition for more than 2 years but never tried the Form Generator feature of one of it's product called Google Docs. I give a try today and I have found out that the tool is very simple to use and it is great tool for you if you need to gather some inputs from your web visitors or blog readers.

    The test form below display all form components supported by Google Docs Form Generator.

    Click here to open the form above in pop-up window
    (The inputs submitted via the form will store in Google Docs Spreadsheet)

    I think this tool is very helpful to me for collecting input, feedback, perform survey, etc. for time to come. How about you?