[{"data":1,"prerenderedAt":424},["ShallowReactive",2],{"project-16985250":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":48,"post_text":50,"what":51,"said":81,"maker_in_thread":217,"shape":225,"grid":229,"attempts":381,"same_week":386,"maker_shows":41,"maker_hidden":416,"reader_version":417,"card":418},"16985250","LayerJS","A simple UI composition and navigation library","title","Show HN: LayerJS – A simple UI composition and navigation library","https:\u002F\u002Flayerjs.org","layerjs.org","thomnah",1525349817,2018,176,67,215,2155,10,"notable","languages","javascript ui library","library",[24,25,26,27,28],"ui composition","javascript library","html navigation","page transitions","declarative html","mixed",-0.189,{"positive":32,"neutral":33,"mixed":34,"critical":35},7,15,3,16,41,{"idea":38,"execution":40,"docs":43,"design":45,"performance":47},{"positive":39,"critical":34},2,{"positive":41,"critical":42},1,6,{"positive":44,"critical":44},0,{"positive":41,"critical":46},4,{"positive":44,"critical":41},[41,49,41,41,34,41,44,34,34,34,41,34,44,41,34,44,49,41,34,49,34,34,34,41,44,34,41,44,34,49,49,49,41,44,41,41,34,49,34,41],5,null,{"problem":52,"audience":50,"pricing":50,"motivation":62,"time_to_build":50,"stack":69,"openness":78,"stage":79,"team_size":80},{"value":53,"source":54,"evidence":55},"Building animated, dynamic UI navigation and layouts requires lots of JavaScript code; layerJS declares them in static HTML","maker",[56,59],{"id":57,"by":11,"text":58},"16989055","Oh hey, that's quite a critical comment. But usually the best comes out of criticism. So let me go a bit deeper to explain our case. layerJS is not implementing a single UX…",{"id":60,"by":11,"text":61},"16986875","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…",{"value":63,"source":54,"evidence":64},"Make UI layout and interaction declarative in HTML, a polyfill for concepts browsers do not yet support",[65,66],{"id":57,"by":11,"text":58},{"id":67,"by":11,"text":68},"16989172","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…",[70,74],{"value":71,"source":54,"evidence":72},"JavaScript",[73],{"id":60,"by":11,"text":61},{"value":75,"source":54,"evidence":76},"HTML",[77],{"id":60,"by":11,"text":61},"open_source","beta","unknown",{"praise":82,"objections":102,"requests":146,"questions":173,"alternatives":192},[83,95],{"value":84,"source":85,"evidence":86},"Interesting, well-thought-out abstraction for declarative UI","commenter",[87,91],{"id":88,"by":89,"text":90},"16987673","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.",{"id":92,"by":93,"text":94},"16986361","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.",{"value":96,"source":85,"evidence":97},"Website looks nice on mobile",[98],{"id":99,"by":100,"text":101},"16985742","dandare","I really like the website (on mobile).",[103,110,121,128,135],{"value":104,"source":85,"evidence":105},"Generated markup is cluttered with many attributes and extra divs",[106],{"id":107,"by":108,"text":109},"16988166","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…",{"value":111,"source":85,"evidence":112},"Claims of pure HTML and CSS are misleading since it requires JavaScript",[113,117],{"id":114,"by":115,"text":116},"16986674","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…",{"id":118,"by":119,"text":120},"16985622","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…",{"value":122,"source":85,"evidence":123},"Library size of 30KB is heavy",[124],{"id":125,"by":126,"text":127},"16988069","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…",{"value":129,"source":85,"evidence":130},"Restrictive license clause against HTML editors and web builders",[131],{"id":132,"by":133,"text":134},"16987322","codetrotter","Non-standard license with a restrictive custom clause unfortunately. https:\u002F\u002Fgithub.com\u002FlayerJS\u002FlayerJS\u002Fblob\u002Fmaster\u002FLICENSE > Permission is hereby granted, free of charge, to any…",{"value":136,"source":85,"evidence":137},"Demo video does not work on some browsers",[138,142],{"id":139,"by":140,"text":141},"16986058","airstrike","The “video” doesn’t work for me on Chrome in iOS...",{"id":143,"by":144,"text":145},"16986278","mstade","Doesn't seem to work in Safari 11.1 (desktop) either.",[147,153,160,167],{"value":148,"source":85,"evidence":149},"Modular builds so users download only needed parts",[150],{"id":151,"by":126,"text":152},"16988255","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…",{"value":154,"source":85,"evidence":155},"Make parallax background scroll at a different speed",[156],{"id":157,"by":158,"text":159},"16987719","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…",{"value":161,"source":85,"evidence":162},"Fix back navigation and swipe gesture conflicts",[163],{"id":164,"by":165,"text":166},"16989474","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…",{"value":168,"source":85,"evidence":169},"Document dependency sizes",[170],{"id":171,"by":126,"text":172},"16988226","Thanks 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.",[174,185],{"value":175,"source":85,"evidence":176},"Does it work with Shadow DOM and other frameworks like Vue",[177,181],{"id":178,"by":179,"text":180},"16986777","spankalee","How well does it work with Shadow DOM? Do the mutation observers get created on attachShadow()?",{"id":182,"by":183,"text":184},"16986653","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…",{"value":186,"source":85,"evidence":187},"Why is the scrollbar removed",[188],{"id":189,"by":190,"text":191},"16986727","btbuildem","Why remove the scrollbar?",[193,204,211],{"value":194,"source":85,"evidence":195},"Intercooler.js",[196,200],{"id":197,"by":198,"text":199},"16986694","egeozcan","For adding interaction using HTML attributes, I highly suggest intercooler.js: http:\u002F\u002Fintercoolerjs.org\u002F It also just enhances your valid forms and markup, which means, if you…",{"id":201,"by":202,"text":203},"16991464","bobwaycott","This looks like Intercooler, but purely focused on UI transition and animation—with a bit more conceptual overhead than IC tends to require.",{"value":205,"source":85,"evidence":206},"jQuery Mobile",[207],{"id":208,"by":209,"text":210},"16985847","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…",{"value":212,"source":85,"evidence":213},"Declarative Custom Elements and HTML modules proposals",[214],{"id":215,"by":179,"text":216},"16986770","> \"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:…",{"comments":218,"answered":32,"key":219},24,[220,223,224],{"id":221,"text":222},"16987421","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…",{"id":67,"text":68},{"id":57,"text":58},{"commenters":226,"max_depth":49,"maker_replies":218,"first_comment_mins":227,"lifespan_hours":228},33,52,13,[230,232,234,237,241,245,247,250,254,256,258,259,260,263,267,269,270,272,273,274,276,277,280,281,285,287,289,291,293,296,298,300,302,304,308,310,312,314,315,317,320,323,325,326,328,330,332,335,337,339,341,343,345,346,348,350,352,353,355,357,359,361,366,368,370,373,377],[132,44,41,231,133,44],"project\u002Fcritical\u002Fnone",[221,44,44,233,11,41],"maker\u002Fneutral\u002Fnone",[235,44,49,236,133,44],"16987494","maker\u002Fpositive\u002Fnone",[238,44,44,239,240,44],"16988585","commenter\u002Fneutral\u002Fnone","crawfordcomeaux",[242,44,41,243,244,44],"16991269","project\u002Fcritical\u002Fidea","codingdave",[107,41,41,246,108,44],"project\u002Fcritical\u002Fexecution",[248,41,44,239,249,44],"16988368","osrec",[251,41,34,252,253,44],"16988637","project\u002Fmixed\u002Fexecution","kapv89",[255,41,41,243,108,44],"16988825",[67,41,44,257,11,41],"project\u002Fneutral\u002Fidea",[57,41,44,257,11,41],[118,39,34,252,119,44],[261,39,34,233,262,44],"16985713","sventalborg",[264,39,34,265,266,44],"16985771","project\u002Fneutral\u002Fexecution","EricLemieux",[268,39,44,265,11,41],"16985858",[215,39,34,257,179,44],[271,39,44,233,11,41],"16989651",[197,34,41,231,198,44],[201,34,34,257,202,44],[114,46,34,275,115,44],"project\u002Fmixed\u002Fdocs",[60,46,44,233,11,41],[278,46,41,279,115,44],"16987738","project\u002Fcritical\u002Fdesign",[208,49,41,246,209,44],[282,49,34,283,284,44],"16985892","project\u002Fneutral\u002Fdesign","tclancy",[286,49,44,233,11,41],"16985916",[288,49,44,265,11,41],"16985903",[88,42,49,290,89,44],"project\u002Fpositive\u002Fidea",[292,42,44,233,11,41],"16987990",[294,32,41,279,295,44],"16986734","Nadya",[297,32,44,233,11,41],"16986889",[157,299,34,283,158,44],8,[301,299,44,283,11,41],"16988004",[303,299,49,236,158,44],"16988807",[305,306,34,283,307,44],"16987365",9,"bertjk",[309,306,44,265,11,41],"16987434",[182,18,34,311,183,44],"maker\u002Fneutral\u002Fexecution",[313,18,44,265,11,41],"16986733",[178,18,34,265,179,44],[316,18,44,265,11,41],"16987948",[125,318,41,319,126,44],11,"project\u002Fcritical\u002Fperformance",[321,318,44,322,11,41],"16988148","project\u002Fneutral\u002Fperformance",[171,318,34,324,126,44],"project\u002Fneutral\u002Fdocs",[151,318,34,322,126,44],[327,318,44,322,11,41],"16989118",[164,329,41,279,165,44],12,[331,329,44,283,11,41],"16989515",[333,228,34,265,334,44],"16987263","tambourine_man",[336,228,44,324,11,41],"16987453",[92,338,49,290,93,44],14,[340,338,44,236,11,41],"16986901",[99,33,49,342,100,44],"project\u002Fpositive\u002Fdesign",[344,33,49,236,262,44],"16985763",[189,35,34,283,190,44],[347,35,44,265,11,41],"16986909",[139,349,41,246,140,44],17,[351,349,44,265,11,41],"16986116",[143,349,41,246,144,44],[354,349,44,265,11,41],"16986420",[356,349,41,246,144,44],"16986562",[358,349,41,246,115,44],"16986685",[360,349,34,322,140,44],"16986744",[362,363,49,364,365,44],"16986206",18,"project\u002Fpositive\u002Fexecution","michaelmior",[367,363,44,311,11,41],"16986255",[369,363,44,311,11,41],"16986814",[371,363,34,324,372,44],"16986384","dugmartin",[374,375,41,243,376,44],"16987646",19,"aphextron",[378,379,41,279,380,44],"16986450",20,"hungerstrike",[382,385],{"id":383,"t":384,"points":41,"comments":44},"13803306",1488814517,{"id":4,"t":12,"points":14,"comments":15},[387,392,397,402,406,411],{"id":388,"name":389,"points":390,"category":391},"17015043","Idyll guitar tuning post",338,"learning_science",{"id":393,"name":394,"points":395,"category":396},"17004898","Morning Cup of Coding",192,"productivity",{"id":398,"name":399,"points":400,"category":401},"17033574","A Native Art Gallery for the Mac",146,"creative",{"id":403,"name":404,"points":405,"category":396},"17002648","new-note",133,{"id":407,"name":408,"points":409,"category":410},"17029430","Offline Object Detection and Tracking on a Raspberry Pi",106,"ai",{"id":412,"name":413,"points":414,"category":415},"17008147","Stadia Maps",105,"web_saas",false,"v2",{"id":419,"name":5,"line":6,"ai":416,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":420,"top":18,"kw":421,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":422,"url":9,"mix":423,"praise":84,"objection":104,"sub":21},16985250,-0.19,[24,25,26,27,28],"1511310333130130513533310310355510113531",[32,33,34,35],1794036565707]