Socialtext 4: A tale of Shindig and OpenSocial. (Chinese version, presented at COSCUP.tw 2010.)

1. Bringing the best of
Open Web
into the Enterprise
since 2001
6500+ customers.
One mission.
Free the Flow of Work.

2. A
1.0
2001
Wikipedia

3. A
1.0
2001 2002
Wikipedia Socialtext Workspace

4. A
1.0
2002
Search Appliance

5. A
1.0
2002 2003
Search Appliance Socialtext Appliance

6. A
1.0
2003
Blogger.com

7. A
1.0
2003 2004
Blogger.com Socialtext Blogs

8. A
1.0
2004
Google Spreadsheet

9. A
1.0
2004 2005
Google Spreadsheet Socialtext SocialCalc

10. B
2.0
2005
Mobile WebKit

11. B
2.0
2005 2006
Mobile WebKit Socialtext Mobile

12. B
2.0
2006
Twitter

13. B
2.0
2006 2007
Twitter Socialtext Signals

14. C
3.0
2007
OpenSocial

15. C
3.0
2007 2008
OpenSocial Socialtext Dashboard

16. C
3.0
2008
Adobe AIR

17. C
3.0
2008 2009
Adobe AIR Socialtext Desktop

18. D
4.0
2009
Facebook OpenStream

19. D
4.0
2009 2010
Facebook OpenStream Socialtext Connect

20. Socialtext 4
． ．
Ope nS oc ia l G adge ts
w it h Apach e Sh in dig

21. Be fo re Ope nS oc ia l.. .

28. ??
?

30. Gadget s to th e re sc ue !

31. Ope nS oc ia l

32. iG oo gle Da shbo ard

40. So ci al te xt Da shbo ard

41. So ci al te xt Da shbo ard

42. So ci al te xt Da shbo ard

43. So ci al te xt Da shbo ard

44. So ci al te xt Da shbo ard

45. Pa rt yi ng w it h Sh in dig

49. http://.../Gadget.xml

50. http://.../Gadget.xml
.html

51. http://.../Gadget.xml
.html .css

52. http://.../Gadget.xml
.html .css .js

53. http://.../Gadget.xml
.html .css .js
Features API

54. http://.../Gadget.xml
.html .css .js
Features API

55. Fo r exam ple. ..

56. Fo r exam ple. ..

57. Fo r exam ple. ..

58. one_sp re ad sh ee t. xm l

59. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
one_sp re ad sh ee t. xm l

60. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
one_sp re ad sh ee t. xm l

61. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
one_sp re ad sh ee t. xm l

62. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
one_sp re ad sh ee t. xm l

63. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
description="Displays a single…"
one_sp re ad sh ee t. xm l

64. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
description="Displays a single…"
<Requires feature="opensocial‐0.8"/>
one_sp re ad sh ee t. xm l

65. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
description="Displays a single…"
<Requires feature="opensocial‐0.8"/>
<Requires feature="dynamic‐height"/>
one_sp re ad sh ee t. xm l

66. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
description="Displays a single…"
<Requires feature="opensocial‐0.8"/>
<Requires feature="dynamic‐height"/>
<Requires feature="settitle"/>
one_sp re ad sh ee t. xm l

67. <?xml version="1.0" encoding="UTF‐8"?>
<Module>
<ModulePrefs
thumbnail="one_spreadsheet.png">
title="Spreadsheet Page"
description="Displays a single…"
<Requires feature="opensocial‐0.8"/>
<Requires feature="dynamic‐height"/>
<Requires feature="settitle"/>
</ModulePrefs>…
one_sp re ad sh ee t. xm l

68. one_sp re ad sh ee t. xm l

69. …
<UserPref
display_name="Workspace"
name="ws"
datatype="workspace"
required="true" />
…
one_sp re ad sh ee t. xm l

70. …
<UserPref
display_name="Spreadsheet"
display_name="Workspace"
name="page"
name="ws"
datatype="spreadsheet"
datatype="workspace"
required="true" />
…
one_sp re ad sh ee t. xm l

71. …<UserPref
…
display_name="Height"
<UserPref
name="height"
display_name="Spreadsheet"
display_name="Workspace"
datatype="enum"
name="page"
name="ws"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
…<EnumValue value="100"/>…
required="true" />
</UserPref>…
…
one_sp re ad sh ee t. xm l

72. …<UserPref
…
display_name="Height"
<UserPref
name="height"
display_name="Spreadsheet"
display_name="Workspace"
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

73. …<UserPref
…
display_name="Height"
<UserPref
name="height"
display_name="Spreadsheet"
display_name="Workspace"
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

74. …<UserPref
…
display_name="Height"
<UserPref
name="height"
display_name="Spreadsheet"
display_name="Workspace"
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

