 So, I'm here to talk about building enterprise applications using Apache Cordova and SAP Open UI5. So, my name is Pedro Vidigal, I currently am a Cassander consultant at Pythian, but actually my, formerly I was working in eight or nine years as an SAP consultant, so I came from the dark side to the open source world, so I was, I worked mainly in, I had a lot of experience with international clients, Europe, US, also Asia. So let's start, and I will start talking about Open UI5. As anyone has an experience with SAP, no, the, so basically the SAP is one of the leading ERP systems, a German one. And while it is very, very robust and basically offers, you can integrate every single feature of a company inside it, from the finance to human resources, logistics, material management, et cetera, et cetera, et cetera, it has a big flaw that most people don't actually like to use it, because the user interface from SAP was frozen in time since the beginning of the 90s, let's say, and so no one really, really likes to use it. SAP tried several approaches, SAP is, most of, they tried several approaches with interfaces, but they were using mostly closed source solutions. So this is their netweaver, which you have to install in your PC, and it only, actually it works in Windows kind of well, but if you go, if you're using Linux or Mac OS, it works pretty badly because you have to install it using Java, and it's a mess, particularly if you are a developer, it's very, very, very bad. And so they tried several approaches using web interfaces, but all proprietary, they started with a technology that was called BSP, it was based in Java, and then they, it didn't have a lot of traction, and they tried another one, which was called WebDimpro. It's basically, the layouts are very similar to the ones that you see here, but except it's in the web, and the backend is in ABAP, and I don't know if you know the language, it's ABAP is SAP's own language, and it's based from COBOL, so while it's a COBOL with not frozen in time. So they tried several approaches, and none of them actually worked. And so they, some years ago, they came up with this, with, actually, it started not as SAP OpenUI 5, it was called SAP UI 5, which still exists, and that one is closed source. And after, this is basically, it's a web framework, which is based in JavaScript, HTML5, and CSS3, and the developers, they really enjoyed it, and so they pushed SAP to release the code. In 2005, the framework won Red Dot Design Awards. So this is a really good framework if you want to build enterprise applications, because you have already a lot of components pre-made, so you don't lose time building stuff that they already, it's already done. So what it is, again, it's a JavaScript UI library. It has a huge number of UI controls, and I will show you a little bit later. So it's a model view controller. It has data binding with the backend, so it's pretty easy to connect with SAP, it's obvious, so you connect it with the data, but actually you can use any backend you want. The project I did, one of the project, the latest project I did that I actually won, and I'm from Portugal again, and the project that my company did, I was working in a Portuguese consulting company called ProCensus, and we won an Iberian prize from SAGE, which is another ERP system based in England, which has a lot of traction in Europe, and we were using OpenUI 5 and the backend was SAGE. So it's enterprise grade, so since it's built, this is built from SAP, it's very, very robust, it doesn't have a lot of errors, and it works very well in the current browsers and every single touch device. Also it's a responsive design as it should be nowadays, and now it's open source. It started as a project phoenix, and then they changed it to OpenUI 5, and that's why in the symbol you still see the phoenix. So which companies are using this? You can see that a lot of companies are using OpenUI 5. Of course SAP, but you have a lot of big companies that are using this. So again, you can build an application very fast, and you don't have to spend time bothering about which devices you are dealing with. So here's some of the documentation for the framework if you are interested. So as I said again, this is built by SAP, so it's very, very good quality. It supports internationalization. Also right to left, which is important for Arabic countries. Accessibility, so somehow if you can see right, it works very well as well. It has teams to support it. You can extend it, and also the theming. So basically you can build an application, and actually when you build an application for a client, usually you do want to change the templates to fit the needs of the clients. You have a lot of pre-existing templates, and SAP also provides a theme designer, so you can change the themes very, very easily. So you have here some examples of the different themes that you can use again. And I will show you some of the applications that you could do with OpenUI 5. So let me see if I can open it. So SAP, they already have a lot of applications that are done and that you can use. So they range from several HR, CRM, retail, travel and expenses, logistics as I said. You have a lot of things that you can do. So for example, I can show you some. This is the good thing about OpenUI 5. You already have a lot of applications that you can use. You can base your own applications on these ones. So basically this saves a lot of developing time. This is responsive, so if I change the layout, maybe this one is not a good example. Actually none of these examples are very good for the responsive layout. I wanted to show you the application that I did, but unfortunately I do have signed some. I cannot show you the application because of the DSM and DS that we had to sign. So continuing. So what, of course, when you're building with a web framework, you're never going to get the performance you get from a standard application. So there are some things that you have to, when you're developing an OpenUI 5 applications, that you have to take into account. Most of them are common sense, I would say. So you should, for example, it's very easy to get the styling wrong. So you should avoid hard coding the CSS and just use the theming engine that the framework provides. You should, as well, when you're dealing with the controls, you should use the controls functions to manipulate it and not mess with the CSS. One of the common issues, again, this is really, really common sense, but it's sometimes you do happen to see it that since you have the themes, sometimes the developers say, OK, I'm not getting what I want from this parameter, and so they would use a different parameter for that particular, that would suit them for that particular scenario. So, but in the end, that doesn't really work because when if you then want to use that parameter, the thing goes, falls apart, it doesn't work. So don't hard code or concatenate strings that you want to be translated. Again, this is in all frameworks, so it will be very hard. You will have to redo the job, the work afterwards. And then since you, this is a JavaScript application, one of also the issues that you end up is that you, when you load the controls that you have, sometimes what happens is that you end up loading all of the, this is a one-page application, so you could end up loading all of the controls in the beginning. But this has a lot of negative effects on performance, so you don't want to start the application and then wait 10 or 15 or 20 seconds because you're downloading the controls. So you should be very careful, so only call on the application manifests the controls that you really want. And if you do instantiate the controls, please use them. Don't instantiate them and then hide them. It doesn't make sense again. So this is the web part. And I don't know if anyone knows about the Apache Cordova project. So Apache Cordova is basically an Apache project. That enables you to build hybrid applications. So what's the history? This was developed as probably some, most of you could know the PhoneGap project, which is an Adobe project. This was born by Nitovi. Adobe bought it in 2011 and then they donated the source code to the foundation. What this... Again, we have a lot of companies using the project and what does this actually do? So what this does is that you can... you select a web framework and you can use OpenUI 5 or whatever. And then what this enables you is to just embed the... You create a container where you embed a web view. So you develop the application in technologies that you know. It's very easy to find developers that know HTML5, CSS, and JavaScript, but it's not... especially if you have a small company, maybe it's not that easy to find a developer that knows Android development and then you have to find another one for iOS, Firefox iOS. It can be a mess. It sometimes is very difficult. And so this is a good approach if you are building some kinds of application. That are not very performance heavy. So you have the container and the key value of Cordova is that you... when you build the container, the container enables you to interact with the native functionalities of the devices. And so you don't really need to know how the devices work. You don't need to know to develop Android or iOS. You develop for one and it works for every single one of them. So these are some of the supported OSes. Like I said, Android, Blackberry, Firefox OS, which actually Firefox OS is basically developing on-web. So again, what are the pros and cons? It enables you to use standard web technologies, which is good again for everyone knows, basically. You just need to develop it once. No need to develop for multiple platforms. You can exist... Sometimes you can have an existing web app and you want, for example, you want to put it on the Android in Google Play Store or on the Apple Store. And so for you to do that, it's not possible if you're using a web app, but if you put it on a container, on a card of a container, then you can. So if you already have apps working and you want to put it on the stores, this is a possible way to do it. As I said, it enables you to access native functionality of the devices via APIs, which what are the downsizes? So some of the native functionality may not be present. One of the examples is the calendar feature. It's not... At this moment, you cannot use the... interact with the calendar. It's an open source project, so if anyone wants to contribute, it's nice. Some say it has a let's reach UI than the native, but since you are building on the web, you can use whatever. So it's not as performant as a native application. But again, if you have very good web developers, maybe the application is not so good native developers, maybe the application won't work as differently as the other one. One of the other issues is that the plugins do vary in quality. So between devices, for example, there are some companies that do contribute a lot to Cordova. The plugins that were done for Android, Google actually contributes a lot for those plugins, so they are really robust, as well as, for example, Firefox or Hymn. They also contribute, but Apple actually doesn't. So the plugins are made from people like us that want to contribute to the project, and so sometimes you do see some weird stuff that works in one, and it doesn't work exactly as you would expect on another platform. So how do you start? So you basically select the devices and the OS versions that you want. You have a command line client. The norm is that you would want to build a single-page application. It's much easier. And then you just have to use the command line. You build the application for the targeted OS and device, and basically that's it. It's very actually pretty easy. And this is the framework. So again, you have the web application. It can be whatever framework that you choose. It renders... You use the HTML rendering engine of the application. For example, Android and iOS now share the same. So WebKit. And then you have the code of a plugin. So you have an API that connects which is common to all of them, which you develop in the JavaScript that you connect with the code of a plugin. And then between the code of a plugin and the OS plugins, you have different connectors for each one of them, which you don't need to worry about. The code of a framework manages everything. You target the OSs that you want and then it does all by itself, which is the actually good thing about the framework. So this is, I don't know if you can read, this is some of the OSs and all the plugins that are available for each and some of them with some notes that some things that might not be working as expected. One of the things about this is that the Apache Foundation is actually expecting that in the future the project will be... It won't be necessary because with the evolution of HTML5 there are a lot of functions that are already there. So the trends will be probably that HTML5 will be able to do this interaction with the native APIs of the devices. Some of them are actually already working, so you can use HTML5 and connect with your camera, for example. You don't need a cord over for this, but if you're using accelerometers, if you're using contacts, it's actually nice to use a unified framework. So if you are interested, this is the documentation of the project, some of the places you could go. For questions, Stack Overflow works very nice. There's an active community. And the documentation is actually also nice. If you're interested, it's very easy to build your first application. Basically, that's it. I hope you enjoyed it. If you have any questions, please feel free to ask.