![Page 1: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/1.jpg)
IBM Research | Brazil
Rethinking Online Code Editors for Supporting Time-based Web DocumentsRodrigo Laiola Guimarães (IBM Research | Brazil)
September 23rdSão Paulo - Brazil
![Page 2: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/2.jpg)
IBM Research | Brazil
What are online code editors?
2
![Page 3: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/3.jpg)
IBM Research | Brazil
What are online code editors?
• Authoring tools that allow developers to code and see the results promptly
2
![Page 4: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/4.jpg)
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
![Page 5: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/5.jpg)
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
![Page 6: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/6.jpg)
IBM Research | Brazil
In this work…
3
![Page 7: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/7.jpg)
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
![Page 8: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/8.jpg)
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
![Page 9: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/9.jpg)
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
![Page 10: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/10.jpg)
IBM Research | Brazil
Demo Video
4
![Page 11: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/11.jpg)
5IBM Research | Brazil
![Page 12: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/12.jpg)
5IBM Research | Brazil
![Page 13: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/13.jpg)
IBM Research | Brazil
User Interface
6
![Page 14: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/14.jpg)
IBM Research | Brazil
User Interface
6
![Page 15: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/15.jpg)
IBM Research | Brazil
User Interface
6
ACodeMirror: text editor in JS
![Page 16: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/16.jpg)
IBM Research | Brazil
User Interface
6
A BCodeMirror: text editor in JS IFRAME
![Page 17: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/17.jpg)
IBM Research | Brazil
User Interface
6
1"
A BCodeMirror: text editor in JS IFRAME
![Page 18: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/18.jpg)
IBM Research | Brazil
User Interface
6
1" 2"
A BCodeMirror: text editor in JS IFRAME
![Page 19: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/19.jpg)
IBM Research | Brazil
User Interface
6
1" 2" 3"
A BCodeMirror: text editor in JS IFRAME
![Page 20: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/20.jpg)
IBM Research | Brazil
User Interface
6
1" 2" 3"4"
A BCodeMirror: text editor in JS IFRAME
![Page 21: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/21.jpg)
IBM Research | Brazil
Infrastructure
7
![Page 22: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/22.jpg)
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
![Page 23: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/23.jpg)
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
![Page 24: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/24.jpg)
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
![Page 25: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/25.jpg)
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
![Page 26: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/26.jpg)
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
![Page 27: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/27.jpg)
IBM Research | Brazil
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
![Page 28: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/28.jpg)
IBM Research | Brazil
• HTML
Implementation: Code Changes
8
Document A
Document BDiff Delta A/B
Patch Document B'
Document BReplace Document B'
Document A
![Page 29: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/29.jpg)
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
![Page 30: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/30.jpg)
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
![Page 31: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/31.jpg)
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
![Page 32: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/32.jpg)
IBM Research | Brazil
Implementation: Helpers
9
![Page 33: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/33.jpg)
IBM Research | Brazil
Implementation: Helpers
• Contextual helpers can facilitate the authoring process:
a) color picker b) slider and c) angle picker
9
![Page 34: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/34.jpg)
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
![Page 35: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/35.jpg)
IBM Research | Brazil
User Evaluation
10
![Page 36: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/36.jpg)
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
10
![Page 37: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/37.jpg)
IBM Research | Brazil
User Evaluation
• 22 post-secondary students over 2 weeks (IFES)
• Exercises on how to use SVG graphics on the Web
10
![Page 38: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/38.jpg)
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
![Page 39: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/39.jpg)
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
![Page 40: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/40.jpg)
IBM Research | Brazil
Final Remarks
11
![Page 41: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/41.jpg)
IBM Research | Brazil
Final Remarks
• Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology
11
![Page 42: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/42.jpg)
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
![Page 43: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/43.jpg)
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
![Page 44: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/44.jpg)
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
![Page 45: Rethinking Online Code Editors for Supporting Time …conferenciaweb.w3c.br/wp-content/uploads/2015/10/presentation_w3c... · IBM Research | Brazil What are online code editors? •](https://reader031.vdocuments.us/reader031/viewer/2022030904/5b473b0c7f8b9af5078bfc8c/html5/thumbnails/45.jpg)
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