SlideShare a Scribd company logo
1 of 42
Download to read offline
Tooling for the JavaScript era
                                     Andy Clement, Staff Engineer
                                     Martin Lippert, Staff Engineer
                           Andrew Eisenberg, Senior Member of Technical Staff


© 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
Speaker Introduction
              •    Andy Clement
                    –  Staff Engineer, R&D
                    –  Lead, language lab

              •    Martin Lippert
                    –  Staff Engineer, R&D
                    –  Lead, development tools

              •    Andrew Eisenberg
                    –  Senior Member of Technical Staff, R&D
                    –  Lead, Groovy-Eclipse

2
Disclaimer
•  This session may contain product features that are
   currently under development.
•  This session/overview of the new technology represents
   no commitment from SpringSource/VMware to deliver
   these features in any generally available product. 
•  Features are subject to change, and must not be
   included in contracts, purchase orders, or sales
   agreements of any kind. 
•  Technical feasibility and market demand will affect final
   delivery. 
•  Pricing and packaging for any new technologies or
   features discussed or presented have not been
   determined
3
Agenda
•    The basic idea
•    Observations and assumptions
•    Our prototypes
•    Where are we heading?




4
The basic idea
•  Where are IDE and development tools in general heading
   towards?
    –    Big integrated desktop IDE?
    –    Lightweight editors?
    –    Browser-based IDEs?
    –    Does Cloud have an impact?

•  Why can Google search the web in 10ms, but it takes
   1000ms or more for my IDE to lookup a type hierarchy

5
Exploring…
•  Lets do things differently:
    –    Browser-based
    –    Lightweight instead of fully integrated IDEs
    –    Maybe cloud hosted
    –    Innovate…


•  And see what comes out of that…



6
Exploration
•  Non-coding work:
    –  Talk to people
    –  Ask questions
    –  Scribble
•  Coding work:
    –  Prototyping
    –  Shipping early



7
JavaScript
•  Increasing in popularity
•  Not only web UI gadgets anymore
    –  Serious large-scale apps in JavaScript
    –  Server-side JS (node.js)
•  Other dialects interesting: CoffeeScript, TypeScript
    –  JS is first priority
•  Fits nicely into our scope for browser-based tooling



8
Results and assumptions #1
•  Lightweight beats heavyweight
    –  Simple editors still the most popular JS tool
    –  Don’t want the uber tool


•  Speed is essential (startup, coding, typing)
    –  No acceptance for long startups, delay in typing




9
Results and assumptions #2
•  Real code comprehension missed a lot
     –  People would love to get good content-assist and code-
        completion
        •  Aware of module definitions (AMD, RequireJS, …)
        •  Aware of frameworks
     –  Fast/accurate navigation
     –  Early error indication (more than just JSLint)




10
Results and assumptions #3
•  Debugging is great, but good integration with editing is
   missing
     –  Workarounds exist (for Chrome Dev Tools, for example)
     –  Better integration would be good

•  Connecting with existing popular tools




11
Results and assumptions #4
•  A cloud-hosted workspace?
     –  Need to work offline
     –  Need to use other tools on my machine on the files

•  A cloud-hosted tool?
     –    Collaborative editing
     –    Social coding
     –    Zero installation – always up-to-date
     –    Technically using cloud (aka unlimited) resources
12
Let’s prototype




13
Prototyping
•  Build some basic tools with key features that meet user
   need
•  Make them available
•  Collect feedback, adjust direction as necessary




14
Prototype #1
•  Build:
     –  Editing tool with server side ‘cloud’ workspace
        •  browser based editing experience
     –  Good content assist
     –  Reuse tech where appropriate
     –  No preference on backend technology




15
Prototype #1: Eclipse Orion

         “Browser-based open tool integration platform”

•    Eclipse Project
•    Client/Server tool
•    Orion is a tools platform
•    Not an IDE in a browser tab



16
Prototype #1: Features
•  An Eclipse Orion deployed internally in VMware
•  With extra capabilities:
     –  Better content assist than real orion
     –  Basic command line console included for running some
        server side commands
        •  e.g. vmc push to Cloud Foundry


•  What happened?


