
Show HN: GoldenLayout – JavaScript Layout Manager - wolframhempel
https://golden-layout.com/
======
bayesianhorse
Commercial javascript libraries have a tough stance. "Free for non-commercial"
is essentially meaningless, since there is no clear definition of commercial
use. For me, I wouldn't even consider including such a library into any
software (OS or commercial) which runs on multiple domains/servers/computers,
because it makes licensing and scaling less flexible.

To justify a licensing price, a javascript library needs to offer huge,
peerless, hard to imitate functionality, stable code base, rapid bug-fixing
and preferably a paid team working on it.

Which isn't to say that nobody will buy it. At $99 per site even one or two
dozens of customers would cover the development costs.

~~~
ap22213
I disagree. 99 is a very reasonable price. I pay much more for IDEs, tools,
libraries, services, support, and infrastructure. 99 is a reasonable one-time
cost, all things considered (assuming it works on all modern browsers and
mobile).

~~~
webjprgm
It is hard to justify unless you know you need it. IDEs get used on multiple
projects. This license is per site. IDEs often have some kind of trial or at
least you got to play with it on your friend's computer first. But "commercial
use" could include testing it in your commercial application.

I prefer licenses that are based on how much something gets used. So, free if
your site has small traffic or maybe free if the number of developers using it
is small. That lets me use it in experimental projects or personal side
projects (which may or may not make money and hence may be commercial) but not
have to pay until the project grows large enough to be worth buying something
like this.

I think the only library I've ever bought for a web project was $30 for a site
license. It was when I worked at a company and multiple projects were going to
use it and run from the same domain.

~~~
geetee
As someone who has worked at a job where spending $40 on an IDE was a big a
deal, I can see where you're coming from. My current job doesn't bat an eye
unless it's over $1000, so I know it's all relative.

------
tshadwell
I've not looked in detail, but I'm not so sure about the security of
generating windows via URL parameters. I feel like there's an XSS in that for
sure.

Edit: there is [https://golden-layout.com/?gl-
window=%7B%22g%22%3A%5B%7B%22o...](https://golden-layout.com/?gl-
window=%7B%22g%22%3A%5B%7B%22o%22%3A%22Layout%22%2C%22l%22%3A%225%22%2C%22h%22%3A%22demo%22%2C%22i%22%3A%7B%22bg%22%3A%22%5C%22%3E%3Csvg%20onload%3Dalert\(1\)%3E%22%7D%2C%22n%22%3A%220%22%7D%5D%7D)

Please don't chastise me for disclosure ethics, this one was low-hanging
fruit.

~~~
wolframhempel
good point. What it passes via URL parameter is URL encoded JSON - which is
parsed using JSON.parse()... so shouldn't expose an attack vector. The
alternative - creating about:blank windows and moving DOM elements into them
comes with a wealth of glitches and restrictions

~~~
tshadwell
I edited my original post to include a working XSS exploit.

~~~
wolframhempel
Wow...impressive. Even though this is not so much a weakness o f Goldenlayout
as rather the particular image component I use on the startpage. Still though,
thanks. Remind me to hire you if I want to get back at someone.

~~~
tshadwell
Usually I work to prevent problems rather than create them but hey I could be
the antagonist in someone's novel. I doubt that's not the only exploit in the
library either. I could go through it with a finer toothed comb if you wanted.

~~~
wolframhempel
I'd be forever grateful. I imagine this one to be quite tough since it's
ultimately up to the user to create and read serializable state objects for
their components.

------
err4nt
I am always interested to see ways that people apply different layout ideas to
code.

The Golden Section is a number considered to produce the most aesthetically
pleasing ratios of things. A playing card's dimensions are usually roughly the
same ratio: 1:1.618

For the past few hundred years print designers have been aware of the Golden
Section and have been working it into their page sizes and margins - so wether
it's beautiful and that's why we use it, or we use it and that's why it's
beautiful - there's no question that we are familiar with seeing this design
tool be used in print.

This looks like a library to help integrate some of those layout ideals into
your code in ways that would be tricky or cost a lot of time to implement
otherwise.

~~~
callum85
The 'Golden Section' is mystical bullshit.

A 1:1.618 ratio has some geometric properties that are useful in rare
situations, but the idea that it is "aesthetically pleasing" is completely
unfounded.

Explanation here:
[http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm](http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm)

~~~
mbrutsch
That guy's wound a little too tightly.