75. …<UserPref
…
display_name="Height"
<UserPref
name="height"
display_name="Spreadsheet"
display_name="Workspace"
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

76. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

77. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
<script src="widget.js"/>
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

78. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
<script src="widget.js"/>
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
<script src="socialcalc.js"/>
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

79. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
<script src="widget.js"/>
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
<script src="socialcalc.js"/>
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
</head><body>…</body></html>
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

80. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
<script src="widget.js"/>
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
<script src="socialcalc.js"/>
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
</head><body>…</body></html>
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
]]></Content>
default_value="A1"/>
</UserPref>…
…
one_sp re ad sh ee t. xm l

81. …<UserPref
…<Content type="html"><![CDATA[
…
display_name="Height"
<UserPref
<html><head>
name="height"
display_name="Spreadsheet"
display_name="Workspace"
<script src="widget.js"/>
display_name="Scroll to"
datatype="enum"
name="page"
name="ws"
<script src="socialcalc.js"/>
name="scroll_to"
default_value="300">
datatype="spreadsheet"
datatype="workspace"
</head><body>…</body></html>
datatype="enum"
…<EnumValue value="100"/>…
required="true" />
]]></Content>
default_value="A1"/>
</UserPref>…
…
</Module>
one_sp re ad sh ee t. xm l

82. one_sp re ad sh ee t. xm l

83. <a href="/__UP_ws__/?__UP_page__">
View
</a>
one_sp re ad sh ee t. xm l

84. <a href="/__UP_ws__/?__UP_page__">
View
</a>
or
one_sp re ad sh ee t. xm l

85. <a href="/__UP_ws__/?__UP_page__">
View
</a>
or
<a href="/__UP_ws__/?__UP_page__#edit">
Edit
</a>
one_sp re ad sh ee t. xm l

86. <a href="/__UP_ws__/?__UP_page__">
View
</a>
or
<a href="/__UP_ws__/?__UP_page__#edit">
Edit
</a>
this spreadsheet from
one_sp re ad sh ee t. xm l

87. <a href="/__UP_ws__/?__UP_page__">
View
</a>
or
<a href="/__UP_ws__/?__UP_page__#edit">
Edit
</a>
this spreadsheet from
<a href="/__UP_ws__">
__UP_ws__
</a>
one_sp re ad sh ee t. xm l

89. w idge t.js

90. gadgets.util.registerOnLoadHandler(init);
w idge t.js

91. function init () {
gadgets.util.registerOnLoadHandler(init);
w idge t.js

92. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.util.registerOnLoadHandler(init);
w idge t.js

93. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
w idge t.js

94. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
w idge t.js

95. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
w idge t.js

96. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
w idge t.js

97. function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

98. function responseCallback (r) {
function init () {
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

99. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

100. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

101. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

102. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
s.LoadSave(r.data.wikitext);
responseCallback,
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

103. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
s.LoadSave(r.data.wikitext);
responseCallback,
s.editor.MoveECell('__UP_scroll_to__');
{ CONTENT_TYPE: "JSON" }
);
}
w idge t.js

104. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
s.LoadSave(r.data.wikitext);
responseCallback,
s.editor.MoveECell('__UP_scroll_to__');
{ CONTENT_TYPE: "JSON" }
);
gadgets.window.setTitle(r.data.name);
}
w idge t.js

105. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
s.LoadSave(r.data.wikitext);
responseCallback,
s.editor.MoveECell('__UP_scroll_to__');
{ CONTENT_TYPE: "JSON" }
);
gadgets.window.setTitle(r.data.name);
}
w idge t.js