17
What happened?
•  Very little interest
     –  Developers are busy people
     –  The benefits of basic content assist did not outweigh cost of
        giving up their environment
     –  Developers happier with code on their machine
     –  Even just to ‘try it out’ they had to migrate some code over
        to the cloud workspace




18
Prototype #2
•  Learn from our own experiences extending Orion
     –  What do we need?


•  Create a tool that would support local or remote
   workspace
     –  Continues to be a web app, just with a local server
     –  Can optionally have the server deployed remotely
     –  Keep a low adoption barrier


19
Prototype #2
•  Could use Orion, but:
     –  UI for Orion not quite as snappy/fast as we wanted
     –  Server is a bit heavy
     –  Orion offered more facilities than we wanted
        •  Another Git UI
        •  Multi user setup




20
Prototype #2
•  Reuse Eclipse Orion Code Editor
•  Implement alternative lightweight backend
•  Focus on:
     –  Speed (startup and usage)
     –  Code awareness:
        •  Static code analysis
        •  Content assist
             –  Module system comprehension



21
Scripted Architecture: client side
•  Eclipse Orion
     –  Just the editor: familiar to Eclipse users
•  Dojo for now
•  Inferencing engine relying on
     –  Recoverable JS parsing: esprima
     –  Dependency analysis code




22
Scripted Architecture: server side
•  Small Node.js server
     –  Serving the client html/js
     –  Serving requests from the client
        •  ‘give me the contents of file X’
        •  ‘search for this string’
        •  ‘tell me the dependencies of this JS file’
•  Restarted on each editor launch
     –  Likely to eventually be a long running process


23
Scripted
•  Much more positive feedback internally
•  Decided to open source to access a wider audience
•  Now on github:
     https://github.com/scripted-editor/scripted




24
Scripted: Features
•  Fast – startup and during use
•  Code awareness
     –  JSLint early error indication
     –  Module system awareness, transitive dependency analysis
     –  JSDoc comprehension
•  Basic editor configuration
•  Basic navigator
•  Side-panel

25
Scripted Demo




26
Scripted – near term goals
•  Even more code awareness
     –  Even better content assist
     –  More module systems
     –  Maybe always ON content assist…
•  Plugin model
     –  Extend it with JavaScript




27
Scripted – near term goals
•  More side-panel contents
     –  More panes (documentation, search results)
     –  Automated management of panes by the editor
•  UI overhaul
     –  we’re smarter than we were when we started !




28
Scripted – longer term goals
•  Debugging
     –  Not reinventing CDT
     –  Helping developers in callback hell
     –  Step into server from client
•  Selected tool integration
     –  But not replacing command line tools, e.g. Git
•  Even further out
     –  Other languages (Java)


29
Some images from the drawing board…




30
Original overlays instead of side panel
                                Discarded
                                •  Covering the user
                                   code just too irritating




31
Other side panel entries
                           Will be implementing
                           •  Documentation pane
                           •  Search results pane
                           •  Panes pinnable

                           •  More panes to follow




32
Navigator filters
                    Still exploring
                    •  Filters try to ensure
                       navigator content
                       relevant
                    •  Tag based filtering with
                       auto-tagging




33
Scrolling side panel
                       Still exploring
                       •  Confusing ‘scroll’ story




34
‘Overview’ for side panel entries
                                Unlikely to pursue
                                •  Overview doesn’t
                                   communicate enough
                                   information
                                •  Still somewhat fiddly
                                   scrolling story




35
Accordion style side panel
                             Still exploring
                             •  How lightweight can the
                                collapsed entries be?
                             •  Easier scroll story




36
Smart global search box
                          Likely to implement
                          •  One place to search for
                             anything




37
Git integration
                  Likely to implement
                  •  Initially just a browsing
                     tool for comments/
                     commit changes
                  •  Timeline feature (at the
                     bottom) still work in
                     progress




38
Feedback welcome
•  Having a reaction to some of those images?
•  Let us know!

     https://groups.google.com/forum/#!forum/scripted-dev

     https://issuetracker.springsource.com/browse/scripted




39
Summary
•  The basic idea
•  Observations and assumptions
•  The prototypes
     –  The Scripted Code Editor
•  Where are we heading?




40
Any questions?
•  Google Group: scripted-dev
     https://groups.google.com/forum/#!forum/scripted-dev
