Continued from Matt Harding’s Fiori Like Challenge - Low-Resolution Prototyping...(Part 3)
The Diversion
This blog is a more technical blog than my previous design thinking focused blogs to describe my experience in getting the development tools in place and more importantly "humming" to complete my Fiori Like Challenge. We'll be back shortly with the high resolution prototype in Part 5 but read-on if you're getting into Eclipse SAPUI5 development (or experienced already and can offer some advice).
Should I, Shouldn't I...
So we're up to building a high resolution prototype within the Fiori like SAPUI5 application and while I could easily develop this in Notepad++ and deploy either through public Dropbox folders or on IIS (my preferred HTML/JS/CSS editor/test set-up) #oldschool; I figured it is time to embrace the "everything in Eclipse" approach SAP has taken.
So as I like the latest for everything, I downloaded JRE 7, Eclipse (Kepler version), Tomcat 8, SAPUI5 1.16.3.1; ABAP in Eclipse, Gateway Productivity Accelerator (1.0.4), etc; and tried to put it all together.
Now I should point out that I have used Eclipse previously, and was quite comfortable developing within certain aspects of it so. Also, if you are thinking this blog is going to help you set everything up from scratch, it won't but it's been blogged/described about several times before on SCN and elsewhere.
What I will do is give you some thoughts on preferences/install steps that I would have found useful prior to starting the learning/install process.
Change is Good, Change is Bad...
So at this point, I just need to develop some dodgy web content to present as a high resolution working prototype for feedback. To date, my blog series has not been onerous (except for copying images into SCN which took more time than the low resolution design I did) and all up the design thinking effort (ignoring your time as a stakeholder) has only been a few hours.
This all changes with the problem of coming to grips with Eclipse and SAPUI5 (but mainly Eclipse at this point). So while I've grinded to a halt due to Eclipse SAPUI5 Web Development/Testing, I can see my productivity will increase substantially as I become more familiar with the process, and I'm sure more patterns, features for Web development in later releases will make this a no brainer, so I'm glad I'm embracing this frustrating change now! But not really feeling it today!
Most Important Observation
Coming from developing in SAP, we've had things pretty good. Apart from the occasional very confusing, poorly integrated SAP purchased tool-sets; it typically just works from an integrated development perspective. But with SAP now promoting real not-so-Enterprise software development, and embracing powerful open-source IDE's like Eclipse, the most important aspect is, there is no basis dude there to tell you what to do and get it all working.
The analogy: We've had the very powerful, "it just works" but slightly limited Apple iPhones in our hands for all these years, but now we've all been given various makes and models of Google Android phones with stacks of power and options which we are allowed to customise and tailor to our heart's content meaning no one's phone is truly the same.
So if you're leading the charge for Fiori/SAPUI5 at your place - you probably need to get a handle on all of this, making sure you have the right versions of everything installed and configured right (there are dependencies between SDK's and SAPUI5 libraries for example); especially ensuring you understand how software change management will be done, etc; as this could be quite challenging if you have multiple developers touching aspects of the solution.
Other Installation Recommendations and Learnings
- Originally I just used the "Run as Web App Preview" option in Eclipse for my SAPUI5 app (then copying the URL into Chrome for real testing), but it kept running into locking issues with the source files, hence why I moved to a dedicated Tomcat installation. Using Tomcat also allowed me to run the full SDK which does have some JAVA server components that don't run in the static SDK.
- Tomcat 8 installation was straight forward, and I added the SAPUI5-SDK.war file to the Web-App and got it running quickly (available via localhost:8080/sapui5-sdk if you do this); but I found it was easier for Eclipse to work with it's own installation of Tomcat which it can also download and install for you so removed my instance and went with Tomcat 7 (since Eclipse didn't support Tomcat 8 as an install option yet). Note - I'm sure with more time, I could have got Tomcat 8 working, but when it just works through Eclipse - don't fight the easy solution.
- If you use the Eclipse installation of Tomcat, to make the SAPUI5-SDK available, double click on your Tomcat server in the Servers view in eclipse, select the tab Modules, then "Add External Web Module" - After doing this, you can access the SDK in your browser from your Eclipse controlled Tomcat
- To get Chrome as the default browser, it is very simple, don't over complicate the thinking like I did by looking at URL parameters, etc. All you do is go to Preferences under General->Web Browser and add Chrome (see picture) - Just use "Run on Server" and you should be good to go.
- Using Chrome developer tools (press F12), opening the Sources tab, pressing ctrl-O to look at a particular source file, is very cool and is an easy way to set up breakpoints (learnt this obvious one at SAPTechEd).
- I couldn't get Ctrl-F11 behaving consistently for testing my app, so I created a windows short-cut to Run on Server. It's still not perfect (see below) as you have to ensure you select the project or the start file for it to behave correctly. I have no idea how to make a short-cut key to run on server and start with my start URL - Very frustrating.
- Using Dev Tools to disable the cache temporarily can be useful.
- SAPUI5 application and View wizards are a nice way to quickly build SAPUI5 front-ends.
My Perfect Web Development Environment and What I'm still Struggling to Find in this Set-Up
For Web Development, I'm very much a change something, see what happens type of guy - Even in the ABAP World, I tend to have a nervous twitch pressing Ctrl-F2 or Ctrl-F3 and press F8 frequently.
Part of the reasoning is to see the change as I make it, learning how things work, and just knowing I haven't made a stupid mistake. In Web Development, part of it is I want to ensure the User Experience is consistent, and looks good (enough) but not be afraid to test out different approaches to see if I can improve aspects also.
Hence going from code to test near instantaneously is very important to me. To give you an idea about what the future may hold for Eclipse based development (I hope), one of the collaboration sites I came across while learning about SAPUI5 was http://jsbin.com/ - Go ahead and just start typing some HTML into the body, and automatically, you will see the preview page show exactly what is happening. Very cool stuff.
Obviously having intellisense, formatting options, snippets, plus all the other good stuff is awesome (and expected), but since I came from notepad++, you can probably guess the above is more important to me.
So as stated above, the fact that when I edit a JavaScript file (as an example) and then Run on server just displays my JavaScript file in a browser and not my app - is incredibly frustrating. Hopefully one of you know how to fix this, but provided I select the appropriate node in the Project Explorer then press my shortcut key or just leave Chrome running in the background and press refresh there, it's acceptable.
Now can I Finally Prototype?
I think I'm ready enough now - So I'm off to learn and prototype how navigation works in SAPUI5 for Fiori apps and play around with the various icons, controls, etc; to make the app nice to use (For reference, some of the icons are very and I mean very specific and hilarious coming from an Enterprise context - Anyone for an Endoscopy or Soccer). My code will most likely be awful, but the good thing is, I won't care if my stakeholders make me change it all because of it. My general rule with prototypes is you always start the final development from scratch only borrowing from your prototype especially as we usually all learn to a degree when doing a prototype and accept things we wouldn't accept for the final solution (refactoring is usually not appropriate in this scenario). Happy coding all...
- SAP Managed Tags:
