Remix YourLanguage ToolingLennart C. L. Kats (@lennartcl)
Cloud9 IDE
Venture capital30 employees2 offices
JavaScript
UNDER CONSTRUCTION
browser.js
db.js
server.js
*.js
~300,000   lines           of      JavaScript
Tooling matters
Tooling mattersespecially for JavaScript
C#, C++, Java?
Iterating using undeclared variable
Warning: you are in an anonymous inner function with its                   own “this” pointer
Did you mean “length”?
Intelligent code completion
Complex refactoring
9
TypeScript•   Type Annotations•   Modules•   Classes
function add(num1,             num2) {    return num1 + num2;}var result = add(1, 2);
function add(num1: number,             num2: number) {    return num1 + num2;}var result = add(1, 2);
function add(num1: number,             num2: number) {    return num1 + num2;}var result = add(1, true);
function add(num1: number,             num2: number) {    return num1 + num2;}var result = add(1, true);          I’m afra...
MAKE CODE     Y     l NOT WAR
DEMO
MAKE CODE     Y     l
MAKE CODE     Y     l
MAKE CODE     Y     l
What if we can REMIX Language Tooling?
If only things were this         simple...
If only things were this         simple...
If only things were this         simple...
MAKE CODE     Y     l
A client-side pluginwith a server-side     back-end
How can things be that          simple...    Command-line tool:•   you tell it what to do•   you give it an input•   it re...
How can things be that          simple...    Command-line tool:•   you tell it what to do•   you give it an input•   it re...
How can things be that      simple...   “Functional is the New Black” *                          *Elise Huard, tomorrow
Functional language        tooling interface•   handlesLanguage()•   parse()•   analyze()•   outline()•   complete()
Each service is described   by a single function
The interface is fully         technology agnosticAccelerating the creation of customized, Language-Specific IDEs in Eclips...
So,how do you implement one      of these functions?
Compiler ParserAnalyzer
Code   Parser   AST
AST   Analyzer   feedback
Reuse existing tooling   where you can Zeon                  Narcissus            UglifyJS                       Esprima  ...
Don’t do it with your       hands
Reusable language tooling             Parsers        Parser generators       Analysis frameworks
treehugger.js
Describe each service by a single function
Remix Your             Language Toolinghttp://github.com/lennartclhttp://twitter.com/lennartclhttp://lennart.cl           ...
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Remix Your Language Tooling (JSConf.eu 2012)
Upcoming SlideShare
Loading in...5
×

Remix Your Language Tooling (JSConf.eu 2012)

1,610

Published on