•  Project page:
          https://github.com/scripted-editor/scripted

     Andy Clement          Martin Lippert        Andrew Eisenberg
     aclement@vmware.com   mlippert@vmware.com   aeisenberg@vmware.com
     @andy_clement         @martinlippert        @werdnagreb




41
The End




42

More Related Content

What's hot

Stop Building It From Scratch: Creating Reusable eLearning Components
Stop Building It From Scratch: Creating Reusable eLearning ComponentsStop Building It From Scratch: Creating Reusable eLearning Components
Stop Building It From Scratch: Creating Reusable eLearning ComponentsChad Udell
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?Viswanath J
 
Mozilla + Rust at PCU Manila 02 DEC 2016
Mozilla + Rust at PCU Manila 02 DEC 2016Mozilla + Rust at PCU Manila 02 DEC 2016
Mozilla + Rust at PCU Manila 02 DEC 2016Robert 'Bob' Reyes
 
Introduction to Java Part-2
Introduction to Java Part-2Introduction to Java Part-2
Introduction to Java Part-2RatnaJava
 
Introduction to Java
Introduction to Java Introduction to Java
Introduction to Java RatnaJava
 
Discover Qt Learning and Certification
Discover Qt Learning and CertificationDiscover Qt Learning and Certification
Discover Qt Learning and Certificationaccount inactive
 
Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Viswanath J
 
Java gc
Java gcJava gc
Java gcNiit
 
Next-gen IDE v2 - OpenSlava 2013-10-11
Next-gen IDE v2 - OpenSlava 2013-10-11Next-gen IDE v2 - OpenSlava 2013-10-11
Next-gen IDE v2 - OpenSlava 2013-10-11Jorge Hidalgo
 
Cerebro general overiew eng
Cerebro general overiew engCerebro general overiew eng
Cerebro general overiew engCineSoft
 

What's hot (12)

Stop Building It From Scratch: Creating Reusable eLearning Components
Stop Building It From Scratch: Creating Reusable eLearning ComponentsStop Building It From Scratch: Creating Reusable eLearning Components
Stop Building It From Scratch: Creating Reusable eLearning Components
 
Android : How Do I Code Thee?
Android : How Do I Code Thee?Android : How Do I Code Thee?
Android : How Do I Code Thee?
 
Mazenet
MazenetMazenet
Mazenet
 
Mozilla + Rust at PCU Manila 02 DEC 2016
Mozilla + Rust at PCU Manila 02 DEC 2016Mozilla + Rust at PCU Manila 02 DEC 2016
Mozilla + Rust at PCU Manila 02 DEC 2016
 
Introduction to Java Part-2
Introduction to Java Part-2Introduction to Java Part-2
Introduction to Java Part-2
 
Introduction to Java
Introduction to Java Introduction to Java
Introduction to Java
 
Discover Qt Learning and Certification
Discover Qt Learning and CertificationDiscover Qt Learning and Certification
Discover Qt Learning and Certification
 
Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009Inside the Android application framework - Google I/O 2009
Inside the Android application framework - Google I/O 2009
 
Zend
ZendZend
Zend
 
Java gc
Java gcJava gc
Java gc
 
Next-gen IDE v2 - OpenSlava 2013-10-11
Next-gen IDE v2 - OpenSlava 2013-10-11Next-gen IDE v2 - OpenSlava 2013-10-11
Next-gen IDE v2 - OpenSlava 2013-10-11
 
Cerebro general overiew eng
Cerebro general overiew engCerebro general overiew eng
Cerebro general overiew eng
 

Viewers also liked

Coffee@DBG - TechBites Sept 2015
Coffee@DBG - TechBites Sept 2015Coffee@DBG - TechBites Sept 2015
Coffee@DBG - TechBites Sept 2015Deepu S Nath
 
Getting ready for the cloud iaa s
Getting ready for the cloud iaa sGetting ready for the cloud iaa s
Getting ready for the cloud iaa sDeepu S Nath
 
Coffee@DBG - Evolution of html
Coffee@DBG - Evolution of htmlCoffee@DBG - Evolution of html
Coffee@DBG - Evolution of htmlDeepu S Nath
 
