Skip to main content

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index] [List Home]
Re: [orion-dev] Observations on adding a new page / 'components' to Orion

I pushed two example pages so we'd have something to show people and to look at when figuring how things could be simpler.


This page is fairly minimal.  It demonstrates our pattern for glue code, for watching hash changes, and for updating the page content based on hash.  It doesn't really show any interesting _javascript_ "components" on the page, it's just doing dom manipulation in the glue.  I've commented the code to explain why certain things are done, the relationship between id's in the HTML and what's done in the _javascript_, and pointed to the relevant bugs I mentioned before.


This one is using our "sections" component to fill in left and right sides.  The left side uses a static content template, the right side is dom manipulation _javascript_ on page (but you could imagine that some other component such as a tabletree, etc. could have been used on the right hand side and it would have done the work internally).  

I think the pattern for setting up right and left sides looks like what Anton was suggesting in his document.  It just gets messier as you start having to inject all the services and options into the component.  What we don't have that Anton showed was a "component" representing the page itself or the banner.  Instead we pass dom id's to a utility method and it does the work that a banner component might have done.  In my mind, the "globalCommands.js" is really serving the purpose of a page, banner, toolbar, etc. object.  Note we have a bug open to try to separate that out better,so it's possible we could move in that direction... [1]



Inactive hide details for Susan Franklin McCourt---12/19/2012 05:37:21 PM---Ideally we'd have a wiki page talking about our pagSusan Franklin McCourt---12/19/2012 05:37:21 PM---Ideally we'd have a wiki page talking about our page structure, but since we don't, please forgive a

From: Susan Franklin McCourt/Beaverton/IBM@IBMUS
To: Orion developer discussions <orion-dev@xxxxxxxxxxx>
Cc: orion-dev@xxxxxxxxxxx, orion-dev-bounces@xxxxxxxxxxx
Date: 12/19/2012 05:37 PM
Subject: Re: [orion-dev] Observations on adding a new page / 'components' to Orion
Sent by: orion-dev-bounces@xxxxxxxxxxx

Ideally we'd have a wiki page talking about our page structure, but since we don't, please forgive a long email response which is my attempt to summarize our state.

I think there are a bunch of different issues we want to fix that are at play here, and to a newcomer it just looks like a huge wad of modules.  They don't really differentiate themselves by their role.  I also think the editor is kind of a "worst case" view of the world because it's the most complex page we have, and we have two versions of the editor page (normal and read only), so much of what we normally call "glue" code is in a separate common module (setup.js).  

I would point a new Orion developer at a much, much simpler page to start with, such as sites.js or content.js.  (We should have a sample page that just puts the common pieces together and has "YOUR CONTENT GOES HERE" ! )  But even with a simpler page, we have a number of issues we are concurrently working to improve:

1 - we've never come up with a "template" story for the common parts of the page, so we currently add common parts dynamically using a template fragment in one of the modules.  So you can't even tell at a glance where the banner and footer comes from, because some module somewhere supplies the js  (generateBanner) to get a banner.  Contrast that to server side includes where we'd just construct the common parts before the page was ever served up.  [1]

2 - our bootstrap code is repeated all over the place in our "glue" code.  We know this is not smart, but we've never tried to solve it.  As far as I know, we still don't really have a formal story for how the services are instantiated and passed into the components that need them.  Ideally components could say what services they need to be on the page, but we don't have that story yet. [2]

3 - we don't have a consistent fragment/template story for our widgets, so things look pretty different depending on who wrote the code.  Some folks prefer heavy dijit usage (that is going to change) and so you have HTML templating, typically in separate files.  Our internal web components tend to define HTML fragments/templates either in their JS file (using a string that is parsed and dynamically inserted, much like the banner), or by calling a bunch of DOM manipulation code on the fly.  The latter is hard to follow, but sometimes necessary:
a) we need to bind the i18n strings somewhere (it's not just text in a template).
b) if we are inserting any strings from plugins (which includes message catalogs) we can't just concatenate them in a template and parse as HTML.  We have to use dom manipulation and things like setting text content of a node.  This prevents scripts from being maliciously inserted into the DOM via a plugin "string." [3].  
There is definitely room for discussing our state of the art and making things more consistent.  We want to track other efforts w3c components, etc. and make sure that whatever we do models advances made in the browser.  We definitely *do not* want to grow a framework.  We want as much HTML/CSS to drive the behavior as possible and tack on js to manage more dynamic behaviors.  

4 - our directory structure and naming does absolutely nothing to help with all the gobs of modules.  It's relatively easy to find "glue code" by looking at the URL of the page in question and looking for the matching *.css, *.js, *.html.  But beyond that, there are tons of modules, some are "plain UI widgets" with not much orion semantics (splitter, treetable, dropdown, tooltip, etc.), some represent "a box on a page" (outliner, navoutliner, task list, etc...), some are "utility  methods," some are just a wad of code moved from a page, etc. etc.  I know Szymon is trying to clean up the need for OSGi bundle directories on the client side, but I think we also need to look at fixing the directory structure beyond that and assigning some directories based on the role of the various modules...(utils go in one place, widgets somewhere else, higher level components elsewhere, etc.)

5.  - we don't organize our CSS by visual component, so having the matching CSS file for a visual component as shown in your picture is not something we do consistently.  But moving raw CSS around doesn't make a lot of sense vs. moving to LESS and having module-based LESS files that generate into common CSS.

It all adds up to be confusing to a new Orion developer, and we've never really documented the concepts like "glue code" vs. "components" though they are part of the vocabulary of the team.  A good step besides an example page might be to draw a picture of what we have now so a new person would know where to look.  Note this really applies to those developing Orion itself, not plugins.  Plugins don't have to know about any of this, they have to know the API (with its own set of issues) and otherwise can create their own pages any way they wish.

The removal of dojo/dijit is changing a lot of what happens for #3, Szymon is working on #4, and I think you (Anton) are going to do some work on #5.  I also know that Simon is working on a templating story that could help with #1.  I really wish we'd address #2 but it's not bubbled up in the priority scheme yet.

To me, the best thing would be to create a sample simple page so one wouldn't be overwhelmed by the editor and then document the state of the world post 2.0 to help new Orion developers know where to look for stuff.  I don't suggest a lot of effort to document before that because it's all in such flux.  


[3] and

Inactive hide details for Anton McConville ---12/19/2012 09:59:39 AM---Hi, I started work on adding a new Projects page yesterdAnton McConville ---12/19/2012 09:59:39 AM---Hi, I started work on adding a new Projects page yesterday ( more details

Anton McConville <Anton.McConville@xxxxxxxxxx>
12/19/2012 09:59 AM
[orion-dev] Observations on adding a new page / 'components' to Orion
Sent by:


I started work on adding a new Projects page yesterday ( more details coming shortly ... I wanted to start prototyping a few things ) ... but knowing how to add the new page wasn't obvious to me ... and it resulted in some time spent reverse engineering another page.

I wrote up some observations and thoughts on how I think I'd like it to work.

orion-dev mailing list
orion-dev mailing list

GIF image

Back to the top