Berlin Expert Days - Bed Con presentation

presentation by Jan Jongboom Cloud9 IDE

If we advocate the web, develop for the web, and move more and more of the applications we use every day to the web – then why are we still developing software using desktop IDEs and desktop code editors? Don’t all the advantages of the web apply to IDEs as well? Nothing to install, nothing to configure, seamless software updates, real-time collaboration with other users, offloading computationally expensive tasks (like large compiles) to the cloud. It seems to make perfect sense. Still, nobody seemed to do it. So, we decided to do it ourselves – build an IDE in the browser: Cloud9 IDE.

In this talk I will describe the vision and architecture of Cloud9 IDE and programming “in the cloud” in general. In addition I will describe what the architecture of Cloud9 looks like and the challenges we face.

Transcript

1. Javascript in the Cloud Jan Jongboom, Cloud9 IDE @drbernhard Friday, April 13, 2012
2. Jan Jongboom • @drbernhard • Dev at Cloud9 since 2011 • Amsterdam office Friday, April 13, 2012
3. Friday, April 13, 2012
4. Add some pictures 1995 Friday, April 13, 2012
5. Javascript • 1995, Brendan Eich ‘Livescript’ • Netscape 2.0 • Developed in 10 days • Not like Java, more like Scheme Friday, April 13, 2012
6. “JS had to 'look like Java' only less so, be Java’s dumb kid brother or boy-hostage sidekick” Friday, April 13, 2012
7. 1999 Friday, April 13, 2012
8. XMLHttpRequest Friday, April 13, 2012
9. Beloved? Friday, April 13, 2012
10. Reasons • Differentations in implementations • There’s a lot of crap • DOM Friday, April 13, 2012
11. Friday, April 13, 2012
12. Friday, April 13, 2012
13. DOM • Never meant to be scripted • Direct mapping of C structures • Inconvenient API • http://bit.ly/crockford-dom Friday, April 13, 2012
14. 2006 • jQuery launches • Sizzle: $(“div.article:even”) • $(“#btn”).click(function () { }); Friday, April 13, 2012
15. Friday, April 13, 2012
16. Friday, April 13, 2012
17. Java Friday, April 13, 2012
18. Friday, April 13, 2012
19. Javascript Friday, April 13, 2012
20. Friday, April 13, 2012
21. node.js • Google V8 as an executable • Together with LibUV • Not new: LiveWire (1995, Netscape Server) • Event loop Friday, April 13, 2012
22. Friday, April 13, 2012
23. Demo • A scalable web server Friday, April 13, 2012
24. Tooling matters • Javascript is cool, fast • But C9 has 240,000 LOC Friday, April 13, 2012
25. Friday, April 13, 2012
26. Javascript developer Friday, April 13, 2012
27. The world is changing! Friday, April 13, 2012
28. Create Test Deploy Run/Debug Friday, April 13, 2012
29. Create Test Deploy Run/Debug Collaborate! Pull! Share! Friday, April 13, 2012
30. Friday, April 13, 2012
31. Friday, April 13, 2012
32. Friday, April 13, 2012
33. Friday, April 13, 2012
34. Friday, April 13, 2012
35. Javascript exclusive? Friday, April 13, 2012
36. NO! Friday, April 13, 2012
37. Create Test Deploy Run/Debug Collaborate! Pull! Share! Friday, April 13, 2012
38. Demo • Cloud9 handling your dev workflow Friday, April 13, 2012
39. Challenges • Editor • UI • Extensibility • Mixing client / server Friday, April 13, 2012
40. Editor • A browser is built for view only Friday, April 13, 2012
41. contentEditable=”true” Friday, April 13, 2012
42. Friday, April 13, 2012
43. IT SHOULD DIE Friday, April 13, 2012
44. • Standalone code editor in pure JS • Web based • Features, usability, performance • Merged with Bespin / Skywriter (Mozilla) • http://ace.ajax.org Friday, April 13, 2012
45. Internals • <textarea/> • Render the viewport • Fake cursor! • DOM is display only .. .. .... .. ... .... . . ... . .. . . .. .. . .. .. .. . .. . .. .. .... . . . . Friday, April 13, 2012
46. Internals • <textarea/> • Render the viewport • Fake cursor! • DOM is display only .. .. .... .. ... .... . . ... . .. . . .. .. . .. .. .. . .. . .. .. .... . . . . Friday, April 13, 2012
47. Demo • Large document performance • Code folding Friday, April 13, 2012
48. UI • Large frontends are a major challenge • Component reuse • Databinding Friday, April 13, 2012
49. You don’t want to write Friday, April 13, 2012
50. • Realtime collaborative apps in the browser • Skinning, components, etc. • Most sophisticated two way databinding model • http://ui.ajax.org Friday, April 13, 2012
51. Demo • APF Databinding Friday, April 13, 2012
52. Client-server • Where does the code live? • Communication • APF helps alot Friday, April 13, 2012
53. HTML5 CSS3 JavaScript client Friday, April 13, 2012
54. HTML5 CSS3 JavaScript client Node.js Redis server Friday, April 13, 2012
55. HTML5 CSS3 JavaScript client Node.js Redis server XMLHttpRequest HTML5 WebSockets Friday, April 13, 2012
56. HTML5 CSS3 JavaScript client Node.js Redis server XMLHttpRequest HTML5 WebSockets 80% 20% Friday, April 13, 2012
57. Server and client side code is compatible • Use it to your advantage • Offload analysis • Server side ACE rendering Friday, April 13, 2012
58. Friday, April 13, 2012
59. Demo • Scrape some content with JSDom Friday, April 13, 2012
60. Extensibility • Plugins for the win • Dependency management • Plugins are javascript, but you can mix in APF on the client Friday, April 13, 2012
61. open source release as Friday, April 13, 2012
62. cloud9 http://github.com/ajaxorg ACE jsDAV treehugger APF jsFTP async.js Friday, April 13, 2012
63. got ideas? fork cloud9 and contribute or join us, we’re hiring Friday, April 13, 2012
64. Questions? Friday, April 13, 2012
65. Thanks! Twitter: @drbernhard Email: jan@c9.io http://c9.io Friday, April 13, 2012