7 ms·

Show HN: GoldenLayout – build multi-screen webapps

201 points by troika 9y ago

AngeloAnolin 9y ago
I like the concept. One thing that stands out for me though is its dependency with jQuery. Not sure if it is a deal breaker, but if one could ship quality and nicely looking apps with it, then the same won't really matter.
dsun176 9y ago
After making 5 clicks something broke and one div renders at the bottom of the page :(
ryandrake 9y ago
Just a low-effort initial observation: "Works in IE8+, FF, Chrome" but the demo depicts an iMac display :-) EDIT: Seems to work fine in Safari too!
- ceejayoz 9y ago
  iMacs can run FF and Chrome natively, and I've encountered a number of folks running Windows or Linux on them as they like the Apple hardware. Not sure what your point is...
- deleted 9y ago
  [deleted]
- jpfed 9y ago
  Even lower-effort initial observation: I have to scroll horizontally to see the whole page with my portrait-orientation display.
  - rhizome 9y ago
    I wanted to run 3x portrait so bad until I realized that side scrolling would have to become a fact of life for me to do so.
    - jpfed 9y ago
      I got a chance to do this when an office reorg temporarily granted me a third monitor. The occasional horizontal scroll was more than compensated for by the feeling of godlike power.
      - MaulingMonkey 9y ago
        3x portrait 1x landscape has driven me mad with power. They're 4k, so I don't actually have to scroll here. Only downside is having to buy my own monitors for work because I've spoiled myself. 10/10 would sell my soul for more pixels again.
azurelogic 9y ago
This is the 6th appearance of this lib on HN. That said, it is still one of the most clever things I've seen in terms of front end libs. I stumbled upon it independently about 1.5 years ago, right before the author switched from some restrictive licenses to MIT. Still waiting to see someone implement something amazing with it though. We had mockups for something cool at my last job, but senior management decided to do everything in ServiceNow instead...
flipp3r 9y ago
I should go through each and every 1000+ star project on Github, sometime. Stuff like this is really great.
bluetidepro 9y ago
Great library, seen it pop up here a few times. Slightly off topic, on the website it says: > "free as in beer, speech & love" ...In what world is beer free? ;) haha
- calvinr 9y ago
  Free as in beer is a term for Freeware, you can use the software for free but you don't have access to the source code. It's like if someone was to give away free beer, you just have beer you can't make more, or modify it into something else.
- clintonc 9y ago
  "Free as in beer" is a phrase (loosely coined by Richard Stallman) to indicate that something does not cost money. This is as opposed to "free as in speech", meaning that it comes with no restrictions.
- neogenix 9y ago
  https://www.howtogeek.com/howto/31717/what-do-the-phrases-free-speech-vs.-free-beer-really-mean/ https://www.howtogeek.com/howto/31717/what-do-the-phrases-fr...
- rejschaap 9y ago
  Probably the same world where speech and love are free. :) Roughly: Free as in beer means you don't have to pay money to use it. Free as in speech means you have freedom to use or modify it in any way you want Free as in love means it will happily plays with all other software and systems
  - startupdiscuss 9y ago
    Ah, I could figure out the beer from the other two but I couldn't tell the speech-free apart from love-free. They should also add "Free as in dom" meaning the word used as a political ploy to have people conform to your point of view
  - samstave 9y ago
redm 9y ago
This seems like software that would take over the computer, such as a customer service app, a monitoring app, etc. In other words, it might be the only thing your running on the computer (in the foreground). I rarely use a desktop app that makes use (effective or otherwise) of multiple monitors.
- rhizome 9y ago
  I believe the word you're looking for is "kiosk." :)
franciscop 9y ago
It renders totally non-usable on mobile S:
jpalomaki 9y ago
For those who have checked this before: The license has changed from GPL to MIT.
- leddt 9y ago
  Looks like this change occurred over a year ago. https://news.ycombinator.com/item?id=11471082 https://news.ycombinator.com/item?id=11471082
malkia 9y ago
In a game development shop a lot of people would use multiple monitors (usually 2 or 3). Their level/model/etc. editor would normally do proper window docking, where it would restore the previous state of windows properly (or at best it could). To me it's one of the things where desktop still shines (apart from other things). But if this is possible with the browser, then it might change the mindset. I haven't tried it yet, as I'm typing from my "single"-yet screen laptop, but would try it out later again. I hope it preserve/restore the layout as it was, but other than that it looks really sleek! Visual Studio kind of established how docks should work, and other Ui systems still need to catch up (Qt I'm talking about you :)).
noir_lord 9y ago
I think the last time I saw this it was a spinoff off a market trading application that was (at the time and even now) one of the most impressive web applications I'd seen. I can't remember the damn name though.
- wolframhempel 9y ago
  Cheers, it's "the Merchant" (https://vimeo.com/143728632 https://vimeo.com/143728632) - it also started https://deepstream.io/ https://deepstream.io/ - this was one helpful app :-)
  - noir_lord 9y ago
    That's the one! I was looking for it the other week to show someone what you can do on the web these days.