JavaScript has a vivid ecosystem of a passionate developer community, libraries, and tools. New frameworks keep pushing the boundaries what you can do with it, and the language family is rapidly expanding with new cousins; TypeScript being the latest. We’re building language tooling to provide an integrated experience with static error checks, code completion, API documentation, and so on. But how can we keep up with this changing environment? Let’s talk about effectively building language tools.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,610
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • How to Effectively Build Language Tooling\n\n... or, alternatively, how WE can remix OUR language tooling\n
  • \n
  • \n talk today will focus on TOOLING\n
  • \n
  • \n
  • \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
  • \n
  • - 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
  • Things have changed since.\n\n\n\n\n\n\n\nhttps://commons.wikimedia.org/wiki/File:Beta-badge.svg\n\n\n\n
  • \n
  • \n
  • \n
  • \n
  • “Application Scale JavaScript”\n“Last audience: shocked, mix of surprise and anger”\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Is there anyone in the audience who knows JavaScript and can point out an error in this code?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Any IDE that’s worth anything\n
  • \n
  • 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
  • \n
  • \n
  • \n
  • \n
  • Optional types, if you want you can declare the type of any function, property, or variable\n
  • \n
  • \n
  • 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
  • how long did it take us to support it?\n one day.\n
  • how long did it take us to support it?\n one day.\n
  • \n
  • how long did it take us to support it?\n one day.\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • 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
  • 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
  • \n
  • \n"c9 been around, now at the point where the community can make awesome tools\n\nAs of today, we’re opening up Cloud9. We’re making it possible to ...\n\n“i’ll show you how you can do that”\n
  • We want to make it possible to build that villa for any language. For any library.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • <what if we can remix>\n \n \n \n \n \n http://egonego.blogspot.nl/\n
  • \n
  • Why in the age of social coding is it so hard to remix language tooling?\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • <show terminal screenshot installing typescript and having it output errors; show size of compiler>\n not minified; but it’s application-scale\n\n
  • \n
  • \n
  • \n
  • Can apply it to other languages w/ linters\n\nTypeScript, PHP, CoffeeScript, ANTLR\n
  • \n
  • \n
  • No UI or anything involved; it’s just a black box that we call\n
  • Explored before in other projects and in the academic world\n
  • base_handler\n
  • \n
  • Bob Fuhrer, Philippe Charles, and others\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • http://wickedstageact2.typepad.com/life_on_the_wicked_stage_/cool_tools/page/2/\nhttp://dvice.com/pics/hand_wrench.jpg\n
  • And please, people. Don’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
  • Michael Ficarra’s CoffeeScript Redux project\n\n\nused PEG.js\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n parting message:\n remix your tooling;\n use generic language-independent frameworks to build language tooling\n\n
  • I’m Lennart Kats and I’ve remixed my name into such sites as github, twitter, and the interwebs\n\nIn the coming weeks we’ll be releasing docs and examples.\n\nYou heard it here first.\n
  • Remix Your Language Tooling (JSConf.eu 2012)

    1. 1. Remix YourLanguage ToolingLennart C. L. Kats (@lennartcl)
    2. 2. Cloud9 IDE
    3. 3. Venture capital30 employees2 offices
    4. 4. JavaScript
    5. 5. UNDER CONSTRUCTION
    6. 6. browser.js
    7. 7. db.js
    8. 8. server.js
    9. 9. *.js
    10. 10. ~300,000 lines of JavaScript
    11. 11. Tooling matters
    12. 12. Tooling mattersespecially for JavaScript
    13. 13. C#, C++, Java?
    14. 14. Iterating using undeclared variable
    15. 15. Warning: you are in an anonymous inner function with its own “this” pointer
    16. 16. Did you mean “length”?
    17. 17. Intelligent code completion
    18. 18. Complex refactoring
    19. 19. 9
    20. 20. TypeScript• Type Annotations• Modules• Classes
    21. 21. function add(num1, num2) { return num1 + num2;}var result = add(1, 2);
    22. 22. function add(num1: number, num2: number) { return num1 + num2;}var result = add(1, 2);
    23. 23. function add(num1: number, num2: number) { return num1 + num2;}var result = add(1, true);
    24. 24. 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.
    25. 25. MAKE CODE Y l NOT WAR
    26. 26. DEMO
    27. 27. MAKE CODE Y l
    28. 28. MAKE CODE Y l
    29. 29. MAKE CODE Y l
    30. 30. What if we can REMIX Language Tooling?
    31. 31. If only things were this simple...
    32. 32. If only things were this simple...
    33. 33. If only things were this simple...
    34. 34. MAKE CODE Y l
    35. 35. A client-side pluginwith a server-side back-end
    36. 36. How can things be that simple... Command-line tool:• you tell it what to do• you give it an input• it returns a result
    37. 37. 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!
    38. 38. How can things be that simple... “Functional is the New Black” * *Elise Huard, tomorrow
    39. 39. Functional language tooling interface• handlesLanguage()• parse()• analyze()• outline()• complete()
    40. 40. Each service is described by a single function
    41. 41. The interface is fully technology agnosticAccelerating the creation of customized, Language-Specific IDEs in Eclipse,Charles et al., OOPSLA 2009
    42. 42. So,how do you implement one of these functions?
    43. 43. Compiler ParserAnalyzer
    44. 44. Code Parser AST
    45. 45. AST Analyzer feedback
    46. 46. Reuse existing tooling where you can Zeon Narcissus UglifyJS Esprima JSLint
    47. 47. Don’t do it with your hands
    48. 48. Reusable language tooling Parsers Parser generators Analysis frameworks
    49. 49. treehugger.js
    50. 50. Describe each service by a single function
    51. 51. Remix Your Language Toolinghttp://github.com/lennartclhttp://twitter.com/lennartclhttp://lennart.cl http://c9.io

    ×