Cross Device UI Designing
Cross Device UI DesigningCross Device UI Designing
Cross Device UI DesigningDeepu S Nath
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanDeepu S Nath
 

Viewers also liked (6)

Coffee@DBG - TechBites Sept 2015
Coffee@DBG - TechBites Sept 2015Coffee@DBG - TechBites Sept 2015
Coffee@DBG - TechBites Sept 2015
 
Getting ready for the cloud iaa s
Getting ready for the cloud iaa sGetting ready for the cloud iaa s
Getting ready for the cloud iaa s
 
Coffee@DBG - Evolution of html
Coffee@DBG - Evolution of htmlCoffee@DBG - Evolution of html
Coffee@DBG - Evolution of html
 
Tech bites
Tech bitesTech bites
Tech bites
 
Cross Device UI Designing
Cross Device UI DesigningCross Device UI Designing
Cross Device UI Designing
 
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen VijayanFront end workflow Presentation at Coffee@DBG by Praveen Vijayan
Front end workflow Presentation at Coffee@DBG by Praveen Vijayan
 

Similar to Tooling for the JavaScript Era

Devconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedDevconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedAlexander Makarov
 
Reviewing CPAN modules
Reviewing CPAN modulesReviewing CPAN modules
Reviewing CPAN modulesneilbowers
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022 Michael Yagudaev
 
Everyone wants (someone else) to do it: writing documentation for open source...
Everyone wants (someone else) to do it: writing documentation for open source...Everyone wants (someone else) to do it: writing documentation for open source...
Everyone wants (someone else) to do it: writing documentation for open source...Jody Garnett
 
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchAugust Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchHoward Greenberg
 
The Architect Way - JSCamp.asia 2012
The Architect Way - JSCamp.asia 2012The Architect Way - JSCamp.asia 2012
The Architect Way - JSCamp.asia 2012Jan Jongboom
 
Security research over Windows #defcon china
Security research over Windows #defcon chinaSecurity research over Windows #defcon china
Security research over Windows #defcon chinaPeter Hlavaty
 
AD1545 - Extending the XPages Extension Library
AD1545 - Extending the XPages Extension LibraryAD1545 - Extending the XPages Extension Library
AD1545 - Extending the XPages Extension Librarypaidi_ed
 
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013Christopher Curtin
 
Talent42 2014 Sam Wholley -
Talent42 2014 Sam Wholley - Talent42 2014 Sam Wholley -
Talent42 2014 Sam Wholley - Talent42
 
Lean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersLean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersSPC Adriatics
 
Agile Software Development in practice: Experience, Tips and Tools from the T...
Agile Software Development in practice: Experience, Tips and Tools from the T...Agile Software Development in practice: Experience, Tips and Tools from the T...
Agile Software Development in practice: Experience, Tips and Tools from the T...Valerie Puffet-Michel
 
Xcode, Basics and Beyond
Xcode, Basics and BeyondXcode, Basics and Beyond
Xcode, Basics and Beyondrsebbe
 
Make It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version ControlMake It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version Controlindiver
 
Introducing systems analysis, design & development Concepts
Introducing systems analysis, design & development ConceptsIntroducing systems analysis, design & development Concepts
Introducing systems analysis, design & development ConceptsShafiul Azam Chowdhury
 
CS101- Introduction to Computing- Lecture 45
CS101- Introduction to Computing- Lecture 45CS101- Introduction to Computing- Lecture 45
CS101- Introduction to Computing- Lecture 45Bilal Ahmed
 
Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...
 Easing Cloud Migrations with Software Pipelines as a Service - Christopher J... Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...
Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...AWS Chicago
 
Lean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentLean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentBill Ayers
 

Similar to Tooling for the JavaScript Era (20)

Devconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developedDevconf 2011 - PHP - How Yii framework is developed
Devconf 2011 - PHP - How Yii framework is developed
 
Solr pattern
Solr patternSolr pattern
Solr pattern
 
Reviewing CPAN modules
Reviewing CPAN modulesReviewing CPAN modules
Reviewing CPAN modules
 
JavaFX 101
JavaFX 101JavaFX 101
JavaFX 101
 
Prototyping like it is 2022
Prototyping like it is 2022 Prototyping like it is 2022
Prototyping like it is 2022
 
