
Show HN: LayerJS – A simple UI composition and navigation library - thomnah
https://layerjs.org
======
codetrotter
Non-standard license with a restrictive custom clause unfortunately.

[https://github.com/layerJS/layerJS/blob/master/LICENSE](https://github.com/layerJS/layerJS/blob/master/LICENSE)

> Permission is hereby granted, free of charge, to any person obtaining a copy
> of this software and associated documentation files (the "Software"), to
> deal in the Software, including the rights to use, copy, modify, merge,
> publish, distribute, sublicense, and/or sell copies of the Software, and to
> permit persons to whom the Software is furnished to do so, subject to the
> following conditions:

> 1\. The above copyright notice and this permission notice shall be included
> in all copies or substantial portions of the Software.

> 2\. The Software must not be used in the code base of HTML editors or web
> builders. A HTML editor is a software (or hosted web application) that can
> be used by a third party (the user of the HTML editor) to create HTML
> documents that can be exported and used elsewhere. A web builder is a
> software (or hosted web application) that can be used by a third party (the
> user of the web builder) to create HTML documents that are hosted or
> dynamically generated under a top level domain chosen by the third party.
> The code base is the source code of the HTML editor or web builder,
> including the source code of publicly available plugins. No calls to layerJS
> can be made from the code base, but third party users can use layerJS in
> their websites that are built with these HTML editors or web builders.

> THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
> IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
> FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
> AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
> LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
> FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
> IN THE SOFTWARE.

> This license is derived from the MIT license
> ([https://opensource.org/licenses/MIT](https://opensource.org/licenses/MIT))

~~~
thomnah
This is really not meant restrictive. Its basically MIT and only restricting
one particular use case (if you want to build a webeditor like WIX, etc. )
It's currently protecting our baby startup (layerjs.com) and should avoid that
someone is using layerjs.org (which will be used inside) to get an competitive
edge on our baby (: So don't be to harsh on this. We will remove this clause
altogether once time is ready to launch.

~~~
codingdave
I had a conceptually similar tool driving a startup way back in 2001. It
failed because there was no market - people who couldn't code wanted to just
hire a designer/developer. People who could code didn't care about a codeless
web design tool. People who did use it nitpicked the resulting markup.
Admittedly, many years have passed. The market may differ now. But I'd
seriously validate the problem you are solving here.

------
CriticalHitKW
This looks... awful.

You're piling on massive amounts of attributes, making your app almost
impossible to read and figure out the transitions. Anything complex is going
to become a tangled pile of nodes and code. It would take anyone but the
original designer a long time to puzzle out what exactly is going on and
figure out the workflow, unless there's also a ton of HTML comments in there
too.

You have attributes that should just be classes with CSS (overflow: hidden
prevents scrolling, not sure why you need lj-no-scrolling), you have html
elements that actually need to have attributes to define their neighbours, and
you're just overloading your HTML with a bunch of extra baggage that doesn't
need to be there.

Look at your parallax example. A 30KB library, a bunch of superfluous divs,
and a ton of extra attributes you need to try to figure out have successfully
replaced "background-attachment: fixed". The sliding divs could be done so
much more clearly with just a bit of javascript that tracks "current frame"
and hides them all then shows the next one when you click the button. The
ZoomUI is admittedly pretty, but I feel like you could do it much easier with
just a click event that expands the frame via changing the classes on it,
rather than all the extra baggage and divs and wrappers you need to make that
work. The animations are pretty, but not worth the extra baggage it takes to
use them.

It's a neat toy, but I can really only see it being usable by people who are
inherently terrified of javascript and will do anything to avoid it. And even
then they'd only need the simplest of use-cases, and they'd need to make sure
it wouldn't be on something that would need updates, because I wouldn't want
to have to come back to a project with this in 6 months.

~~~
kapv89
You are talking about their implementation. It's done in an old-school way(by
extending HTML), and it would be very hard to build any sort of complex UI on
this implementation.

However, the idea behind this project is pretty interesting. If you haven't
already, do check out their presentation in the section "How LayerJS works".

~~~
CriticalHitKW
The idea seems to be inherently "UI Composition in pure HTML", at least from
the user's perspective. Which, sure, it's possible. But that's not a great
idea. And the video is just how HTML works already. Firefox has had a neat
inspector tool that showed you all that for years. "A div that loads above the
rest and is anchored to the window" isn't new.

~~~
thomnah
The concept behind layerJS is very fundamental, so fundamental that one even
thinks its already there. It must be there, but it's not. We looked deep. So
we created a polyfill (please see my previous response). Of course you can
code every effect that layerJS can do manually. But then you would need to do
so...

------
mrspeaker
I really like this and have added it to my "dive into on the weekend" bucket.
The catch phrase got me: "UI composition in pure HTML"... but a bit of my
optimism left when I realized that the page wouldn't scroll (there's not even
a scrollbar) without JavaScript. But still, it's better than a blank page (and
the header had enough info to tempt me to white list it!).

This is just a get-off-my-lawn nitpick/feature request - because I think it
looks really interesting, great work!

~~~
EricLemieux
On the body there is a `overflow: hidden` presumably to fix horizontal
overflow. The selector causing this is `[lj-type="stage"]`, so the scrollbar
not working without js might be an issue with the library, rather than just
the marketing site.

~~~
thomnah
yes, layerJS needs a "Stage" where navigation can happen so the scrollable
content will be inside that Stage. In this case the body is the stage and the
page is a frame inside it. We are working on something where the stage length
adapts to the frame length. Then the body will become as long as the full
content and native scrolling would even work if there is no JS

------
egeozcan
For adding interaction using HTML attributes, I highly suggest intercooler.js:
[http://intercoolerjs.org/](http://intercoolerjs.org/)

It also just enhances your valid forms and markup, which means, if you don't
do something weird, your page keeps working without JS as well.

~~~
bobwaycott
This looks like Intercooler, but purely focused on UI transition and
animation—with a bit more conceptual overhead than IC tends to require.

------
reaperducer
Looks promising, but the web site keeps promoting this as "Pure HTML and CSS."
But it's actually all run on JS. So, not actually pure HTML and CSS.

The video didn't work on my machine. It goes as far as "How does it work?" and
then it's just random dots all over the page.

And the last straw was the pop-up asking me if I want more information when
I'd only been on the page for five seconds. How do I know if I want more
information if I haven't had a chance to look at the page yet?

Usually I lump these into "yet another JS library to throw on the fire." But
this one seems a little different. We'll see.

~~~
thomnah
Thanks. Yes you are absolutely right. It is of course a JS library, but its
API is full "HTML". So you only need to do things to your HTML to control it.
Actually we think that the concepts of layerJS are pretty much in line with
the HTML concepts esp. the box model. So maybe one day all this fitting and
transitioning (==linking) will be natively supported by the browsers and then
really no JS will be needed.

The video (actually an animation) had some trouble on safari where the
container background was on top of the 3d elements. I hope its that one. This
is hot-fixed right now

The chat window should actally open only after a minute. I know it can be a
bit nasty but we need feedback (:

~~~
reaperducer
Pop-ups are an abomination, whether they're a _blank window, or a shiny slidy
<div>.

And is one minute really a good length of time for someone to grok what's on
your page? How long is the video?

------
mcjiggerlog
This actually seems like a throwback to jQuery mobile which had a similar way
of doing full page transitions. I always thought that was ahead of its time.

I also found a bug (latest Chrome on macOS):

\- open [https://layerjs.org](https://layerjs.org) in a new tab

\- navigate to
[https://layerjs.org/examples.html](https://layerjs.org/examples.html)

\- close tab

\- reopen tab with cmd+shift+t

\- pressing back will change the URL back to
[https://layerjs.org](https://layerjs.org) but the page will not change

~~~
tclancy
Seeing "layers" and "frames" in the top content gave me a throwback to
Netscape 4, so YMMV.

~~~
thomnah
(: good old times

------
dbranes
Love the idea - looks like a well-thought-out and much needed abstraction. The
way I’d pitch it is that it allows one to create UI in a completely
declarative and stateless manner.

~~~
thomnah
totally agreed. I went into the declarative/static argumentation on medium
[https://medium.com/@layerjs/getting-started-with-
layerjs-17f...](https://medium.com/@layerjs/getting-started-with-
layerjs-17f679452c8d) but it really depends on the audience if these terms
trigger the interest.

------
Nadya
I wish I had more to comment on, as I'm still reading through the docs, but
just a quick note to the website dev. On tablet/mobile, all but the last 2
footer links cannot be clicked because the copyright text row covers the
section. This made it so I couldn't see the Licence from the website. (I had
to use the main menu to navigate to Github then to the Licence.)

~~~
thomnah
can you post a screenshot at developers@layerjs.org? and which device are you
using? Thx!

------
albanberg
This looks really interesting! I will have to try it out. The Parallax seems
to be different than usual since the image in the background does not scroll.
It would be really cool if you could make that background image scroll and at
a different speed from the content. :-)

~~~
thomnah
yes, that's on the todo list to couple scrolling of two overlapping layers
(e.g. scroll other layer x times)

~~~
albanberg
Cool!

------
bertjk
That is a really neat "video". I see that it is mostly just 3d-transformed
LayerJS, but did you use any particular tools to do it? Whether to help fine-
tune the desired 3d angles or to designate where animation parts fire on the
applicable timeline, etc ?

~~~
thomnah
actually this is currently handcoded calling the JS api of layerJS at specific
time points. Let me know if you need this somewhere i can share the code.

------
gamw_mana_sou
I have started prototyping a similar UI concept on top of Vue.js

I'd like to ask you how did you manage to support all those JavaScript
frameworks in one go? It's still very possible for me to revert to vanilla js
instead of getting locked into Vue.js

~~~
thomnah
The way it is getting along with other frameworks is that makes as little
asumptions as possible. So layerJS will only deal with divs that have the
attribute "lj-type". The it will only show, animate or hide them. There are a
few exceptions to this but that's basically it. So if another framework like
vue modifies other elements on the page its free to do so. layerJS actually
has a few mutation observers lurking around to see if the dimensions of frames
or stages change to adapt the view accordingly. So that means that other
frameworks can modify the DOM the way they want and layerJS will adapt. If
there may be some hickups in special cases, please let us know so we can fix
it.

~~~
spankalee
How well does it work with Shadow DOM? Do the mutation observers get created
on attachShadow()?

~~~
thomnah
basically layerJS will reparse if it detects a change rigth inside one of its
objects. This works for example in a vuejs app we create. If the framework
actually rebuilds the whole DOM hierarchy the layerJS parse would need to be
triggered manually. Let me know if you get into this situation so we can
tackle it.

------
kaushalmodi
I would have loved to try it, but it looks a bit too heavy (.js size, even
minified is 30KB+, and looks like jquery is needed too?) foe my 197KB
homepage, and I am actually working to trim off few dozen KBs by not depending
on jquery slim.

~~~
thomnah
no there is no dependency in layerJS. Also not on jQuery.

~~~
kaushalmodi
Also, on a related suggestion, it could also be nice if layerJS could be
modular, so that everyone does not need to download the whole thing if they
only need the responsive menus, for example.

Of course, I realize that implementing this would be a lot of effort and would
require change in your release flow.

But just in case, there's more demand for what I suggest, here's an
inspiration from FontAwesome: [https://fontawesome.com/get-started/svg-with-
js](https://fontawesome.com/get-started/svg-with-js). Note how they provide a
fontawesome-all.js having __all __the icons. But they also provide separate
fa-*.js for different icon families for the people who don 't care about
downloading the whole thing.

~~~
thomnah
this is a very valid request. And we are thinking about it. But note that
layerJS is not a collection of effects. It actually uses the same mechanism
for every effect (that's the concept behind it). Maybe we can off-load some of
the routers and some of the transitions types...

------
mcintyre1994
This looks pretty nice, I like the idea and the abstraction seems nice. Super
annoying problem though: you're stealing my Mac's swipe to go back gesture on
your entire page even where you have no swipe actions.

~~~
thomnah
that's funny because i was always annoyed about the back functionality
deleting all my carefully entered form data when unintentionally activating
this gesture. Anyway you are right. we need to make this configurable. Apart
from that i find it very intuitive to use the touchpad swipe for in app
navigation as it feels very much as on mobile devices.

------
tambourine_man
Wouldn't a data-lj-type attribute be more HTML validator friendly?

~~~
thomnah
this actually works. I just use the short forms in the documentation because
it is more compact and more understandable

------
sebringj
This looks perfect for marketing websites where you get usually static assets
and you can simply animate them in a flow easily. Great idea.

~~~
thomnah
Thanks!

------
dandare
I really like the website (on mobile).

~~~
sventalborg
Thanks

------
btbuildem
Why remove the scrollbar?

~~~
thomnah
not intentionally. It's scrolling inside a div and not on the body. So the
reason must be somewhere there. I have to look into it.

------
airstrike
The “video” doesn’t work for me on Chrome in iOS...

~~~
thomnah
That's a pitty because i think this explains the concept best. The "video" is
indeed not a video. It's actually layerJS operating on a "dummy" website. We
tested it on a few devices including iOS. Which device version are you using?

~~~
mstade
Doesn't seem to work in Safari 11.1 (desktop) either.

~~~
thomnah
hmm, is it that you can't see the content when it enters the 3d view? It's
weird safari seems to put the containing divs background color in front if the
3d animation. I'll try to hotfix that

~~~
mstade
Yes, that's precisely it. It keeps going, but things start to clip in various
ways, but mostly it's just white.

------
michaelmior
Looks neat :) Typo below.

> head of you document

~~~
thomnah
Thx! Will fix!

~~~
thomnah
Made a hotfix. Still has a little issue that the overlay text sticks through
the frames. Should be useable for now. Thanks!

------
aphextron
I was wondering how long it would take JS developers to rediscover
UIViewControllers/UIViews

------
hungerstrike
Scrolling, specifically auto-scrolling, is broken due to the insistence that I
should look at the top navigation bar no matter where I scroll on the page.

When I disabled JavaScript to get rid of the annoying navigation bar, the rest
of the site stopped working.

