Saturday, February 14, 2015

Kickstart the SDK (Update)

This is an update to my former blog "Kickstart the SDK".

Since writing the blog post (one year ago), a lot of things happened. SAP has pushed the OpenUI5 codebase directly into the Git Hub repository "SAP/openui5". They also added a GRUNT based task running tools to beb able to serve and build the SDK.

All the interesting information about that are nicely described inside the docs subfolder. The developing.md readme file will give you all information you need for quickly start into it.

Currently, the build process is not able to minify/compress the sources in the build process, so the target build will be more suitable for developing reasons. For productive szenarios, you should still use/download the OpenUI5 Runtime version.

During development, the package brings a lot of nice goodies.

Let us go more into detail...

If you follow the development path, you will do the following in short:
  1. Install node.js
  2. Install grunt-cli globally
    npm install grunt-cli -g
  3. Clone the UI5 git repository
    git clone https://github.com/SAP/openui5.git
  4. Install all npm dependencies locally
    cd openui5
    npm install
  5. Start the server
    grunt serve
Now you have a local server running serving the sdk to your browser.

But there is even more!

The tools.md readme file contains a lot of addtional useful information.

Think about theming! If you will start theming by creating your own custom theme depending on the sap_bluecrystal theme, the package will support you.

There is another option to start the server using
grunt serve --watch=true
or
grunt serve --watch=true --libs=sap.m

Using this option, the server will start watching all file changes (or only corresponding libs/directories) by reflecting the needed tasks like compiling or theme building {less}.

If you access the sdk with your browser this way, you never need to compile the sdk during development (or after a new checkout). The serve task is able to serve the development sources out of the box for you.

If you have a theme for example, you cann simply change some base color variable and simply reload your browser to see the changes. After changing a *.less file the server watch process takes care to compile the *.less into the corresponding *.css file out-of-the-box.

This is quite cool, because even if you are using a productive version of the OpenUI5 SDK you can still use/load the custom theme from your local server. That makes it easy to test your theme directly will other apps. Simply overwrite the used theme via URI param (see documentation).

Will the builded javascript library files are currently not useable for productive szenarios (not minified) the builded themes (css files) will can minified an can be merged into your project. To take care of the grunt build process, you have to add your custom theme to the Gruntfile.js easyily by coping the blue_crystal section and rename it to your needs.

{
  name: 'themelib_custom_theme',
  path: 'src/themelib_custom_theme',
  type: 'theme'
},

Now the build process will take care of your new theme:

grunt build --production

The build process creates a new target directory and deployes the compiled sources (libraries and themes).

If you will use your theme in a productive szenario you have to make sure, that you are using the right sdk version! The master branch will always contain the latest development version that does not correspond to the downloadable runtime version. So make sure you use a branch like rel-1.26 inside your working directory, if your are using the 1.26.x runtime.

A look into the package.json file will show you the included version
"version": "1.26.7-SNAPSHOT"

If the build process is able to minify the javascript libraries also and you do not need to download the runtime anymore, i will add an update to this post.

Thank you to the SAP UI5 core development team to spread this great library to the public and to start beeing more Open ;-) Also congratulations for completely rewrite the core using the new AMD like approach (but that is another story...).


1 comment:

Thank you for your comment!

The comment area is not intended to be used for promoting sites!
Please do not use such links or your comment will be deleted.

Holger

Note: Only a member of this blog may post a comment.