how we built collaborationtoday.info in a matter of weeks
DESCRIPTION
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.TRANSCRIPT
© 2013 IBM Corporation
SPOT104How We Built CollaborationToday.info in a Matter of WeeksPer Henrik Lausten | OpenNTF | PHL Consult | Sherlock WebBruce Elgort | OpenNTF | Elguji Software | Clark College
2 © 2013 IBM Corporation2
Who are these guys?
Per Henrik Lausten@perlausten
Bruce Elgort@belgort
Sherlock Web (QHSE)
3 © 2013 IBM Corporation3
Our story
Today we will tell you about1. A great looking application2. A powerful application server3. The magic of open source software
4 © 2013 IBM Corporation
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
5 © 2013 IBM Corporation
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
6 © 2013 IBM Corporation6
7 © 2013 IBM Corporation
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
8 © 2013 IBM Corporation
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
9 © 2013 IBM Corporation
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
10 © 2013 IBM Corporation10
Demo
11 © 2013 IBM Corporation
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
12 © 2013 IBM Corporation
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
13 © 2013 IBM Corporation
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
14 © 2013 IBM Corporation
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
15 © 2013 IBM Corporation
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
16 © 2013 IBM Corporation
How It All Came Together - Deployment
It's easy!– Add the template to the server– File > Application > New– Setup Domino internet site– Launch
16
17 © 2013 IBM Corporation
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
18 © 2013 IBM Corporation
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
19 © 2013 IBM Corporation19
@Collab2Day
20 © 2013 IBM Corporation
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
21 © 2013 IBM Corporation21
Your Questions
Our Answers
22 © 2013 IBM Corporation22
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.