Skip to Content

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. The.net 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 Matthias 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. 😉

Frontend

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:

/wp-content/uploads/2012/10/figure1_146614.png

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.

/wp-content/uploads/2012/10/ch02_02_146616.png
Figure 1. Visualization of our specification.

Backend

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:

Task Operation URI
List every piece of content
(Usually only call once, when application is started by the user)
GET /api/v1/content/
Get specific piece of content GET /api/v1/content/{id}
List every dashboard GET /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)
GET /api/v1/dashboard/{id}

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
id Unique id
title Title of the piece
sub_title Subtitle of the piece
icon Icon illustrating the piece
content Content containing HTML
Dashboard
tweet_count Number of tweets
re_tweet_count Number of re-tweets
latest_tweets Contains the three latest tweets (1..5); Order: First in the list is the latest one.
created_at Creation date of the tweets
from_user User sending the tweets
from_user_name User name sending the tweets
profile_image_url URL to user’s profile image
text Text of the tweet
hottest_tweets Contains the three “hottest” tweets (1..5); “Hottest” is defined as numbers of re-tweets; Order: First in the list is the “hottest” one.
created_at Creation date of the tweets
from_user User sending the tweets
from_user_name User name sending the tweets
profile_image_url URL to user’s profile image
text Text of the tweet
leaderboard Contains 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 User
user_name User name
profile_image_url URL to user’s profile image
tweet_count Number of tweets sent by the user
re_tweet_count Number 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.

/wp-content/uploads/2012/10/ch02_03_146617.png

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!”

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. John Patterson

    Hi Lars,

    This is really cool, thanks.

    With open source we are definitely not starved for choice, i feel it is the complete opposite, there is too much to chose from and we could burn a lot of time getting the right combinations.

    In Step 3

    I like Backbone.JS a lot: it has some quite nice features and,

    what I consider especially important – a great, active community.

    When choosing libraries, tools and techniques for building applications what are the things we should be considering? Are there any special considerations for developing on SAP Netweaver Cloud?

    Cheers

    JSP

    (0) 

Leave a Reply