Framework free components

Proceed further if one of the following is true

1. You recently started a project to rewrite your existing jQuery application to Angular or React
2. Couple of years back you moved your JSP based application to Single Page App

What is the likely hood that a new shiny framework is going to knock our doors and we rally behind the performance or "ease of development" of that framework ? In recent times hundreds of enterprises rewrote their existing UI applications in React or Angular to deliver the same or sometimes reduced functionality to their users spending millions of dollars on development, testing and support without delivering any  significant business value. One of the primary reasons for this is hype cycles and rallying behind a particular cool technology of the day.

Any team that would like to rewrite their UI Applications need to seriously think about the Web components option before investing on any framework to build the fundamental components that make up their user experience. Frameworks have their place too, particularly in speeding up the development by combining "components" from various teams , managing state and avoiding repetitive code. 

One of recent compiler to produce framework free native html components is "Stencil". Stencil allows developers to use the similar development tool chain that React and Angular developers use to produce a vanilla web component that can be used in any Framework (or just on any plain HTML page).

how to access constants from JSTL (EL)

During our web development we may come across a situation where we want to use a constant (static final) variable for some reason in our JSP using JSTL's Expression Language (EL). As you know we access properties very easily using JSTL as below.

you might alreay know.. if we want to access a property called studentName and a method is defined as getStudentName() in the target object (lets cal it 'student') the EL would be "${student.studentName}".

But if we want to access a constant defined in the above class as
public static int MAX_RETRY_ATTEMPTS=10;

using the EL "${student.MAX_RETRY_ATTEMPTS}" , will fail
I am sure you will need to use these constants sometimes.

We can use a simple trick to solve this.

we will make use of a Map to store the constants , as below

   .....
   .....
   ......
   public final static int MAX_ALLOWED_USERS=10;
   public final static int MAX_LOGIN_ATTEMPTS=2;
   Map constants=new HashMap();
   
   public Map getConstants(){
       constants.put("MAX_ALLOWED_USERS", MAX_ALLOWED_USERS);
       constants.put("MAX_LOGIN_ATTEMPTS", MAX_LOGIN_ATTEMPTS);
       return constants;
   }

As you can see we have defined a method getConstants which returns a HashMap with our constants with appropriate keys.

Now how can we use this in our JSP ?

    The Maximum number of attempts is : "${MyForm.constants['MAX_LOGIN_ATTEMPTS']}"

clearly, we first get the Map using getConstants() method and then value of the constant using the key 'MAX_LOGIN_ATTEMPTS'.

Easy ?

Please let me know if there is a better way to do this

What's nice about seaside ?

Its been very interesting week, trying to get my head around seaside. Honestly it took some time for me to unlearn many things which I learned over past many years. Not only a great idea, I feel it will speed up the the web development process in a great way. Although many seaside experts have written great examples, I wanted to post the one I started with.

The functionality is quite simple
1) Display the Login Page
2) User enters username and password and clicks on validate button
3) If the credentials are validated (in this case username='smalltalk' ) a welcome message is displayed , otherwise login page is displayed again.

Quite simple.... lets see how intuitive it can be

Lets start with defining our Login Component as below

WAComponent subclass: #Login

instanceVariableNames: 'username password retry'
classVariableNames: ''
poolDictionaries: ''
category: 'LearnSeaside'!

this should be self explaining , We defined a class Login subclassing it from WAComponent.
It has three instance variables , I used "retry" to indicate if it is a retry or first attempt. (may not be the best way ..)

Seaside calls renderComponentOn method when it is appropriate to display the content on the web page. Let us look at how we want to display the content on page.

renderContentOn: html 

 html
 form: [
        retry ifTrue: [
        html text: 'Retry..'.

 html break].
 html text: 'User Name'.
  html textInput on: #username of: self.
  html passwordInput on: #password of: self.

        html submitButton callback: [self answer: self];
 value: 'Validate']

Nothing special .. it just displays user name and password fields, in addition to that , it display text "Retry" based on the instance variable "retry".

Now lets add some magic. we will now write a Task to start this.

we will name our task WASchoolTask , subclassing WATask. it will have a method "go" which will be called by seaside as entry point to the application.

let us look at the go method.

go
 | login |
 login := self call: Login new.
 [login username = 'smalltalk']
  whileFalse: [login retry: true.
   login := self call: login].
 self inform: 'Welcome ' , login username

as you can see in the above code we want to display the login screen until the user enters username as smalltalk. What a great way to write your applications describing the natural flow of the application! Notice the statement
self inform:'Welcome ',login username

The best part of the code is that this statement will not be executed unless the loop is broken. Imagine how you would do this in a Action based framework.

Some new ways to Develop web applications

Its been long since I started working on developing Java based web applications. Quite frankly, developing applications, although critical for earning rice :-) , I am no more enjoying developing them with the MVC models using heavy boilerplate code and scaringly big XML files for configuration.
The typical request response model sounded great for me in the initial days , probably I was used to develop using cgi and later php with code scattered all over the page.
The interest in some different stuff automatically dragged me to Ruby on Rails, and found it really cool, but again the basic approach was same but with emphasis on convention over configuration.

Looks like atlast I found some thing interesting in Seaside , a Continuation based framework in Smallatalk !! Yess.. I wrote it correctly , It is Smalltalk, that language we heard about in our College days.


So whats new about it ? Lets have a look at the following figure



In a typical Struts based or any Action based framework , Control flows from Browser to Action Class (or similar ) for processing some business logic by parsing the request parameters (many framework do this automatically ..but still we are dealing with fields and request parameters) and based upon the result control will be passed to render appropriate page, and this process repeats. This model allows business logic to be written in separate classes .

Now , lets us look at the Continuations based Seaside framework, In a striking contrast with the above approach , we can write our web applications , very similar to the way we write any console based application, like the below pseudo code

1) Get Values From Browser
.... Suspend Processing till user click on Submit
2) Process
3) Display Result
..Suspend processing till user responds with something
4 ....


I found it very different and very intuitive way of developing applications. There is a lot of Buzz around this framework , you too may find it interesting.

Currently I am exploring this framework and finding it a great way to develop the applications. I will write about this further in my future posts.