Rethinking Online Code Editors for Supporting Time-based Web Documents

Size: px

Start display at page:

Download "Rethinking Online Code Editors for Supporting Time-based Web Documents"

Gordon Anthony
10 years ago
Views:

1 September 23rd São Paulo - Brazil Rethinking Online Code Editors for Supporting Time-based Web Documents Rodrigo Laiola Guimarães ()

2 What are online code editors? 2

3 What are online code editors? Authoring tools that allow developers to code and see the results promptly 2

4 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 > 2

5 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 > There are a number of Web playgrounds for prototyping HTML, CSS and JavaScript JS Bin 2

promptly Bret Victor: Inventing on Principle and Learnable Programming

6 In this work 3

7 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

8 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

preserving presentation state between code changes) Our proof of concept

9 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

10 Demo Video 4

11 5

12 5

13 User Interface 6

14 User Interface 6

15 User Interface A CodeMirror: text editor in JS 6

16 User Interface A CodeMirror: text editor in JS B IFRAME 6

17 User Interface 1" A CodeMirror: text editor in JS B IFRAME 6

18 User Interface 1" 2" A CodeMirror: text editor in JS B IFRAME 6

19 User Interface 1" 2" 3" A CodeMirror: text editor in JS B IFRAME 6

20 User Interface 1" 2" 3" 4" A CodeMirror: text editor in JS B IFRAME 6

21 Infrastructure 7

22 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

23 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

24 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

25 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

26 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

27 Implementation: Code Changes Document A Document B Diff Delta A/B Patch Document B' Document A Replace Document B' Document B 8

28 Implementation: Code Changes HTML Document A Document B Diff Delta A/B Patch Document B' Document A Replace Document B' Document B 8

29 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

30 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

31 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

32 Implementation: Helpers 9

33 Implementation: Helpers Contextual helpers can facilitate the authoring process: a) color picker b) slider and c) angle picker 9

34 Implementation: Helpers Contextual helpers can facilitate the authoring process: a) color picker b) slider and c) angle picker Inlet: JavaScript plugin for CodeMirror 9

35 User Evaluation 10

36 User Evaluation 22 post-secondary students over 2 weeks (IFES) 10

37 User Evaluation 22 post-secondary students over 2 weeks (IFES) Exercises on how to use SVG graphics on the Web 10

38 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 Number of Scores SUS Score

39 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 Number of Scores SUS Score Mean SUS score = 90.0 / Learnability score =

40 Final Remarks 11

41 Final Remarks Valuable tool to teach concepts of time on Web documents using the Problem-Based Learning (PBL) methodology 11

42 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

43 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

44 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

45 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

46 sketchbook.laiola.com.br Thanks! Rodrigo Laiola Guimarães 12

Developer Tutorial Version 1. 0 February 2015

Developer Tutorial Version 1. 0 Contents Introduction... 3 What is the Mapzania SDK?... 3 Features of Mapzania SDK... 4 Mapzania Applications... 5 Architecture... 6 Front-end application components...