Everyone wants (someone else) to do it: writing documentation for open source...
Everyone wants (someone else) to do it: writing documentation for open source...Everyone wants (someone else) to do it: writing documentation for open source...
Everyone wants (someone else) to do it: writing documentation for open source...
 
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's WorkbenchAugust Webinar - Water Cooler Talks: A Look into a Developer's Workbench
August Webinar - Water Cooler Talks: A Look into a Developer's Workbench
 
The Architect Way - JSCamp.asia 2012
The Architect Way - JSCamp.asia 2012The Architect Way - JSCamp.asia 2012
The Architect Way - JSCamp.asia 2012
 
Security research over Windows #defcon china
Security research over Windows #defcon chinaSecurity research over Windows #defcon china
Security research over Windows #defcon china
 
AD1545 - Extending the XPages Extension Library
AD1545 - Extending the XPages Extension LibraryAD1545 - Extending the XPages Extension Library
AD1545 - Extending the XPages Extension Library
 
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013
Kafka 0.8.0 Presentation to Atlanta Java User's Group March 2013
 
Talent42 2014 Sam Wholley -
Talent42 2014 Sam Wholley - Talent42 2014 Sam Wholley -
Talent42 2014 Sam Wholley -
 
Lean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill AyersLean-Agile Development with SharePoint - Bill Ayers
Lean-Agile Development with SharePoint - Bill Ayers
 
Agile Software Development in practice: Experience, Tips and Tools from the T...
Agile Software Development in practice: Experience, Tips and Tools from the T...Agile Software Development in practice: Experience, Tips and Tools from the T...
Agile Software Development in practice: Experience, Tips and Tools from the T...
 
Xcode, Basics and Beyond
Xcode, Basics and BeyondXcode, Basics and Beyond
Xcode, Basics and Beyond
 
Make It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version ControlMake It Cooler: Using Decentralized Version Control
Make It Cooler: Using Decentralized Version Control
 
Introducing systems analysis, design & development Concepts
Introducing systems analysis, design & development ConceptsIntroducing systems analysis, design & development Concepts
Introducing systems analysis, design & development Concepts
 
CS101- Introduction to Computing- Lecture 45
CS101- Introduction to Computing- Lecture 45CS101- Introduction to Computing- Lecture 45
CS101- Introduction to Computing- Lecture 45
 
Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...
 Easing Cloud Migrations with Software Pipelines as a Service - Christopher J... Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...
Easing Cloud Migrations with Software Pipelines as a Service - Christopher J...
 
Lean-Agile SharePoint Development
Lean-Agile SharePoint DevelopmentLean-Agile SharePoint Development
Lean-Agile SharePoint Development
 

More from martinlippert

WJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in EclipseWJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in Eclipsemartinlippert
 
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundry
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud FoundryWJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundry
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundrymartinlippert
 
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...martinlippert
 
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun againEclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun againmartinlippert
 
Jax2013 PaaS-Parade - Part 1: Cloud Foundry
Jax2013 PaaS-Parade - Part 1: Cloud FoundryJax2013 PaaS-Parade - Part 1: Cloud Foundry
Jax2013 PaaS-Parade - Part 1: Cloud Foundrymartinlippert
 
JAX 2013: Modern Architectures with Spring and JavaScript
JAX 2013: Modern Architectures with Spring and JavaScriptJAX 2013: Modern Architectures with Spring and JavaScript
JAX 2013: Modern Architectures with Spring and JavaScriptmartinlippert
 
JAX 2013: Introducing Eclipse Orion
JAX 2013: Introducing Eclipse OrionJAX 2013: Introducing Eclipse Orion
JAX 2013: Introducing Eclipse Orionmartinlippert
 
Spring Tooling: What's new and what's coming
Spring Tooling: What's new and what's comingSpring Tooling: What's new and what's coming
Spring Tooling: What's new and what's comingmartinlippert
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptmartinlippert
 
Scripted - Embracing Eclipse Orion
Scripted - Embracing Eclipse OrionScripted - Embracing Eclipse Orion
Scripted - Embracing Eclipse Orionmartinlippert
 
