[{"data":1,"prerenderedAt":356},["ShallowReactive",2],{"project-17633268":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":28,"sentiment":29,"stance_mix":30,"scored_comments":34,"aspects":35,"strip":44,"post_text":46,"what":47,"said":71,"maker_in_thread":175,"shape":188,"grid":192,"attempts":320,"same_week":321,"maker_shows":270,"maker_hidden":349,"reader_version":350,"card":351},"17633268","Moon","3kb JavaScript UI compiler","title","Show HN: Moon – 3kb JavaScript UI compiler","https:\u002F\u002Fkbrsh.github.io\u002Fmoon","kbrsh.github.io","kbr",1532787548,2018,71,50,609,2155,29,"notable","languages","ui compiler","library",[24,25,26,27],"javascript ui compiler","component framework","virtual dom alternative","frontend compiler","debated",-0.07,{"positive":31,"neutral":32,"mixed":33,"critical":31},5,8,0,18,{"design":36,"idea":39,"performance":40,"execution":42,"docs":43},{"positive":37,"critical":38},4,2,{"positive":33,"critical":33},{"positive":33,"critical":41},1,{"positive":33,"critical":41},{"positive":33,"critical":41},[41,33,31,33,33,33,33,33,33,33,33,33,33,41,33,45,45,45,33,41,33,41,33,33,45,33,45,41,33,31,33,31,31,31,45,33,33,33,33,33],3,null,{"problem":48,"audience":46,"pricing":46,"motivation":57,"time_to_build":46,"stack":63,"openness":69,"stage":70,"team_size":69},{"value":49,"source":50,"evidence":51},"Lightweight alternative to larger UI libraries like Vue, with a simpler API and smaller footprint","maker",[52,55],{"id":53,"by":11,"text":54},"17633860","Thanks! It used to be a smaller version of Vue aiming to be a small subset of it. For the v1 beta (what the current documentation is for) I decided to change up the API to be…",{"id":56},"post",{"value":58,"source":50,"evidence":59},"Frustration with other libraries; aimed to create a smaller and faster alternative",[60],{"id":61,"by":11,"text":62},"17634800","Glad you liked it. If you read some of the original Moon articles (“Introducing Moon”) you’ll find that I was frustrated with other libraries and strived to create a smaller and…",[64],{"value":65,"source":66,"evidence":67},"JavaScript","inferred",[68],{"id":56},"unknown","beta",{"praise":72,"objections":88,"requests":111,"questions":129,"alternatives":144},[73,81],{"value":74,"source":75,"evidence":76},"Small, simple concepts that are easy to try","commenter",[77],{"id":78,"by":79,"text":80},"17634402","vijaybritto","Very simple concepts. So easy to try. Saw the code. There are almost no type checks or null\u002Fundefined checks anywhere. Is this library used in any production application?",{"value":82,"source":75,"evidence":83},"Separation of presentation and data by default",[84],{"id":85,"by":86,"text":87},"17634882","dandigangi","I do like that you have presentation vs data separated by default. Something I wish React had. ;)",[89,100,104],{"value":90,"source":75,"evidence":91},"Invents a new template language to learn instead of using HTML and JavaScript",[92,96],{"id":93,"by":94,"text":95},"17633933","sbjs","This looks like it takes Vue.js's approach of creating a brand new language that you have to learn (in this case MVL which is similar to HTML). It's definitely a preference for a…",{"id":97,"by":98,"text":99},"17634057","spankalee","Yeah, this is a big reason why the Polymer project is moving away from a bespoke expression syntax and control-flow in HTML, ala Angular and Vue, to using just JavaScript with…",{"value":101,"source":75,"evidence":102},"Lacks type and null checks; questions about production readiness",[103],{"id":78,"by":79,"text":80},{"value":105,"source":75,"evidence":106},"Non-keyed implementation limits it",[107],{"id":108,"by":109,"text":110},"17633995","oiOoOioiOoOio","Is this still a non-keyed implementation? Will you ever be adding mix-ins? Both of these kept me from using this library prior to the current re-write.",[112,118,122],{"value":113,"source":50,"evidence":114},"Keyed implementation",[115],{"id":116,"by":11,"text":117},"17634696","For now, it is non-keyed. As I mentioned in some other comments I just wanted to get a beta out as I've been rewriting Moon for about a year and it's finally gotten to a…",{"value":119,"source":75,"evidence":120},"Mix-ins",[121],{"id":108,"by":109,"text":110},{"value":123,"source":75,"evidence":124},"Working examples page instead of TODO",[125],{"id":126,"by":127,"text":128},"17635157","alliecat","Maybe it's just me but if you're submitting something to Show HN then it's helpful if your \"Examples\" navbar link doesn't send me to a `\u002F\u002FTODO`!",[130,137],{"value":131,"source":75,"evidence":132},"How does it compare to Svelte",[133],{"id":134,"by":135,"text":136},"17634048","skrebbel","How does this compare to Svelte, which also compiles itself away and at first glance, looks quite similar? What was your motivation for making this? (other than making something…",{"value":138,"source":75,"evidence":139},"How variables are inserted safely in templates",[140],{"id":141,"by":142,"text":143},"17634604","dvh","How are variables in \"\u003Cp>{text}\u003C\u002Fp>\" replaced? Is the security of it just an implementation detail left to the programmer who use it? Safe way would be finding the P and then…",[145,149,153,157,161,168],{"value":146,"source":75,"evidence":147},"Vue.js",[148],{"id":93,"by":94,"text":95},{"value":150,"source":75,"evidence":151},"React",[152],{"id":93,"by":94,"text":95},{"value":154,"source":75,"evidence":155},"Svelte",[156],{"id":134,"by":135,"text":136},{"value":158,"source":75,"evidence":159},"lit-html",[160],{"id":97,"by":98,"text":99},{"value":162,"source":75,"evidence":163},"Marko",[164],{"id":165,"by":166,"text":167},"17634035","ramses0","I continue to advocate MarkoJS as \"the best\" HTML templating language. https:\u002F\u002Fmarkojs.com It is the best mix of expressiveness, ease, and clarity I've found.",{"value":169,"source":75,"evidence":170},"Angular",[171],{"id":172,"by":173,"text":174},"17633898","evmar","I believe Angular has a similar mechanism of compiling templates to code that corresponds directly to the template much like this, and they're now backing away from it. The…",{"comments":176,"answered":177,"key":178},9,6,[179,182,185],{"id":180,"text":181},"17633974","It's definitely based on preference, but I designed MVL to be as simple and consistent as possible. For example, there are two ways to create a for loop (one on the ul and one on…",{"id":183,"text":184},"17634628","Your views are compiled down to JavaScript beforehand. Your example would be compiled to something like: ``` m2.textContent = instance.text; ``` Use Moon.compile(template) to get…",{"id":186,"text":187},"17633993","To prevent large bundles, Moon uses a lightweight runtime that is about the same size as the equivalent compiled virtual DOM render function (using React.createElement for…",{"commenters":189,"max_depth":31,"maker_replies":176,"first_comment_mins":190,"lifespan_hours":191},32,138,145,[193,195,197,200,204,206,210,213,216,219,222,224,227,230,233,236,238,239,242,244,247,251,253,254,255,257,258,260,263,266,268,272,273,274,275,277,279,281,283,284,287,292,296,300,304,307,310,312,315,317],[93,33,41,194,94,33],"project\u002Fcritical\u002Fdesign",[180,33,33,196,11,41],"maker\u002Fneutral\u002Fdesign",[198,33,31,199,94,33],"17634134","project\u002Fpositive\u002Fdesign",[201,33,33,202,203,33],"17635235","commenter\u002Fneutral\u002Fdesign","ppseafield",[205,33,33,202,94,33],"17636144",[207,33,33,208,209,33],"17634041","other\u002Fneutral\u002Fdesign","badestrand",[211,33,33,212,98,33],"17634070","other\u002Fneutral\u002Fnone",[214,33,33,215,94,33],"17634210","commenter\u002Fneutral\u002Fnone",[217,33,33,212,218,33],"17636113","dosy",[220,33,33,202,221,33],"17634289","zackify",[223,33,33,202,209,33],"17634324",[225,33,33,202,226,33],"17635336","trixn",[228,33,33,202,229,33],"17634327","Keyframe",[231,33,33,202,232,33],"17634532","untog",[234,33,33,202,235,33],"17635207","pygy_",[237,33,33,202,226,33],"17635301",[97,33,41,194,98,33],[240,33,33,212,241,33],"17635390","vmware505",[134,41,45,243,135,33],"project\u002Fneutral\u002Fidea",[245,41,45,243,246,33],"17634986","boobsbr",[248,41,45,249,250,33],"17635375","project\u002Fneutral\u002Fperformance","jazoom",[141,38,45,252,142,33],"project\u002Fneutral\u002Fexecution",[183,38,33,252,11,41],[165,45,33,212,166,33],[172,37,41,256,173,33],"project\u002Fcritical\u002Fperformance",[186,37,33,249,11,41],[126,31,41,259,127,33],"project\u002Fcritical\u002Fdocs",[261,31,33,262,11,41],"17635187","project\u002Fneutral\u002Fdocs",[264,177,33,212,265,33],"17634184","jmiserez",[267,177,33,252,11,41],"17634207",[269,270,45,243,271,33],"17633834",7,"ukulele",[53,270,33,243,11,41],[108,270,45,243,109,33],[116,270,33,243,11,41],[78,32,41,276,79,33],"project\u002Fcritical\u002Fexecution",[278,32,33,252,11,41],"17634489",[280,176,31,199,86,33],"17634775",[61,176,33,282,11,41],"project\u002Fpositive\u002Fidea",[85,176,31,199,86,33],[285,176,45,286,86,33],"17634915","project\u002Fneutral\u002Fnone",[288,289,31,290,291,33],"17636723",10,"maker\u002Fpositive\u002Fnone","zubairq",[293,294,31,199,295,33],"17634101",11,"childintime",[297,294,45,298,299,33],"17634153","project\u002Fneutral\u002Fdesign","jahewson",[301,302,33,212,303,33],"17634182",12,"hoppelhase",[305,302,33,212,306,33],"17634276","tomcam",[308,302,33,212,309,33],"17634364","always_good",[311,302,33,212,303,33],"17634458",[313,302,33,212,314,33],"17634727","tasqyn",[316,302,33,212,303,33],"17635045",[318,302,33,212,319,33],"17680391","faissaloo",[],[322,327,332,336,341,345],{"id":323,"name":324,"points":325,"category":326},"17618059","Layoutit",437,"dev_tools",{"id":328,"name":329,"points":330,"category":331},"17652593","canvas-sketch",295,"productivity",{"id":333,"name":334,"points":335,"category":20},"17616839","Percy",234,{"id":337,"name":338,"points":339,"category":340},"17661451","Toy",180,"games",{"id":342,"name":343,"points":344,"category":20},"17644115","Owl",156,{"id":346,"name":347,"points":190,"category":348},"17625308","Kontext","learning_science",false,"v2",{"id":352,"name":5,"line":6,"ai":349,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":353,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":354,"url":9,"mix":355,"praise":74,"objection":90,"sub":21},17633268,[24,25,26,27],"1050000000000103330101003031050555300000",[31,32,33,31],1793990977262]