"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 initAnswer 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-middlewareIn 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: http://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 http://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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>You Do Not Know Openui5</title>
<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.
gulpContent 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
- SAP Managed Tags:
2 Comments