- karmakaze 9y ago
  That's quite a co-incidence. Back when I was making the front end for a Forex trading app, I considered using this very library for the task. Project didn't actually get started and I moved onto other things. I was very keen at the time to give this a go as it seemed to fit well with the requirements of the time.
- notjustanymike 9y ago
  Heh, check the bottom right of the website's homepage...
jonny_eh 9y ago
I made a panel "full", but cannot make it go back to its original size, I can only close it or break it out.
- tgb 9y ago
  The "_" button works for me (i.e. the middle of the three breakout, minimize, close buttons). I expected it to minimize the window to a taskbar, like in Windows, but it restores it to the original size instead. I found this unintuitive but don't know a better icon.
digi_owl 9y ago
Noticed a small niggle. The X on the focused tab will not highlight on mouseover, this unlike when mousing over the X of an unfocused tab.
stephenr 9y ago
"powerful persistence" and a picture of two floppy disks. I'm in my early 30's and I haven't ever personally owned a computer that included a floppy drive. I did buy a USB one with my late 90's iMac, for compatibility with the school but I think you get my point.
- deleted 9y ago
  [deleted]
- urethrafranklin 9y ago
  Your point is wrong. Even kids who were born after floppy disks fell into disuse recognize the symbology as representing "save" or "persist". Apparently the letter "A" used to represent a bull. Doesn't mean it is useless to us today, far from it.
  - stephenr 9y ago
    They recognise it because software uses it still, nothing more.
joshribakoff 9y ago
I used it for a bit there were some bugs and such so I ended up writing a "lite" version, that is admittedly crappy but did just what I needed https://github.com/joshribakoff/dockable https://github.com/joshribakoff/dockable
megraf 9y ago
Columns are vertical, rows are horizontal.
uptown 9y ago
troika: I'm having a hard time getting GL to work with React and Redux. There's a Github repo showing it working together, but it's achieved by wrapping the component, and I haven't resolved all of the issues. Namely, that this repo seems to work when referencing React js files from a CDN, but for some reason, fails when building them in the app. Also, refs in components seem to be a problem when wrapped in this way. Wondering if there's a better way to handle these. https://github.com/andrewcapodieci/golden-layout-react-redux https://github.com/andrewcapodieci/golden-layout-react-redux Looks very promising, but I'm wondering if you've tried this combination successfully. I also haven't figured out yet whether redux and pop-out windows will work properly.
nathancahill 9y ago
Frequently pops up as a comparison to my lighter library, Split.js[0]. If you're just looking for draggable split views. [0] http://github.com/nathancahill/Split.js/ http://github.com/nathancahill/Split.js/

201 points by troika 9y ago

I like the concept. One thing that stands out for me though is its dependency with jQuery. Not sure if it is a deal breaker, but if one could ship quality and nicely looking apps with it, then the same won't really matter.

dsun176 9y ago

After making 5 clicks something broke and one div renders at the bottom of the page :(

ryandrake 9y ago

Just a low-effort initial observation: "Works in IE8+, FF, Chrome" but the demo depicts an iMac display :-) EDIT: Seems to work fine in Safari too!

ceejayoz 9y ago
iMacs can run FF and Chrome natively, and I've encountered a number of folks running Windows or Linux on them as they like the Apple hardware. Not sure what your point is...
deleted 9y ago
[deleted]
jpfed 9y ago
Even lower-effort initial observation: I have to scroll horizontally to see the whole page with my portrait-orientation display.
- rhizome 9y ago
  I wanted to run 3x portrait so bad until I realized that side scrolling would have to become a fact of life for me to do so.
  - jpfed 9y ago
    I got a chance to do this when an office reorg temporarily granted me a third monitor. The occasional horizontal scroll was more than compensated for by the feeling of godlike power.
    - MaulingMonkey 9y ago
      3x portrait 1x landscape has driven me mad with power. They're 4k, so I don't actually have to scroll here. Only downside is having to buy my own monitors for work because I've spoiled myself. 10/10 would sell my soul for more pixels again.

azurelogic 9y ago

This is the 6th appearance of this lib on HN. That said, it is still one of the most clever things I've seen in terms of front end libs. I stumbled upon it independently about 1.5 years ago, right before the author switched from some restrictive licenses to MIT. Still waiting to see someone implement something amazing with it though. We had mockups for something cool at my last job, but senior management decided to do everything in ServiceNow instead...

flipp3r 9y ago

I should go through each and every 1000+ star project on Github, sometime. Stuff like this is really great.

bluetidepro 9y ago

Great library, seen it pop up here a few times. Slightly off topic, on the website it says: > "free as in beer, speech & love" ...In what world is beer free? ;) haha

