What am I trying to achieve here?
Well, a long time ago we were doing our first Web Dynpro Java project on what was then pretty bleeding edge technology from SAP. My colleague richard.tucker and I spent a lot of time determining the "best" way to componentise our efforts to ensure good re-use and maintainability. So much so, Rich went on to give a session at that year's SAPTechEd and also worked on a document/whitepaper for SAPInsider (if my memory serves me correctly.) In short, we got to a really good end game in terms of template for componentising our WD Java applications that we've pretty much stuck to ever since. I'd quite like to get some sort of similar, maybe less formal but equally useful template of apps, components, etc. within the SAPUI5 world, especially as the work I'll likely be doing with it will be delivered by teams of people, rather than single developers who can control all objects.
Let's get meddlin'.
Before I really get into this1, firstly let me apologise for the increase in quantity and decrease in quality of questions, comments and thoughts I'm likely to add to SAPUI5/HTML5 Space over the coming months. For better or worse, I've got some time to actually get my hands a little dirty with some SAPUI5 development. I'm more used to Java Web Dynpro development and indeed, even with that it's been some time since I've really got my hands dirty with "proper code" :smile:
As mentioned, I'm now doing some SAPUI5 meddling in anger and as is my customary approach, I seem to be spending a lot of time reading documents, blogs and examples, and wondering about best practices and guidelines for building something, rather than actually coding the damn thing. As I alluded to in one of my recent discussions, it seems I'm falling foul of one of SAPUI5's great strengths - it's flexibility. There are just too many ways to achieve the same thing.
To try and get my head around some of the key concepts, I've set myself the task of building what is a very simple app:2
- Simple one page with no page-to-page navigation
- Designed and built primarily for desktop (but could use sap.m controls if needed)
- Is a simple combination of some images above a data table with a few columns
All sounds pretty straight forward right? Well, to make it more worthwhile, I also want to achieve/make use of the following:
- Use a mock.json file to populate the table via model binding
- Dynamically generate images (simple coloured DIV's actually) based on the number of rows in the data table, so 3 rows of data mean 3 images
- Control how the DIV is built based on values from each row, so one of the columns contains a value that dictates the size of the DIV for instance
- Explore componentisation with the Component.js object, to create a single reusable UI component to represent the resizable DIV image and also a faceless component that acts as a data model between my table UI and the mock.json model, so I essentially end up with a reusable data access component too
- Make use of i18n properties files to remove hard-coded texts
- Ensure the project has a file & folder structure that makes sense and supports further componentisation, reuse and maintenance
To many of the afficiandos on these here forums, I'm still not probably setting the world on fire but for me, this is a first principals type of effort; a way of understanding how an application should be structured and built in a "best practice" manner; finally a way of creating a template app that I can quickly use as a quick-start for other app's.
Here's a rough mockup of what I'm aiming for:-
It should be obvious a slick UI isn't what I'm aiming for here, and form certainly does follow function!
To start the ball rolling, I created a new SAPUI5 Application project (called TemplateCompApp) and started by building up a folder structure as a skeleton of where I wanted to end up in terms of content. I allowed the wizard to create the initial view for me (calling it App) but I'm not 100% sure if this is the right or wrong thing to do. On the one hand, I like when a wizard can do some of the heavy lifting for me but on the other, I worry what content is it creating for me that will be incompatible with any further entities I create - I guess we'll have to wait and see.
I ended up with this:
This is quite an extensive folder structure, considering I haven't actually built anything yet! As I'm sat here building it up, I'm not sure if I've put the components folder in the right place. With hindsight, I think it should actually sit underneath the "templatecompapp" folder. I'm mostly happy with how I've got my individual components, with the UI and faceless ones having the relevant sub-folders as needed. (Of course, I don't really need to create empty folders just for the sake of it but this is a template/PoC after all.)
It's also fair to say my logic in this regard is greatly influenced with how I approach Web Dynpro Java componentisation and re-use (see the opening paragraph for the background in case you've already forgotten.) As I think about this more, it becomes apparent that yes, my components folder really should be within my "templatecompapp" folder, so a bit of shuffling leads me to this:
At this point I've also decided to make my actual data table a separate UI component as well, and for the sake of completeness from a template perspective, I've renamed the components folders with a numeric suffix. Ultimately I should end up with a main application and view, that re-uses one of the data table components and 0..n of the dynamic DIV components. The data for the table will come from the faceless component. See - it makes perfect sense when you say it quick like that...
From a slightly more abstract perspective, this is the kind of generic model I'm looking for from my SAPUI5 apps and components:
Summary
At this stage, I've lost an hour or so creating and deleting various folders and files but still haven't got near to creating content. It's important to me to get the foundations right with this sort of thing, hence me over-thinking all of this. So now, over to the rest of you - what am I doing wrong, right, could do better, etc? What are people's opinions on componentisation, re-use and my approach to structuring the files & folders in my projects? Many may say this kind of structure just doesn't fit with the ethos of SAPUI5 and they may be right - all feedback is welcome :wink: Hopefully at some point I'll get round to building something that actually does something too...
1 As with many of my blog postings, this started off as a long winded discussion but I thought it made more sense in this form - there are lots of implied questions throughout (where it's obvious I don't know what I'm doing!) so I hope this generates some decent conversation in the comments section below.
2 Luckily, one of my customers has a number of current projects with an element of 7.31 EP and SAPUI5 so I've had some inspiration from there - often I find building demo and PoC app's for self-development is hampered by not knowing what to build.
- SAP Managed Tags:
7 Comments
