Thursday, August 11, 2011

TextView, Editor and RequireJS

Although Orion currently is using requireJS to load its javascript content, the text view and editor were made to work both with and without requireJS.
This decision created a special case when developing these components.
The textview and editor components are declared in the global namespace (so they work without requireJS) and they are also exported using the define mechanism of requireJS.
When, for example, an editor object needs to reference a textview object, it must do so using the global namespace so that it will still work when requireJS is not present.
In short, all the text view and editor components are implemented without any knowledge of requireJS. At the end of each file the define declaration for the
component implemented in the file is added. For example, in textview.js (where TextView is defined), these lines were added:

if (typeof window !== "undefined" && typeof window.define !== "undefined") {
  define(['orion/textview/textModel', 'orion/textview/keyBinding'], function() {
    return orion.textview;
  });
}

Similar lines were added to every file in text view and editor.

This is transparent to the user and the user can choose to use requireJS or not. Here is example using requireJS:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/requirejs/require.js"></script>
<script type="text/javascript">
  require({
    baseUrl: '',
    paths: {orion: '/orion'}
  });
  require(["test"]);
</script>
</head>
<body>
<div id='textViewDiv' style='width:650px;height:650px;border: 1px solid teal;'></div>
</body>
</html>

In the same folder you need a "test.js" with the following content:

define(["orion/textview/textView"], function(mTextView) {
  var options = {
    parent: "textViewDiv",
    stylesheet: "/orion/textview/textview.css",
    fullSelection: true,
    tabSize: 4
  };
  var view = new mTextView.TextView(options);
  view.setText("Welcome to the TextView");
});

Here is the same example without requireJS:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/orion/textview/keyBinding.js"></script>
<script type="text/javascript" src="/orion/textview/textModel.js"></script>
<script type="text/javascript" src="/orion/textview/textView.js"></script>
<script type="text/javascript">
function init() {
  var options = {
    parent: "textViewDiv",
    stylesheet: "/orion/textview/textview.css",
    fullSelection: true,
    tabSize: 4
  };
  var view = new orion.textview.TextView(options);
  view.setText("Welcome to the TextView");
}
</script>
</head>
<body onload="init()">
<div id='textViewDiv' style='width:650px;height:650px;border: 1px solid teal;'></div>
</body>
</html>


These examples do not really show the value of requireJS, but as the complexity of a web application grows having a system like requireJS to handle loading dependencies provides other benefits (simplicity, robust, performance, etc).

Wednesday, January 12, 2011

Introducing the Orion Editor

When we started planning the Orion project we knew we would need a good code editor for the project to be successful. Our first step was to investigate the open source options already available on the web, but none of them satisfied all of our requirements. The most common problem found was performance degradation when editing large files. The next natural step was to design and implement an editor for the web ourselves. We have worked on the Eclipse editor for many years and we felt we had the expertise necessary to build a new editor.

Our work on Eclipse and SWT has taught us how to develop common API for different platforms. We implemented StyledText and its underpinnings on all major desktop platforms including win32, gtk, motif, carbon, cocoa, and others. Working on the web presents a similar challenge: overcome the differences between the browsers. In a sense, each individual browser can be seen as a platform. Even though most of them try to follow W3C standards, there are still plenty of differences: bugs, behaviour, and sometimes API.

The challenge for us was learning these new "platforms", along with all their bugs and differences. We will be sharing our experience in future posts, some of the problems we solved and some that are still open.

Our vision is to build an editor for the web that is as powerful as the one we have built for the desktop. We want to have a similar set of features with emphasis on performance and scalability. Our requirements also include input method support and, in the future, BiDi. We strongly believe that the editor has to make the developer's life easier by performing well and by offering all of the expected features.

On our next post we will talk about the design we used to build the Orion's editor.