As an experiment recently, Steven Crighton (LiveCode Product Manager and essentially a non-coder) challenged Ali Lloyd (Senior Developer of LiveCode) to a head to head: Steven would build a specified UI using PolyGrid, and Ali would build it in DataGrid. Which would come out tops? How fast could they build it and how good was the end result?
What are DataGrid and PolyGrid, and Why do they Matter?
These both provide a way to create beautiful, powerful and flexible spreadsheets or tabular layouts in LiveCode. If your app creates reports, you need a grid. If you want to display data for your end user, you need a grid. There are a vast number of uses for this type of object, and a great many apps need it. Up until now, LiveCode’s solution was the built in DataGrid. PolyGrid is the new kid on the block, and this challenge should help you to understand how good a replacement it really is.
The Challenge
The task was to use the above image as a template for the grid. The exact specification was as follows:
- Build a list that looks like the challenge jpg inside the folder;
- All of the images are supplied;
- All of the data is supplied – may need tweaked to suit what you need for tool being used;
- The SVGs used here are a trash icon and 3 dots which indicate a popup menu;
- Trash should delete the row;
- Three dots should popup a menu that has an option which says Renew Membership (but no action is needed here);
- The purple used in the design is 6b60bc;
- Standard text colour is 595e6c;
- The background of the green pill for active status is 7da579;
- The background of the red pill for inactive status is bb7369.
So What Happened?
Steven and Ali took the specs and then did a screencapture of their efforts to produce the grid. You can watch that here:
The first part of the video shows Steven and PolyGrid, the next part is DataGrid and Ali. As you can see, it took Steven 10 minutes and 4 seconds to build his grid, while Ali took 36 minutes and 36 seconds. Not only did Steven finish in a third of the time, he also used 1 control and 10 lines of code vs about 150 controls and 50 lines of code. (Don’t worry, the video isn’t 36 minutes long, we’ve sped it up a good bit to make it more watchable!)
More code, more controls = more opportunities to make errors when coding (you can see Ali make and correct several errors), it also makes the grid slower to render and less responsive to the user.
What could you do with the extra 20 minutes?
Naturally, Steven did not rest on his laurels. With the extra 20 minutes he saved by using PolyGrid, he applied a bunch of prettification to his UI. He added a PolyList, a Circle Avatar and some Power Buttons. This is the result:
Does this mean DataGrid has no place anymore?
Not entirely. There are still some things that DataGrid can do, which PolyGrid can’t – yet. If you need:
- Swipe actions
- Data sorting
- Direct editing
- Ability to contain any control (the thing that makes it very customizable)
- Ability to use LiveCode script to control cell behaviour
Then you still need the DataGrid, at least until PolyGrid catches up. However, if you have a relatively simple table to design, then a really good choice to start with is the PolyGrid.
Try the challenge yourself!
How quickly can you complete the challenge, using PolyGrid or DataGrid? It’s fair to say that Steven is not an experienced programmer, and it might well be that someone more experienced could create the end result even faster than 10 minutes. Are you a DataGrid Wizard? How long does it take you? What are your thoughts on using each of these technologies? You can download all the resources here. Don’t be shy, post your results and comments below!
If you’ve not got the PolyGrid yet, its available in the Enhancements Pack offer, running to the end of September.
Join the conversation