TechEd 2012 CD208 (Chapter 2/6) – Responsive UI
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:
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.
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.
Figure 2. Implementation steps.
Figure 2 illustrates the steps for implementing the application:
- Step 1 – Mocking the backend: to implement the frontend independently from the backend, we first decouple both by introducing a so-called fake server. You will learn how to use Sinon.JS and Jasmine.JS to develop it.
- Step 2 – Designing the frontend: next, we focus on the design of the frontend. You will learn how to design a web responsive application, by leveraging Twitter Bootstrap.
- Step 3 – Bringing all together: finally, we are building the application. You will learn how to use Backbone.JS and Handlebars.JS to implement your application by reusing the responsive design from the last step.
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:
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
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
Nice post! The URI templates in the GET operation table remind me of Joe Gregorio's URI Templating in his "RESTify DayTrader" post: http://bitworking.org/news/201/RESTify-DayTrader
dj