[{"data":1,"prerenderedAt":370},["ShallowReactive",2],{"project-18051037":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":69,"maker_in_thread":152,"shape":164,"grid":169,"attempts":330,"same_week":331,"maker_shows":37,"maker_hidden":361,"reader_version":362,"card":363},"18051037","Thi.ng\u002Fhdom","S-expression based, pure ES6 UI\u002FVDOM components","title","Show HN: Thi.ng\u002Fhdom – S-expression based, pure ES6 UI\u002FVDOM components",null,"toxmeister",1537710139,2018,180,64,208,2155,10,"notable","dev_tools","ui component library","library",[23,24,25,26,27],"vdom","hiccup","s-expression ui","es6 components","virtual dom","mixed",0.121,{"positive":31,"neutral":17,"mixed":32,"critical":33},9,0,4,23,{"idea":36,"performance":39,"design":40,"privacy":42,"docs":43},{"positive":37,"critical":38},2,1,{"positive":32,"critical":37},{"positive":41,"critical":32},3,{"positive":32,"critical":32},{"positive":32,"critical":38},[45,41,41,41,45,32,38,45,32,45,41,45,32,41,32,32,32,32,32,41,32,32,32,32,38,32,32,32,32,45,41,45,45,45,41,32,38,32,38,41],5,"https:\u002F\u002Fgithub.com\u002Fthi-ng\u002Fumbrella\u002Fblob\u002Fmaster\u002Fpackages\u002Fhdom\u002FREADME.md\n\nLightweight UI component tree definition syntax, DOM creation and differential updates using only vanilla JS data structures (arrays, iterators, closures, attribute objects or objects with life cycle functions, closures). By default targets the browser's native DOM, but supports other arbitrary target implementations in a branch-local manner, e.g. to define scene graphs for a canvas element as part of the normal UI tree.\n\nBenefits:\n\n- Use the full expressiveness of ES6 \u002F TypeScript to define user interfaces\n\n- No enforced ",{"problem":48,"audience":9,"pricing":9,"motivation":9,"time_to_build":9,"stack":54,"openness":66,"stage":67,"team_size":68},{"value":49,"source":50,"evidence":51},"defining and updating UI component trees using plain JS data structures without templates or transpiling","maker",[52],{"id":53},"post",[55,59],{"value":56,"source":50,"evidence":57},"JavaScript (ES6)",[58],{"id":53},{"value":60,"source":50,"evidence":61},"TypeScript",[62,63],{"id":53},{"id":64,"by":10,"text":65},"18051582","Thanks & I used to do 12+ years of Java and other OOP languages myself before I started using Clojure in 2011 and ever since got hooked on the more functional approach without…","open_source","launched","unknown",{"praise":70,"objections":90,"requests":112,"questions":120,"alternatives":135},[71,83],{"value":72,"source":73,"evidence":74},"Clean functional composition and no enforced state opinion","commenter",[75,79],{"id":76,"by":77,"text":78},"18051728","aaron-santos","There is an interesting synergy at play amongst UI as s-exprs, functional programming, and components\u002Fvdom where the whole is more valuable than the sum of its parts. I was…",{"id":80,"by":81,"text":82},"18051806","tofflos","Nice visualizations. I particularly liked https:\u002F\u002Fgithub.com\u002Fthi-ng\u002Fumbrella\u002Ftree\u002Ffeature\u002Festuary\u002Fpackages\u002Festuary. Where can I find more stuff like this? :)",{"value":84,"source":73,"evidence":85},"Smaller, less verbose syntax than HTML or JSX",[86],{"id":87,"by":88,"text":89},"18051875","jjnoakes","For me personally, smaller file sizes and less verbosity both improve readability.",[91,98,105],{"value":92,"source":73,"evidence":93},"Requires JavaScript; fails to render without it",[94],{"id":95,"by":96,"text":97},"18052142","superkuh","It may be less verbose but it fails completely to render anything if javascript is not enabled (in the browser) on the domain the scripts are to be loaded from. Bad…",{"value":99,"source":73,"evidence":100},"Less readable than markup-like syntax such as lit-html",[101],{"id":102,"by":103,"text":104},"18051870","spankalee","I'd still rather write markup in a format that looks like markup. I think this is why JSX is so popular. This is why I prefer something like lit-html with actual markup. Example…",{"value":106,"source":73,"evidence":107},"SVG-based demo stutters with many elements",[108],{"id":109,"by":110,"text":111},"18052130","jefozabuss","FYI the \"Mouse gesture analysis\" example has performance issues after 300~ samples (e.g. keep drawing big circles continuously) Win10\u002FChrome\u002Fi7 4790k\u002FGTX 970",[113],{"value":114,"source":73,"evidence":115},"Add a README in the package directory",[116],{"id":117,"by":118,"text":119},"18051288","tln","OP, a README in that directory would be useful I found some docs: http:\u002F\u002Fdocs.thi.ng\u002Fumbrella\u002Fhdom\u002F",[121,128],{"value":122,"source":73,"evidence":123},"What makes it different from Mercury and other pre-React frameworks",[124],{"id":125,"by":126,"text":127},"18052262","ricardobeat","What makes this different from Mercury (https:\u002F\u002Fgithub.com\u002FRaynos\u002Fmercury) and a ton of other pre-React frameworks?",{"value":129,"source":73,"evidence":130},"Is the DOM an afterthought or tightly coupled",[131],{"id":132,"by":133,"text":134},"18051738","TheRealPomax","Is the DOM an afterthought here, like in React, or is everything strongly tied to the DOM?",[136,140,144,148],{"value":137,"source":73,"evidence":138},"Reagent",[139],{"id":76,"by":77,"text":78},{"value":141,"source":73,"evidence":142},"Om",[143],{"id":76,"by":77,"text":78},{"value":145,"source":73,"evidence":146},"lit-html",[147],{"id":102,"by":103,"text":104},{"value":149,"source":73,"evidence":150},"Mercury",[151],{"id":125,"by":126,"text":127},{"comments":153,"answered":17,"key":154},22,[155,158,161],{"id":156,"text":157},"18051949","I actually did mention Reagent in the readme in this section (below the diagram): https:\u002F\u002Fgithub.com\u002Fthi-ng\u002Fumbrella\u002Ftree\u002Fmaster\u002Fpackages\u002Fhdom#the-hdom-data-flow Quote: \"The…",{"id":159,"text":160},"18051468","Agreed. I also don't see it as key feature, but listed it more in nod to point out that hiccup format is less verbose. smaller file size also means less to read for humans…",{"id":162,"text":163},"18052135","For me generally too, but I was afraid of the typical counter example: Perl oneliners, size coding in general... I think there's fine line between aiming to be lightweight and…",{"commenters":165,"max_depth":166,"maker_replies":153,"first_comment_mins":167,"lifespan_hours":168},27,6,45,50,[170,172,176,178,180,184,185,189,191,192,195,197,200,203,207,209,211,213,216,219,222,224,227,230,232,234,236,240,242,245,247,249,253,256,259,260,263,266,269,271,275,277,279,283,286,289,292,296,298,300,302,304,306,308,310,312,313,315,317,320,322,324,326,328],[76,32,45,171,77,32],"project\u002Fpositive\u002Fidea",[173,32,41,174,175,32],"18051917","maker\u002Fneutral\u002Fnone","geokon",[156,32,32,177,10,38],"project\u002Fneutral\u002Fdocs",[179,32,41,174,77,32],"18051977",[181,38,41,182,183,32],"18051421","project\u002Fneutral\u002Fperformance","nothrabannosir",[159,38,32,174,10,38],[186,38,32,187,188,32],"18051551","commenter\u002Fneutral\u002Fperformance","Jakob",[87,38,45,190,88,32],"project\u002Fpositive\u002Fdesign",[162,38,32,174,10,38],[193,38,41,182,194,32],"18051918","rgovostes",[95,38,38,196,96,32],"project\u002Fcritical\u002Fidea",[198,38,45,171,199,32],"18052302","danpeddle",[201,38,32,202,10,38],"18052759","project\u002Fneutral\u002Fidea",[204,38,32,205,206,32],"18054519","commenter\u002Fneutral\u002Fnone","zeroname",[208,38,32,205,96,32],"18067194",[80,37,45,210,81,32],"maker\u002Fpositive\u002Fdesign",[212,37,41,174,194,32],"18051880",[214,37,32,215,10,38],"18052118","maker\u002Fneutral\u002Fdocs",[217,37,45,218,194,32],"18052836","maker\u002Fpositive\u002Fnone",[220,37,32,221,10,38],"18052112","maker\u002Fneutral\u002Fexecution",[102,41,41,223,103,32],"project\u002Fneutral\u002Fdesign",[225,41,32,226,10,38],"18052072","maker\u002Fneutral\u002Fdesign",[228,41,32,229,103,32],"18053171","commenter\u002Fneutral\u002Fdesign",[231,41,32,226,10,38],"18053755",[233,41,32,229,103,32],"18059001",[235,41,32,229,10,38],"18060652",[237,41,32,238,239,32],"18052176","other\u002Fneutral\u002Fnone","gwn7",[241,41,32,238,10,38],"18052249",[243,41,32,244,206,32],"18054570","other\u002Fcritical\u002Fnone",[246,41,32,244,239,32],"18060671",[248,41,32,244,206,32],"18063446",[250,33,41,251,252,32],"18054370","project\u002Fneutral\u002Fprivacy","localvoid",[254,33,32,255,10,38],"18060885","maker\u002Fneutral\u002Fprivacy",[257,45,32,238,258,32],"18051476","Fifer82",[64,45,32,174,10,38],[261,45,32,238,262,32],"18051841","pjmlp",[264,45,32,238,265,32],"18052909","groovy2shoes",[267,45,32,268,10,38],"18052948","commenter\u002Fpositive\u002Fnone",[117,166,38,270,118,32],"project\u002Fcritical\u002Fdocs",[272,166,32,273,274,32],"18051322","commenter\u002Fneutral\u002Fdocs","paradite",[276,166,32,215,10,38],"18051449",[278,166,32,273,118,32],"18051573",[280,281,32,238,282,32],"18051204",7,"chris_wot",[284,281,32,238,285,32],"18051292","CamTin",[287,281,32,268,288,32],"18051934","galfarragem",[290,281,32,238,291,32],"18051591","ikfmpwdsoz",[293,294,45,210,295,32],"18051948",8,"uxcolumbo",[297,294,32,174,10,38],"18052147",[299,294,41,174,295,32],"18052341",[301,294,32,174,10,38],"18052485",[303,294,45,218,295,32],"18052557",[305,31,45,218,175,32],"18051907",[307,31,32,174,10,38],"18052006",[309,31,45,218,175,32],"18054683",[311,31,32,218,10,38],"18052010",[125,17,41,202,126,32],[314,17,32,226,10,38],"18052360",[316,17,32,229,126,32],"18055496",[109,318,38,319,110,32],11,"project\u002Fcritical\u002Fperformance",[321,318,32,182,10,38],"18052201",[323,318,38,319,110,32],"18052388",[325,318,32,182,10,38],"18052523",[132,327,41,223,133,32],12,[329,327,32,223,10,38],"18051979",[],[332,336,341,346,351,356],{"id":333,"name":334,"points":335,"category":19},"18030446","Sublime Merge",935,{"id":337,"name":338,"points":339,"category":340},"18035283","Hacking slot machines",421,"other",{"id":342,"name":343,"points":344,"category":345},"18077446","You Don't Need WordPress",257,"web_saas",{"id":347,"name":348,"points":349,"category":350},"18058031","Chattervox",224,"infrastructure",{"id":352,"name":353,"points":354,"category":355},"18076566","You Need Feeds",205,"learning_science",{"id":357,"name":358,"points":359,"category":360},"18055668","Podflix",154,"productivity",false,"v2",{"id":364,"name":5,"line":6,"ai":361,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":365,"top":17,"kw":366,"maker":10,"domain":367,"tier":18,"attempts":32,"strip":368,"url":-1,"mix":369,"praise":72,"objection":92,"sub":20},18051037,0.12,[23,24,25,26,27],"","5333501505350300000300001000053555301013",[31,17,32,33],1794036569784]