“More code, less talk”

Thanks

Inspired by You Don’t Know JS (book series)

What are we doing here today?

We want to know how to bootstrap an openui5 application. A project, which you will have after finishing all steps from the article, is a core for future projects from other articles.

Introduction

A goal of my blog is do not teach you how to use openui5 library from SAP in right way. The openui5 was designed to solve one issue with several possible ways. So you are able to choose.

The goal is sharing my personal experience of using the library and some other web development stuff, which helps you to speed up your development using openui5.

All code samples are developed on MacOS environment. On other environments (Linux or Windows) process should be nearly the same.

Pre-requirements

Minimal:

  • MacOS, Linux or Windows operating system prepared
  • Chromium browser installed
  • Node.js javascript runtime installed
  • Yarn dependency manager installed
  • Gulp4 javascript task runner installed globally

Additional:

  • Git client (command-line or GUI) installed
  • Preferred IDE installed (for ex. Visual Studio Code or WebStorm)

Let’s go

Project structure

├── .editorconfig ├── .gitignore ├── LICENSE.md ├── README.md ├── gulpfile.js ├── package.json ├── proxies.js ├── src ├── app.config.js ├── app.startup.js └── index.html 

Create a project folders structure and configure the web project

mkdir -p you-do-not-know-openui5/src cd you-do-not-know-openui5 yarn init

Answer all questions after issuing yarn init and you will have package.json configuration file for the project.

Install project development dependencies

yarn add -D gulpjs/gulp#4.0 gulp-mem browser-sync http-proxy-middleware

In project folder you may find yarn.lock file. Please, do not edit the file and you need commit the file to git repository.

Just a brief explanation of used dependencies:

  • gulpjs/gulp#4.0 for latest gulp features like gulp.series, gulp.parallels, etc.
  • gulp-mem plugin provides an in-memory destination feature
  • browser-sync for fast web development on real server
  • http-proxy-middleware for configuring openui5 resources via proxy

Write in README.md and LICENSE.md what ever you want or leave empty

In .gitignore

node_modules 

In .editorconfig

# EditorConfig is awesome: https://EditorConfig.org # top-most EditorConfig file root = true # Unix-style newlines with a newline ending every file [*] end_of_line = lf insert_final_newline = true # 2 space indentation indent_style = space indent_size = 2 # Set default charset charset = utf-8 

In proxies.js

const proxy = require('http-proxy-middleware'); module.exports = /** * openui5 runtime/mobile-runtime/sdk packages at https://openui5.org/download.html */ [ proxy("/resources", { target: "https://openui5.hana.ondemand.com/1.50.8", changeOrigin: true, onProxyRes: (p) => { p.headers["cache-control"] = "public, max-age=31536000" } }), proxy("/test-resources", { target: "https://openui5.hana.ondemand.com/1.50.8", changeOrigin: true, onProxyRes: (p) => { p.headers["cache-control"] = "public, max-age=31536000" } }) ]; 

Here you can configure openui5 resources to use. We have configuration for openui5 version 1.50.8. If you remove version number in target option, you will have latest openui5 version every-time.

In gulpfile.js

let gulp = require('gulp'); let browserSync = require('browser-sync'); let GulpMem = require('gulp-mem'); // Configure gulp-mem plugin: base path, log const gulpMem = new GulpMem(); gulpMem.serveBasePath = '/'; gulpMem.enableLog = true; const copy = () => { return gulp.src(['src/**/*']); }; // Copy content of src folder to root path in-memory gulp.task('app:build', () => { return copy() .pipe(gulpMem.dest('/')); }); // Configure browser-sync, start server and open app in Chromium browser gulp.task('bs:start', (done) => { const middlewares = require('./proxies'); middlewares.push(gulpMem.middleware); browserSync.init({ middleware: middlewares, server: [ '/' ], browser: 'Chromium' }); done(); }); // Refresh browser page where app is running gulp.task('bs:reload', (done) => { browserSync.reload(); done(); }); // Watch for changes in src folder // If any changes, run app:build and bs:reload in sequence gulp.task('app:watch', () => { gulp.watch('src/**/*', gulp.series('app:build', 'bs:reload')); }); // Run app:build, bs:start and app:watch tasks in sequence gulp.task('default', gulp.series('app:build', 'bs:start', 'app:watch')); 

In src/index.html

 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>You Do Not Know Openui5title> <script id="sap-ui-config" src="app.config.js">script> <script id="sap-ui-resources" src="resources/sap-ui-core.js">script> <script id="sap-ui-startup" src="app.startup.js">script> head> <body id="content" class="sapUiBody">body> html> 

It is start point of our application

In src/app.config.js

window["sap-ui-config"] = { libs: "sap.m", theme: "sap_belize", preload: "sync", manifestFirst: true, bindingSyntax: "complex", compatVersion: "edge", debug: false, logLevel: "NONE", trace: false, statistics: false, "xx-debugModuleLoading": false, "xx-debugRendering": false, "xx-fakeOS": "", "xx-showLoadErrors": true, "xx-waitForTheme": true }; 

It is configuration of openui5 application. Complete list of possible configuration options can be found here.

In src/app.startup.js

sap.ui.getCore().attachInit(function () { sap.ui.require([ ], function () { jQuery("#content").html("You Do Not Know Openui5") }); }); 

It is start point of application when openui5 resources and configuration will be loaded

Looks like everything is ready! Now we can issue gulp default task in command line.

gulp

Content of src folder will be copied to root path in-memory, watchers will be started, browser-sync server will be started and our app will be opened in Chromium browser.

In command line we see the following

In browser we see the following

So, it is the end for today. Source code for our project can be found here. Feel free to experiment with source code, because it is only one way to become a developer. And Happy Coding!

Next topic of “You Don’t Know Openui5” series will be soon.

Summary

So, we implemented our first very simple openui5 application:

  • Bootstrapping of openui5. My recommendation is use separate file for configuration.
  • Start point of application. I recommend you, separate main js and main html every-time.

and configure more/less our development environment:

  • Development dependencies via yarn. It is super fast.
  • Gulp tasks: copy files, watching for changes, start development server.
  • In-memory development. It is faster then usual approach.
  • Development server with proxies to prevent CORS issue.

Something to read

  • A quick Guide to Openui5: Step 1 – Bootstrapping
  • Walkthrough: Step 2 – Bootstrapping
  • Essentials. Bootstrapping: loading and initializing