[{"data":1,"prerenderedAt":160},["ShallowReactive",2],{"project-11057594":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":33,"aspects":34,"strip":38,"post_text":29,"what":40,"said":54,"maker_in_thread":94,"shape":105,"grid":109,"attempts":123,"same_week":124,"maker_shows":152,"maker_hidden":153,"reader_version":154,"card":155},"11057594","React-Designer","Editable Vector Graphics in React Components","title","Show HN: React-Designer – Editable Vector Graphics in React Components","http:\u002F\u002Ffatiherikli.github.io\u002Freact-designer","fatiherikli.github.io","fatiherikli",1454932191,2016,38,7,883,2264,40,"shown","dev_tools","react graphics editor","library",[24,25,26,27],"react","svg","vector graphics","visual editor","quiet",null,{"positive":31,"neutral":31,"mixed":32,"critical":31},1,0,3,{"idea":35,"performance":36,"execution":37},{"positive":31,"critical":32},{"positive":32,"critical":31},{"positive":32,"critical":32},[32,32,39,31,32,33,32],5,{"problem":41,"audience":29,"pricing":29,"motivation":29,"time_to_build":29,"stack":47,"openness":52,"stage":53,"team_size":52},{"value":42,"source":43,"evidence":44},"Editing vector graphics inside React components","maker",[45],{"id":46},"post",[48],{"value":49,"source":43,"evidence":50},"React",[51],{"id":46},"unknown","prototype",{"praise":55,"objections":64,"requests":80,"questions":88,"alternatives":93},[56],{"value":57,"source":58,"evidence":59},"Cool idea and useful proof of concept for a commenter's team","commenter",[60],{"id":61,"by":62,"text":63},"11065105","pluma","Holy fuck, this is cool. We've actually been thinking about this exact problem recently and were considering building something like this. This should prove a great proof of…",[65,76],{"value":66,"source":58,"evidence":67},"Laggy performance in browsers, including Firefox and Chrome",[68,72],{"id":69,"by":70,"text":71},"11065461","zamalek","If you find that it's laggy on Firefox, make sure you are on at least 44.0.1 (latest stable at the time of the post). Strangely I don't see anything that would feasibly affect…",{"id":73,"by":74,"text":75},"11065532","ChrisCinelli","It is laggy even on Chrome. React is not necessarily the best tool if you are looking for for smooth transitions.",{"value":77,"source":58,"evidence":78},"React's virtual DOM is poor for smooth transitions",[79],{"id":73,"by":74,"text":75},[81],{"value":82,"source":58,"evidence":83},"Explain the planned reflectDOM approach",[84],{"id":85,"by":86,"text":87},"11066452","JoeCamel","What do you mean by \"reflectDOM method\"? Can you explain a little bit how will you deal with this? I've searched the repo but couldn't find anything regarding reflect. Thanks!",[89],{"value":90,"source":58,"evidence":91},"What does reflectDOM mean and how will it work",[92],{"id":85,"by":86,"text":87},[],{"comments":33,"answered":31,"key":95},[96,99,102],{"id":97,"text":98},"11065582","This is an implementation issue about react-designer renderer. I'll implement custom renderer for instant dom updates. Virtual DOM is not efficient to handle this. Thank for your…",{"id":100,"text":101},"11065565","Yep, you're right. Virtual DOM abstraction is not good for smooth transitions. I'll implement reflectDOM method for every object type. Thanks for your feedback!",{"id":103,"text":104},"11066636","Making smooth transitions is really hard with React's Virtual DOM implementation. Because in every state update, the VirtualDOM abstraction calculates something between DOM and…",{"commenters":39,"max_depth":106,"maker_replies":33,"first_comment_mins":107,"lifespan_hours":108},4,1543,29,[110,112,114,116,119,120,122],[69,32,32,111,70,32],"commenter\u002Fneutral\u002Fperformance",[97,32,32,113,11,31],"project\u002Fneutral\u002Fperformance",[61,31,39,115,62,32],"project\u002Fpositive\u002Fidea",[73,117,31,118,74,32],2,"project\u002Fcritical\u002Fperformance",[100,117,32,113,11,31],[85,117,33,121,86,32],"maker\u002Fneutral\u002Fexecution",[103,117,32,113,11,31],[],[125,130,135,140,144,148],{"id":126,"name":127,"points":128,"category":129},"11068902","TIL",819,"productivity",{"id":131,"name":132,"points":133,"category":134},"11071916","Deepstream.io",301,"infrastructure",{"id":136,"name":137,"points":138,"category":139},"11064507","The Deadlock Empire",269,"games",{"id":141,"name":142,"points":143,"category":134},"11072359","SocketCluster.io",217,{"id":145,"name":146,"points":147,"category":134},"11074537","LogDNA",196,{"id":149,"name":150,"points":151,"category":129},"11043502","Twtxt",154,11,false,"v2",{"id":156,"name":5,"line":6,"ai":153,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":29,"top":18,"kw":157,"maker":11,"domain":10,"tier":19,"attempts":32,"strip":158,"url":9,"mix":159,"praise":57,"objection":66,"sub":21},11057594,[24,25,26,27],"0051030",[31,31,32,31],1794036540747]