[{"data":1,"prerenderedAt":250},["ShallowReactive",2],{"project-10608457":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":43,"post_text":45,"what":46,"said":77,"maker_in_thread":159,"shape":171,"grid":175,"attempts":216,"same_week":217,"maker_shows":39,"maker_hidden":242,"reader_version":243,"card":244},"10608457","Simulacra.js","one-way data binding for web applications","title","Show HN: Simulacra.js – one-way data binding for web applications","https:\u002F\u002F0x8890.github.io\u002Fsimulacra\u002F","0x8890.github.io","daliwali",1448148455,2015,82,19,326,2565,13,"notable","languages","javascript ui library","library",[24,25,26,27,28],"data binding","one-way binding","javascript","dom rendering","client-side ui","roasted",-0.167,{"positive":32,"neutral":33,"mixed":34,"critical":35},3,1,0,4,8,{"performance":38,"design":40,"idea":41,"docs":42},{"positive":34,"critical":39},2,{"positive":33,"critical":39},{"positive":39,"critical":34},{"positive":34,"critical":34},[33,34,34,33,34,34,34,33,34,34,34,44,32,34,44,44,33,34,34],5,null,{"problem":47,"audience":45,"pricing":45,"motivation":59,"time_to_build":45,"stack":66,"openness":75,"stage":76,"team_size":76},{"value":48,"source":49,"evidence":50},"Keeps DOM in sync with a JavaScript object without heavy frameworks","commenter",[51,55],{"id":52,"by":53,"text":54},"10610527","matthewtoast","I've been looking for something like this. This cleanly solves the basic (majority) case and doesn't try to boil the ocean. It looks like it would be easy to build a higher-level…",{"id":56,"by":57,"text":58},"10610431","barrkel","This is fine for scalar binding of simple values - a property mapping to a value - but what about vector binding, where you have a list of items, and need the UI to reflect…",{"value":60,"source":61,"evidence":62},"Wanted a simple way to render lists and nested bindings, the author's main reason for writing it","maker",[63],{"id":64,"by":11,"text":65},"10613279","when installing modules from npm, it's customary to use commonjs and `require` them. or you could simply download the built version, include it as a script tag and use the global…",[67],{"value":68,"source":69,"evidence":70},"JavaScript","inferred",[71],{"id":72,"by":73,"text":74},"10612475","jordanlev","I've been doing database-backed web apps using MVC frameworks for so many years, that it's hard for me to wrap my head around the front-end javascript frameworks. This one seems…","open_source","unknown",{"praise":78,"objections":95,"requests":119,"questions":132,"alternatives":141},[79,87],{"value":80,"source":49,"evidence":81},"Compact, minimalist, handles the basic case without boiling the ocean",[82,83],{"id":52,"by":53,"text":54},{"id":84,"by":85,"text":86},"10610850","teleclimber","Interesting project and it's nice to see work done on something compact and minimalist. But I don't like that CSS classes are used to bind data. I know other libraries do this…",{"value":88,"source":49,"evidence":89},"Simple enough to adopt for lightweight UI",[90,94],{"id":91,"by":92,"text":93},"10612996","marksteve","I love it! This is going to be my goto library for lightweight ui from now on. https:\u002F\u002Fgithub.com\u002Fmarksteve\u002Ftodo-simulacra",{"id":72,"by":73,"text":74},[96,108,112],{"value":97,"source":49,"evidence":98},"Using CSS classes for data binding mixes style and behaviour",[99,100,104],{"id":84,"by":85,"text":86},{"id":101,"by":102,"text":103},"10612312","Dru89","This looks pretty interesting. It does require the structure of the HTML to be very similar to the object, though. And I'm not thrilled that is uses the class name for a DOM node…",{"id":105,"by":106,"text":107},"10611093","nilliams","If you always use something like 'data-bind' for binding and keep classes solely for CSS it's easier to maintain simply because you know 'what classes you can delete' without…",{"value":109,"source":49,"evidence":110},"Unclear whether vector binding and heterogeneous elements are supported",[111],{"id":56,"by":57,"text":58},{"value":113,"source":49,"evidence":114},"Benchmarks are hard to reproduce",[115],{"id":116,"by":117,"text":118},"10610687","leeoniya","These benchmarks are tough to reproduce (for all libs). Mithril's instructions say, \"To run an execution time test on this page, run the profiler from your browser's developer…",[120,124,128],{"value":121,"source":49,"evidence":122},"More realistic examples of a full app",[123],{"id":72,"by":73,"text":74},{"value":125,"source":49,"evidence":126},"Stress tests such as dbmonster and speedtest",[127],{"id":116,"by":117,"text":118},{"value":129,"source":49,"evidence":130},"Clearer usage via script tag without a bundler",[131],{"id":72,"by":73,"text":74},[133,137],{"value":134,"source":49,"evidence":135},"How to use it in a plain script tag rather than with require",[136],{"id":72,"by":73,"text":74},{"value":138,"source":49,"evidence":139},"Does it support sorts, insertions and deletions in lists",[140],{"id":56,"by":57,"text":58},[142,149,153],{"value":143,"source":49,"evidence":144},"Mustache \u002F Hogan.js",[145],{"id":146,"by":147,"text":148},"10610560","tedmiston","I think you're correct about its intended use case being different. I used Twitter's Mustache compiler, Hogan.js, in a similar fashion for a tiny app once. Though I suppose I…",{"value":150,"source":49,"evidence":151},"domvm",[152],{"id":116,"by":117,"text":118},{"value":154,"source":49,"evidence":155},"Pure templating (beebole)",[156],{"id":157,"by":117,"text":158},"10611116","reminds me of http:\u002F\u002Fbeebole.com\u002Fpure\u002F",{"comments":160,"answered":32,"key":161},6,[162,165,168],{"id":163,"text":164},"10610623","author here - getting iteration and nesting to work was the hardest part, and I don't think the basic example on the homepage illustrates this too well. the way it works is that…",{"id":166,"text":167},"10610747","I agree that it would be more informative to stress-test using a more real-world use case, I was just in a hurry and used the render benchmark from Mithril.js. however I think…",{"id":169,"text":170},"10610847","I added a benchmark folder: https:\u002F\u002Fgithub.com\u002F0x8890\u002Fsimulacra\u002Ftree\u002Fmaster\u002Fbenchmark cheers!",{"commenters":172,"max_depth":35,"maker_replies":160,"first_comment_mins":173,"lifespan_hours":174},11,999,33,[176,178,180,182,183,185,188,190,192,195,199,200,202,204,206,209,210,211,213],[56,34,33,177,57,34],"project\u002Fcritical\u002Fperformance",[146,34,34,179,147,34],"commenter\u002Fneutral\u002Fnone",[163,34,34,181,11,33],"project\u002Fneutral\u002Fdesign",[116,33,33,177,117,34],[166,33,34,184,11,33],"project\u002Fneutral\u002Fperformance",[186,33,34,187,117,34],"10610754","commenter\u002Fneutral\u002Fperformance",[169,33,34,189,11,33],"maker\u002Fneutral\u002Fperformance",[84,39,33,191,85,34],"project\u002Fcritical\u002Fdesign",[193,39,34,194,11,33],"10610886","maker\u002Fneutral\u002Fdesign",[196,39,34,197,198,34],"10610973","commenter\u002Fneutral\u002Fdesign","gravity13",[105,39,34,197,106,34],[52,32,44,201,53,34],"project\u002Fpositive\u002Fidea",[72,35,32,203,73,34],"project\u002Fneutral\u002Fdocs",[64,35,34,205,11,33],"maker\u002Fneutral\u002Fdocs",[207,35,44,208,73,34],"10613394","maker\u002Fpositive\u002Fdesign",[91,44,44,201,92,34],[101,160,33,191,102,34],[212,160,34,194,11,33],"10613339",[157,214,34,215,117,34],7,"other\u002Fneutral\u002Fnone",[],[218,222,226,230,234,238],{"id":219,"name":220,"points":221,"category":20},"10611813","BestRuby",92,{"id":223,"name":224,"points":14,"category":225},"10626157","Commandcar","dev_tools",{"id":227,"name":228,"points":229,"category":20},"10608119","HtmlPy",79,{"id":231,"name":232,"points":233,"category":225},"10596241","mention-bot",72,{"id":235,"name":236,"points":237,"category":225},"10612105","Wox",54,{"id":239,"name":240,"points":241,"category":20},"10609825","Microm",46,false,"v2",{"id":245,"name":5,"line":6,"ai":242,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":246,"top":18,"kw":247,"maker":11,"domain":10,"tier":19,"attempts":34,"strip":248,"url":9,"mix":249,"praise":80,"objection":97,"sub":21},10608457,-0.17,[24,25,26,27,28],"1001000100053055100",[32,33,34,35],1794036537890]