rethinking online code editors for supporting time...
TRANSCRIPT
IBM Research | Brazil
Rethinking Online Code Editors for Supporting Time-based Web DocumentsRodrigo Laiola Guimarães (IBM Research | Brazil)
September 23rdSão Paulo - Brazil
IBM Research | Brazil
What are online code editors?
2
IBM Research | Brazil
What are online code editors?
• Authoring tools that allow developers to code and see the results promptly
2
IBM Research | Brazil
What are online code editors?
• Authoring tools that allow developers to code and see the results promptly
• Bret Victor: Inventing on Principle and Learnable Programming —> http://vimeo.com/36579366
2
IBM Research | Brazil
What are online code editors?
• Authoring tools that allow developers to code and see the results promptly
• Bret Victor: Inventing on Principle and Learnable Programming —> http://vimeo.com/36579366
• There are a number of Web playgrounds for prototyping HTML, CSS and JavaScript
2
JS Bin
IBM Research | Brazil
In this work…
3
IBM Research | Brazil
In this work…
• We go a step further by giving special attention to the temporal aspect (e.g. preserving presentation state between code changes)
3
IBM Research | Brazil
In this work…
• We go a step further by giving special attention to the temporal aspect (e.g. preserving presentation state between code changes)
• Our proof of concept has been developed using many open source libraries, and currently it works in modern Web browsers (e.g., Safari, Firefox and Chrome)
3
IBM Research | Brazil
In this work…
• We go a step further by giving special attention to the temporal aspect (e.g. preserving presentation state between code changes)
• Our proof of concept has been developed using many open source libraries, and currently it works in modern Web browsers (e.g., Safari, Firefox and Chrome)
• Main functionalities: immediate feedback, coding assistance, playback control and programmatic visualization
3
IBM Research | Brazil
Demo Video
4
5IBM Research | Brazil
5IBM Research | Brazil
IBM Research | Brazil
User Interface
6
IBM Research | Brazil
User Interface
6
IBM Research | Brazil
User Interface
6
ACodeMirror: text editor in JS
IBM Research | Brazil
User Interface
6
A BCodeMirror: text editor in JS IFRAME
IBM Research | Brazil
User Interface
6
1"
A BCodeMirror: text editor in JS IFRAME
IBM Research | Brazil
User Interface
6
1" 2"
A BCodeMirror: text editor in JS IFRAME
IBM Research | Brazil
User Interface
6
1" 2" 3"
A BCodeMirror: text editor in JS IFRAME
IBM Research | Brazil
User Interface
6
1" 2" 3"4"
A BCodeMirror: text editor in JS IFRAME
IBM Research | Brazil
Infrastructure
7
IBM Research | Brazil
Infrastructure
back%end)
front%end)
web)server) database)server)
code)previewer)(remote))code)previewer)(local))
code)editor) real%7me)events)
persistence)
%)code)changes)%)playback)calls)%)code)helpers)(!"))
sketch)
changes)and))event)updates)
<html>))<head>))))))</head>)))</html>)
<style/>)<script/>)
<body/>)
7
IBM Research | Brazil
Infrastructure
back%end)
front%end)
web)server) database)server)
code)previewer)(remote))code)previewer)(local))
code)editor) real%7me)events)
persistence)
%)code)changes)%)playback)calls)%)code)helpers)(!"))
sketch)
changes)and))event)updates)
<html>))<head>))))))</head>)))</html>)
<style/>)<script/>)
<body/>)
7
IBM Research | Brazil
Infrastructure
back%end)
front%end)
web)server) database)server)
code)previewer)(remote))code)previewer)(local))
code)editor) real%7me)events)
persistence)
%)code)changes)%)playback)calls)%)code)helpers)(!"))
sketch)
changes)and))event)updates)
<html>))<head>))))))</head>)))</html>)
<style/>)<script/>)
<body/>)
7
IBM Research | Brazil
Infrastructure
back%end)
front%end)
web)server) database)server)
code)previewer)(remote))code)previewer)(local))
code)editor) real%7me)events)
persistence)
%)code)changes)%)playback)calls)%)code)helpers)(!"))
sketch)
changes)and))event)updates)
<html>))<head>))))))</head>)))</html>)
<style/>)<script/>)
<body/>)
7
IBM Research | Brazil
Infrastructure
back%end)
front%end)
web)server) database)server)
code)previewer)(remote))code)previewer)(local))
code)editor) real%7me)events)
persistence)
%)code)changes)%)playback)calls)%)code)helpers)(!"))
sketch)
changes)and))event)updates)
<html>))<head>))))))</head>)))</html>)
<style/>)<script/>)
<body/>)
7
IBM Research | Brazil
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
IBM Research | Brazil
• HTML
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
IBM Research | Brazil
• HTML
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
diffDOM: A JavaScript diffing algorithm for DOM elements
IBM Research | Brazil
• HTML
• CSS
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
diffDOM: A JavaScript diffing algorithm for DOM elements
IBM Research | Brazil
• HTML
• CSS
• JavaScript —> still to be done! (very hard)
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
diffDOM: A JavaScript diffing algorithm for DOM elements
IBM Research | Brazil
Implementation: Helpers
9
IBM Research | Brazil
Implementation: Helpers
• Contextual helpers can facilitate the authoring process:
a) color picker b) slider and c) angle picker
9
IBM Research | Brazil
Implementation: Helpers
• Contextual helpers can facilitate the authoring process:
a) color picker b) slider and c) angle picker
• Inlet: JavaScript plugin for CodeMirror
9
IBM Research | Brazil
User Evaluation
10
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
10
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
• Exercises on how to use SVG graphics on the Web
10
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
• Exercises on how to use SVG graphics on the Web
• Results based on SUS framework and open-ended questions
0
1
2
3
4
5
6
7
8
9
10
0.0
5.0
10.0
15.0
20.0
25.0
30.0
35.0
40.0
45.0
50.0
55.0
60.0
65.0
70.0
75.0
80.0
85.0
90.0
95.0
100.0
Num
ber
of S
core
s
SUS Score
10
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
• Exercises on how to use SVG graphics on the Web
• Results based on SUS framework and open-ended questions
0
1
2
3
4
5
6
7
8
9
10
0.0
5.0
10.0
15.0
20.0
25.0
30.0
35.0
40.0
45.0
50.0
55.0
60.0
65.0
70.0
75.0
80.0
85.0
90.0
95.0
100.0
Num
ber
of S
core
s
SUS Score
10
Mean SUS score = 90.0 / Learnability score = 84.7
IBM Research | Brazil
Final Remarks
11
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
11
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
• Next steps: improve current implementation based on user evaluation
11
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
• Next steps: improve current implementation based on user evaluation
• Add support code snippets in SMIL Timesheets and Time Style Sheets (TSS)
11
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
• Next steps: improve current implementation based on user evaluation
• Add support code snippets in SMIL Timesheets and Time Style Sheets (TSS)
• We need a fresh new look into the standardization of time-based APIs on the Web
11
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
• Next steps: improve current implementation based on user evaluation
• Add support code snippets in SMIL Timesheets and Time Style Sheets (TSS)
• We need a fresh new look into the standardization of time-based APIs on the Web
• Offer mechanisms to control and simulate the behavior of elements over time (e.g. temporal visualization)
11
