Continued from Matt Harding’s Fiori Like Challenge - The Diversion...(Part 4).
Happy New Year
For all those living in the Northern hemisphere; if you've been following this series I've just demonstrated how inconvenient your summer holidays are to us in the Southern Hemisphere when it comes to US TV shows abruptly stopping in the middle of our Winter.
So anyway, we've been enjoying our Summer Holidays down South, and with school now back, I can spend some time on this blog series again. Maybe we can consider this blog as the start of the 2nd season of the series with a really lame cliff hanger from last year!
So with that, let’s get down to…
The High Resolution Demo
Well what you didn't see in the break is the numerous iterations I went through with my alter ego stakeholder and the number of changes made to the design. We've kind of moved away at this stage from Design Thinking (DT) but since DT is a collaboration process with a diverse group of people, and I’m flying solo at the moment, I figured that’s probably okay!
Design Thinking Side Note
During the “break” I was lucky enough to take part in a DT workshop at SAP, witnessing SAP run this first hand. I won’t talk in detail about it (as I’m not sure what I can and can’t talk about), but I will say we did end up with a lot of diverse thinking from people all over the world with very different backgrounds. The group I was privileged to be in challenged me greatly (in a good way) which did really result in a great overall impact on the final design.
Considering it was only 3 days in total, and we achieved a unique outcome with an action plan (that would not have been as comprehensively possible with any one of us alone); I’d say it was well worth it for SAP to do this. All that said, one significant learning I did take away from the workshop was that while DT is collaborative, you still need decision makers to step in early to not let non-consensus stalemate you. Additionally, it’s also hilarious to watch Project Managers get nervous with the “fluffiness” of the DT process when they do not see an action plan till the very end of the workshop!
Anyway, back to our main program:
Anyway, since my last blog, I've focused purely on just the search aspect and fine-tuned it down to a couple of scenarios, with an additional tablet/desktop experience view option. What does it look like? We’ll let’s talk about the scenario we’ll be demoing first:
The Problem Scenario
John is sitting in a meeting with a guy named Bob? who’s some kind of Architect and wants to know more about him so he doesn't make a fool of himself!
Option 1: Sitting with just his mobile in his hand
I’ve inserted a video for this scenario as one of the key features is how quickly it responds which can only be seen in a video. The demo is obviously using scripted results coded into the solution so is incredibly quick, but I wouldn't want the final version to be that much slower (1 second AJAX style response times on search numbers is what I’m after in the final solution – hence expecting great things from HANA :wink: )
Option 2: Sitting with a PC in front of him
Almost identical (same code of course), but responsive design kicking in to give me permanent access to the Search area. We also have a table view with some information available if we just want to view key information on one screen for all people in the search (useful if calling everyone from one department).
Initial Search Page on a Desktop
Search Results on a Desktop (Browse Mode)
Pulling up information on Doce Doe on a Destkop (that guy has a great head of hair)
Direct Access View on Desktop (allows Sorting, direct SMS or calling, emailing)
Option 3: Sitting with a tablet in his hand
Same as Option 2 except reduced information is available on table view (again UI5 responsive design features kicking in).
Initial Search Page on an (emulated) iPad
Direct Access View (probably should show phone and email on Tablets rather than Organisation/Position).
Stakeholder Feedback
I like it…when can I have it – And can it be prettier, plus I want bookmarks to be synchronised between my mobile and iPad, and available offline…plus plus plus…
Well – at least they’re happy and excited with the fast turn around time of this type of development...
Next Steps for Name Search
So the above is all well and good, but what about a real deployment solution now. Not only that, I have lots more tasks to do with this before I'm finished. So to whet your appetite (but possibly keep you hungry for a long time too); the following are the next steps (not necessarily in order):
- Stand up AWS development instance with Gateway/HANA installed to host Restful services/backend data model.
- Not initially, but also possibly even stand up HANA Cloud Platform to host the app and handle authentication/authorisation, and link to Gateway via HANA Backend Connector (BHAG)
- Build Gateway model (outside-in) to get people info, search, images, bookmark information, etc. Note - Gateway interfaces IMO should be made for easy focused consumption, and not as a completely reusable API for your backend (more on this to come in the future but as an example, my search API is going to be a single round trip for performance around the globe).
- Enhance search to use HANA style SQL queries for performance
- Pretty up the entire solution (still too clunky for my liking)
- Sort out a github integrated scenario for development (been lazy so far with development)
- Explore the use of a manifest.cache option to deploy, plus ways of minimising code/obfuscation/caching to maximise resource loading performance and get more native app like performance.
- Explore creating new UI5 image control to use image offsets/sizes so we can create a large image file of 100's of faces, download once on device, and provide face images to browsers much quicker. Submit to OpenUI5 if possible when done! (This was inspired from GWT)
- See if we can preload the previous image files in a way to have them even before a user has searched.
- Build an ABAP Image processor to shrink and combine photos into a 100 photos per image, for the previous task to use.
- Implement some kind of SSO.
- Implement the solution within an Android KAPSEL based solution, and deploy in the SMP cloud.
- Build bookmark functionality, including offline access.
- Then in 2016 I might...hmm
Sharing Some of the recent UI5 Prototype Learnings
Moving Target
I’ve felt like over the last 3 months, UI5 best practices have been slowly progressed, but are still far from established. The problem and opportunity with what is now an open source web framework is that unlike ABAP, and predefined approaches to JAVA that SAP have traditionally pushed forward with; there is nothing in the Web world stopping you doing whatever you want in any way you want to. In terms of best practices, sure the MVC aspect of UI5 is defined, but even the switch from JS to XML views is not consistent with the AppBuilder’s use of HTML views, and then there’s the various MVC project structure best practices that are followed, versus the best practices defined in the SDK documentation. This actually concerns me as I worry about those who won't have a web background or are use to ABAP tools doing so much for them - the number of enterprise flavours of UI5 we may see in 2 years time may be scary.
Choice and Limitations
Within the prototype, I tried to stick to mobile libraries as one of the big requirements, but it sure is easy to see other controls and want to include them (both UI5 and outside of UI5). There are a pleasing number of controls to use in the UI5 libraries today, but to a degree, it almost feels like we need to squeeze the app's into the controls rather than address the problem at hand. For example, the bookmark button in the demo is actually a button with CSS moving it to the top of the window where I want it. In hindsight, I probably should have embedded my own HTML and done my own thing to get exactly what I want; but kind of feels more "custom" if I do that and if others all did the same thing, then we'd all need to be cross-browser experts in CSS (this is an expert career in itself)!
Is Eclipse or Sublime the Dark Side?
I tried to embrace Eclipse for development, and JavaScript code completion and alisdair.templeton3’s XML Parser for helping build XML Views worked okay (actually helped me build an XML where the doco was wrong in one case and had me scratching my head), but the XSD’s from SAP weren't perfect; the lack of keyboard shortcuts for testing, the need to start up a tomcat server (I could have automated it, but why when IIS is much easier to manage IMO), and the general “clunkiness” of Eclipse such as navigating the file system for demo code and the like; just made me want to go back to notepad++.
Even the code-completion in JavaScript wasn’t really enough to keep me in Eclipse and in the end, after watching DJ Adams' Sublime video, and Jason Scott also in love with Sublime for the fact you don’t need to use your mouse, meant I’m now trying to use Sublime for development. The ability to simply point IIS at my source made testing instantaneous and Sublime isn't half bad either.
I really do want to go back to Eclipse, but it’s just getting too heavy and slow and ironically not focused on the user experience of a developer IMO. That said, I’ll probably end up back there in the near future when XML View auto-complete and better ways of working with the file system and testing are figured out, or at the very least, to manage my Gateway development when I do that next.
Implied paths
Did I ever mention that I hate leaps of faith in coding? One aspect that drives me crazy is the leap of faith for views and fragments. These predefined suffixes that UI5 expects for filenames, while your code refers to simply the first part of the filename. Yeah – I’ll get over it, but it does make some of the code cryptic.
Chrome is Awesome
Most of you already know this, but the abilities with Chrome for developers are fantastic. Even yesterday I only just discovered the icon "{}" on debugging JavaScript - Basically it pretty prints compressed JavaScript code for you so you can debug like a human being. Ethan Jewett then also pointed out the Console.Table command (very cool visualisation of objects command).
The most obvious feature of use in Chrome was the ability to emulate different devices/screen sizes but the ability to disable cache while dev tools open would be a close 2nd.
Frederic to the rescue
Prior to the 1.18.8 OpenUI5 release, XML samples were far and few between (check out the latest sap.m explored demo app and press the lightbulb icon to see some good XML view examples). Creating XML views is an art you can learn, but it’s very freaky when coming from an HTML view to get used to having to read API documentation, and understand things like default content areas, XML Fragments, etc. But that was made much easier when I commented on Twitter about my frustration of trying to take JS examples and make XML out of them and Frederic Berg came to the rescue:
Wow – Automatic generation of XML from any type of UI5 app you have browser access to. Not a perfect extract in all cases (eg. Complex filter objects within tables); but enough to help during the learning curve. Pretty impressive help from Frederic in just 1 tweet of information!
Creation Tool and App Builder Tool
Since the last blog, a creation tool was (sort of) released and the App Builder Tool for mobile UI5 apps was released by SAP. Both quite slick, but a little too programmatic for my liking, but could be good to get a framework in place (albeit the App Builder produced HTML views). In my opinion, UI5 is about crafting a web page, and not just building it like you did in ABAP with predefined ways of doing everything; but definitely some good first releases to explore. I attempted to start again with these tools, but found it better to come back to my handcrafting technique.
The full meta model extract of UI5 controls
Useful sapui5 coding help meta information files
Thanks to Lucky Li, the link above includes links to download a programatically extracted meta model text file of all the UI5 libraries. Just having the all libraries file open in Sublime on 1 tab was handy when you wanted to know what keywords or constants were (without reading the API documentation).
Building from Scratch versus Retrofitting Examples
DJ Adams also mentioned something like this to me, but while demos were great to understand what was possible, writing UI5 was best learnt by adding what you need to your views by crafting the XML versus cutting and pasting content. Once you truly understand it, cut and paste away is what I say!
High Resolution Prototype is Still a Throwaway Prototype
I think I built 3 or 4 prototypes till settling on this as a prototype to share. Partly because even after going through the complete set of mobile controls, you don't realise what can be done till you play around with the control in anger. For example, not all CSS attributes will impact controls the way you would like it to leading to a very cool control that isn't quite right. And as soon as I get the Gateway service up and running, I'll put all the code on github to share/improve.
Community is Small but has some Rockstars Already
With the UI5 stack overflow community ramping up, and some obvious key players being quite vocal and sharing great content/tools/etc; the challenge for SAP is to have consultants at customer sites suitably up-skilled and semi-consistent ASAP since I am already seeing flavours out there (on SCN/jsbin/github) of development. The community needs to grow, with quality web experienced developers ASAP, and hopefully the open source community outside of SAP may be what we need?
End of Season 2
What? Yep - No more Fiori Like Challenges. So an abrupt end to Season 2, but rather than continue the Fiori Like Challenge series, I'll break into mini-series now where we talk about the continued development using Gateway, HCP, HANA, etc.
- SAP Managed Tags:
8 Comments
