End-User Support for Debugging Demonstration-based Model Transformation Execution
Kick ass code editing and end to end JavaScript debugging
-
Upload
fabian-jakobs -
Category
Technology
-
view
5.073 -
download
1
description
Transcript of Kick ass code editing and end to end JavaScript debugging
![Page 1: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/1.jpg)
Kick ass code editing andend to end JavaScript
debugging
Fabian Jakobs@fjakobs
![Page 2: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/2.jpg)
Code Editor+
Debugger
=?
![Page 3: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/3.jpg)
Code Editor+
Debugger
=IDE
![Page 4: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/4.jpg)
![Page 5: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/5.jpg)
Overview
•Code Editor
• IDE Plugins
•Debugger
![Page 6: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/6.jpg)
Demo
![Page 7: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/7.jpg)
Editor
![Page 8: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/8.jpg)
• nobody will use an IDE if the editor sucks
• should be able to replace TextMate
ACEAjax.org Code Editor
![Page 9: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/9.jpg)
Requirements
• cross browser
• fully featured
• configurable
• scalable
• hackable
![Page 10: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/10.jpg)
Why not Bespin?
• inefficient in full screen
•not cross browser
•dependency on Sproutcore
Skywriter
jQuery
![Page 11: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/11.jpg)
Implementation Options
•Content Editable
•Canvas
•pure DOM
![Page 12: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/12.jpg)
Content Editable
• not enough control
• cross browser issues
• not worth it (for code editing)
![Page 13: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/13.jpg)
Canvas
• full rendering control
• no IE6, IE7, IE8
• implement key/mouse interaction manually
• O(number of pixels)
![Page 14: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/14.jpg)
Pure DOM
• draw text, lines, rectangles
• implement key/mouse interaction manually
• naive O(number of lines)
• better O(number of visible lines)
![Page 15: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/15.jpg)
DOM + virtual view port
• rendering a full document in the DOM doesn‘t scale
• only render visible rows
..
..
....
..
...
.... . . ...
.
..
.
.
..
..
.
..
.. ..
.
.. . ..
..
.... . . .
.
![Page 16: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/16.jpg)
Renderer
•DOM is used for drawing only
•no state in the DOM
•never read the DOM
![Page 17: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/17.jpg)
Layers
![Page 18: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/18.jpg)
Layers
![Page 19: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/19.jpg)
Demo
![Page 20: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/20.jpg)
IDE Plugins
![Page 21: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/21.jpg)
Everything is a Plugin
searchfile system code editor
language modes
debugger console
new filesave
![Page 22: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/22.jpg)
What is a plugin
• JavaScript for client code
• JavaScript (node.js) for server code
• XML to describe the UI
![Page 23: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/23.jpg)
Video
![Page 24: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/24.jpg)
![Page 25: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/25.jpg)
Debugger
![Page 26: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/26.jpg)
Debugging
Application(node)
IDEServer
IDEClient
V8 debugger protocolover TCP
V8 debugger protocolover socket.io
Applicationin Chrome
?
![Page 27: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/27.jpg)
Demo
![Page 28: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/28.jpg)
cloud9 - Eclipse Google Docs - Word
![Page 29: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/29.jpg)
Open SourceBuilding Blocks
node.js
requireJS
connect
socket.io
ACE
APF
jsDAV
async.js
node-github
node-o3-xml
![Page 30: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/30.jpg)
Cloud9 IDE
open sourcedTODAY
![Page 31: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/31.jpg)
Join usin building an IDE
by JS devs for JS devs.
![Page 32: Kick ass code editing and end to end JavaScript debugging](https://reader037.fdocuments.net/reader037/viewer/2022103114/554f585eb4c905b9508b521f/html5/thumbnails/32.jpg)
Thanks for watching!Fork it on GitHub
http://github.com/ajaxorg/cloud9