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.
Showing results for 
Search instead for 
Did you mean: 
Former Member

In this blog post, I’ll show you how to craft the responsive web frontend for the application that hosts the supplements to our TechEd 2012 session: Tapping into Open Source with SAP NetWeaver Cloud. Responsive web design --- why should you care? Well, responsive web design is a big trend in web development. magazine named it #2 in its 2012 ranking. So why not build a responsive application on top of SAP NetWeaver Cloud, solely relying on the power of open source? This blog post shows you how to do it. You’ll how learn to use Twitter Bootstrap, Backbone.JS, Handlebars.JS and some other frameworks, and I will show you how these frameworks can make your life easier in delivering a different user experience.

The Sample Application

It took steinermatt and me some time to decide on the application. Since we needed a central place for storing the supplements of our session, Tapping into Open Source with SAP NetWeaver Cloud at TechEd 2012 in Las Vegas, and we also wanted to interact with you during the session, we came up with CD208sups.

CD208sups leverages Twitter Bootstrap, Backbone.JS and Handlebars.JS to deliver a responsive use experience. It hosts the supplements of our SAPs TechEd 2012 session and serves as a central entry point for the content. In addition, we integrated a simple Twitter dashboard into the application. So let’s see who are the most active community members. :wink:


So what are the key features of the frontend? Well, our technical lecture consists of several chapters being devoted to a particular topic of open source development on top of SAP NetWeaver Cloud:

For each chapter, we want to store additional supplementing content on a dedicated web page. In addition, we add a home and about page. Each chapter has some header data (i.e. the title of the page, the sub-title, showing and an icon) and the actual content. Besides storing content, which is loaded once when the user enters the page, we included a  simple Twitter dashboard containing:

  • A leaderboard, showing the top 5 communities members ranked by their number of tweets and re-tweets;
  • A list of the “hottest” tweets, showing the 5 tweets, which have been re-tweeted most often;
  • A list of the “latest” tweets, showing the 5 tweets, which have been lately tweeted;
  • The total number of tweets and total number of re-tweets.

We only consider tweets with the hash tags #sapnwcloud and #CD206. The dashboard is reloaded every 30 seconds. Figure 1 shows the "visual" specification of the application.

Figure 1. Visualization of our specification.


Next, let’s see which backend services we need. Matthias implements them using Spring Social. Since we strongly believe in the pragmatic REST design philosophy, we rely on it to specify our services and use it to later implement the application. For more on pragmatic REST, I recommend the book API – A Strategy Guide by @daniel_jacobson, @gbrail and @danwoodscito. It’s a nice read.  In particular, our application supports two kinds of tasks:

  • Content-related
  • Dashboard-related.

Since the application implements a read-only scenario, I will only implement the necessary GET operations for these two tasks:

List every piece of content
(Usually only call once, when application is started by the user)
Get specific piece of contentGET/api/v1/content/{id}
List every dashboardGET/api/v1/dashboard/
Get specific dashboard
(Usually called every 30 seconds, pulling latest data; at the moment, pushing data via WebSockets is not support by NetWeaver Cloud; in addition, if {id} is set to "latest" the newest dashboard is returned)

After specifying the services, let’s specify the expected JSON data structures. You’ll see that they match with the user interface quite nicely:

Piece of content
idUnique id
titleTitle of the piece
sub_titleSubtitle of the piece
iconIcon illustrating the piece
contentContent containing HTML

tweet_countNumber of tweets
re_tweet_countNumber of re-tweets
latest_tweetsContains the three latest tweets (1..5); Order: First in the list is the latest one.
created_atCreation date of the tweets
from_userUser sending the tweets
from_user_nameUser name sending the tweets
profile_image_urlURL to user's profile image
textText of the tweet
hottest_tweetsContains the three “hottest” tweets (1..5); "Hottest" is defined as numbers of re-tweets; Order: First in the list is the "hottest" one.
created_atCreation date of the tweets
from_userUser sending the tweets
from_user_nameUser name sending the tweets
profile_image_urlURL to user’s profile image
textText of the tweet
leaderboardContains the five “top” users (1..5); "Top" is defined as most total number of re-tweets and tweets; Order: First in the list is the "top" one.
user_nameUser name
profile_image_urlURL to user's profile image
tweet_countNumber of tweets sent by the user
re_tweet_countNumber of re-tweets of all tweets sent by the user

Implementation steps

Finally, let’s what the implementation steps are. We’ll build the frontend of our responsive web application in three steps. Each step primarily shows you how to implement the particular aspect of the application. It’s less about theory or background knowledge. I won’t really explain any of the libraries used in detail. Instead, I’ll point you to what I consider to be good blog posts and tutorials covering the necessary background. You might wonder why? It’s simple: there are so many good tutorials out there covering it already and I don’t want to repeat them.

Figure 2. Implementation steps.

Figure 2 illustrates the steps for implementing the application:

The sources for all three steps are shared here. You need the sources to complete each step; please clone the git repository before you get started.

Done! What’s next, you might ask? Well, the application is just a starting point. Start playing and extending it. Things I can think of: how about writing (1) more test cases, especially for the views? At the moment, I only cover the most essential ones. Or what about implementing the (2) backend in JavaScript, too? Dagfinn Parnas shows you how to run RhingoJS in the SAP NetWeaver Cloud. It’s a solid foundation for you to get started. (3) Or, why not re-implement the whole application in CoffeeScript? Personally, I'm a big fan of CoffeeScript. Now it's your turn. Get moving, and always remember:

"Keep your Head in the Clouds and your Feet on the Ground!"