[{"data":1,"prerenderedAt":343},["ShallowReactive",2],{"project-17616839":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":40,"post_text":42,"what":43,"said":84,"maker_in_thread":173,"shape":179,"grid":184,"attempts":305,"same_week":306,"maker_shows":31,"maker_hidden":335,"reader_version":336,"card":337},"17616839","Percy","A Rust and WebAssembly isomorphic virtual DOM implementation","title","Show HN: Percy – A Rust and WebAssembly isomorphic virtual DOM implementation","https:\u002F\u002Fgithub.com\u002Fchinedufn\u002Fpercy","github.com","chinedufn",1532607839,2018,234,50,139,2155,7,"notable","languages","virtual dom library","library",[24,25,26,27],"rust","webassembly","virtual dom","server side rendering","curious",0.159,{"positive":31,"neutral":18,"mixed":32,"critical":33},3,0,1,11,{"idea":36,"docs":37,"execution":38,"design":39},{"positive":33,"critical":32},{"positive":33,"critical":32},{"positive":32,"critical":33},{"positive":33,"critical":32},[41,32,31,31,32,32,32,32,32,32,32,32,32,32,32,32,32,32,41,32,31,32,33,41,32,32,32,32,32,32,32,32,32,32,32,31,31,32,32,32],5,null,{"problem":44,"audience":51,"pricing":42,"motivation":58,"time_to_build":42,"stack":62,"openness":82,"stage":83,"team_size":83},{"value":45,"source":46,"evidence":47},"Writing frontend web apps in Rust with server side rendering and DOM diffing","maker",[48],{"id":49,"by":11,"text":50},"17617405","Sorry for the confusion I tried to write a title that would fit and guess I missed the mark! What I really mean is a virtual dom implementation that - On the frontend can…",{"value":52,"source":53,"evidence":54},"Rust frontend web developers","inferred",[55],{"id":56,"by":11,"text":57},"17617591","Yew is awesome and just knowing that something like that was possible inspired Percy. I also looked at Yew's `html!` macro when figuring out how Percy's could \u002F should work. One…",{"value":59,"source":46,"evidence":60},"Wanted a Rust virtual DOM with server side rendering, which Yew lacked",[61],{"id":56,"by":11,"text":57},[63,68,72,76],{"value":64,"source":46,"evidence":65},"Rust",[66],{"id":67},"post",{"value":69,"source":46,"evidence":70},"WebAssembly",[71],{"id":67},{"value":73,"source":46,"evidence":74},"wasm-bindgen",[75],{"id":56,"by":11,"text":57},{"value":77,"source":46,"evidence":78},"serde-json",[79],{"id":80,"by":11,"text":81},"17617484","Sure! The backend is pretty much this (messy) file - https:\u002F\u002Fgithub.com\u002Fchinedufn\u002Fpercy\u002Fblob\u002Fmaster\u002Fexamples\u002Fisomorphic\u002Fserver\u002Fsrc\u002Fserver.rs . It 1. Pulls in your application…","open_source","unknown",{"praise":85,"objections":101,"requests":116,"questions":130,"alternatives":144},[86,94],{"value":87,"source":88,"evidence":89},"Macro-based html syntax is nice without a JSX-like language","commenter",[90],{"id":91,"by":92,"text":93},"17627088","Buetol","The use of the html macro is incredibly nice, no need for a special \"JSX\" language, it’s all builting thanks to macros. I’m working on the same thing for python (using…",{"value":95,"source":88,"evidence":96},"Clear explanation of the server and client crate structure",[97],{"id":98,"by":99,"text":100},"17619432","nevi-me","Thanks, that makes sense. I haven't built web servers with Rust as yet; so it was a bit difficult to follow the code.",[102,109],{"value":103,"source":88,"evidence":104},"Wasm-bindgen limitations with generics made the commenter choose Yew",[105],{"id":106,"by":107,"text":108},"17619037","JD557",">One difference is that Yew is powered by stdweb and Percy is powered by wasm-bindgen. >I'm personally SUPER bullish on wasm-bindgen because it's been designed from day 1 to be…",{"value":110,"source":88,"evidence":111},"Name clashes with percy.io in the JS space",[112],{"id":113,"by":114,"text":115},"17617753","andrethegiant","Heads up, there's something already called Percy in the JS space. https:\u002F\u002Fpercy.io",[117,123],{"value":118,"source":46,"evidence":119},"A minimal example without server side rendering",[120],{"id":121,"by":11,"text":122},"17617430","As in an example app? If you don't need server side rendering you can have one Rust file but you also need a JS file to initialize the WebAssembly module. So just one file isn't…",{"value":124,"source":88,"evidence":125},"Single file app code marking client and server parts",[126],{"id":127,"by":128,"text":129},"17616991","jlebrech","can you write an app in just once file and mark what can run in the client and what must only run on the server?",[131,138],{"value":132,"source":88,"evidence":133},"What an isomorphic virtual DOM is",[134],{"id":135,"by":136,"text":137},"17617241","dtx1","Can someone ELI5(+) what an isomorphic virtual dom is?",{"value":139,"source":88,"evidence":140},"How the backend works in Rust",[141],{"id":142,"by":99,"text":143},"17617108","Hi chinedufn, this looks very interesting. I am at the same stage as you re. \"I REALLY want to use this for everything ...\". I see you're using wasm_bindgen quite a bit, but from…",[145,152,159,166],{"value":146,"source":88,"evidence":147},"Yew",[148],{"id":149,"by":150,"text":151},"17617527","thinkpad20","How does this compare to the Yew framework?",{"value":153,"source":88,"evidence":154},"React with react-dom\u002Fserver",[155],{"id":156,"by":157,"text":158},"17617960","untog","React already does this, though perhaps not in the way you're imagining. You can use react-dom\u002Fserver with your client side code to render out HTML templates, then when you run…",{"value":160,"source":88,"evidence":161},"ScalaJS",[162],{"id":163,"by":164,"text":165},"17617515","lovescalajs","Another good tool if you want to write front end in a great general purpose language is scalajs. It allows you to reuse the dame Scala code for backend and front end.",{"value":167,"source":88,"evidence":168},"ASP.NET and Opa",[169],{"id":170,"by":171,"text":172},"17622267","somenewacc","ASP.NET does this, you use its components and it generates client side javascript. In a more functional way, there's another language that does this caled Opa! http:\u002F\u002Fopalang.org\u002F",{"comments":174,"answered":174,"key":175},4,[176,177,178],{"id":80,"text":81},{"id":49,"text":50},{"id":56,"text":57},{"commenters":180,"max_depth":181,"maker_replies":174,"first_comment_mins":182,"lifespan_hours":183},32,8,25,28,[185,187,189,191,194,196,200,204,207,209,212,215,218,221,223,225,228,231,234,237,240,243,244,248,250,253,255,256,258,260,262,265,267,270,273,276,279,282,284,286,288,291,293,296,297,298,300,301,303,304],[142,32,41,186,99,32],"maker\u002Fpositive\u002Fidea",[80,32,32,188,11,33],"maker\u002Fneutral\u002Fdocs",[98,32,31,190,99,32],"project\u002Fneutral\u002Fdocs",[192,32,31,190,193,32],"17619549","steveklabnik",[135,33,31,195,136,32],"project\u002Fneutral\u002Fidea",[197,33,32,198,199,32],"17617258","other\u002Fneutral\u002Fnone","blattimwind",[201,33,32,202,203,32],"17617335","commenter\u002Fneutral\u002Fnone","nicoburns",[205,33,32,202,206,32],"17617810","tehlike",[208,33,32,202,136,32],"17617339",[210,33,32,202,211,32],"17617701","navaati",[213,33,32,202,214,32],"17622048","chris_wot",[216,33,32,198,217,32],"17617356","fb03",[219,33,32,220,199,32],"17617492","other\u002Fneutral\u002Fidea",[222,33,32,198,217,32],"17617585",[224,33,32,198,199,32],"17617641",[226,33,32,202,227,32],"17617936","floatboth",[229,33,32,198,230,32],"17620767","mekkkkkk",[232,33,32,198,233,32],"17617938","jswrenn",[235,33,32,202,236,32],"17618201","eeZah7Ux",[238,33,32,198,239,32],"17618476","archgoon",[241,33,32,202,242,32],"17617389","zaarn",[49,33,32,188,11,33],[245,33,41,246,247,32],"17617796","maker\u002Fpositive\u002Fdocs","kodablah",[249,33,32,198,247,32],"17617749",[251,33,32,220,252,32],"17618397","nojvek",[149,254,31,195,150,32],2,[56,254,32,195,11,33],[106,254,33,257,107,32],"project\u002Fcritical\u002Fexecution",[91,31,41,259,92,32],"project\u002Fpositive\u002Fdesign",[113,174,31,261,114,32],"project\u002Fneutral\u002Fnone",[263,174,32,198,264,32],"17618032","jhabdas",[266,174,32,198,230,32],"17620820",[268,174,32,198,269,32],"17623532","oconnor663",[271,41,32,198,272,32],"17618436","_bxg1",[274,41,32,198,275,32],"17618690","skybrian",[277,41,32,278,272,32],"17618741","other\u002Fneutral\u002Fperformance",[280,41,32,278,281,32],"17618913","julian37",[283,41,32,278,272,32],"17619084",[285,41,32,278,275,32],"17620995",[287,41,32,202,193,32],"17621221",[289,290,32,198,264,32],"17618048",6,[292,290,32,198,193,32],"17618063",[294,290,32,198,295,32],"17618134","EugeneOZ",[127,18,31,195,128,32],[121,18,32,188,11,33],[299,18,31,195,128,32],"17617565",[170,18,32,220,171,32],[302,18,32,198,128,32],"17624929",[156,18,32,220,157,32],[163,181,32,220,164,32],[],[307,312,317,322,326,331],{"id":308,"name":309,"points":310,"category":311},"17618059","Layoutit",437,"dev_tools",{"id":313,"name":314,"points":315,"category":316},"17652593","canvas-sketch",295,"productivity",{"id":318,"name":319,"points":320,"category":321},"17661451","Toy",180,"games",{"id":323,"name":324,"points":325,"category":20},"17644115","Owl",156,{"id":327,"name":328,"points":329,"category":330},"17625308","Kontext",138,"learning_science",{"id":332,"name":333,"points":334,"category":311},"17662068","StyleURL",94,false,"v2",{"id":338,"name":5,"line":6,"ai":335,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":339,"top":18,"kw":340,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":341,"url":9,"mix":342,"praise":87,"objection":103,"sub":21},17616839,0.16,[24,25,26,27],"5033000000000000005030150000000000033000",[31,18,32,33],1794036568105]