[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"project-28333975":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":8,"maker":9,"posted_at":10,"year":11,"points":12,"comments":13,"rank_in_year":14,"shown_in_year":15,"top":16,"tier":17,"category":18,"subcategory":19,"format":20,"keywords":21,"reception":27,"sentiment":28,"stance_mix":29,"scored_comments":33,"aspects":34,"strip":39,"post_text":41,"what":42,"said":85,"maker_in_thread":175,"shape":182,"grid":186,"attempts":218,"same_week":219,"maker_shows":248,"maker_hidden":249,"reader_version":250,"card":251},"28333975","ReactJS with JSX without bundling or transpiling","title","Show HN: ReactJS with JSX without bundling or transpiling",null,"andrewstuart",1630105728,2021,13,16,1739,2533,69,"shown","languages","javascript library demo","web_app",[22,23,24,25,26],"react","jsx","es modules","babel standalone","no bundler","roasted",-0.529,{"positive":30,"neutral":31,"mixed":30,"critical":32},0,3,7,10,{"performance":35,"execution":36,"idea":38},{"positive":30,"critical":31},{"positive":30,"critical":37},2,{"positive":30,"critical":37},[40,40,31,30,31,30,30,40,40,30,40,30,30,40,40,31],1,"source: https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fdikoh?file=\u002Findex.html\n\n\n```\n  \u003C!DOCTYPE html>\n  \u003Chtml lang=\"en\">\n    \u003Chead>\n      \u003Cmeta charset=\"UTF-8\" \u002F>\n      \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \u002F>\n      \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\" \u002F>\n      \u003Ctitle>Static Template\u003C\u002Ftitle>\n    \u003C\u002Fh\n…[code truncated]\n```",{"problem":43,"audience":8,"pricing":8,"motivation":52,"time_to_build":8,"stack":59,"openness":84,"stage":84,"team_size":84},{"value":44,"source":45,"evidence":46},"Running React with JSX in a browser without a build step","maker",[47,49],{"id":48},"post",{"id":50,"by":9,"text":51},"28333998","I thought this might be interesting to people because it's no longer necessary to use a transpiler or bundler. Instead, just use es6 modules loaded from skypack. Save the above…",{"value":53,"source":45,"evidence":54},"Maker thought the ES module approach would interest people because bundlers and transpilers are no longer strictly necessary",[55,56],{"id":50,"by":9,"text":51},{"id":57,"by":9,"text":58},"28336312","The point of this post is not JSX. The point of this post is to pay attention to the es6 import module loading which is now natively supported in browsers.",[60,64,68,72,80],{"value":61,"source":45,"evidence":62},"ReactJS",[63],{"id":48},{"value":65,"source":45,"evidence":66},"JSX",[67],{"id":48},{"value":69,"source":45,"evidence":70},"ES modules",[71],{"id":57,"by":9,"text":58},{"value":73,"source":74,"evidence":75},"Babel standalone","commenter",[76],{"id":77,"by":78,"text":79},"28334936","acemarke","You've got a link to `@babel\u002Fstandalone\u002Fbabel.min.js` and a `\u003Cscript type=\"text\u002Fbabel\">`. Are those not being used at all? Because that's definitely \"transpiling\", just not with…",{"value":81,"source":45,"evidence":82},"Skypack",[83],{"id":50,"by":9,"text":51},"unknown",{"praise":86,"objections":106,"requests":138,"questions":147,"alternatives":159},[87,102],{"value":88,"source":74,"evidence":89},"Useful for prototyping, testing and interactive playgrounds",[90,94,98],{"id":91,"by":92,"text":93},"28339162","brundolf","Charitably, it could be nice for prototyping I'm going to assume you already know this shouldn't be done in production If you wanted something like this in production, then yes…",{"id":95,"by":96,"text":97},"28335414","__ryan__","Yep, Babel is transpiling that script tag. This is a cool pattern, useful for testing and whatnot, but nothing new and not recommended for production. Another example of this…",{"id":99,"by":100,"text":101},"28402477","tehbeard","The only use case babel in browser I can think of is either interactive tutorial\u002Flearning for end users on browser features or React JSX (to snuff out the whole getting a…",{"value":103,"source":74,"evidence":104},"Interesting pattern for loading ES modules natively",[105],{"id":95,"by":96,"text":97},[107,118,123,131],{"value":108,"source":74,"evidence":109},"Babel still transpiles in the browser, so the claim is misleading",[110,111,114],{"id":77,"by":78,"text":79},{"id":112,"by":100,"text":113},"28336269","You literally import a transpiler on the page.... What the hell do you think Babel is? All you've done is shift the work from once at build time to every. Single. Time anyone…",{"id":115,"by":116,"text":117},"28337293","exelib","Please stop polluting our planet! There is no one advantage of this technique, but only disadvantages: - It transpiles. Your claim is misleading and incorrect. - On your local…",{"value":119,"source":74,"evidence":120},"Runtime transpiling hurts performance and wastes energy on every page load",[121,122],{"id":115,"by":116,"text":117},{"id":112,"by":100,"text":113},{"value":124,"source":74,"evidence":125},"Not recommended for production; bundling is still better",[126,127,128],{"id":95,"by":96,"text":97},{"id":91,"by":92,"text":93},{"id":129,"by":100,"text":130},"28402497","With HTTP\u002F2 server push faltering in production and the real world... it's still best to bundle, but just down to your direct dependencies and with tree shaking (i.e. react and…",{"value":132,"source":74,"evidence":133},"Hello world loads 119 requests and about 970KB in 2.5s",[134],{"id":135,"by":136,"text":137},"28336108","cosmotic","Only 119 requests, 970KB and 2.5s to load Hello world?",[139,143],{"value":140,"source":74,"evidence":141},"Use a build step that transpiles source modules and ships ES modules",[142],{"id":91,"by":92,"text":93},{"value":144,"source":74,"evidence":145},"Try snowpack for unbundled and fast loading",[146],{"id":115,"by":116,"text":117},[148,152],{"value":149,"source":74,"evidence":150},"Does the Babel script tag count as transpiling",[151],{"id":77,"by":78,"text":79},{"value":153,"source":74,"evidence":154},"What share of use cases is in-browser Babel unsuitable for production",[155],{"id":156,"by":157,"text":158},"28336026","mokanfar",">not recommended for production. Rhetorical question: What percent of use cases is it not recommended for use in production?",[160,164,171],{"value":161,"source":74,"evidence":162},"Snowpack",[163],{"id":115,"by":116,"text":117},{"value":165,"source":74,"evidence":166},"Bundlers with tree shaking such as webpack-style bundling",[167,168],{"id":129,"by":100,"text":130},{"id":169,"by":100,"text":170},"28339825","How do I miss the point? You said no transpiling! And I pointed out how you have in be. > Dynamic module loading ...a feature of browsers since 2017\u002F2018? Of which numerous blog…",{"value":172,"source":74,"evidence":173},"Paper.js PaperScript",[174],{"id":95,"by":96,"text":97},{"comments":31,"answered":40,"key":176},[177,178,179],{"id":57,"text":58},{"id":50,"text":51},{"id":180,"text":181},"28336305","You miss the point - note the dynamic module loading of imports.",{"commenters":183,"max_depth":184,"maker_replies":31,"first_comment_mins":37,"lifespan_hours":185},9,4,156,[187,189,191,193,195,196,199,201,204,205,207,208,210,214,215,216],[115,30,40,188,116,30],"project\u002Fcritical\u002Fperformance",[77,40,40,190,78,30],"project\u002Fcritical\u002Fexecution",[95,40,31,192,96,30],"project\u002Fneutral\u002Fidea",[156,40,30,194,157,30],"other\u002Fneutral\u002Fnone",[99,40,31,192,100,30],[197,37,30,198,92,30],"28335814","other\u002Fneutral\u002Fidea",[57,31,30,200,9,40],"project\u002Fpositive\u002Fidea",[202,31,40,203,96,30],"28339380","maker\u002Fcritical\u002Fidea",[135,184,40,188,136,30],[50,206,30,192,9,40],5,[112,206,40,188,100,30],[180,206,30,209,9,40],"commenter\u002Fneutral\u002Fidea",[211,206,30,212,213,30],"28338040","commenter\u002Fcritical\u002Fexecution","nsonha",[169,206,40,203,100,30],[91,206,40,190,92,30],[129,206,31,217,100,30],"project\u002Fneutral\u002Fperformance",[],[220,225,230,235,239,243],{"id":221,"name":222,"points":223,"category":224},"28347439","ente",1180,"consumer_social",{"id":226,"name":227,"points":228,"category":229},"28320346","freeoptionscreener",501,"finance_crypto",{"id":231,"name":232,"points":233,"category":234},"28329444","metameme",418,"creative",{"id":236,"name":237,"points":238,"category":234},"28371035","stickerdoodle.app",185,{"id":240,"name":241,"points":242,"category":234},"28362199","webcam-filters",174,{"id":244,"name":245,"points":246,"category":247},"28352617","RefineDB",113,"data",15,false,"v2",{"id":252,"name":5,"line":5,"ai":249,"cat":18,"year":11,"points":12,"comments":13,"rec":27,"s":253,"top":16,"kw":254,"maker":9,"domain":255,"tier":17,"attempts":30,"strip":256,"url":-1,"mix":257,"praise":88,"objection":108,"sub":19},28333975,-0.53,[22,23,24,25,26],"","1130300110100113",[30,31,30,32],1794036610644]