IBM Connect 2013 SPOT104 session: In this session, we will show you how we developed a great-looking, user-driven community news site called "Collaboration Today." We'll walk you through how we developed the site's user experience and architecture. We'll dive into how we made the app scalable, quick and accessible on all mobile devices and web browsers using responsive design. Best of all, this app is built with open-source components and is itself an open-source app available for you to download and use today. We will show you how other apps can utilize and present the content from Collaboration Today using the app's API.

1. SPOT104
How We Built CollaborationToday.info in a
Matter of Weeks
Per Henrik Lausten | OpenNTF | PHL Consult | Sherlock Web
Bruce Elgort | OpenNTF | Elguji Software | Clark College
© 2013 IBM Corporation

2. Who are these guys?
Per Henrik Lausten Bruce Elgort
@perlausten @belgort
Sherlock Web (QHSE)
2 © 2013 IBM Corporation

3. Our story
Today we will tell you about
1. A great looking application
2. A powerful application server
3. The magic of open source software
3 © 2013 IBM Corporation

4. Agenda
 OpenNTF - an IBM Business Partner
 Team Collaboration Today
 Why We Built Our Own App
 Project Goals
 Demo
 How It All Came Together
 Why You Should Use IBM Domino and XPages
 Looking Ahead
 3 Things To Remember
 Q&A
4 © 2013 IBM Corporation

5. OpenNTF - an IBM Business Partner
 Devoted
– Enabling groups of individuals all over the world to collaborate on IBM Lotus Notes and
Domino applications and release them as open source
– Providing a framework for the community so that open source applications may be freely
distributed, using widely accepted licensing terms
– Increasing the number and quality of templates, controls and code snippets that are shared by
the community
 Value
– Global community
– Code samples
– Reuse, harvest and enhance
 By the Numbers
– Hundreds of projects
– Hundreds of Contributors
– Development contests
5 © 2013 IBM Corporation

6. 6 © 2013 IBM Corporation

7. Team Collaboration Today
 Collaboration Today was created by
– Bruce Elgort, IBM Business Partner, Elguji
– Per Henrik Lausten, IBM Business Partner, PHL Consult
– Serdar Basegmez, IBM Business Partner, Developi
– Frank van der Linden, IBM Business Partner, e-office
– Jesse Gallagher, I Know Some Guys
– Niklas Heidloff, IBM
 Timeline
– We had the idea in June
– We assembled our virtual team in July
– We started development in August
– We launched September 10, 2012
7 © 2013 IBM Corporation

8. Why We Built Our Own App
 Possible open source alternatives: Wordpress, Joomla, Drupal
 No existing CMS solutions geared towards a news-only site
 We wanted an open source solution for shops using IBM Collaboration Solutions
products
 We wanted to showcase the powerful IBM Domino application server
 We wanted also wanted to demonstrate the power of IBM XPages
8 © 2013 IBM Corporation

9. Project Goals
 A moderated news site for IBM Collaboration Solutions professionals
 Role based moderation
 “Truly” popular stories
 Scalable and fast
 A great looking app
 Accessible from any device
 To be open sourced and available to everybody
 ... getting it done quickly!
9 © 2013 IBM Corporation

10. Demo
10 © 2013 IBM Corporation

11. How It All Came Together - The Requirements
 Remember the project goals?
 Mobile first, users first
 Lightweight (no search options, no login for users)
 Great looking
 Accessible from any device
 Scalable
 API
 Administer from web browser
11 © 2013 IBM Corporation

12. How It All Came Together - The Design
 Why we chose XPages
– Granular security model
– NoSQL
– Scalable Java backend
– Open source components
– The programming model is based on web development languages and standards including
JavaScript, Ajax, Java, the Dojo Toolkit, Server-side JavaScript and JavaServer Faces
– A powerful application server: XPages runs on IBM Domino and IBM XWork application
servers, and runs on Windows, Linux, Linux on IBM System z, IBM AIX, IBM i and Sun
Solaris.
 Why we chose responsive web design
– Optimal experience for all users regardless of device used
– Looks great everywhere
– All pages are available on every device
– It’s what people expect
12 © 2013 IBM Corporation

13. How It All Came Together - Implementation
 Everything in one NSF file (a virtual file system)
– XPages and custom controls
– Java and Javascript
– jQuery JavaScript library
– Bootstrap JavaScript library and CSS
– Custom CSS
 Responsive web design using Twitter Bootstrap (CSS and jQuery)
– Media queries
– Left column menu turns into a drop down menu (custom made)
 Custom built CSS
– Bootstrap CSS combined with our own CSS
13 © 2013 IBM Corporation

14. How It All Came Together - Implementation
 Caching beans: everything is cached in memory - yes, everything!
 Click counter (MIME storage of the click counter Java class)
 REST API
 Widget
 RSS/Atom feeds
– Automatic posts to Twitter using Twitterfeed
 Source control using Github
– https://github.com/OpenNTF/collaborationtoday
14 © 2013 IBM Corporation

15. How It All Came Together - Using Open Source
 The magic of open source software - from OpenNTF and external
– XPages Extension Library
– WatrCoolr 0.8
– Mobile Documents 1.1
– myWebGate 1.1
– Feed Generator XPage Agent 0.11
– ReCaptcha Custom Control 1.02
– Rome 1.0
– Jdom 1.1.2
– Nekohtml 1.9.15
– Apache HttpComponents client 4.2.1
– Apache HttpComponents Core 4.2.1
– Jericho 3.1
– jQuery 1.7.1
– Twitter bootstrap 2.0.4
– PrettyTime 1.0.8
– myPic 1.1.1
15 © 2013 IBM Corporation

16. How It All Came Together - Deployment
 It's easy!
– Add the template to the server
– File > Application > New
– Setup Domino internet site
– Launch
16 © 2013 IBM Corporation

17. Why You Should Use IBM Domino and XPages
 You’ve heard our story and we are confident you are very impressed
 XPages and IBM Domino/IBM XWork is a powerful application server platform
 Lots of resources available
– Books
– Notes in 9
– Blogs
– Twitter feeds
– Vibrant developer community
– Stack Overflow
– Training courses
17 © 2013 IBM Corporation

18. Looking Ahead
 Future enhancements to Collaboration Today
– Archiving and search
– Improve touch interface
– Add management of moderators from web browser
– Feed “monster”
• Using the Domino 8/9 DOTS extensions
– More regional sites
18 © 2013 IBM Corporation

19. @Collab2Day
19 © 2013 IBM Corporation

20. 3x3 Things To Remember
 A great looking application
 A powerful application server
 The magic of open source software
 Collaboration Today was built using XPages
 The app is available as open source for you to download and try today
– http://www.openntf.org/p/Collaboration%20Today
 The app is responsive and adapts to the size of the screen
 How to build scalable apps
 How to build great looking web apps using open source UI components
 How to use open source in your projects
20 © 2013 IBM Corporation

21. Your Questions
Our Answers
21 © 2013 IBM Corporation

22. Legal disclaimer
 © IBM Corporation 2013. All Rights Reserved.
 The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and
accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this
information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for
any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended
to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of
the applicable license agreement governing the use of IBM software.
 References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates.
Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities
or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is
intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other
results.
 Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.
 Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.
 Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be
trademarks or service marks of others.
22 © 2013 IBM Corporation