Extensions 101 – Attempting to visualize the main processing flow

  • Article

You, like many of us, have probably explored VS Team Services extensions by following Gordon’s A 'Hello World' for VSO Extensions blog post. This post is an attempt to visualise the flow of the sample and inject a few gems to clarify the magic behind the scenes.

image

image

  1. When you build your extension project, the TypeScript (typed superset of JavaScript) files are compiles to plain JavaScript.
  2. Host HTML, CSS and JavaScript static content on your own service, Azure or on VS Team Services directly.
  3. Extensions add new capabilities to VS Team Services using contributions.
  4. When you click on the extension point, the extension manifest defined the web page to be loaded. The example uses a hub, whereby other contributions include menu action, build task, work item extensions, etc.
  5. The configured web page is loaded, in this example index.html is loaded.
  6. VSS.init, part of the Core Client SDK,initiates the handshake with the host window. Find details on IExtensionInitializationOptions and using the new extensibility model in using TypeScript for Visual Studio Online Extensions.
  7. VSS.ready registers the callback that calls require. it gets called once the initial setup/handshake has completed.
  8. VSS.require ensures that the AMD loader from the host is configured and fetches the a script (AMD) module and its dependencies
  9. The app script is asynchronously loaded and run.
  10. In the Time Ticker the app.js JavaScript instantiates a Greeter object and calls its start function, which updates the content element with the time.

You can find a the poster shown above here.

We need your feedback!

Any other information we should add to the poster or this post?

Do you have a question, feedback, or an interest to join the early adopters? Add a comment below or ping us here.