SlideShare a Scribd company logo
1 of 24
Download to read offline
Real time collaborative
editing for HTML
Realtime collaborative editing
★ though operation transformation (OT)
★ for your HTML content
★ with true WYSIWYG
★ for web and native
About OT for HTML
“[...]and HTML makes OT (Operational Transforms)
difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-
says
About OT for HTML
“[...]and HTML makes OT (Operational Transforms)
difficult if not impossible[...]”
http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5-
it is possible
says
create, share, edit on the go
★ for desktop, tablet, mobile
★ web and native
★ native is more responsive
and offers better
possibilities for end user
interaction
embed wikidocs wiki in your system
★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions,
user management, storage, scalable,
etc.
★ a starting point to extend your system
with a wiki functionallity
embed wikidocs wiki in your system
★ Customizable and embed-able
★ 100% REST API coverage
★ authentication, access permissions,
user management, storage, scalable,
etc.
★ a starting point to extend your system
with a wiki functionallity
wikidocs demo app
embeded as facebook app
wikidocs api: create a new app or
integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync
wikidocs api: create a new app or
integrate smoothly in your existing system
★ Your app
★ Your users
★ Your access rules
★ We sync
wikidocs api transparently
integrated in facebooks
group docs editor
Nice, but what’s the real difference?
vs vs
Nice, but what’s the real difference?
vs vs
First break is a line
break second a
paragraph break.
Nice, but what’s the real difference?
vs vs
Telepointers are out of
sync with content.
First break is a line
break second a
paragraph break.
Nice, but what’s real difference?
<div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-spelling-
error kix-htmloverlay docs-ui-unprintable" style="top: 0px; left: 0px; width: 61px; height: 17px;"></div><div class="kix-lineview-content"
style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 61px; padding-left:
0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font-
variant:normal;text-decoration:none;vertical-align:baseline;">Realti</span><span style="font-size:15px;font-
family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical-
align:baseline;">me</span></span></div></div><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-
lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 82px;
padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-
style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">collaborative</span></span></div></div></div><div class="kix-
paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content"
style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 50px; padding-left:
0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-
variant:normal;text-decoration:none;vertical-align:baseline;">&nbsp;</span><span style="font-size:15px;font-
family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text-
decoration:underline;vertical-align:baseline;">ed</span><span style="font-size:15px;font-family:Arial;color:#000000;background-
color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">iting</span><span
style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font-
variant:normal;text-decoration:none;vertical-align:baseline;">.</span></span></div></div></div>
vs vs
Nice, but what’s real difference?
vs vs
<pre>
! <span class=" firepad-b">Realti</span><span class=" firepad-b firepad-i">me</span>
</pre>
<pre>
! <span class=" firepad-i">collaborative</span>
</pre>
<pre>
! <span class=" firepad-u firepad-i">ed</span><span class=" firepad-u">iting</span>
</pre>
Nice, but what’s real difference?
vs vs
<p>
! <b>Realti<i>me</i></b><br>
! <i>collaborative</i>
</p>
<p>
! <u><i>ed</i>iting</u>
</p>
What about custom attributes?
<p contenteditable=”true”>
! <span data-my-attr=”needs-work”>H3lp</span>
! <i class=”highlight”>me</i>
</p>
This is an important feature for custom editing functionalities and extensions.
What about custom attributes?
<p contenteditable=”true”>
! <span data-my-attr=”needs-work”>H3lp</span>
! <i class=”highlight”>me</i>
</p>
we synch them
This is an important feature for custom editing functionalities and extensions.
What about non editables?
<p contenteditable=”true”>
<h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>
! ! <iframe src="//youtu.be/841FgLrc-zQ">
! ! </iframe>
! </div>
</p>
This is an important feature for rich media integration.
What about non editables?
<p contenteditable=”true”>
<h1>Watch this</h1>
! <div class=”video” contenteditable=”false”>
! ! <iframe src="//youtu.be/841FgLrc-zQ">
! ! </iframe>
! </div>
</p>
we synch them
This is an important feature for rich media integration.
What’s the payload?
sockjs.min.js 13,2kB
wikidocs.min.css  1,5kB
wikidocs.min.js 47,2kB
You have HTML, we synch it.
<html>
<body>
! <div id="content-1234"
! ! contenteditable="true">
! <h1>Hello World</h1>
! <p>Wikidocs is here!</p>
! </div>
</body>
</html>
<link rel="stylesheet" href="wikidocs.css">
<script src="sockjs.min.js"></script>
<script src="wikidocs.min.js"></script>
var app = WD.App(accessToken);
var editable =
! document.getElementById('content-1234');
app.Document('/channel-1234').bind(editable);
How can I see collaborators?
var app = WD.App(accessToken);
var editable = document.getElementById('content-1234');
var doc = app.Document('/channel-1234').bind(editable);
doc.on('subscribed', updateSubscribers);
doc.on('unsubscribed', updateSubscribers);
function updateSubscribers(session) {
! doc.subscriptions.forEach(function (session) {
! ! // do magic...
! });
}
Wikidocs api provides additional features to provide a good user experience
around real time collaborative editing.
Implementationeffort
knowledgenecessary
othersynch
Be smart. Focus on your value
and let Wikidocs synch for you.
We create value through sharing and collaboration.

