Code-Hub
1 like1,165 views
The document discusses Codehub, a web-based integrated development environment (IDE) that simplifies programming by automating development tasks such as environment setup, revision control, dependency management, and deployment. It highlights the Codehub architecture, its implementation using various technologies, and its educational applications in courses, particularly focusing on high school students learning interactive graphics programming. Additionally, the document identifies shortcomings and suggests future improvements to enhance usability and functionality.
Code-Hub
- 2. Programming is Overly Complex ● Development environment setup ● Revision control management ● Dependency management ● Deployment = time and effort learning tools, not writing code. ● The barrier to entry is higher than necessary ● This can be solved through automation
- 3. Simplification by Automation Automation of what? ● Development environment setup ○ It's all on the server ○ Just open a Web page ● Revision control management ○ It's all on the server ○ Just click "save" ● Dependency management ○ It's all on the server ○ Just use "require(moduleName)' ● Deployment ○ Just click "run" and share that link
- 4. Prior Art in "Web-Based IDEs" We consider a "Web-Based IDE" something that ● runs in a browser ● lets users edit, save, and run source code The following are notable examples: ● JSBin ● JSFiddle ● CSSDesk ● Cloud9 IDE ● GitHub
- 5. Prior Art - JSBin code, run, save, deploy - in the browser try it!
- 6. Prior Art - JSFiddle code, run, save, deploy - in the browser
- 7. Prior Art - CSSDesk code, run, save, deploy (CSS) - in the browser
- 8. Prior Art - Cloud9 IDE ● Full featured IDE, runs Node.js code ● Integrates with GitHub and Heroku ● Integrated terminal for Git and Unix commands
- 9. Prior Art - GitHub ● An in-browser text file editor for Git repositories ● Can be coupled with "GitHub Pages", a service that serves GitHub repositories as Web sites
- 10. Prior Art in Software Repositories Developers can publish reusable packages with support for dependency management ● The Maven Repository (for Java) ● RubyGems (for Ruby) ● The Node Package Manager (for Node.js) ● The CommonJS module specification ● Asynchronous Module Definition (AMD) ● The Require.js AMD module loader ● ...many more out there ● The point: packages and dependency management empower the platforms
- 11. The CodeHub Vision No existing tools have all of these features: ● Web-based source code editing ● Definition and use of reusable modules ● Web-based deployment, with ● Automated dependency management Such a tool would support ● Computer science education ● a public Wikipedia-like software repository ● a research testbed for interactive graphics
- 12. The CodeHub Architecture ● Limited to JavaScript and HTML software ● Based on CommonJS modules ● All versions are published ○ So when an application is linked to or embedded, its behavior does not change (or break) over time ● The server tracks ○ Script content, for all versions ○ The dependency graph, for all versions ● Scripts can be run ○ At runtime, dependencies are evaluated and bundled together into a single page ○ Compilation strategy from a CommonJS Wiki Page
- 13. CodeHub Scripts ● Every piece of code stored is a "script" ● Each script has an id number ● Each script version has a revision number ● Saving a script creates a new revision ● All script revisions are published ○ For example http://code-hub.org/edit/7.1 edits the script whose id is 7, revision number 1 ● There are three types of scripts: ○ Modules ○ Templates ○ Applications
- 14. CodeHub Modules ● CodeHub supports CommonJS Modules ● Each module must have a unique name ● Modules can be required with the syntax foo = require('foo') ● Modules can be defined with the syntax @module foo ● Modules define their exported API by adding properties to an exports object
- 15. CodeHub Templates ● Templates are HTML pages with placeholders of the form ${parameterName} ● Parameter values are passed in from applications that use the template ● ${scripts}gets replaced by script tags including application source code ○ dependencies are bundled together and included also ● Each template has a unique name ● Templates can be defined with the syntax @template templateName
- 16. CodeHub Applications ● Applications are scripts that can be run ● Applications can depend on modules ● Applications are defined using the syntax @app template templateName ● Applications can pass arbitrary parameters to the template using the syntax @app parameterName value
- 17. CodeHub Implementation CodeHub was implemented using ● Node.js as a server platform ● The Express.js Web Framework ○ With Jade and Markdown templates ● MongoDB via the Mongoose API ● Git via the Node.js child process API ● Hosted on the Rackspace cloud ○ In a single Ubuntu server VM ● Live now at code-hub.org
- 18. CodeHub Screenshots: New Script and Script List ddfds
- 21. Case Study: An Interactive Graphics Course ● Web-based IDEs were used in a course ○ "Computer Programming and Interactive Graphics" ○ a 50-hour summer course for high school students ○ of the MIT Junction program, July-August 2012 ● The class blog contains ○ Links to the "edit" pages in CodeHub ○ Embedded programs from CodeHub using iFrames ○ Comment sections for students to post their work ● The class used ○ JSBin ○ CodeHub ○ Cloud9 IDE ○ GitHub and GitHub Pages
- 22. Case Study: An Interactive Graphics Course ● Students were first exposed to JSBin ○ Basic JavaScript and HTML5 Canvas features were introduced in "code as I code" fashion using JSBin ○ JSBin's "auto-run" feature provided instant feedback ● Students were then exposed to CodeHub ○ ..but did not use the module functionality ■ as it was beyond their knowledge ○ ..but preferred JSBin because ■ The editor and output are on the same page ■ The code is re-run automatically when changed ● Some students liked ○ the simplicity of CodeHub ○ that CodeHub adds nothing extra when running ■ whereas JSBin adds an "edit in JSBin" button
- 23. Case Study: An Interactive Graphics Course ● Students were then exposed to GitHub ○ Students created GitHub accounts and a repository ○ Students used the in-browser GitHub editor ■ just for learning basic Markdown ○ Students set up Web sites using GitHub Pages ● Students were then exposed to Cloud9 IDE ○ Students learned the basics of Git, and merging ○ Students used Cloud9 IDE to ■ construct an interactive graphical program ■ publish it to the Web using GitHub Pages ● The overall response was fear and dislike ○ Students perceived GitHub and Cloud9 IDE as overly complex and cumbersome to use ○ JSBin was their most preferred tool overall
- 24. Case Study: An Interactive Graphics Course Blog Links to source code in CodeHub The running program embedded directly from CodeHub using an iFrame
- 25. Case Study: An Interactive Graphics Course Blog Comments allowed students to showcase their work and collaborate
- 26. Case Study: An Interactive Graphics Course Blog A starting point for graphics programming was provided.
- 27. Shortcomings ● Apps do not have names ○ So the list of scripts includes things like "12.4" ○ Perhaps apps should have names ● Modules are in a single global namespace ○ So modules for specific applications might use "appName.moduleName" for the module name ● Modules are editable by anyone ○ Therefore breakable by anyone ○ No built-in concept of ownership or authorship ● Trumped by JSBin in terms of usability ○ CodeHub needs the "Auto-run JS" feature
- 28. Future Work ● A "showcase" feature ○ Apps can be showcased on their own page ○ Including a comments section ○ This would enable discussion-based collaboration ● The "Auto-run JS" feature from JSBin ● Visualization of dependencies and apps ○ The content of CodeHub is difficult to navigate ○ A node-link visualization of the dependency graph would be useful for navigation ● A documentation editor ○ Each module could have documentation ○ This would make CodeHub more usable ● Implementation of Information Visualization software within CodeHub
- 29. The End