Fortunately the dark days of SAPUI5 Development lie way behind us and we have reasonable tool support today. Everybody can get going quickly using SAP Web IDE.
However many choose alternative Editors or IDEs. Today we will be looking into the ‘why’ and ‘how’ to do that. We will concentrate on WebStorm and introduce some useful helpers to improve your SAPUI5 development experience in this great IDE.
SAP Web IDE – To Use Or Not To Use
SAP Web IDE is certainly a huge step forward coming from SAPUI5 Tools for Eclipse. It let’s you start SAPUI5 Development in no time with zero setup or configuration effort. You can even write plugins for it, run it locally and what not.
But most importantly it comes with a whole lot of cool features. Think of app templates, WYSIWYG editing of views, bindings and extensions, mock data generation, test frames, eslint, grunt, deployment and last not least code completion.
And therefore I do use SAP Web IDE for certain tasks. But – just like many fellow devs – for the real development work I very prefer a different solution. Because here are some problems I discovered with SAP Web IDE:
- limited editor features
- limited code completion
- no code navigation
- limited freedom to use the tools I want
- limited control of the environment
- performance – well, the lack of it…
- session timeouts
Why I Prefer WebStorm
Downside: It takes about half a day to manually configure it for SAPUI5 development!
Just kidding. The great and active SAPUI5 community has you covered with some nice little helpers that make SAPUI5 development in WebStorm quite convenient. And they are all free and open-source (contributions welcome)!
DANGER: Node.js needed from here on
WebStorm on SAPUI5 Community Steroids
Probably the most essential thing to have is code completion. So let’s get that configured quickly.
$ npm install -g ui5-codecompletion $ ui5-codecompletion install
Unfortunately WebStorm is not supporting SAPUI5 AMD and particularly not sap.ui.define (it does support require.js and define though…). Therefore code completion and navigation is inaccurate. You can improve that behavior by using JSDoc @type which admittedly is awkward and only works for vars not for function parameters D:
XMLView and XMLFragment Code Completion
$ npm install -g ui5-schemas $ ui5-schemas
For more OpenUI5 related community projects visit openui5.org.
Previous Post: UI5ers Buzz #17
Christian is neither associated nor paid by JetBrains 😉