Hybrid Application Development with SAP Web IDE

At SAPPHIRE NOW back in June, we announced the SAP Web IDE. At the time it was called SAP River RDE, but I expected that the name would change to be more in line with the product’s capabilities. (and it did). Web IDE is a browser-based IDE for designing and coding UI5 applications. Fiori apps are also based on UI5, so Web IDE is the tool SAP uses to create Fiori apps and we expect customers will want to do so as well.

If you were at the event and you know me (or met me there) then you probably knew that I was stationed at the Web IDE table (under the old name, of course). I was there because the SMP team has a lot of interest in Web IDE and what it means for hybrid application developers.

Before Web IDE, there was a product called SAP AppBuilder that was built by members of the PowerBuilder team. We connected with them during the development process and started working with them to build in awareness of the SAP Mobile Platform (SMP) Hybrid SDK (Kapsel) into AppBuilder. AppBuilder had the ability to create a Kapsel application from a web application built using the designer and that was pretty cool stuff. The AppBuilder team works on Web IDE and is focused on adding mobile awareness to Web IDE.

With that background in place, I wrote this post to address a common question: What hybrid development capabilities are planned for Web IDE?

When you’re finished reading this, please give me some feedback on what we’re doing. I know what we want to build and what we’re building, but I would love to hear from you what features and capabilities you want for hybrid development, whether it’s for Web IDE or the SMP Hybrid SDK – either way, I’d love to hear your thoughts.

Hybrid Development

To support hybrid development, the Web IDE team has been hard at work implementing a set of mobile capabilities to Web IDE. These capabilities are enabled through a project setting and adds the following capabilities to Web IDE:

• Hybrid application properties such as identifying target mobile device, supported device orientations and so on.
• Support for Cordova and Kapsel plugins – with mobile properties enabled, the Web IDE user can enable one or more Kapsel or core Cordova plugins for the project.
• Cordova and Kapsel API code completion and code snippets – Web IDE eases hybrid development by providing developers with in-IDE guidance on usage of the hybrid APIs.
• API reference documentation for the mobile capabilities can be viewed in Web IDE and provides links to more detailed online documents.
• Hybrid application project templates to get you started quickly – a basic starter application template, and also a Master Detail template that makes use of Kapsel plugins. A project wizard will guide you through the steps in configuring the project. Note that although the templates we provide now make use of the Kapsel plugins, you are free to create apps that are not using the Kapsel plugins.

These capabilities will initially be released through the Web IDE Trial and will work with the cloud and local build tools described below to create a robust environment for hybrid application development using Web IDE.

Cloud Build

At TechEd 2014 in Las Vegas and Berlin, Bjoern Goerke demonstrated an end to end demo of a Business Analyst’s request for a specific application for his end users. The demo included exposure of an API via some API management capabilities available with the HANA Cloud Platform (HCP), creating, designing and coding a UI5 application using Web IDE and delivery of the application as a native application to mobile devices through SAP Mobile Place. As end-to-end demos go, this was pretty end-to-end.

The process of creating the native application from Web IDE was accomplished through a Cloud Build Service (CBS) being implemented by the SAP Mobile Secure team. In the demo, the web application built using Web IDE was deployed to the HANA Cloud Platform. Then, the URL for the application was passed to the build service which packaged the URL into the configuration of a SAP Fiori Client application, built and signed the application then made it available for deployment through SAP Mobile Place.

When it’s released sometime next year, the CBS will allow Web IDE developers to build a Fiori Client application like was shown in the demo. Later, we want to enhance the service so it can allow a Web IDE developer to deploy a UI5 application or one or more Fiori applications directly into a hybrid application. The SAP Fiori Client runs Fiori in online mode, pulling Fiori assets and data from the Fiori Front-end Server or through an SMP Server. You can also run Fiori applications packaged inside of an Apache Cordova application (along with Launchpad and UI5) using Cordova or the SMP Hybrid SDK (Kapsel). This packaged approach is another way SAP customers are deploying Fiori apps to their end users.

Ultimately where we’d like to go with the CBS is to provide general purpose cloud build capabilities for hybrid applications. A developer would package a web application, most likely into a zip archive, upload it to the service and receive native application binaries for multiple mobile device platforms. I expect the CBS to be a bit like the PhoneGap Build service, but more tightly integrated with Web IDE and other SAP tools plus will provide access to the SMP Hybrid (Kapsel) plugins.

I’ll tell you more as we get closer to launch and I’m able to share more details.

Local Build

OK, so with what I’ve described so far, I’ve covered the cloud-based development process. A developer can create, design & code a web application and deploy it to a mobile device as a native application without using any local development environment or tools. What if I do want to use my local development environment with Web IDE?

There are many use cases for using a local development environment with an application created using Web IDE. The Web IDE is a powerful tool, but if you’re working with custom (home-grown or third-party) plugins or a modified Cordova container, you may need to use native debugging tools that aren’t available in the cloud. Additionally, if you are developing applications for a Government agency or work in an environment where security restrictions are greater, you simply may not be able to utilize a cloud service to package and sign your native mobile applications.

To accommodate these use cases, the Web IDE team is working on a toolkit that will allow the Web IDE to deploy a web application to a local Cordova project. The team is making some final updates to the product which will be published soon. I’ll update you with more details in my next post. Stay tuned.