• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Remix Your Language Tooling (JSConf.eu 2012)
 

Remix Your Language Tooling (JSConf.eu 2012)

on

  • 1,766 views

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 ...

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.

Statistics

Views

Total Views
1,766
Views on SlideShare
1,465
Embed Views
301

Actions

Likes
2
Downloads
3
Comments
0

7 Embeds 301

http://lanyrd.com 264
https://twitter.com 26
https://si0.twimg.com 4
http://www.linkedin.com 3
http://feeds.feedburner.com 2
http://moderation.local 1
https://fr.twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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
  • \n not minified; but it’s application-scale\n\n
  • \n not minified; but it’s application-scale\n\n
  • \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
  • \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
  • \n not minified; but it’s application-scale\n\n
  • \n not minified; but it’s application-scale\n\n
  • \n not minified; but it’s application-scale\n\n
  • \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) Remix Your Language Tooling (JSConf.eu 2012) Presentation Transcript

  • 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 afraid I can’t let you do that, Dave.
  • 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 returns a result
  • 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!
  • 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 Eclipse,Charles et al., OOPSLA 2009
  • 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 JSLint
  • 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 http://c9.io