More Related Content

More from Haymo Meran

Aloha editor keynote san francisco
Aloha editor keynote san franciscoAloha editor keynote san francisco
Aloha editor keynote san franciscoHaymo Meran
 
Aloha editor jQuery conf
Aloha editor jQuery confAloha editor jQuery conf
Aloha editor jQuery confHaymo Meran
 
Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Haymo Meran
 
Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Haymo Meran
 
Aloha Editor semantic concept
Aloha Editor semantic conceptAloha Editor semantic concept
Aloha Editor semantic conceptHaymo Meran
 
E2 wine and cheese
E2 wine and cheeseE2 wine and cheese
E2 wine and cheeseHaymo Meran
 
Aloha editor contenteditable useable
Aloha editor contenteditable useableAloha editor contenteditable useable
Aloha editor contenteditable useableHaymo Meran
 
Facebook marketing potential
Facebook marketing potentialFacebook marketing potential
Facebook marketing potentialHaymo Meran
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0Haymo Meran
 
Enterprise 2.0 Realtime V4
Enterprise 2.0   Realtime V4Enterprise 2.0   Realtime V4
Enterprise 2.0 Realtime V4Haymo Meran
 
Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Haymo Meran
 
Networking on e-day
Networking on e-dayNetworking on e-day
Networking on e-dayHaymo Meran
 
Enterprise 2.0 portal
Enterprise 2.0 portalEnterprise 2.0 portal
Enterprise 2.0 portalHaymo Meran
 

More from Haymo Meran (15)

Aloha editor keynote san francisco
Aloha editor keynote san franciscoAloha editor keynote san francisco
Aloha editor keynote san francisco
 
Aloha editor jQuery conf
Aloha editor jQuery confAloha editor jQuery conf
Aloha editor jQuery conf
 
Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote Aloha Editor DevCon 2011 Vienna keynote
Aloha Editor DevCon 2011 Vienna keynote
 
Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10Social media @ neuwaldegg.at/dmv10
Social media @ neuwaldegg.at/dmv10
 
Aloha Editor semantic concept
Aloha Editor semantic conceptAloha Editor semantic concept
Aloha Editor semantic concept
 
E2 wine and cheese
E2 wine and cheeseE2 wine and cheese
E2 wine and cheese
 
Aloha editor contenteditable useable
Aloha editor contenteditable useableAloha editor contenteditable useable
Aloha editor contenteditable useable
 
Facebook marketing potential
Facebook marketing potentialFacebook marketing potential
Facebook marketing potential
 
Enterprise2punkt0
Enterprise2punkt0Enterprise2punkt0
Enterprise2punkt0
 
Enterprise 2.0 Realtime V4
Enterprise 2.0   Realtime V4Enterprise 2.0   Realtime V4
Enterprise 2.0 Realtime V4
 
Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20Triff Markus Was Ist Enterprise20
Triff Markus Was Ist Enterprise20
 
Networking on e-day
Networking on e-dayNetworking on e-day
Networking on e-day
 
Enterprise 2.0 portal
Enterprise 2.0 portalEnterprise 2.0 portal
Enterprise 2.0 portal
 
E20 Keynote
E20   KeynoteE20   Keynote
E20 Keynote
 
Gpn4
Gpn4Gpn4
Gpn4
 

Recently uploaded

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 

Recently uploaded (20)

20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 