PaaS Parade - Cloud Foundry
PaaS Parade - Cloud FoundryPaaS Parade - Cloud Foundry
PaaS Parade - Cloud Foundrymartinlippert
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?martinlippert
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptmartinlippert
 
What's new with tooling for Spring, Grails, and the Cloud
What's new with tooling for Spring, Grails, and the CloudWhat's new with tooling for Spring, Grails, and the Cloud
What's new with tooling for Spring, Grails, and the Cloudmartinlippert
 
Embracing Eclipse Orion
Embracing Eclipse OrionEmbracing Eclipse Orion
Embracing Eclipse Orionmartinlippert
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptmartinlippert
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptmartinlippert
 
JAX 2012: Pimp Your IDE Productivity
JAX 2012: Pimp Your IDE ProductivityJAX 2012: Pimp Your IDE Productivity
JAX 2012: Pimp Your IDE Productivitymartinlippert
 
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...martinlippert
 
Spring Tooling Update - New & Noteworty (at SpringOne 2011)
Spring Tooling Update - New & Noteworty (at SpringOne 2011)Spring Tooling Update - New & Noteworty (at SpringOne 2011)
Spring Tooling Update - New & Noteworty (at SpringOne 2011)martinlippert
 

More from martinlippert (20)

WJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in EclipseWJAX 2013: Java8-Tooling in Eclipse
WJAX 2013: Java8-Tooling in Eclipse
 
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundry
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud FoundryWJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundry
WJAX 2013: Die PaaS-Parade - Teil 2 - Cloud Foundry
 
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...
EclipseCon-Europe 2013: Optimizing performance - how to make your Eclipse-bas...
 
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun againEclipseCon-Europe 2013: Making the Eclipse IDE fun again
EclipseCon-Europe 2013: Making the Eclipse IDE fun again
 
Jax2013 PaaS-Parade - Part 1: Cloud Foundry
Jax2013 PaaS-Parade - Part 1: Cloud FoundryJax2013 PaaS-Parade - Part 1: Cloud Foundry
Jax2013 PaaS-Parade - Part 1: Cloud Foundry
 
JAX 2013: Modern Architectures with Spring and JavaScript
JAX 2013: Modern Architectures with Spring and JavaScriptJAX 2013: Modern Architectures with Spring and JavaScript
JAX 2013: Modern Architectures with Spring and JavaScript
 
JAX 2013: Introducing Eclipse Orion
JAX 2013: Introducing Eclipse OrionJAX 2013: Introducing Eclipse Orion
JAX 2013: Introducing Eclipse Orion
 
Spring Tooling: What's new and what's coming
Spring Tooling: What's new and what's comingSpring Tooling: What's new and what's coming
Spring Tooling: What's new and what's coming
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
 
Scripted - Embracing Eclipse Orion
Scripted - Embracing Eclipse OrionScripted - Embracing Eclipse Orion
Scripted - Embracing Eclipse Orion
 
PaaS Parade - Cloud Foundry
PaaS Parade - Cloud FoundryPaaS Parade - Cloud Foundry
PaaS Parade - Cloud Foundry
 
Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?Browser and Cloud - The Future of IDEs?
Browser and Cloud - The Future of IDEs?
 
Modern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScriptModern Architectures with Spring and JavaScript
Modern Architectures with Spring and JavaScript
 
What's new with tooling for Spring, Grails, and the Cloud
What's new with tooling for Spring, Grails, and the CloudWhat's new with tooling for Spring, Grails, and the Cloud
What's new with tooling for Spring, Grails, and the Cloud
 
Embracing Eclipse Orion
Embracing Eclipse OrionEmbracing Eclipse Orion
Embracing Eclipse Orion
 
Why SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScriptWhy SOLID matters - even for JavaScript
Why SOLID matters - even for JavaScript
 
JAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScriptJAX 2012: Moderne Architektur mit Spring und JavaScript
JAX 2012: Moderne Architektur mit Spring und JavaScript
 
JAX 2012: Pimp Your IDE Productivity
JAX 2012: Pimp Your IDE ProductivityJAX 2012: Pimp Your IDE Productivity
JAX 2012: Pimp Your IDE Productivity
 
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...
WaveMaker - Spring Roo - SpringSource Tool Suite - Choosing the right tool fo...
 