calvinr 9y ago
Free as in beer is a term for Freeware, you can use the software for free but you don't have access to the source code. It's like if someone was to give away free beer, you just have beer you can't make more, or modify it into something else.
clintonc 9y ago
"Free as in beer" is a phrase (loosely coined by Richard Stallman) to indicate that something does not cost money. This is as opposed to "free as in speech", meaning that it comes with no restrictions.
neogenix 9y ago
https://www.howtogeek.com/howto/31717/what-do-the-phrases-free-speech-vs.-free-beer-really-mean/ https://www.howtogeek.com/howto/31717/what-do-the-phrases-fr...
rejschaap 9y ago
Probably the same world where speech and love are free. :) Roughly: Free as in beer means you don't have to pay money to use it. Free as in speech means you have freedom to use or modify it in any way you want Free as in love means it will happily plays with all other software and systems
- startupdiscuss 9y ago
  Ah, I could figure out the beer from the other two but I couldn't tell the speech-free apart from love-free. They should also add "Free as in dom" meaning the word used as a political ploy to have people conform to your point of view
- samstave 9y ago

redm 9y ago

This seems like software that would take over the computer, such as a customer service app, a monitoring app, etc. In other words, it might be the only thing your running on the computer (in the foreground). I rarely use a desktop app that makes use (effective or otherwise) of multiple monitors.

rhizome 9y ago
I believe the word you're looking for is "kiosk." :)

franciscop 9y ago

It renders totally non-usable on mobile S:

jpalomaki 9y ago

For those who have checked this before: The license has changed from GPL to MIT.

leddt 9y ago
Looks like this change occurred over a year ago. https://news.ycombinator.com/item?id=11471082 https://news.ycombinator.com/item?id=11471082

malkia 9y ago

In a game development shop a lot of people would use multiple monitors (usually 2 or 3). Their level/model/etc. editor would normally do proper window docking, where it would restore the previous state of windows properly (or at best it could). To me it's one of the things where desktop still shines (apart from other things). But if this is possible with the browser, then it might change the mindset. I haven't tried it yet, as I'm typing from my "single"-yet screen laptop, but would try it out later again. I hope it preserve/restore the layout as it was, but other than that it looks really sleek! Visual Studio kind of established how docks should work, and other Ui systems still need to catch up (Qt I'm talking about you :)).

noir_lord 9y ago

I think the last time I saw this it was a spinoff off a market trading application that was (at the time and even now) one of the most impressive web applications I'd seen. I can't remember the damn name though.

wolframhempel 9y ago
Cheers, it's "the Merchant" (https://vimeo.com/143728632 https://vimeo.com/143728632) - it also started https://deepstream.io/ https://deepstream.io/ - this was one helpful app :-)
- noir_lord 9y ago
  That's the one! I was looking for it the other week to show someone what you can do on the web these days.
karmakaze 9y ago
That's quite a co-incidence. Back when I was making the front end for a Forex trading app, I considered using this very library for the task. Project didn't actually get started and I moved onto other things. I was very keen at the time to give this a go as it seemed to fit well with the requirements of the time.
notjustanymike 9y ago
Heh, check the bottom right of the website's homepage...

jonny_eh 9y ago

I made a panel "full", but cannot make it go back to its original size, I can only close it or break it out.

tgb 9y ago
The "_" button works for me (i.e. the middle of the three breakout, minimize, close buttons). I expected it to minimize the window to a taskbar, like in Windows, but it restores it to the original size instead. I found this unintuitive but don't know a better icon.

digi_owl 9y ago

Noticed a small niggle. The X on the focused tab will not highlight on mouseover, this unlike when mousing over the X of an unfocused tab.

stephenr 9y ago

"powerful persistence" and a picture of two floppy disks. I'm in my early 30's and I haven't ever personally owned a computer that included a floppy drive. I did buy a USB one with my late 90's iMac, for compatibility with the school but I think you get my point.

deleted 9y ago
[deleted]
urethrafranklin 9y ago
Your point is wrong. Even kids who were born after floppy disks fell into disuse recognize the symbology as representing "save" or "persist". Apparently the letter "A" used to represent a bull. Doesn't mean it is useless to us today, far from it.
- stephenr 9y ago
  They recognise it because software uses it still, nothing more.

joshribakoff 9y ago

I used it for a bit there were some bugs and such so I ended up writing a "lite" version, that is admittedly crappy but did just what I needed https://github.com/joshribakoff/dockable https://github.com/joshribakoff/dockable

megraf 9y ago

Columns are vertical, rows are horizontal.

uptown 9y ago

troika: I'm having a hard time getting GL to work with React and Redux. There's a Github repo showing it working together, but it's achieved by wrapping the component, and I haven't resolved all of the issues. Namely, that this repo seems to work when referencing React js files from a CDN, but for some reason, fails when building them in the app. Also, refs in components seem to be a problem when wrapped in this way. Wondering if there's a better way to handle these. https://github.com/andrewcapodieci/golden-layout-react-redux https://github.com/andrewcapodieci/golden-layout-react-redux Looks very promising, but I'm wondering if you've tried this combination successfully. I also haven't figured out yet whether redux and pop-out windows will work properly.

nathancahill 9y ago

Frequently pops up as a comparison to my lighter library, Split.js[0]. If you're just looking for draggable split views. [0] http://github.com/nathancahill/Split.js/ http://github.com/nathancahill/Split.js/