Remix Your Language Tooling (JSConf.eu 2012)
3 likes1,214 views
This document discusses remixing language tooling by creating a functional interface for language services. It proposes defining individual language services like parsing, analyzing and completing as standalone functions. This makes the interface technology agnostic and allows reusing existing tooling. It demonstrates implementing such services by combining parser generators, analysis frameworks and other reusable components without having to build everything from scratch. The overall approach aims to accelerate creation of customized IDEs.
Remix Your Language Tooling (JSConf.eu 2012)
- 1. Remix Your Language Tooling Lennart C. L. Kats (@lennartcl)
- 2. Cloud9 IDE
- 3. Venture capital 30 employees 2 offices
- 4. JavaScript
- 7. browser.js
- 8. db.js
- 9. server.js
- 10. *.js
- 11. ~300,000 lines of JavaScript
- 12. Tooling matters
- 14. Tooling matters especially for JavaScript
- 15. C#, C++, Java?
- 20. Iterating using undeclared variable
- 22. Warning: you are in an anonymous inner function with its own “this” pointer
- 24. Did you mean “length”?
- 28. 9
- 29. TypeScript • Type Annotations • Modules • Classes
- 30. function add(num1, num2) { return num1 + num2; } var result = add(1, 2);
- 31. function add(num1: number, num2: number) { return num1 + num2; } var result = add(1, 2);
- 32. function add(num1: number, num2: number) { return num1 + num2; } var result = add(1, true);
- 33. function add(num1: number, num2: number) { return num1 + num2; } var result = add(1, true); I’m afraid I can’t let you do that, Dave.
- 34. MAKE CODE Y l NOT WAR
- 36. DEMO
- 40. MAKE CODE Y l
- 41. MAKE CODE Y l
- 42. MAKE CODE Y l
- 46. What if we can REMIX Language Tooling?
- 48. If only things were this simple...
- 49. If only things were this simple...
- 50. If only things were this simple...
- 52. MAKE CODE Y l
- 53. A client-side plugin with a server-side back-end
- 56. How can things be that simple... Command-line tool: • you tell it what to do • you give it an input • it returns a result
- 57. How can things be that simple... Command-line tool: • you tell it what to do • you give it an input • it returns a result => it’s a functional interface!
- 58. How can things be that simple... “Functional is the New Black” * *Elise Huard, tomorrow
- 59. Functional language tooling interface • handlesLanguage() • parse() • analyze() • outline() • complete()
- 60. Each service is described by a single function
- 61. The interface is fully technology agnostic Accelerating the creation of customized, Language-Specific IDEs in Eclipse, Charles et al., OOPSLA 2009
- 62. So, how do you implement one of these functions?
- 64. Code Parser AST
- 65. AST Analyzer feedback
- 66. Reuse existing tooling where you can Zeon Narcissus UglifyJS Esprima JSLint
- 67. Don’t do it with your hands
- 68. Reusable language tooling Parsers Parser generators Analysis frameworks
- 69. treehugger.js
- 71. Describe each service by a single function
- 73. Remix Your Language Tooling http://github.com/lennartcl http://twitter.com/lennartcl http://lennart.cl http://c9.io
Editor's Notes
- #2: How to Effectively Build Language Tooling\n\n... or, alternatively, how WE can remix OUR language tooling\n
- #3: \n
- #4: \n talk today will focus on TOOLING\n
- #5: \n
- #6: \n
- #7: \n\none of the pioneers in programming language design\n\none of the first women in the US to receive a PhD in CS\n
- #8: \n
- #9: - several years since I first tried JavaScript. think it's been over 10 years.\n - copy/pasting for popup menus on web pages\nBack when everybody was still using “Under Construction”\n\n\n\n\nhttp://contemporary-home-computing.org/still-there/geocities.html\n
- #10: Things have changed since.\n\n\n\n\n\n\n\nhttps://commons.wikimedia.org/wiki/File:Beta-badge.svg\n\n\n\n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: “Application Scale JavaScript”\n“Last audience: shocked, mix of surprise and anger”\n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: Is there anyone in the audience who knows JavaScript and can point out an error in this code?\n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: Any IDE that’s worth anything\n
- #35: \n
- #36: Two reasons for doing an IDE in the cloud:\n- one is all the reasons anyone would make any application online. We’re JavaScript developers, why would our IDE not be online?\n- the other is nice pictures of clouds\n\nNice place of fluffy clouds, but new things keep happening:\n- new libraries, new ways of using the language, new platforms\n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: Optional types, if you want you can declare the type of any function, property, or variable\n
- #42: \n
- #43: \n
- #44: as a language tooling guy I must say I like these extensions\n “lots of controversy”; yet another compile-to-js, will make debugging harder, yadayada and so on. \n at Cloud9 we really only care about making you more productive\n so by the immortal words of my colleague Garen,\n
- #45: how long did it take us to support it?\n one day.\n
- #46: how long did it take us to support it?\n one day.\n
- #47: \n
- #48: how long did it take us to support it?\n one day.\n
- #49: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #50: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #51: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #52: syntax highlighter\n terminal\n this took maybe 30 minutes to complete\n the other thing we use is NPM: users can install anything they want in their dev instance, including the typescript compiler\n
- #53: syntax highlighter\n terminal\n this took maybe 30 minutes to complete\n the other thing we use is NPM: users can install anything they want in their dev instance, including the typescript compiler\n
- #54: \n
- #55: \n"c9 been around, now at the point where the community can make awesome tools\n\nAs of today, we&#x2019;re opening up Cloud9. We&#x2019;re making it possible to ...\n\n&#x201C;i&#x2019;ll show you how you can do that&#x201D;\n
- #56: We want to make it possible to build that villa for any language. For any library.\n
- #57: \n
- #58: \n
- #59: \n
- #60: \n
- #61: \n
- #62: \n
- #63: <what if we can remix>\n \n \n \n \n \n http://egonego.blogspot.nl/\n
- #64: \n
- #65: Why in the age of social coding is it so hard to remix language tooling?\n
- #66: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #67: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #68: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #69: <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it&#x2019;s application-scale\n\n
- #70: \n
- #71: \n
- #72: \n
- #73: Can apply it to other languages w/ linters\n\nTypeScript, PHP, CoffeeScript, ANTLR\n
- #74: \n
- #75: \n
- #76: No UI or anything involved; it&#x2019;s just a black box that we call\n
- #77: Explored before in other projects and in the academic world\n
- #78: base_handler\n
- #79: \n
- #80: Bob Fuhrer, Philippe Charles, and others\n
- #81: \n
- #82: \n
- #83: \n
- #84: \n
- #85: \n
- #86: http://wickedstageact2.typepad.com/life_on_the_wicked_stage_/cool_tools/page/2/\nhttp://dvice.com/pics/hand_wrench.jpg\n
- #87: And please, people. Don&#x2019;t do everything with your hands. There are tools for building language components.\n\nhttp://wickedstageact2.typepad.com/life_on_the_wicked_stage_/cool_tools/page/2/\nhttp://dvice.com/pics/hand_wrench.jpg\n
- #88: Michael Ficarra&#x2019;s CoffeeScript Redux project\n\n\nused PEG.js\n
- #89: \n
- #90: \n
- #91: \n
- #92: \n
- #93: \n
- #94: \n
- #95: \n
- #96: \n
- #97: \n parting message:\n remix your tooling;\n use generic language-independent frameworks to build language tooling\n\n
- #98: I&#x2019;m Lennart Kats and I&#x2019;ve remixed my name into such sites as github, twitter, and the interwebs\n\nIn the coming weeks we&#x2019;ll be releasing docs and examples.\n\nYou heard it here first.\n