Ops Oriented Development

Opinions expressed are solely my own and do not express the views or opinions of my employer

TLDR; 

 User features are important and delivering them fast is critical to be successful, but this doesn't need to be a nightmare for Operations. 

As a user ... 

A familiar story follows and talks about what is needed for the user to complete his/her task. Thousands of developers around the globe every day pick up one of these stories and deliver value for their business. Most firms alongside these developers operate a mighty set of L1 and L2 support teams to support the production systems. 

Distancing themselves from arguments about GraphQL vs Rest, React vs Angular, Java vs Node these folks act as real reviewers for our system. I assume some of them will have the following questions when they are asked to support a new application. 

•  How far are users' expectations from what was built? 
•  Is the system transparent enough to help answer the user's question? 
•  How quickly can an L1 or L2 answer a question before throwing their hands up and escalate the issues to L3? 

 I am sure some teams out there discuss these along with the stellar feature development. Logging, in particular, seems to be something that most developers use to help themselves rather than support teams. Do we have standards across the organization's applications to log certain information in a certain format? Splunk, DataDog etc are excellent tools but still, supporting every new application requires experimentation with queries and specific attributes.  Multiple teams and subgroups within a larger team tend to handle this in their own special way.

 Intuitive user experiences are highly regarded in today's web/mobile development, Can we have a similar experience for support/operations teams? Maybe, some of you are gathering requirements for monitoring and are not just adding it after the development as an afterthought. 

Deployment using architectural patterns and abstracting away language/ecosystem specific nuances simplified the deployment side of the chaos, all thanks to container abstractions and shift left paradigms bringing developers closer to deployment engineering. 

A similar focus on 'running the show' is much needed ... 

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).

Clojure/Compojure/Ring , a new experience in developing web applications

Its been more than 10 years working on java based applications mostly web applications mostly using a range of frameworks from pure servlets to spring web flow. Except in case of a Servlet you definitely feel that there is this heavy stuff that is surrounding your code.

Although I have liked the convention based approach of Ruby on Rails and Grails on JVM  the introduction to Clojure web development with Compojure was an amzing experience and I had my doubts too.

A Simple Log View application I planned to develop for my work place sounded perfect for me to put it to test. Here are my observations

Good

1. Super Simple way to test the functionality using fine grained functions at REPL
2. Ability to attach to a running application using nREPL giving me never before speed of development. Being there in the application always is an awesome feeling, somewhat similar to SmallTalk environment
3. Intellij Idea with Cursive Plugin is an amazing one for me, considering my java background and long standing incompetence in mastering EMacs.
4. Enlive as the template transformation/generation tool is something i wanted for Java all the tim
5. Lein is the best project build/dependency tool  I have ever used (I still love Gradle for java though)

Bad (or Ignorance)

1. Not very sure about the idiomatic way to manage state in a web application. In Java world I was used to store values in session without even thinking
2. SQL Korma like libraries provide great way to access database using a consistent API but  there is no easy way to handle transaction roll backs in case of a Optimistic Lock Exception like the way I was used to in Hibernate/JPA world using the version field and checking update counts.

Debugging a running Clojure Application

Clojure is fascinating.  Particularly for a programmer coming from a generation which is dominated by Object Oriented "Design" and C like syntax being more "readable". I was disturbed by the idea that I am unable to understand the Clojure code at first glance and I have to confess it really took couple of weeks to get my brain read Clojure code more fluently.

Coming from Java platform greatly spoiled by best of the developer tooling, Clojure development using Emacs is difficult (No offense to the tool as a tool is as good as its user). Let alone introducing the language to your friends in your work place is challenging, lack of "easy" IDE and debugging facilities would be very difficult to sell.  I am happy that I was wrong and my favorite IDE , IntelliJ IDEA has decent Clojure support and getting better every day.  One key task of any java developer is to debug the running application with less fuss and ...... Here is how they do it...

This setup consists of following :

1. Run the Project using Leiningen in debug mode
2. when required attach Intellij to the running application
3. set the break points and fix/inspect the state of the application.
4. Modify code and press Ctrl+Shift+F9 to hot replace the code and see changes immediately.

Let us look in to details:

Run the Project using Leiningen in debug mode

• Add dev profile to your project.clj with the following jvm options

                   :jvm-opts ["-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5010"]
 
                Where 5010 is port number that is specified in Intellij Remote Debug Configuration

• Add an alias to project.clj to be able to run project in debug mode using lein debug as follows  

             :aliases {   "debug" ["with-profile" "dev" "run"] }

• whenever you run lein debug the standard run configuration will be executed with the jvm options which will allow you to attach debugger from IntelliJ Idea

When required attach Intellij to running application

• Create a Remote Debug configuration to attach to the port specified in step above (5010 in example) and make it selected configuration and click debug when required

Other two steps are self explinatory.

Now Clojure development feels more natural and less demanding from tooling perspective given the great quality of  La Clojure plugin from JetBrains... which I know will keep getting better as every day passes.

I hope it would help budding Clojure enthusiasts in Java world.  

    

   

Pagination with rich:subTable & rich:dataTable

Ok.. I could now get the sorting working with dataTable and subTable in my seam application. I have one last problem to tackle , how can I do pagination with data displayed from multiple subTables ? The rich:datascroller does a decent job of providing an automatic pagination if we provide it with a dataModel, but I am struck with a dilemma.. before going into details further, lets look at the following images.



when clicked on the button in the first column the row expands revealing the detail rows which are implemented using subTable



The dilemma I am talking about is , which table-id should i give to datascroller for handling pagination? of course the first (main) table's table id, as we want to display the main table's rows and let the user click on the rows to reveal the detail rows. But imagine if we have another level of grouping which effectively calls us to use three sub tables, and we want to paginate on the second grouping level, how shall we handle this ?