Wikidocs - Real time collaborative editing for HTML

  • 2. Realtime collaborative editing ★ though operation transformation (OT) ★ for your HTML content ★ with true WYSIWYG ★ for web and native
  • 3. About OT for HTML “[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]” http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5- says
  • 4. About OT for HTML “[...]and HTML makes OT (Operational Transforms) difficult if not impossible[...]” http://www.waveprotocol.org/faq#TOC-What-s-the-XML-schema-for-waves-Why-isn-t-it-HTML5- it is possible says
  • 5. create, share, edit on the go ★ for desktop, tablet, mobile ★ web and native ★ native is more responsive and offers better possibilities for end user interaction
  • 6. embed wikidocs wiki in your system ★ Customizable and embed-able ★ 100% REST API coverage ★ authentication, access permissions, user management, storage, scalable, etc. ★ a starting point to extend your system with a wiki functionallity
  • 7. embed wikidocs wiki in your system ★ Customizable and embed-able ★ 100% REST API coverage ★ authentication, access permissions, user management, storage, scalable, etc. ★ a starting point to extend your system with a wiki functionallity wikidocs demo app embeded as facebook app
  • 8. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync
  • 9. wikidocs api: create a new app or integrate smoothly in your existing system ★ Your app ★ Your users ★ Your access rules ★ We sync wikidocs api transparently integrated in facebooks group docs editor
  • 10. Nice, but what’s the real difference? vs vs
  • 11. Nice, but what’s the real difference? vs vs First break is a line break second a paragraph break.
  • 12. Nice, but what’s the real difference? vs vs Telepointers are out of sync with content. First break is a line break second a paragraph break.
  • 13. Nice, but what’s real difference? <div class="kix-paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-spelling- error kix-htmloverlay docs-ui-unprintable" style="top: 0px; left: 0px; width: 61px; height: 17px;"></div><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 61px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:normal;font- variant:normal;text-decoration:none;vertical-align:baseline;">Realti</span><span style="font-size:15px;font- family:Arial;color:#000000;background-color:transparent;font-weight:bold;font-style:italic;font-variant:normal;text-decoration:none;vertical- align:baseline;">me</span></span></div></div><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix- lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 82px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font- style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;">collaborative</span></span></div></div></div><div class="kix- paragraphrenderer"><div class="kix-lineview" style="height: 20px; direction: ltr; text-align: left;"><div class="kix-lineview-content" style="margin-left: 0px; padding-top: 0px;"><span class="goog-inline-block kix-lineview-text-block" style="width: 50px; padding-left: 0px;"><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font- variant:normal;text-decoration:none;vertical-align:baseline;">&nbsp;</span><span style="font-size:15px;font- family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:italic;font-variant:normal;text- decoration:underline;vertical-align:baseline;">ed</span><span style="font-size:15px;font-family:Arial;color:#000000;background- color:transparent;font-weight:normal;font-style:normal;font-variant:normal;text-decoration:underline;vertical-align:baseline;">iting</span><span style="font-size:15px;font-family:Arial;color:#000000;background-color:transparent;font-weight:normal;font-style:normal;font- variant:normal;text-decoration:none;vertical-align:baseline;">.</span></span></div></div></div> vs vs
  • 14. Nice, but what’s real difference? vs vs <pre> ! <span class=" firepad-b">Realti</span><span class=" firepad-b firepad-i">me</span> </pre> <pre> ! <span class=" firepad-i">collaborative</span> </pre> <pre> ! <span class=" firepad-u firepad-i">ed</span><span class=" firepad-u">iting</span> </pre>
  • 15. Nice, but what’s real difference? vs vs <p> ! <b>Realti<i>me</i></b><br> ! <i>collaborative</i> </p> <p> ! <u><i>ed</i>iting</u> </p>
  • 16. What about custom attributes? <p contenteditable=”true”> ! <span data-my-attr=”needs-work”>H3lp</span> ! <i class=”highlight”>me</i> </p> This is an important feature for custom editing functionalities and extensions.
  • 17. What about custom attributes? <p contenteditable=”true”> ! <span data-my-attr=”needs-work”>H3lp</span> ! <i class=”highlight”>me</i> </p> we synch them This is an important feature for custom editing functionalities and extensions.
  • 18. What about non editables? <p contenteditable=”true”> <h1>Watch this</h1> ! <div class=”video” contenteditable=”false”> ! ! <iframe src="//youtu.be/841FgLrc-zQ"> ! ! </iframe> ! </div> </p> This is an important feature for rich media integration.
  • 19. What about non editables? <p contenteditable=”true”> <h1>Watch this</h1> ! <div class=”video” contenteditable=”false”> ! ! <iframe src="//youtu.be/841FgLrc-zQ"> ! ! </iframe> ! </div> </p> we synch them This is an important feature for rich media integration.
  • 20. What’s the payload? sockjs.min.js 13,2kB wikidocs.min.css  1,5kB wikidocs.min.js 47,2kB
  • 21. You have HTML, we synch it. <html> <body> ! <div id="content-1234" ! ! contenteditable="true"> ! <h1>Hello World</h1> ! <p>Wikidocs is here!</p> ! </div> </body> </html> <link rel="stylesheet" href="wikidocs.css"> <script src="sockjs.min.js"></script> <script src="wikidocs.min.js"></script> var app = WD.App(accessToken); var editable = ! document.getElementById('content-1234'); app.Document('/channel-1234').bind(editable);
  • 22. How can I see collaborators? var app = WD.App(accessToken); var editable = document.getElementById('content-1234'); var doc = app.Document('/channel-1234').bind(editable); doc.on('subscribed', updateSubscribers); doc.on('unsubscribed', updateSubscribers); function updateSubscribers(session) { ! doc.subscriptions.forEach(function (session) { ! ! // do magic... ! }); } Wikidocs api provides additional features to provide a good user experience around real time collaborative editing.
  • 23. Implementationeffort knowledgenecessary othersynch Be smart. Focus on your value and let Wikidocs synch for you.
  • 24. We create value through sharing and collaboration.