8 ms·
Show HN: LayerJS – A simple UI composition and navigation library
- mrspeaker 8y agoI 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!
- sventalborg 8y agoThanks! It's indeed using javascript ;-) It also has some support for "native scrolling" that could help a bit in a non-JS environment. Let me know if you have any feedback after the weekend (:
- EricLemieux 8y agoOn 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 8y agoyes, 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
- flyingamarnath 8y agoCorrect I agreed with you
- spankalee 8y ago> "UI composition in pure HTML" If you're looking for this in a standard form, follow the work being done on HTML modules and Declarative Custom Elements: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Declarative-Custom-Elements-Strawman.md https://github.com/w3c/webcomponents/blob/gh-pages/proposals... Together those will mean UI components without any JavaScript, that can depend on and load other UI components, etc.
- thomnah 8y agoThat probably a good way to follow in future...
- dandare 8y agoI really like the website (on mobile).
- sventalborg 8y agoThanks
- mcjiggerlog 8y agoThis 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 8y agoSeeing "layers" and "frames" in the top content gave me a throwback to Netscape 4, so YMMV.
- thomnah 8y ago(: good old times
- thomnah 8y agoThanks for reporting! The website uses a mechanism to load subpages dynamically. I guess the closing and opening restores the history, but reloads the page from the server. The the content from layerjs.org is missing, but the history "thinks" its there. So we need to catch this...
- airstrike 8y agoThe “video” doesn’t work for me on Chrome in iOS...
- thomnah 8y agoThat'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 8y agoDoesn't seem to work in Safari 11.1 (desktop) either.
- thomnah 8y agohmm, 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 8y agoYes, that's precisely it. It keeps going, but things start to clip in various ways, but mostly it's just white.
- reaperducer 8y agoDoesn't work on Safari 11.0.1, either.
- airstrike 8y agoiPhone 6s running iOS 11.3 and Chrome 65.0.3325.152 I’m a lazy person when it comes to updating the OS and apps, but let me update both and get back to you.
- michaelmior 8y agoLooks neat :) Typo below. > head of you document
- sebringj 8y agoThis looks perfect for marketing websites where you get usually static assets and you can simply animate them in a flow easily. Great idea.
- thomnah 8y agoThanks!
- hungerstrike 8y agoScrolling, 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.
- gamw_mana_sou 8y agoI 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 8y agoThe 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 8y agoHow well does it work with Shadow DOM? Do the mutation observers get created on attachShadow()?
- thomnah 8y agobasically 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.
- reaperducer 8y agoLooks 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 8y agoThanks. 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 8y agoPop-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?
- egeozcan 8y agoFor 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 8y agoThis looks like Intercooler, but purely focused on UI transition and animation—with a bit more conceptual overhead than IC tends to require.
- btbuildem 8y agoWhy remove the scrollbar?
- thomnah 8y agonot 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.
- Nadya 8y agoI 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 8y agocan you post a screenshot at developers@layerjs.org? and which device are you using? Thx!
- tambourine_man 8y agoWouldn't a data-lj-type attribute be more HTML validator friendly?
- thomnah 8y agothis actually works. I just use the short forms in the documentation because it is more compact and more understandable
- codetrotter 8y agoNon-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 8y agoThis 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.
- lerie82 8y ago"These are fit into Stages", yet another typo. I really hate the fact that people boast that things are "pure html" when in fact it's all just javascript that uses data attributes.
- bertjk 8y agoThat 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 8y agoactually 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.
- aphextron 8y agoI was wondering how long it would take JS developers to rediscover UIViewControllers/UIViews
- dbranes 8y agoLove 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 8y agototally agreed. I went into the declarative/static argumentation on medium https://medium.com/@layerjs/getting-started-with-layerjs-17f679452c8d https://medium.com/@layerjs/getting-started-with-layerjs-17f... but it really depends on the audience if these terms trigger the interest.
- albanberg 8y agoThis 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. :-)
- kaushalmodi 8y agoI 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 8y agono there is no dependency in layerJS. Also not on jQuery.
- kaushalmodi 8y agoThanks for clarifying that. I think it would be useful to mention the size of dependencies a site would need if they want to use layerJS.
- kaushalmodi 8y agoAlso, 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 8y agothis 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...
- CriticalHitKW 8y agoThis 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.
- osrec 8y agoWhile I agree with you that the implementation is not ideal, the use of "awful" is a little harsh and unnecessarily discouraging! To the creator, please don't take it to heart, but do look at the more constructive observations mentioned above :)
- kapv89 8y agoYou 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".
- mcintyre1994 8y agoThis 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 8y agothat'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.