Evaluate design patterns for modular JavaScript libraries

[clange]

In particular: Get the "JavaScript design patterns" book and read relevant parts of it (rather on demand than cover to cover).

Old content

JOBAD will be a modular library. There are several ways of designing modular libraries in JavaScript, none of which we know well so far.

• Would it make sense to implement JOBAD as a collection of modules within the jQuery framework? We want to use jQuery anyway. What kind of modularity does jQuery itself support; is it extensible by custom modules? Please find out!
• Can we learn anything else from other "well-known" JavaScript libraries, such as, e.g. Dojo?
•  TinyMCE's plugin interface (for loadable modules that register plugins) is also worth considering -- for those parts of JOBAD that will actually be loadable like plugins, i.e. the services (folding, elision, etc.) and the different GUI elements (menu, toolbar, etc.). See below for an example.
• Also consider the Mathdox approach, as they have implemented their formula editor as a modular library, and they are close collaborators of us and interested in exchanging ideas. (See  Jan Willem's mail and [ https://mathdox.org/svn/repos/public/formulaeditor the source code].) How does the Mathdox approach compare against jQuery?

Note that I ordered the book " JavaScript design patterns", which Jan Willem recommended, for the library.

[cmueller]

We are currently also discussing this in panta rhei:  https://trac.kwarc.info/panta-rhei/ticket/446

[clange]

The "design pattern" book arrived. Jana, please pick it up at my office. At a first glance, it looks quite helpful to me. In general, I'd recommend that you get an overview of the whole book by reading the basic chapters and flipping through the rest. Then, when you study the existing libraries, you will see what design patterns they use and can then use the book as a reference to understand them.

I will shortly comment on the chapters:

1. Expressive JavaScript: the basics for high-level programming in JS, a must-read
2. Interfaces: something you know from object-oriented language and that will be useful for the design of a library. They describe how to do it in JS.
3. Encapsulation and Information Hiding: another basic object-oriented concept
4. Inheritance: same. There are several ways of doing it in JS.
5. The Singleton Pattern: may be needed for certain global JOBAD objects, e.g. the document-wide event handler
6. Chaining: is provided by jQuery, AFAIK, but this chapter is helpful for understanding it. Note that the book is quite generic; it doesn't mention jQuery explicitly.
7. The Factory Pattern: There is an Ajax-related example of a factory for XmlHttpRequest objects, which may be useful.
8. The Bridge Pattern: Not sure whether we need this
9. The Composite pattern: Not sure either
10. The Facade Pattern: May be useful when integrating functionality from existing libraries, e.g. JavaScript standard functionality like DOM, or jQuery, and providing convenience functions.
11. The Adapter Pattern: They have sample code related to library integration
12. The Decorator Pattern: Not sure about this
13. The Flyweight Pattern: Not sure either
14. The Proxy Pattern: Not sure either
15. The Observer Pattern: Not sure either
16. The Command Pattern: seems quite useful to me for implementing the commands behind menu items, buttons, and any other GUI elements in a uniform way.
17. The Chain of Responsibility Pattern: Not sure about this

[clange]

Note, I just put this information (and a bit more) to a more central place; see JavaScript

[clange]

Now that there are reusable, well-designed classes for core JOBAD components (i.e. actions and the context menu), please get started with factoring them out into individual modules. Keep the scenario in mind that a developer might want an active document with a minimal JavaScript overhead and therefore would like to load only those JOBAD modules that are needed: e.g. the context menu, but not the toolbar; folding, but not elision; etc.

[clange]

About TinyMCE: Go to the tiny_mce subdirectory (IIRC jscript is the name of the top-level directory), then look into any plugins/*/editor_plugin_src.js and notice the structure:

(function() {
  tinymce.create('name of plugin', {
    init : function(ed, url) { ... },
    // and other methods of the plugin
  });

  tinymce.PluginManager.add('some id', name of plugin);
})();

I don't exactly remember what the lambda style (function() {...})() is good for, but I think it's for preventing pollution of the global namespace.

[clange]

@Catalin, FYI I will reopen this. Jana's design of certain structures in JOBAD was inspired by that book. Might also be valuable background knowledge for you.

[cdavid]

Can I get that book from you? It might provide very valuable background. :)

I will have to take a look at the code and at actual use case scenarios. Also, does this relate to switching to GWT in any way or is this independent of the redesign?

[clange]

Replying to cdavid:

Can I get that book from you? It might provide very valuable background. :)

Oh, I should have said this more explicitly: We have it in the library. We had them order it when we started working on JOBAD.

I will have to take a look at the code and at actual use case scenarios. Also, does this relate to switching to GWT in any way or is this independent of the redesign?

The book is not related to GWT, it's far more foundational.

[clange]

Let me set a date. This deadline just means: get the book, get an overview of the content (also see this table of contents), and make a plan for how you want to read the book.

[clange]

sorry, mistyped the date

[cdavid]

Apparently, somebody got there before me ... DUE 01-11-09

I will try to find an online version. :)

[clange]

Replying to cdavid:

Apparently, somebody got there before me ... DUE 01-11-09 I will try to find an online version. :)

Never mind, there is more about JavaScript to learn. Just look at the JavaScript page (also watch that page for changes, using the link in the upper right corner). And you can put a hold on that book; it might also be useful in a later phase of your work.

I have another book, one of the first intros to Ajax, not up to date from that point of view, but it has an excellent concise introduction to the programming paradigms of JavaScript for people with an object-oriented background.

[clange]

Done? If so, please close. The current solution with those nested getScript calls is IMHO not nice, but it seems to work sufficiently well.