Skip to main content
System StatusContact Support
VersionOne Community

How Continuum Canvas Works

This feature is available in Ultimate edition only.

editions-u.png

Overview

Learn how Continuum Canvas is unique in it's approach to building a web application.

NJATL (Not Just Another Templating Language)

A quick Internet search will return literally dozens of very popular web templating frameworks. Many of these have a wide adoption and almost a religious following. Most of these tools fall into two categories: Static Page Generators and Server-side Systems.

There are many WYSIWYG editors available today that generate static HTML pages. Using these tools, a developer can build a web site with ease using built in themes. Many of these tools have a templating subsystem, where pages can be generated containing dynamic content.

Examples of Server-side Systems include lower level tools like ASP.Net and PHP, and frameworks like Django.

How is Canvas the same?

Canvas has common features with both static page generators as well as server side systems.

  • A Canvas resource can be as simple as a static html page.

  • That page can be parsed on the server before delivery, and certain variable placeholders replaced with dynamic content.

  • The dynamic content of a page can come from databases, XML/JSON files, and other sources.

How is Canvas different?

Unlike other tools, the Canvas editor isn't a WYSIWYG editor. Developers aren't constrained by the features of the editor, bothered by the editor trying to 'help you', or limited to the provided templates or themes. It's a little more hard-core, but there are no limitations on what sort of output Canvas can deliver over HTTP. You don't even have to use the provided Canvas editor - just use your favorite text editor.

Unlike existing content frameworks, Canvas doesn't use an embedded complex language. Most framework tools allow you to build an html document (which is already hard on the eyes), and inside that document you then add complex code escaped in special brackets. Add CSS and Javascript to this, and your "page" is now a text file with at least four different languages, each with different syntax rules!

Canvas splits these different technologies into their own separate resources. A Canvas Layout is not a web page - it's a definition document that describes how to construct an HTTP response. A Layout definition can contain multiple html, javascript and css resources that will be assembled in order when requested.

A developer will store these different components in an organized library, and each file will play nicely with any editors formatting rules. When editing a Javascript file, the developer will be experiencing Javascript. This approach greatly reduces errors due to the mental challenges of editing many inline technologies at once!

Ajax for Everyone

One of the cornerstones of "Web 2.0" is AJAX - the ability to insert/update content into a web page without a round trip to the server and a page refresh.

AJAX typically comes with a pretty technical overhead - it's not even an option unless you're building your application in a lower level technology like ASP.NET or PHP and know how to talk to your databases and other data sources. If you are tasked with trying to access data in a legacy system and make it available in a shiny new web interface, there are challenges.

Canvas allows a developer to build a user-defined web api without the need to change any code in the existing source application. Canvas developers can easily build a rich experience for their users. No compiling code, no restarting of servers, just define an endpoint and go!

Architecture

There are three distinct components in Canvas:

  • Layouts - definitions of visible pages which a user will view or interact with. These pages will typically make AJAX calls to the ...

  • API - a powerful, user-defined REST API with configurable endpoints and data sources. Typically, API endpoints will interact with data exposed by the ...

  • Data Repository - The Continuum database, or any other RDBMS, NoSql, or other accessible data source.

Data Repository

Canvas is capable of retrieving data from many sources, including MySql, MongoDB, Oracle, SQL Server, Sybase, SQLAnywhere, and HTTP. Additional data sources can be easily added via plugins.

A Data Repository is not actually required - the Canvas API can serve statically defined data from the resource repository or the filesystem on the Canvas server. (Yes, Canvas pages can surface data that was mined out of the dark depths of an enterprise application by Continuum Automate too!)

Furthermore, data can be 'pushed' into the Continuum datastore using the API or command line tools. In many scenarios this is the preferred use - Continuum already provides a flexible MongoDB datastore easily accessible by Canvas.

Canvas API

The Canvas API is a user-defined API. A REST API typically acts as a bridge between a low level system and a consumer - often massaging results into a consistent format - and exposing this to a consumer via an HTTP URL.

Any number of user-defined endpoints (Widgets) can be created. Behind each of these endpoints is a configurable mechanism for obtaining data from any supported Data Repository.

Once the data is obtained, it can be manipulated into the appropiate output format. If the consumer is expecting data, it can send JSON, XML, or any other data format. If the consumer is a web application, the response will typically be rendered into an HTML snippet, and so on.

In addition to simple data delivery, the Canvas API includes a powerful plugin feature, allowing very sophisticated data manipulation using Python.

Canvas Layouts

As described above, HTML templating systems vary greatly in their operation. Canvas Layouts provide a middle ground.

A Canvas Layout is basically an HTML page with styles and a Javascript component. This design concept eliminates the need for an expert programmer to develop sophisticated templates in a proprietary tool, instead it leverages what has now become a commodity skill - HTML/JS web page development.

Domain Model

Integration with the Continuum UI

The Continuum UI has several other Canvas integration points:

The Project Details page displays a Canvas Dashboard with specific metrics for a Project. The Pipeline Details page displays a similar Dashboard with metrics specific to that Pipeline.

Finally, Canvases can be surfaced to Continuum users via:

  • Home - If desired, a customized Canvas tab can appear on the Continuum home page.
  • Menu - Many Canvases can be built to provide custom reporting and such, and are available in the top-right menu in the Continuum UI as Custom Pages.
  • Was this article helpful?