[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"project-28702006":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":35,"aspects":36,"strip":40,"post_text":41,"what":42,"said":70,"maker_in_thread":169,"shape":176,"grid":179,"attempts":217,"same_week":218,"maker_shows":247,"maker_hidden":248,"reader_version":249,"card":250},"28702006","React Oxide","open source ReactJS code editor with tabs, files & webDAV.","title","Show HN: React Oxide: open source ReactJS code editor with tabs, files & webDAV.","https:\u002F\u002Fgithub.com\u002Fbootrino\u002Freactoxide","github.com","andrewstuart",1632963340,2021,38,17,1013,2533,40,"shown","dev_tools","code editor","web_app",[21,24,25,26,27],"react","monaco editor","webdav","browser ide","roasted",-0.352,{"positive":31,"neutral":32,"mixed":33,"critical":34},0,3,1,4,8,{"design":37,"execution":38,"docs":39},{"positive":31,"critical":32},{"positive":31,"critical":31},{"positive":31,"critical":33},[31,33,31,31,31,31,32,31,32,33,33,32,33,31,31,31,32],null,{"problem":43,"audience":41,"pricing":41,"motivation":50,"time_to_build":41,"stack":54,"openness":67,"stage":68,"team_size":69},{"value":44,"source":45,"evidence":46},"Simple code editor with tabs, file tree and file management in a browser","maker",[47],{"id":48,"by":11,"text":49},"28702007","Hi folks this is React Oxide. It's a minimal code editor that runs in a browser. MIT licensed, code at: https:\u002F\u002Fgithub.com\u002Fbootrino\u002Freactoxide I wrote React Oxide because I…",{"value":51,"source":45,"evidence":52},"Needed a simple code editor with editor, tabs, file tree and file management that didn't exist",[53],{"id":48,"by":11,"text":49},[55,59,63],{"value":56,"source":45,"evidence":57},"TypeScript",[58],{"id":48,"by":11,"text":49},{"value":60,"source":45,"evidence":61},"React",[62],{"id":48,"by":11,"text":49},{"value":64,"source":45,"evidence":65},"Monaco editor",[66],{"id":48,"by":11,"text":49},"open_source","launched","solo",{"praise":71,"objections":86,"requests":112,"questions":128,"alternatives":140},[72,78],{"value":73,"source":45,"evidence":74},"Event-driven state approach praised as simple and workable for small apps",[75],{"id":76,"by":11,"text":77},"28711746","So far eventemitter has resulted only in simplicity and no race conditions. Perhaps that's because it's a small application.",{"value":79,"source":80,"evidence":81},"Useful review tips on typed emitters and React context","commenter",[82],{"id":83,"by":84,"text":85},"28705756","brianshaler","The EventEmitter pattern seems interesting! I can't say I've wrapped my head around it enough to weigh the benefits and drawbacks. I would point out a few things after a quick…",[87,98,105],{"value":88,"source":80,"evidence":89},"Event emitter state coordination can cause race conditions and lost state as UI grows",[90,94],{"id":91,"by":92,"text":93},"28704079","lf-non","The issue with using eventemitter for state coordination is that when the UI grows into complexity you run into race conditions where some component isn't showing the right data…",{"id":95,"by":96,"text":97},"28708845","brundolf","It seems (OP correct me if I'm wrong) that it uses actual browser events, which are asynchronous (where normally Redux messages are sent and reacted-to synchronously). This…",{"value":99,"source":80,"evidence":100},"No error handling or tests in the project",[101],{"id":102,"by":103,"text":104},"28704650","jmnicolas","> There's no error handling at all right now - if any file operation fails then there's no information given, it just goes splat. > There's no tests - and I'm not writing any - I…",{"value":106,"source":80,"evidence":107},"Dislike of building the approach on React",[108],{"id":109,"by":110,"text":111},"28703408","beebeepka","Reading your about your style, I can't help but wonder what's the point of using react. You clearly don't like it (and neither do I). Is it purely because nobody seems to care…",[113,124],{"value":114,"source":80,"evidence":115},"Try MobX, Redux-style state or Effector instead",[116,117,121],{"id":91,"by":92,"text":93},{"id":118,"by":119,"text":120},"28704265","leetrout","Have you ever used mobx?",{"id":122,"by":96,"text":123},"28708822","Seconding MobX; it elegantly solves most of the issues with events (both maintainability and performance) while also being more ergonomic\u002Fconcise. I can't praise it enough.",{"value":125,"source":80,"evidence":126},"Use typed emitters and React context for better typing",[127],{"id":83,"by":84,"text":85},[129,136],{"value":130,"source":80,"evidence":131},"How does this differ from Redux and dispatch\u002Freducer architecture",[132],{"id":133,"by":134,"text":135},"28704656","have_faith","> The React code is written in a style I call \"Event driven React\" How does this differ conceptually from Redux and the general dispatch\u002Freducer architecture? would be interested…",{"value":137,"source":45,"evidence":138},"What are the drawbacks of the event-driven approach",[139],{"id":48,"by":11,"text":49},[141,146,151,155,162],{"value":142,"source":80,"evidence":143},"MobX",[144,145],{"id":118,"by":119,"text":120},{"id":122,"by":96,"text":123},{"value":147,"source":80,"evidence":148},"Redux",[149,150],{"id":91,"by":92,"text":93},{"id":133,"by":134,"text":135},{"value":152,"source":80,"evidence":153},"Effector",[154],{"id":91,"by":92,"text":93},{"value":156,"source":80,"evidence":157},"Vue",[158,159],{"id":109,"by":110,"text":111},{"id":160,"by":92,"text":161},"28704086","Vue supports observables. So you can have observables that shared across components (for simple use cases). For more involved scenarios, it is possible to libraries like Vuex…",{"value":163,"source":80,"evidence":164},"Svelte",[165],{"id":166,"by":167,"text":168},"28703769","FractalHQ","Funny, I came here to insist that you guys try Svelte. They took the best parts of Vue and React, made them so much better, and baked reactivity and state management into…",{"comments":34,"answered":33,"key":170},[171,172,173],{"id":48,"text":49},{"id":76,"text":77},{"id":174,"text":175},"28711213","Good advice thanks!",{"commenters":177,"max_depth":34,"maker_replies":34,"first_comment_mins":31,"lifespan_hours":178},11,21,[180,182,184,186,188,189,191,194,196,198,199,201,205,208,211,213,216],[48,31,31,181,11,33],"project\u002Fpositive\u002Fidea",[91,33,33,183,92,31],"project\u002Fcritical\u002Fdesign",[118,33,31,185,119,31],"commenter\u002Fneutral\u002Fnone",[187,33,31,185,92,31],"28707679",[122,33,31,185,96,31],[76,33,31,190,11,33],"project\u002Fpositive\u002Fdesign",[83,192,32,193,84,31],2,"project\u002Fmixed\u002Fexecution",[174,192,31,195,11,33],"maker\u002Fpositive\u002Fnone",[133,32,32,197,134,31],"project\u002Fneutral\u002Fdesign",[95,32,33,183,96,31],[102,34,33,200,103,31],"project\u002Fcritical\u002Fdocs",[202,34,32,203,204,31],"28704718","maker\u002Fneutral\u002Fdocs","playpause",[109,206,33,207,110,31],5,"maker\u002Fcritical\u002Fdesign",[209,206,31,210,11,33],"28703433","maker\u002Fpositive\u002Fdesign",[166,206,31,212,167,31],"other\u002Fneutral\u002Fnone",[214,206,31,212,215,31],"28703847","jacobmischka",[160,206,32,197,92,31],[],[219,224,229,233,237,242],{"id":220,"name":221,"points":222,"category":223},"28704873","Haxplore",603,"consumer_social",{"id":225,"name":226,"points":227,"category":228},"28765183","ChessCoach",506,"games",{"id":230,"name":231,"points":232,"category":20},"28758226","Hurl",223,{"id":234,"name":235,"points":236,"category":20},"28718066","UI for Apache Kafka",158,{"id":238,"name":239,"points":240,"category":241},"28738141","SpotML",157,"ai",{"id":243,"name":244,"points":245,"category":246},"28775313","IndiePaper",146,"web_saas",15,false,"v2",{"id":251,"name":5,"line":6,"ai":248,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":252,"top":18,"kw":253,"maker":11,"domain":10,"tier":19,"attempts":31,"strip":254,"url":9,"mix":255,"praise":73,"objection":88,"sub":21},28702006,-0.35,[21,24,25,26,27],"01000030311310003",[31,32,33,34],1794036611775]