Aggregation added to SmartGrid

The last remaining major feature every good modern grid should support was added to SmartGrid – the Aggregation!

Check the demo.

As a developer you can now define the grouping function for each column, i.e. the key of a group. It is fully customizable, you can for example create a groups from numbers, like ranges 0..100, 100..200. There are no limits! Check following example which groups by substring.

GridColumn(
  ...
  groupBy = { it.ticker.substring(0, 2)}
  ...
) 

See the demo source code here.

Aggregation feature even supports aggregation functions on columns, currently it supports SUM only though. For each column, you need to provide a getNumber callback. Later, user will be able to select an aggregation function himself.

A lot of effort was given into the performance aspect of a whole grid, so aggregation feature is now able to work well even if the grid is ticking very fast.

Improved List Groups

ListGroup component now supports many new features:

  • Selections (none, single line or multiple lines)
  • Ability to set selection programmatically
  • Ability to set data provider, to add new items and to remove items
  • Sortable by mouse (optional feature)
  • Ability to get back data provider in proper order
  • Ability to listen on changes to selections

Check the demo.

SmartGrid now supports Virtual Rendering

SmartGrid component has been re-implemented to support virtual rendering. Component is now able to handle virtually unlimited number of rows. Only visible rows are being rendered into HTML. As user scrolls, only newly visible rows are being rendered and hidden rows are discarded.
Component almost fully support mobile devices. User can scroll the grid vertically and horizontally either by dragging content of the table or by dragging the scrollbar handle.

There are few enhancements in the component road map: better column selection popup dialog and support for cell editing on mobile devices.

Check the demo: http://demo.yested.net/#grid

Why another web framework

Preface

Couple months ago I read a presentation that HTML5 technology will replace usual WPF/Swing/JavaFx/Flex stacks for the development of typical corporate applications. Those that  usually consist of some grids, charts and forms. Nonsense, I told myself in my damnable uppish way. HTML based framework can hardly beat the effectivity of the development with “fat” components frameworks as well as the User Experience of such applications. In such applications you don’t care about pixel perfect design, you need to quickly put together some grids and forms and at best deploy at the same day to make your business users happy.

Disclaimer: Following text is only related to the development of single page web applications.

There are so many pain points I found when developing such application in HTML. 

Pain points

The Javascript

It is a weakly typed a language. And that’s just a hell. Consider you have a model class with hundreds of fields. How to check you haven’t made a typo error somewhere in your code? Write a junit test. Well, I am lazy, I write tests to test methods, but to test a typo errors? Or, you write a form to edit this model class. You should have two monitors side by side to see the model definition. I am a lazy corporate developer, I want to write code quickly with the support of smart IDE with a smart Content Assist technology.

So Javascript is out of the game, sorry folks.

Components

Corporate CRUD applications are not unique masterpieces. They compose from components. You do not write this to create a table:

<table>
  <thead>
    <th>...</th>
…ok, you know the rest

You just do this:

val grid = Grid(some columns definitions)
grid.data = some collection

And you still have a support of a strongly typed language.

What Tool I am then looking for?

  1. Strongly typed language
  2. A modern language with lambdas, extension methods, etc..
  3. Easy way to write and re-use components, I want to avoid writing HTML
  4. Simple to re-use of any existing Javascript library – so much fancy stuff was already developed!
  5. Reasonable support in IDE including content assist, refactoring and debugging.
  6. Simple way to construct layout
  7. I like simple stuff, let’s keep it simple so that anybody can join the team and develop some simple stuff in a week, not in 3 months.

What’s left out there in the market then? 

Adobe/Apache Flex – I loved this masterpiece for last four years. But,… Flash’s dead baby. 

GWT – I love JVM but in these days Java language sucks. Where are the extension methods? Or some reasonable handling of NPE. What about immutable data classes? Finally at least, we have got lambdas! Don’t take me wrong, I admire Java language for it’s relative simplicity. It is just missing some useful features.

ClojureScript – I like Clojure, use it, but, it is not a strongly typed language. 

Dart, TypeScript – These looks good! Though I don’t have much experience with them and finally …

another language finally attracted my attention – Kotlin by JetBrains company.

  • It is a modern language with all fancy features, it compiles to Java and to Javascript.
  • It has an excellent IDE support.
  • It is very simple to call existing Javascript function/library.
  • It is simple, anybody can learn it quickly.
  • It has a really cool features that allows you to build powerful custom DSL. 

So I have found a language. Now, let’s focus on the components?

Components

There are several aspects related to components, regardless the technology. 