I quickly realized that it is not possible for a single datascroller to handle this because the total number of rows to be displayed on a page are going to come from multiple parent rows , hence multiple subTable id's and multiple datascroller components !!! I know its not a clean way...

The cleaner way is to somehow leverage the dataTable components properties which allows us to control the number of rows to display (these are the same attributes that are used by datascroller component to achieve pagination)

Similar to external pagination which we used to implement pagination with dataTable and subTable , I have to come up with a helper which determines how many rows each dataTable and subTable component shall display to simulate a pagination usecase.

incase if you have not familiar with how datascroller component achieves pagination try this on your dataTable

     
                  
                         #{detail.name}
                 
                 
                         #{detail.place}
                 
    

The attribute "first" indicates the first row to display and the "rows" attribute the number of rows. As you might have guessed the above snippet displays the page "2" .

I will have to use the above scheme to simulate pagination across multiple subTables

Sorting a rich:subTable

My next problem to solve is how to sort a rich:subTable. I need this because I am displaying detail rows using rich:subTable and when user clicks on the header for the main table the data should be sorted by the column clicked in subTables also.

Then what is the problem, richfaces documentation shows we can use sortPriority and sortBy properties on subTable, unfortunately after 3 days of relentless attempts I found out from the richfaces source code that subtable is not a sortable component , so you cannot use the goodies like automatic sorting complete with nice ascending and descending marking icons.

I must implement subTable sorting because without it I cant go ahead with richfaces for my project as i need master and detail sorting in almost all the screens, so I decided to come up with some solution.

One solution is to sort all the detail rows when ever user clicks on table header, like this algorithm

for each row in main table
if there are group elements for this row sort them


This works very well and it worked too,but some how i did not liked the way it is sorting all the detail rows everytime I clicked on header, as at any point of time i display only 15 rows per page. It makes sense to sort only the details of 15 rows, after some thought here is my solution

1. Building upon my previous post where I used SortingBean to help in external sorting, add a method to SortingBean which takes a list and sorts that list based on the column provided and the sorting order
2. change the subtable definition

From:

  

     
           ...
     
  

To:

 
 

     
           ...
     
  

This approach works very well because pagination will ensure that only the rendered rows are sorted as opposed to sorting all detail rows

External Sorting in seam application with rich:dataTable

When working with seam application you may have encountered a scenario where you have to implement rich:dataTable in a non-conventional way , for example look at the below fragment

NORMAL WAY
   

    
     

       Symbol
     
     #{aRow.symbol}
    
     
    
     
      Quantity
     
      #{aRow.quantity}
    
   
...
..
A MORE FLEXIBLE WAY..

 

 

  
  Symbol 
  Quantity 
  

    
     #{aRow.symbol}
    
     
    
      #{aRow.quantity}
    
   

notice the second case, that we are not defining the table headers with "header" facet for each column, instead we are defining all the header columns using a single header facet. This allows me to do stuff like detail rows for each row using subtable and columngroups easily. This approach brings a problem too, it is not easy to define sorting information to take advantage of automatic sorting feature of dataTable. Rich faces demo gives an nice example of using external sorting, but it may not be very obvious on how to implement sorting by clicking on header rows, atleast for me it was little difficult to get around this problem. Actually it is not that difficult , here is how hey do it....

1. We need to make use of dataTable's sortPriority property to tell dataTable which column the table should be sorted on.
2. Define IDs for all the columns you want to provide sorting ability
3. Make the header clickable and on click event change the sort priority (dont worry if this is not clear, I will explain you in detail.. shortly)


Because we need to use the same feature for many screens , we will not write anything in our conversation scoped sessionbeans , instead we will define a reusable bean which can store the sortPriority and sortOrder , as per rich faces documentation I named the bean SortingBean, less surprising. huh..

it is a simple bean which holds the current sort column and sortingOrder (ASCENDING or DESCENDING), here is the class

package com.dezinx.shareguru.utils;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

public class SortingBean implements Serializable {

 /**
  * 
  */
 private static final long serialVersionUID = 3478316227248532205L;

 private String sortingOrder;
 private List sortingPriority;

 public SortingBean() {
  sortingOrder = "ASCENDING";
  sortingPriority = new ArrayList();
 }

 public void sortOn(String columnName) {
  if (sortingPriority.contains(columnName)) {
   toggleSortingOrder();
  } else {
   sortingPriority.clear();
   sortingPriority.add(columnName);
   sortingOrder = "ASCENDING";
  }
 }

 private void toggleSortingOrder() {
  if (sortingOrder.equals("ASCENDING"))
   sortingOrder = "DESCENDING";
  else
   sortingOrder = "ASCENDING";
 }

 public String getSortingOrder() {
  return sortingOrder;
 }

 public void setSortingOrder(String sortingOrder) {
  this.sortingOrder = sortingOrder;
 }

 public List getSortingPriority() {
  return sortingPriority;
 }

 public void setSortingPriority(List sortingPriority) {
  this.sortingPriority = sortingPriority;
 }
}

Now we have to expose this sortingBean to the view and it can be easily done by outjecting the instance of SortingBean , like below, in your seam action (stateful session bean)

.....
   @Out(scope=ScopeType.CONVERSATION)    
    SortingBean sortingBean;
...

Finally , lets define the view

    ..
   
        
      
       
         
        Price
       
       
       
       Quantity
            
      

     #{aRow.price}
    
     
     
     #{aRow.quantity}
         

   

in the above code, take notice of how we set selfSorted property to false , defined column ids to refer in a:support , which fires an ajax request to set the current column to sort, Also notice that a:support has reRender attribute set to the id of dataTable, which will force a table rerender after click on table header.

Hope this helps.