From the SAPUI5 walkthrough to the Mandelbrot set

So I decided to get a deeper understanding of SAPUI5 development as I typically use tools for such things. While tools are great and efficient, I feel that I can always use tools better when I understand better what they’re actually doing behind the scenes.

The natural starting point was the SAPUI5 Demo Kit Walkthrough which I consider a really good resource. And this blog posts (Learning SAPUI5 for Beginners) contains a lot of useful links.

Next step from there was to start experimenting myself, looking in the SAPUI5 API Reference, to understand more of the options and inner workings of the components. I wanted to add components dynamically to my views programmatically as well. I wanted to talk from one view to another, and I wanted to use a Fragment to affect the calling view. I wanted to use both standard as much as possible and also change thigs up with CSS styling.

Well, enter shenanigans, these things were set into action by deciding to display the lovely Mandelbrot set in a sap.m.Table, and here is the result using no styling at all:

The B in Benoit B. Mandelbrot stands for Benoit B. Mandelbrot.

And using the custom CSS:

A 360×310 items sap.m.Table with custom CSS

Having this many components in an app is bad for performance and is bad design. (We’re talking about over 100 000 cells in the sap.m.Table here). SAPUI5 holds up just fine, but there is a bit of work to be done both for the libraries and the browser to handle this shenanigans.

Things I did:

• Understand where to look for documentation and information
• Using the XMLView concept to separate the different views in different artefacts.
• Declare components directly in the view
• Programmatically add components from the controller
• Use a Fragment
• Have the fragment talk with the view that called it
• Use CSS to impact the look and design of things

This left to do:

• Also mix in real data bindings from OData and other sources
• See if a mock server can be used to generate the Mandelbrot data
• Making custom controls
• Unit tests

Please let me know if there are other good aspects to experiment with… 🙂

Anyway this was so much fun, so I really wanted to share this with you. The whole thing is available here on my github.