Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
arpitgoyal
Product and Topic Expert
Product and Topic Expert

The Beginning

After working for around 9-years on Java, finally got my first chance to work productively on Pure Web Application. It is based on OpenUI5 technology, but still has server side using Java environment (OSGi runtime). Got my hands dirty into javascript, jquery, openui5 to that extend that I started giving session to colleagues joining later point of time.

Then it so happened that during my transit from Delhi to Bangalore, I happened to be bored by the time I had stepped on the airplane. The flight had delayed and hence I switched on my laptop to search for peace. We all have this list somewhere stating 'things-to-do' and 'books-to-read'. I had one similar book about node.js (the node beginner book - Manuel Kiessling) and I began to read it, considering that by now I understand the design-patterns of javascript. In the next 3hrs and the weekend that followed, I was hooked onto node.js.

The Problem Statement

"Behind every successful man, there is a wife...and an unsuccessful man, a mistress" - A quote from the web-world, where I would say, my journey to Web-development has begin to be successful because of my better half. My wife (herself a web-developer), asked me what real-world-problem are you trying to solve. I didn't have an answer at that point of time, but soon I realized the complexity of my day-today-work (of using complex client/server infrastructure) can be reduced big time to represent any simple web-application.


"To build a simple web-application with single program language aka javascript (UI, to server, to database)" -- I have tried to be summarize it without really revealing what I am building -- but this would do as for now.


Toolset & Installation

Every good development needs variety of tool-set. In this case there is just the IDE (Eclipse Java EE IDE for Web Developers - Kepler version) and the update site of 'Node Eclipse'[1] (Nodeclipse - Installation Instructions).


Node JS Installation for Windows:

  • Download the msi from the link
  • Install using the msi file.
  • Also, can have a look at youtube video in case facing trouble with it.
  • To test go the command prompt (Goto Run --> type 'cmd' and hit enter)
    • node -v : this would give you version of Nodejs
    • npm -v : this would give you version of NPM[2]

Create project in Eclipse

  • Open the Node perspective in the Eclipse IDE

  • Select 'Node.js Project'

  • Let us create empty project, so that we understand the project structure, even though there is possibility of some things out of the box

  • Now the project created has initial project structure

Understanding other libraries & components

Express

It is a simple and most commonly used REST implementation on nodejs. It helps in setting up HTTP server and handle REST calls.


Jade

Nodejs works with template engine to render web-pages. There are number of such template engines and jade is one of them which works with express. Others can be swig etc...


package.json

If you come from the ant world, this is sort of build.xml, if you come from maven world, this is sort of pom.xml. While I myself is still learning what things can be specified in package.json - it is the starting point for defining nodejs module.


Writing the code

Refer to the attached project which contains the complete project. Due to size limit no 'node_modules' are included[3].

Defining package.json

Contains the definition of the module we are building. Two major section of json are discussed:

  • Dependencies: This section of the json talks about the other node_modules required to build our module. Like 'Express' and 'Jade' are required, we would add the same as part of dependencies.
    • Asterisk marks to fetch the latest value
    • Tilde marks that this version or higher.
  • Main : This informs the Node JS which is the first Javascript file which needs to be invoke.


Defining app.js

This is sort of our main program (like in java). While this blog would not talk about how to write node.js module programs, there are some parts I have discussed below

  • require statement : Just like import statement (in Java) or include statement (in C/C++)
  • app.use( express.static(<file path >) ) - It is a way for exposing specific folder which would contain the static resource (which browser can request for)
    • This would come in use in the second part of the blog, where we would do 'offline' web-ui development by bundling OpenUI5 SDK.
  • the app.set method calls - Specifying Jade as the template rendering engine. This helps in dynamically generating Web Pages on server and sending to client.
  • app.get - Registering to the REST call at the domain URL (like http://localhost:80/)
  • app.listen - Simply starting the HTTP server.


Defining home.jade

The most interesting part which really helps in consuming the OpenUI5 CDN URL for building our Web Project. The rendering-algo of the Jade Template engine is based on line-breaks and indentation.

  • The first 'script' tag entry actually helps in setting the OpenUI5 bootstrap entry.
  • init.js -- Utility which actually is required to load some pre-defined functions on the client side
  • home.js -- Inline 'script' which is executed as soon as the page is loaded and does some initial registration and then fetch our Home Shell and place it in our Web Page.
  • Remaining part is just the anchor point which is used to place our complete shell.

In our example we have just used the unified shell example.

Project Structure


Output

A simple shell application which can be grown into full-blown application. Use modulus.io or microsoft azure which provide node js based hosting solutions.


Bonus (Offline Development)

It is always possible that we would like to work offline (say sitting in airplane). As we are using CDN, this would not work out. We talked earlier in the blog where we are registering folder as 'public'. If we place the relevant OpenUI5 SDK js in specific folder and refer the same from our home.jade file we should be able to build our application in complete offline mode. Based on the image below, just check the change made in home.jade & the project structure.


NOTE: This is only for DEVELOPMENT and shouldn't be done in PRODUCTION. Mainly because of the size of OpenUI5 (~22MB) and for pointing to the latest version.


References

[1] - Why Node Eclipse for development? This was the first google hit to do 'Node Eclipse' development (coding/debugging/testing). There are some things provided from Strong Loop (Open Source), but not yet evaluated.

[2] - npm stands for Node Package Manager which is used to resolved dependencies between one node-module to others. There is lot more to npm but for now it is the only part which is necessary for the scope of this blog.

[3] - For running the project, import the given project into eclipse. If you have the 'node-eclipse' installed then do the following:

  • Right click on 'package.json' and select 'Run As...' --> 'npm install'. This will get all the dependencies (make sure proxy settings are fine otherwise fetching npm can create issues).
  • Next, Right click on 'app.js' and select 'Run As...' --> 'Node Application'. This would launch the application at http://localhost:80
4 Comments