------
bhouston
We built something like this for our online 3D modeling/publishing/rendering
tool: [https://Clara.io](https://Clara.io)

I was just looking if it makes sense to adopt, but our needs are pretty
customized compared to what is offered here. But a lot of it is similar. Maybe
if we were starting over, this would make sense and we could have adopted it.

Screenshot of our tab/multiple window UI:
[http://exocortex.com/img/blog/OneYear_ModelingTab.png](http://exocortex.com/img/blog/OneYear_ModelingTab.png)

I think this is a real contribution though, especially if others build upon
it.

------
j4mie
Creative Commons licensed?

Q: Can I apply a Creative Commons license to software?

A: We recommend against using Creative Commons licenses for software. Instead,
we strongly encourage you to use one of the very good software licenses which
are already available. We recommend considering licenses made available by the
Free Software Foundation or listed as “open source” by the Open Source
Initiative.

[https://wiki.creativecommons.org/Frequently_Asked_Questions#...](https://wiki.creativecommons.org/Frequently_Asked_Questions#Can_I_apply_a_Creative_Commons_license_to_software.3F)

~~~
wolframhempel
Yup, but its a legal construct that allows to offer something "free for non-
commercial use"

~~~
viggity
I suppose that is true, but most devs that want to do that just offer a dual
license. GPL license, but you can purchase commercial license to remove GPL
restrictions.

~~~
wolframhempel
Interesting. Would you happen to know if there any downsides or upsides to
either? To be completely honest, I looked at under which model HighCharts
operates and did a similar thing.

~~~
btown
It's probable that HighCharts chose CC BY-NC because there has not been a
clear legal consensus (much less any sort of case law) on whether
proprietary/minified Javascript linking to a GPL'd Javascript library is in
violation of the GPL. If you want to prevent that type of use of your library
without people paying for a license, then CC BY-NC might be a viable choice.

For a sampling of how complex the legal issues around the GPL are:
[https://en.wikipedia.org/wiki/GNU_General_Public_License#Lin...](https://en.wikipedia.org/wiki/GNU_General_Public_License#Linking_and_derived_works)

However, note that, say, an MIT licensed or BSD licensed or Apache licensed
project, developed for noncommercial use, would be _prevented_ from using your
library for their layout, because then the non-commercialness of the CC BY-NC
could "infect" their project and prevent them from using those licenses. For
instance, the Highcharts license caused this project to switch to a competing
library altogether: [https://github.com/sebastianbergmann/php-code-
coverage/issue...](https://github.com/sebastianbergmann/php-code-
coverage/issues/192)

In general, there's no good solution, but I personally shy away from CC-
licensed code.

(I am not a lawyer, and this should not be construed as legal advice.)

------
untog
Statements like the "ultimate JS layout manager" just sound hyperbolic. This
wouldn't be appropriate for the vast majority of web sites in the world, so
I'm not sure how it's the ultimate anything.

~~~
wolframhempel
Hehe, not at all like "AngularJS — Superheroic JavaScript MVW Framework"

~~~
lowboy
There can be many superheroes, but only one ultimate.

------
Pxl_Buzzard
I've been looking into libraries that do exactly this in the last couple
weeks, thank you for sharing this one. The competitors in this space (that I
have found) are wcDocker[1] and DockSpawn[2]. One "feature" lacking from
GoldenLayout: you aren't hosting your code on Github, or in a way that can be
utilized by Bower[3]. GoldenLayout looks like an otherwise better library than
the others, could you talk about why or why not for Github hosting?

1\. [http://docker.webcabin.org](http://docker.webcabin.org)

2\. [http://www.dockspawn.com](http://www.dockspawn.com)

3\. [http://bower.io](http://bower.io)

~~~
wolframhempel
Thanks for providing those links. The latest version is on github and bower
though, please have a look at the links in the footer.

------
huuu
Does anyone know if there is a manager like this one but based on the concept
used in Blender (blender.org)?

I realy like the concept in Blender where you can divide the screen the way
you like and select a view(controller) per division.

~~~
bhouston
Well, [https://Clara.io](https://Clara.io) (our online version of a Blender-
like tool) has something similar. It isn't open source... yet. ;)

------
itry
In the "getting started", you should put the .js and .css files somewhere so
the examples work. I copypasted all your codelines just to be dissappointed
that it doesnt not work. I understand you probably don't want to be a cdn. But
for testing purposes, I cannot be assed to copy stuff over to my server. I
prefixed them with [https://golden-layout.com/assets/](https://golden-
layout.com/assets/) and it nicely worked. Nice. Bookmarked.

~~~
wolframhempel
Good idea. Noted.

------
danschumann
Seems cool but breaks if you rearrage things... windows disappear.

~~~
myrryr
yeah, that is what I noticed.

------
drglitch
Absolutely awesome concept, could not be better timing - need pretty much
exactly a dock manager like this for upcoming work!

What are the plans for graceful degradation on mobile?

~~~
wolframhempel
Thanks . It’s easy to turn pretty much every feature off individually. Just
setting ‘hasHeaders’ and ‘reorderEnabled’ to false for example is effectively
enough to switch off any user interaction whilst keeping the component
lifecycle and resize behaviour when the phone is tilted.

------
chacham15
Looks nice, but one recommendation: when you are moving a window, make the
drop box cover the window bar as well. Also, the resize bars can cover the
window bar to the point that if there is no content you cant click on the name
because all you get is the resize action. Lastly, I somehow dropped a window
to vertically split another one and it lost all of its content. I tried to
resize the bottom border down but it wont move.

------
malkia
I'm simply wondering - how in general html/js applications would work with
multiple monitors.

A typical set-up at work (game studio) is 2-3 monitors for artists/level
builders. We had to write a new docking system for Qt5, since the existing did
not allow to dock outside windows to others (or tab in them) - e.g. bit like
Visual Studio docking (but not there yet)

~~~
redact207
I'm working on a project that's big into this. I extended dockspawn to support
popout windows and give a breakout editor feel.

The window you popout can still communicate with its opener until you refresh
or navigate away from that page. It's not ideal, but it's the best you can do
without using something like signalr or sockets.io to join everything
together.

------
qwerta
This is not layout manager, but docker. "Ultimate Layout Manager" is something
like Mig Layout for Swing.

------
V-2
The "open in new window" icon looks misleadingly like "restore original size"
on Windows. Also, once you do, closing the popup removes the component
altogether. You actually need to click the icon in the right bottom corner
(why there??) so that it returns back to the original layout.

------
rhapsodyv
One reason that I love extjs is indeed its layout manager. This golden-layout
seems promising...

------
lttlrck
I got into a not necessarily unrecoverable but certainly not very nice state
just moving things around a little.

Chrome Version 39.0.2166.2 dev (64-bit)

[http://i.imgur.com/OB67q2i.png](http://i.imgur.com/OB67q2i.png)

------
jtwebman
This would be easy to do with IE8+. They should have went for IE6+, support
older browsers, they might have got those juice enterprise customers that
throw $10,000 of dollars away on software. Also why is it so slow?

~~~
GeneralMayhem
Nobody should waste time and money supporting IE6. It's completely unsupported
by Microsoft. Those big enterprise customers should have upgraded in April at
the absolute latest when XP hit EOL. Even IE8 only has a year left.

~~~
recursive
> Those big enterprise customers should have upgraded in April at the absolute
> latest when XP hit EOL.

The ones that didn't still have money.

------
nhebb
When I maximized and then restored, it put the section in a popup window and
removed it from the original layout. I would have expected restore to dock the
section back in the original layout as before.

------
watty
Really nice, might use it for an upcoming project. It's a little buggy in the
current state though and no mobile editing support kinda hurts.

------
mkremer90
Was literally looking for EXACTLY this for the past two weeks. Will definitely
buy in the next week or two :)

------
sangd
Looks great. Does it have integration with Meteor js? I'm thinking of adopting
this to mine at vida.io

~~~
wolframhempel
Wow. Vida.io looks really promising. I can't promise a schedule, but I'll try
to add a MeteorJs tutorial as soon as possible. Generally though it's just DOM
elements that you put stuff into, so it should be compatible with pretty much
anything.

------
worldsayshi
Looks very neat. But what is the reason for the initial load time?

~~~
wolframhempel
Cheers. Good question about the load time. The library itself is 50k - without
gZipping. But the demo on the startpage also includes Highcharts and SlickGrid
and all their dependencies...and the examples are in Codepens - which take a
while to load

------
sarciszewski
Who the hell licenses SOFTWARE as creative commons these days? :S

------
elwell
The windows in demo should resize immediately as I drag them.

------
giancarlostoro
I love it. Looks stunning, and is straight forward to use.

------
PointerReaper
How do you expect people to do this from a keyboard?

------
jaunkst
Should be free use with commercial grade support.

------
silverlight
Interesting! Might have to look into replacing our use of jQuery UI with
this...