Spring Tooling Update - New & Noteworty (at SpringOne 2011)
Spring Tooling Update - New & Noteworty (at SpringOne 2011)Spring Tooling Update - New & Noteworty (at SpringOne 2011)
Spring Tooling Update - New & Noteworty (at SpringOne 2011)
 

Tooling for the JavaScript Era

  • 1. Tooling for the JavaScript era Andy Clement, Staff Engineer Martin Lippert, Staff Engineer Andrew Eisenberg, Senior Member of Technical Staff © 2012 SpringOne 2GX. All rights reserved. Do not distribute without permission.
  • 2. Speaker Introduction •  Andy Clement –  Staff Engineer, R&D –  Lead, language lab •  Martin Lippert –  Staff Engineer, R&D –  Lead, development tools •  Andrew Eisenberg –  Senior Member of Technical Staff, R&D –  Lead, Groovy-Eclipse 2
  • 3. Disclaimer •  This session may contain product features that are currently under development. •  This session/overview of the new technology represents no commitment from SpringSource/VMware to deliver these features in any generally available product.  •  Features are subject to change, and must not be included in contracts, purchase orders, or sales agreements of any kind.  •  Technical feasibility and market demand will affect final delivery.  •  Pricing and packaging for any new technologies or features discussed or presented have not been determined 3
  • 4. Agenda •  The basic idea •  Observations and assumptions •  Our prototypes •  Where are we heading? 4
  • 5. The basic idea •  Where are IDE and development tools in general heading towards? –  Big integrated desktop IDE? –  Lightweight editors? –  Browser-based IDEs? –  Does Cloud have an impact? •  Why can Google search the web in 10ms, but it takes 1000ms or more for my IDE to lookup a type hierarchy 5
  • 6. Exploring… •  Lets do things differently: –  Browser-based –  Lightweight instead of fully integrated IDEs –  Maybe cloud hosted –  Innovate… •  And see what comes out of that… 6
  • 7. Exploration •  Non-coding work: –  Talk to people –  Ask questions –  Scribble •  Coding work: –  Prototyping –  Shipping early 7
  • 8. JavaScript •  Increasing in popularity •  Not only web UI gadgets anymore –  Serious large-scale apps in JavaScript –  Server-side JS (node.js) •  Other dialects interesting: CoffeeScript, TypeScript –  JS is first priority •  Fits nicely into our scope for browser-based tooling 8
  • 9. Results and assumptions #1 •  Lightweight beats heavyweight –  Simple editors still the most popular JS tool –  Don’t want the uber tool •  Speed is essential (startup, coding, typing) –  No acceptance for long startups, delay in typing 9
  • 10. Results and assumptions #2 •  Real code comprehension missed a lot –  People would love to get good content-assist and code- completion •  Aware of module definitions (AMD, RequireJS, …) •  Aware of frameworks –  Fast/accurate navigation –  Early error indication (more than just JSLint) 10
  • 11. Results and assumptions #3 •  Debugging is great, but good integration with editing is missing –  Workarounds exist (for Chrome Dev Tools, for example) –  Better integration would be good •  Connecting with existing popular tools 11
  • 12. Results and assumptions #4 •  A cloud-hosted workspace? –  Need to work offline –  Need to use other tools on my machine on the files •  A cloud-hosted tool? –  Collaborative editing –  Social coding –  Zero installation – always up-to-date –  Technically using cloud (aka unlimited) resources 12
  • 14. Prototyping •  Build some basic tools with key features that meet user need •  Make them available •  Collect feedback, adjust direction as necessary 14
  • 15. Prototype #1 •  Build: –  Editing tool with server side ‘cloud’ workspace •  browser based editing experience –  Good content assist –  Reuse tech where appropriate –  No preference on backend technology 15
  • 16. Prototype #1: Eclipse Orion “Browser-based open tool integration platform” •  Eclipse Project •  Client/Server tool •  Orion is a tools platform •  Not an IDE in a browser tab 16
  • 17. Prototype #1: Features •  An Eclipse Orion deployed internally in VMware •  With extra capabilities: –  Better content assist than real orion –  Basic command line console included for running some server side commands •  e.g. vmc push to Cloud Foundry •  What happened? 17
  • 18. What happened? •  Very little interest –  Developers are busy people –  The benefits of basic content assist did not outweigh cost of giving up their environment –  Developers happier with code on their machine –  Even just to ‘try it out’ they had to migrate some code over to the cloud workspace 18
  • 19. Prototype #2 •  Learn from our own experiences extending Orion –  What do we need? •  Create a tool that would support local or remote workspace –  Continues to be a web app, just with a local server –  Can optionally have the server deployed remotely –  Keep a low adoption barrier 19
  • 20. Prototype #2 •  Could use Orion, but: –  UI for Orion not quite as snappy/fast as we wanted –  Server is a bit heavy –  Orion offered more facilities than we wanted •  Another Git UI •  Multi user setup 20
  • 21. Prototype #2 •  Reuse Eclipse Orion Code Editor •  Implement alternative lightweight backend •  Focus on: –  Speed (startup and usage) –  Code awareness: •  Static code analysis •  Content assist –  Module system comprehension 21
  • 22. Scripted Architecture: client side •  Eclipse Orion –  Just the editor: familiar to Eclipse users •  Dojo for now •  Inferencing engine relying on –  Recoverable JS parsing: esprima –  Dependency analysis code 22
  • 23. Scripted Architecture: server side •  Small Node.js server –  Serving the client html/js –  Serving requests from the client •  ‘give me the contents of file X’ •  ‘search for this string’ •  ‘tell me the dependencies of this JS file’ •  Restarted on each editor launch –  Likely to eventually be a long running process 23
  • 24. Scripted •  Much more positive feedback internally •  Decided to open source to access a wider audience •  Now on github: https://github.com/scripted-editor/scripted 24
  • 25. Scripted: Features •  Fast – startup and during use •  Code awareness –  JSLint early error indication –  Module system awareness, transitive dependency analysis –  JSDoc comprehension •  Basic editor configuration •  Basic navigator •  Side-panel 25
  • 27. Scripted – near term goals •  Even more code awareness –  Even better content assist –  More module systems –  Maybe always ON content assist… •  Plugin model –  Extend it with JavaScript 27
  • 28. Scripted – near term goals •  More side-panel contents –  More panes (documentation, search results) –  Automated management of panes by the editor •  UI overhaul –  we’re smarter than we were when we started ! 28
  • 29. Scripted – longer term goals •  Debugging –  Not reinventing CDT –  Helping developers in callback hell –  Step into server from client •  Selected tool integration –  But not replacing command line tools, e.g. Git •  Even further out –  Other languages (Java) 29
  • 30. Some images from the drawing board… 30
  • 31. Original overlays instead of side panel Discarded •  Covering the user code just too irritating 31
  • 32. Other side panel entries Will be implementing •  Documentation pane •  Search results pane •  Panes pinnable •  More panes to follow 32
  • 33. Navigator filters Still exploring •  Filters try to ensure navigator content relevant •  Tag based filtering with auto-tagging 33
  • 34. Scrolling side panel Still exploring •  Confusing ‘scroll’ story 34
  • 35. ‘Overview’ for side panel entries Unlikely to pursue •  Overview doesn’t communicate enough information •  Still somewhat fiddly scrolling story 35
  • 36. Accordion style side panel Still exploring •  How lightweight can the collapsed entries be? •  Easier scroll story 36
  • 37. Smart global search box Likely to implement •  One place to search for anything 37
  • 38. Git integration Likely to implement •  Initially just a browsing tool for comments/ commit changes •  Timeline feature (at the bottom) still work in progress 38
  • 39. Feedback welcome •  Having a reaction to some of those images? •  Let us know! https://groups.google.com/forum/#!forum/scripted-dev https://issuetracker.springsource.com/browse/scripted 39
  • 40. Summary •  The basic idea •  Observations and assumptions •  The prototypes –  The Scripted Code Editor •  Where are we heading? 40
  • 41. Any questions? •  Google Group: scripted-dev https://groups.google.com/forum/#!forum/scripted-dev •  Project page: https://github.com/scripted-editor/scripted Andy Clement Martin Lippert Andrew Eisenberg aclement@vmware.com mlippert@vmware.com aeisenberg@vmware.com @andy_clement @martinlippert @werdnagreb 41