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.

1. Remix Your
Language Tooling
Lennart C. L. Kats (@lennartcl)

2. Cloud9 IDE

3. Venture capital
30 employees
2 offices

4. JavaScript

5. UNDER CONSTRUCTION

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”?

26. Intelligent code completion

27. Complex refactoring

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?

63. Compiler
Parser
Analyzer

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