September 23rd São Paulo - Brazil Rethinking Online Code Editors for Supporting Time-based Web Documents Rodrigo Laiola Guimarães ()
What are online code editors? 2
What are online code editors? Authoring tools that allow developers to code and see the results promptly 2
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
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 JS Bin 2
In this work 3
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
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
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
Demo Video 4
5
5
User Interface 6
User Interface 6
User Interface A CodeMirror: text editor in JS 6
User Interface A CodeMirror: text editor in JS B IFRAME 6
User Interface 1" A CodeMirror: text editor in JS B IFRAME 6
User Interface 1" 2" A CodeMirror: text editor in JS B IFRAME 6
User Interface 1" 2" 3" A CodeMirror: text editor in JS B IFRAME 6
User Interface 1" 2" 3" 4" A CodeMirror: text editor in JS B IFRAME 6
Infrastructure 7
Infrastructure changes)and)) event)updates) code)editor) web)server) sketch) <html>) )<head>) )) <style/>) )) <script/>) )</head>) )) <body/>) </html>) persistence) real%7me) events) database)server) back%end) front%end) %)code)changes) %)playback)calls) %)code)helpers)(!")) code)previewer)(local)) code)previewer)(remote)) 7
Infrastructure changes)and)) event)updates) code)editor) web)server) sketch) <html>) )<head>) )) <style/>) )) <script/>) )</head>) )) <body/>) </html>) persistence) real%7me) events) database)server) back%end) front%end) %)code)changes) %)playback)calls) %)code)helpers)(!")) code)previewer)(local)) code)previewer)(remote)) 7
Infrastructure changes)and)) event)updates) code)editor) web)server) sketch) <html>) )<head>) )) <style/>) )) <script/>) )</head>) )) <body/>) </html>) persistence) real%7me) events) database)server) back%end) front%end) %)code)changes) %)playback)calls) %)code)helpers)(!")) code)previewer)(local)) code)previewer)(remote)) 7
Infrastructure changes)and)) event)updates) code)editor) web)server) sketch) <html>) )<head>) )) <style/>) )) <script/>) )</head>) )) <body/>) </html>) persistence) real%7me) events) database)server) back%end) front%end) %)code)changes) %)playback)calls) %)code)helpers)(!")) code)previewer)(local)) code)previewer)(remote)) 7
Infrastructure changes)and)) event)updates) code)editor) web)server) sketch) <html>) )<head>) )) <style/>) )) <script/>) )</head>) )) <body/>) </html>) persistence) real%7me) events) database)server) back%end) front%end) %)code)changes) %)playback)calls) %)code)helpers)(!")) code)previewer)(local)) code)previewer)(remote)) 7
Implementation: Code Changes Document A Document B Diff Delta A/B Patch Document B' Document A Replace Document B' Document B 8
Implementation: Code Changes HTML Document A Document B Diff Delta A/B Patch Document B' Document A Replace Document B' Document B 8
Implementation: Code Changes HTML diffdom: A JavaScript diffing algorithm for DOM elements Document A Document B Diff Delta A/B Patch Document B' Document A Replace Document B' Document B 8
Implementation: Code Changes HTML diffdom: A JavaScript diffing algorithm for DOM elements Document A Document B Diff Delta A/B Patch Document B' CSS Document A Replace Document B' Document B 8
Implementation: Code Changes HTML diffdom: A JavaScript diffing algorithm for DOM elements Document A Document B Diff Delta A/B Patch Document B' CSS Document A Replace Document B' Document B JavaScript > still to be done! (very hard) 8
Implementation: Helpers 9
Implementation: Helpers Contextual helpers can facilitate the authoring process: a) color picker b) slider and c) angle picker 9
Implementation: Helpers Contextual helpers can facilitate the authoring process: a) color picker b) slider and c) angle picker Inlet: JavaScript plugin for CodeMirror 9
User Evaluation 10
User Evaluation 22 post-secondary students over 2 weeks (IFES) 10
User Evaluation 22 post-secondary students over 2 weeks (IFES) Exercises on how to use SVG graphics on the Web 10
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 10 9 8 Number of Scores 7 6 5 4 3 2 1 0 0.0 5.0 10.0 15.0 20.0 25.0 30.0 35.0 40.0 45.0 50.0 55.0 SUS Score 60.0 65.0 70.0 75.0 80.0 85.0 90.0 95.0 100.0 10
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 10 9 8 Number of Scores 7 6 5 4 3 2 1 0 0.0 5.0 10.0 15.0 20.0 25.0 30.0 35.0 40.0 45.0 50.0 55.0 SUS Score Mean SUS score = 90.0 / Learnability score = 84.7 60.0 65.0 70.0 75.0 80.0 85.0 90.0 95.0 100.0 10
Final Remarks 11
Final Remarks Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology 11
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
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
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
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
sketchbook.laiola.com.br Thanks! Rodrigo Laiola Guimarães rodrigo@laiola.com.br 12