106. function responseCallback (r) {
function init () {
if (r.errors.length) { return onError(); }
gadgets.window.adjustHeight(__UP_height__);
gadgets.io.makeRequest(
gadgets.util.registerOnLoadHandler(init);
var s = new SocialCalc.SpreadsheetViewer();
"/data/workspaces/"
s.InitializeSpreadsheetViewer('content');
+ '__UP_ws__/pages/__UP_page__',
s.LoadSave(r.data.wikitext);
responseCallback,
s.editor.MoveECell('__UP_scroll_to__');
{ CONTENT_TYPE: "JSON" }
);
gadgets.window.setTitle(r.data.name);
}
DONE!
w idge t.js

107. Ec lip se

108. App St ore fo r th e En te rp ri se

109. App St ore fo r th e En te rp ri se

110. App St ore fo r th e En te rp ri se

111. Socialtext 4
．
S oc ia l Net wor k ing
w it h S oc ia l Objec ts

112. So ci al Obje ct s

114. Web 1.0:

115. Em ai l

118. So ci al Net wor ki ng

119. So ci al Net wor ki ng

120. So ci al Net wor ki ng

121. Social Gadgets Social API
Core Gadgets Core API
Ope nS oc ia l 1.0

122. gadgets.*
io
json Social API
Social Gadgets
Prefs
util
views
+
Core Gadgets Core API
flash
window
i18n
skins
...
Ope nS oc ia l 1.0

123. osapi.*
people
activities Social API
Social Gadgets
+
groups
messages
appdata
Core Gadgets Core API
albums
mediaitems
...
Ope nS oc ia l 1.0

125. LDAP
GET /data/people/:id

126. GET /data/people/:id

127. GET /data/people/:id

128. GET /data/people/:id/tags

129. GET /data/people/:id/tags

131. GET /data/people/:id/watchers

132. GET /data/people/:id/watchlist

133. GET /data/users/:id/groups

135. GET /data/events/activities/:id

141. Step s to Ado pt io n

151. ✓

152. ✓
✓

160. Socialtext 4
．
A ct iv it y St re ams
fo r th e S oc ia l Laye r

161. A ct iv it y St re ams

162. ??
?
RSS ≉

163. ??
?
RSS ≉

164. ??
?
RSS ≉

165. ??
?
RSS ≉

166. ... ...
...
Atom ≈

167. ... ...
...
Atom ≈

168. ... ...
...
Atom ≈

169. ... ...
...
Atom ≈

170. ... ...
...
Atom ≈

171. A ct iv it yStreams

172. actor
A ct iv it yStreams

173. actor
object
A ct iv it yStreams

174. actor
object
verb
A ct iv it yStreams

175. actor
object
verb
A ct iv it yStreams

177. actor
object
verb
+
target
icon
generator
provider
title
body

178. actor
object
verb
+
target
icon
generator
provider
title
body

179. actor
object
verb
+
target
icon
generator
provider
title
body

181. <Atom>

182. <Atom>

183. <Atom> {JSON}

184. <Atom> {JSON}
Ope nS oc ia l 1.1
(Draft)

185. <Atom> {JSON}
Ope nS oc ia l 1.1
(Draft)

190. Fe edProx y

191. Fe edProx y

192. So ci al te xt Co nnec t

193. So ci al te xt Co nnec t

194. So ci al te xt Co nnec t

195. Mandy Cunningham
Inventory: NCC1701
InventoryBot
There are 341 units of
part #NCC1701 available
SalesforceBot
Lead record for Tricia Nuzzo
had
been converted to an
ProcessWatcher
opportunity
Page “Q3 Event Planning” in
Marketing is awaiting
approval to Sales
Joseph Hines
Uploaded Q3pipeline.ppt to
Sales presentation library
This is great. Thank you
for sharing.
Looking good, Q3 is
going
to be fantastic!

196. Mandy Cunningham
Inventory: NCC1701
InventoryBot
There are 341 units of
part #NCC1701 available
CRM
SalesforceBot
Lead record for Tricia Nuzzo
had
been converted to an
ProcessWatcher
ERP
opportunity
Page “Q3 Event Planning” in
Marketing is awaiting
approval to Sales
Joseph Hines
Uploaded Q3pipeline.ppt to
SharePoint
Sales presentation library
This is great. Thank you
for sharing.
Looking good, Q3 is
going
to be fantastic!

197. App Bots
Mandy Cunningham
Inventory: NCC1701
InventoryBot
There are 341 units of
part #NCC1701 available
CRM
SalesforceBot
Lead record for Tricia Nuzzo
had
been converted to an
ProcessWatcher
ERP
opportunity
Page “Q3 Event Planning” in
Marketing is awaiting
approval to Sales
Joseph Hines
Uploaded Q3pipeline.ppt to
SharePoint
Sales presentation library
This is great. Thank you
for sharing.
Looking good, Q3 is
going
to be fantastic!

198. App Bots
Mandy Cunningham
Inventory: NCC1701
InventoryBot
There are 341 units of
part #NCC1701 available
CRM
SalesforceBot
Lead record for Tricia Nuzzo
had
been converted to an
ProcessWatcher
ERP
Annotations opportunity
Page “Q3 Event Planning” in
Marketing is awaiting
approval to Sales
Joseph Hines
Uploaded Q3pipeline.ppt to
SharePoint
Sales presentation library
This is great. Thank you
for sharing.
Looking good, Q3 is
going
to be fantastic!

199. B ob

200. B ob

201. B ob

202. B ugB ot

203. B ugB ot

204. B ugB ot

205. : S a ll y

206. : S a ll y

207. : S a ll y

208. : S a ll y

209. : S a ll y

210. Th e So ci al Laye r

211. Th e So ci al Laye r

212. Th e So ci al Laye r

213. Th e So ci al Laye r

214. D
4.0

215. D
4.0

216. D
4.0

217. D
4.0

218. D
4.0
Th a n k yo u!

219. CC0
h tt p:/ udre y t.org/co sc up2010/
/a