How simple is to create a component

It should be just one class. You shouldn’t need anything else. Do you remember the Java Server Faces? I never managed to create a single custom component, it was just so much complicated. What if we create components as simple as:

public class Image : Component {

  //document.createElement is a Browser (Javascript) function
  override val element = document.createElement("img")

  //let`s expose some properties of underlying element
  public var src:String
  
  get() = element.src
    set(value) { element.src = value}

  //this can be simplified thanks to Kotlin Delegates to:
  public var alt:String by Attribute()

}

How to compose components to create a layout

The most primitive way is to do it manually as we were used to in Swing, i.e.

UL ul = UL()
LI li1 = LI()
ul.appendChild(li1)

Not very nice, right? There are better ways.

<ul>
   <li></li>
</ul>

Usual HTML, if we write this in Adobe Flex MXML, these components are rich, i.e. they held some logic. But how to write the layout in HTML and have rich components? There is a new emerging standard in HTML world  – web components.

However, let’s have look back at Kotlin language. It allows you to create a custom DSL like this:

ul {
  li { }
}

This is an ordinary Kotlin code, both ul and li are a functions. I suggest you to read this description (TODO link to type safe builders). Since this is a Kotlin code, you have all the support of IDE like code assists, compilation checks etc. And you even type less as you don’t need to write closing tags.

However, there is one significant difference between typesafe builders as presented on Kotlin pages or in Kara framework. Kara framework outputs a HTML code, whereas Yested framework uses this DSL to construct an actual DOM. Each component like UL or LI is a class which encapsulate a HTML Element. In case of UL, right one ul html element is encapsulated. In more complex components like Grid, one component encapsulates a whole tree of HTML elements.

 

Being an ordinary Kotlin code, you can do this extremely cool stuff:

ul {
  persons.forEach { person ->  //this is just ordinary Kotlin for each loop
    li {
      +”${person.name}”
    }
  }
}

Let’s add some event handlers to this DSL:

fun doSomething() {
  println(“Button pressed”)
}

val dom = 
   div {
     a(onclick = ::doSomething) { +”click on me” }
   }

This is self-explanatory, isn’t it? Have a look at following example:

val span = Span()
val inputField = StringInputField(placeholder = “Enter your age”)
val dom = div {
   +inputField
   br()
   button(onclick = { span.setContent(inputField.value) } { +”Press me” }
  +span
}

Databinding

You might have noticed that I haven’t yet mentioned Databinding at all. There are couple reason.

Is it really useful?

I have been using databinding for 5 years (in Adobe Flex). Especially in a complex forms with many fields and complicated relations between fields, I found out that databinding leads to confused code. So I rewrote these pieces to a normal imperative code. I.e. this

<input id=”fieldName” value=”{person.name}”>

became this:

fun init(person:Person) {
   fieldName.value = person.name
}
…
<input id=”fieldName”/>

It is bit more of writing, but it is definitively worth putting complex logic into one init method instead of spreading such logic into databinding expressions. Code in such init method is easy to read and easy to debug. Often, some long chains of databinding expressions make impossible to understand what is happening in your running application.

It is difficult to implement

Databinding is difficult to implement properly and I want to keep Yested framework simple.

Also it is not trivial to use the databinding properly, so that it does not cause performance issues in your applications. 

Templates

Templates implementation in frameworks usually means that you have another language one need to learn. In most cases, you do not need templates. If you want to change a look&feel, adjust CSS, Twitter Bootstrap does the good job. Remember, we are not building a fancy web page, but boring application with grids and forms.

Quick Start

What one usually expects of a framework is the ability to write a working application right away. This anticipates that the framework already contains useful components like various input fields, forms, grids, charts etc. Yested comes with a set of components based on Twitter Bootstrap and Chart.js charting library. 

Long term future

I have been building one Adobe Flex application for last five years. It is quite complex app with a lot features and rather complicated. But, Flash Player in browsers is slowly dying. It doesn’t run on mobile devices, his future in Desktop browsers is not very bright either. In a couple years, we will have to rewrite this app into a Javascript.

Angular future is not very clear either, will it abandon Javascript and switch to TypeScript?

Dart – Does not seem to be very successful today. Will Google just kill it like it has already done with his other projects?

There is only JetBrains company behind Kotlin. Though we can be sure we will be developing with Intellij IDEA in next 10 years, JetBrains might decide to abandon Kotlin project if it finds that it doesn’t add any value to their business. 

The only safe option here seems to be actually a Javascript.

« Older Entries