[{"data":1,"prerenderedAt":658},["ShallowReactive",2],{"project-22776753":3},{"id":4,"name":5,"line":5,"line_source":6,"title":7,"url":8,"domain":9,"maker":10,"posted_at":11,"year":12,"points":13,"comments":14,"rank_in_year":15,"shown_in_year":16,"top":17,"tier":18,"category":19,"subcategory":20,"format":21,"keywords":22,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":45,"post_text":48,"what":49,"said":71,"maker_in_thread":183,"shape":192,"grid":197,"attempts":622,"same_week":623,"maker_shows":38,"maker_hidden":651,"reader_version":652,"card":653},"22776753","33 line React","title","Show HN: 33 line React","https:\u002F\u002Fleontrolski.github.io\u002F33-line-react.html","leontrolski.github.io","leontrolski",1585984374,2020,418,156,79,3028,3,"legend","languages","ui library","library",[23,24,25,26,27],"virtual dom","react","javascript","mithril","frontend","debated",0.01,{"positive":31,"neutral":32,"mixed":33,"critical":34},14,19,1,15,49,{"docs":37,"idea":39,"execution":41,"performance":42,"design":44},{"positive":38,"critical":17},2,{"positive":40,"critical":38},6,{"positive":33,"critical":38},{"positive":43,"critical":38},0,{"positive":38,"critical":40},[46,17,47,17,43,17,43,43,33,47,17,47,47,33,17,17,47,17,43,47,43,43,17,17,33,33,47,33,43,43,43,33,33,33,33,33,47,47,33,43],4,5,null,{"problem":50,"audience":48,"pricing":48,"motivation":57,"time_to_build":48,"stack":61,"openness":70,"stage":70,"team_size":70},{"value":51,"source":52,"evidence":53},"Shows how a React-style virtual DOM diff and patch works in minimal code","maker",[54],{"id":55,"by":10,"text":56},"22777212","Author here, this was written as a way for me to explore the core idea of react in a minimal setting. Things it's missing - jsx - routing - performance (maybe?) - component state…",{"value":58,"source":52,"evidence":59},"Written as a way for the maker to explore the core idea of React in a minimal setting",[60],{"id":55,"by":10,"text":56},[62],{"value":63,"source":64,"evidence":65},"JavaScript","inferred",[66],{"id":67,"by":68,"text":69},"22777429","manthideaal","In the source code to perform el.classList = v.classes the author uses: ``` for (const name of v.classes) if (!el.classList.contains(name)) el.classList.add(name) for (const name…","unknown",{"praise":72,"objections":96,"requests":124,"questions":132,"alternatives":150},[73,89],{"value":74,"source":75,"evidence":76},"Short and clear, demystifies React's core idea","commenter",[77,81,85],{"id":78,"by":79,"text":80},"22777927","red_admiral","What I really like about this is it removes some of the feeling of magic around react and similar frameworks. Yes there's a lot more going on in real react, but the core idea is…",{"id":82,"by":83,"text":84},"22777254","andreigaspar","I like this, it illustrates the concept nicely",{"id":86,"by":87,"text":88},"22777228","tudorizer","This also doesn't mix pseudo-HTML (JSX?) with JS code, so that's cool. As someone who has sort of lost contact with the front-end world, it's nice to see a coding TL;DR.",{"value":90,"source":75,"evidence":91},"Mithril-influenced design appreciated",[92],{"id":93,"by":94,"text":95},"22777623","codegladiator","Looks like mithril (the m object and m.render almost the same) ? https:\u002F\u002Fmithril.js.org\u002F",[97,109],{"value":98,"source":52,"evidence":99},"Not really React: missing JSX, routing, state, and optimizations",[100,101,105],{"id":55,"by":10,"text":56},{"id":102,"by":103,"text":104},"22777299","anonytrary","This library isn't meant to have full parity with React, but it's a great example that illustrates how simple a naive VDOM diff\u002Fpatch is to implement. That said, this is missing…",{"id":106,"by":107,"text":108},"22777156","andrewstuart","Really not React in 33 lines at all.",{"value":110,"source":75,"evidence":111},"Terse variable names and arrow function style are hard to read",[112,116,120],{"id":113,"by":114,"text":115},"22778372","leetrout","Code like this is interesting to me whenever I see it: const g = [['', '', ''], ['', '', ''], ['', '', '']] \u002F\u002F grid Why not just be descriptive and call it `const grid`? It's…",{"id":117,"by":118,"text":119},"22778967","fnord77","OT this is the first time I've seen the arrow function syntax in ES6. My god it is horrible. ``` const Cell = (value, i, j)=>m('button.cell', {onclick: ()=>move(value, i, j)},…",{"id":121,"by":122,"text":123},"22781054","ppeetteerr","> const move = (value, i, j){...} > This function makes a move in the game, it takes 'x' or 'o' along with 2 integer coordinates. It will mutate all the state variables to…",[125],{"value":126,"source":75,"evidence":127},"Add component-local state tied to component lifetime",[128],{"id":129,"by":130,"text":131},"22777255","sfvisser","Nice! Explorations like this are truly useful for understanding and maybe even for innovation. You might figure out new ways of expressing things that are unlike react, but solve…",[133,143],{"value":134,"source":75,"evidence":135},"Performance compared to React and cost of querying the DOM",[136,139],{"id":137,"by":10,"text":138},"22779794","Author here, nice to see this got some interest! As a very small benchmark (uh-oh!), in a console on the linked page, I tried to make\u002Frecreate 10,000 divs: ``` const root =…",{"id":140,"by":141,"text":142},"22833252","peey","It seems like `m.update` function queries the current DOM state. I'm interested in the performance implications of this. From what I know, other vdom libraries maintain the…",{"value":144,"source":75,"evidence":145},"Why React is needed instead of direct DOM manipulation",[146],{"id":147,"by":148,"text":149},"22778154","joosters","This is probably a naive question, coming from someone who has written very little JavaScript: Why do we need React? Why can’t the browser do the same job? Instead of passing a…",[151,155,162,169,176],{"value":152,"source":75,"evidence":153},"Mithril",[154],{"id":93,"by":94,"text":95},{"value":156,"source":75,"evidence":157},"Snabbdom",[158],{"id":159,"by":160,"text":161},"22777571","masklinn","Snabbdom[0] might be a better one there, it's not quite 33 lines (the core is about 200), but it is intended to be usable and used in production systems, either on its own or…",{"value":163,"source":75,"evidence":164},"Preact",[165],{"id":166,"by":167,"text":168},"22777275","jmchuster","If you came to this comments section looking for an actual lightweight standalone version of react, preact+htm works wonders.",{"value":170,"source":75,"evidence":171},"Cycle.js",[172],{"id":173,"by":174,"text":175},"22778190","modarts","https:\u002F\u002Fcycle.js.org\u002F",{"value":177,"source":75,"evidence":178},"Maquette",[179],{"id":180,"by":181,"text":182},"22780747","CitrusFruits","Anyone who likes the idea of a minimal virtual DOM (like this) will probably appreciate MaquetteJS: https:\u002F\u002Fmaquettejs.org\u002F",{"comments":31,"answered":47,"key":184},[185,188,191],{"id":186,"text":187},"22777320","I'm not sure if any of their content is still relevant, but mithril makes some bold claims for >React performance: https:\u002F\u002Fmithril.js.org\u002Fframework-comparison.html#react…",{"id":189,"text":190},"22777628","In what way would you say the event binding here differs from React's? (Genuinely interested). The main difference from where I'm sitting is that React has a concept of…",{"id":137,"text":138},{"commenters":193,"max_depth":194,"maker_replies":31,"first_comment_mins":195,"lifespan_hours":196},96,9,123,245,[198,202,206,208,212,216,219,221,223,227,230,234,236,238,242,244,247,250,253,256,258,261,263,267,269,273,275,276,279,282,285,288,290,293,295,299,303,305,307,310,313,316,319,322,325,329,333,336,339,340,343,345,348,352,356,359,364,367,371,374,376,378,381,383,386,388,392,395,398,402,404,406,408,411,414,416,418,420,423,425,428,430,433,436,438,441,444,446,448,449,450,453,455,457,459,463,465,467,471,475,478,482,483,486,488,493,495,498,501,504,506,509,512,515,517,519,521,524,526,528,531,534,537,539,542,545,548,550,552,555,558,560,562,564,567,570,573,576,578,581,583,585,588,590,593,595,597,601,604,606,608,611,613,615,617,619],[199,43,47,200,201,43],"22778076","maker\u002Fpositive\u002Fdocs","pomber",[203,43,17,204,205,43],"22778556","maker\u002Fneutral\u002Fdocs","aenario",[207,43,17,204,201,43],"22778621",[209,43,17,210,211,43],"22779685","project\u002Fneutral\u002Fidea","capableweb",[213,43,43,214,215,43],"22780766","commenter\u002Fneutral\u002Fnone","porsager",[217,43,43,218,211,43],"22781008","commenter\u002Fcritical\u002Fnone",[220,43,43,214,215,43],"22781521",[222,43,43,214,211,43],"22784876",[224,43,47,225,226,43],"22781576","maker\u002Fpositive\u002Fnone","lhuser123",[228,43,47,225,229,43],"22781771","geniium",[231,43,47,232,233,43],"22837878","maker\u002Fpositive\u002Fexecution","enthusiast94",[102,33,17,235,103,43],"project\u002Fmixed\u002Fperformance",[186,33,43,237,10,33],"other\u002Fneutral\u002Fperformance",[239,33,43,240,241,43],"22777490","other\u002Fneutral\u002Fidea","sdegutis",[173,33,43,243,174,43],"other\u002Fneutral\u002Fnone",[245,33,43,243,246,43],"22778425","chrisweekly",[248,33,43,249,241,43],"22778496","other\u002Fneutral\u002Fdocs",[251,33,43,237,252,43],"22779103","pier25",[254,33,43,255,252,43],"22779081","other\u002Fpositive\u002Fperformance",[257,33,43,237,103,43],"22782331",[259,33,43,237,260,43],"22783505","lhorie",[262,33,43,237,103,43],"22783917",[264,33,17,265,266,43],"22777565","project\u002Fneutral\u002Fexecution","blablabla123",[189,33,43,268,10,33],"project\u002Fneutral\u002Fdesign",[270,33,43,271,272,43],"22778954","other\u002Fneutral\u002Fdesign","_bxg1",[274,33,43,237,266,43],"22779937",[159,33,43,243,160,43],[277,33,43,243,278,43],"22777811","robin_reala",[280,33,43,243,281,43],"22778024","kitten_mittens_",[283,33,43,243,284,43],"22778158","Sharlin",[286,33,43,214,287,43],"22783846","urvader",[137,38,43,289,10,33],"maker\u002Fneutral\u002Fperformance",[291,38,17,289,292,43],"22780296","jsf01",[294,38,43,225,10,33],"22780953",[296,38,33,297,298,43],"22781483","project\u002Fcritical\u002Fperformance","bastawhiz",[300,38,43,301,302,43],"22783816","commenter\u002Fneutral\u002Fperformance","retreatguru",[78,17,47,304,79,43],"project\u002Fpositive\u002Fidea",[55,46,43,306,10,33],"maker\u002Fneutral\u002Fidea",[308,46,17,306,309,43],"22777416","ngrilly",[311,46,17,306,312,43],"22777449","pgt",[314,46,43,301,315,43],"22778502","dahart",[317,46,17,306,318,43],"22779140","petilon",[320,46,43,243,321,43],"22781215","dang",[323,46,47,324,287,43],"22783864","maker\u002Fpositive\u002Fidea",[326,47,43,327,328,43],"22778356","other\u002Fpositive\u002Fidea","jonahx",[330,47,43,331,332,43],"22778767","other\u002Fcritical\u002Fnone","benbristow",[334,47,43,214,335,43],"22779511","keb_",[337,47,47,200,338,43],"22781441","hencq",[93,40,43,243,94,43],[341,40,43,342,10,33],"22777638","maker\u002Fneutral\u002Fnone",[344,40,43,243,94,43],"22777654",[121,346,33,347,122,43],7,"project\u002Fcritical\u002Fdocs",[349,346,43,350,351,43],"22781338","commenter\u002Fpositive\u002Fdocs","bigmanwalter",[353,346,33,354,355,43],"22782014","project\u002Fcritical\u002Fdesign","ricardobeat",[357,346,43,358,351,43],"22796810","commenter\u002Fneutral\u002Fdocs",[360,361,17,362,363,43],"22778393",8,"project\u002Fneutral\u002Fperformance","seanwilson",[365,361,43,237,366,43],"22778462","robertakarobin",[368,361,43,369,370,43],"22778533","commenter\u002Fcritical\u002Fperformance","websitescenes",[372,361,17,306,373,43],"22779114","TheRealPomax",[375,361,17,362,363,43],"22779183",[377,361,43,289,10,33],"22779058",[379,361,43,237,380,43],"22780100","learc83",[382,361,43,249,292,43],"22780389",[384,361,43,249,385,43],"22780569","PKop",[387,361,43,249,385,43],"22784152",[389,194,47,390,391,43],"22777947","project\u002Fpositive\u002Fnone","zserge",[166,393,33,394,167,43],10,"project\u002Fcritical\u002Fidea",[396,393,43,243,397,43],"22779569","lioeters",[399,400,47,304,401,43],"22777618",11,"k__",[403,400,43,240,10,33],"22777667",[405,400,43,243,401,43],"22777803",[407,400,43,243,211,43],"22778006",[409,400,43,243,410,43],"22778046","colejohnson66",[412,400,43,243,413,43],"22778529","ken",[129,415,47,304,130,43],12,[417,415,43,306,10,33],"22777277",[147,419,43,240,148,43],13,[421,419,43,240,422,43],"22778180","quezzle",[424,419,43,243,413,43],"22778441",[426,419,43,240,427,43],"22780417","galaxyLogic",[429,419,43,240,160,43],"22778183",[431,419,43,240,432,43],"22778399","jfkebwjsbx",[434,419,43,243,435,43],"22779041","redis_mlc",[437,419,43,240,252,43],"22779159",[439,419,43,240,440,43],"22779827","efdee",[442,419,43,240,443,43],"22780530","Silhouette",[445,419,43,243,440,43],"22864785",[447,419,43,240,443,43],"22780486",[140,31,17,362,141,43],[67,34,17,265,68,43],[451,34,43,452,10,33],"22777446","maker\u002Fneutral\u002Fdesign",[454,34,17,265,68,43],"22777784",[456,34,17,265,160,43],"22777595",[458,34,43,225,10,33],"22777635",[460,34,33,461,462,43],"22778280","project\u002Fcritical\u002Fexecution","tonyarkles",[464,34,43,214,160,43],"22779152",[466,34,43,214,462,43],"22781544",[468,469,17,265,470,43],"22781202",16,"uk_programmer",[472,473,43,243,474,43],"22778495",17,"diablo1",[476,473,43,243,477,43],"22778675","leeoniya",[479,480,33,354,481,43],"22778403",18,"jxub",[180,32,43,243,181,43],[484,485,43,342,10,33],"22791521",20,[82,487,47,304,83,43],21,[489,490,47,491,492,43],"22779909",22,"project\u002Fpositive\u002Fdesign","freefal",[113,494,33,461,114,43],23,[496,494,43,243,497,43],"22778510","jonplackett",[499,494,43,243,500,43],"22778660","scelerat",[502,494,43,243,503,43],"22778715","rpunkfu",[505,494,43,243,114,43],"22778793",[507,494,43,243,508,43],"22779033","libria",[510,494,43,243,511,43],"22779056","Kaze404",[513,494,43,243,514,43],"22779254","ludamad",[516,494,43,243,443,43],"22779589",[518,494,43,243,511,43],"22783038",[520,494,43,243,443,43],"22787517",[522,494,43,243,523,43],"22779559","ysavir",[525,494,43,243,443,43],"22779623",[527,494,43,243,523,43],"22779752",[529,494,43,243,530,43],"22779922","karmakaze",[532,494,43,243,533,43],"22781013","Red_Leaves_Flyy",[535,494,43,214,536,43],"22780912","bjpbakker",[538,494,43,214,122,43],"22781076",[540,494,33,347,541,43],"22778733","JustSomeNobody",[543,494,17,268,544,43],"22778750","brudgers",[546,494,43,214,547,43],"22778824","gtf21",[549,494,43,214,544,43],"22779476",[551,494,33,354,252,43],"22778978",[553,494,43,214,554,43],"22780494","bonestamp2",[556,494,33,347,557,43],"22779015","jackewiehose",[559,494,43,204,10,33],"22779106",[561,494,17,204,557,43],"22779138",[563,494,43,452,10,33],"22779090",[565,494,17,566,427,43],"22780312","project\u002Fneutral\u002Fdocs",[568,494,33,354,569,43],"22779950","grawprog",[571,494,33,354,572,43],"22780448","caymanjim",[574,494,43,214,575,43],"22780663","Supermancho",[106,577,33,394,107,43],24,[579,577,43,214,580,43],"22777220","Jean-Philipe",[582,577,33,297,103,43],"22777306",[584,577,43,301,211,43],"22777502",[586,577,43,587,103,43],"22782409","commenter\u002Fcritical\u002Fidea",[589,577,47,304,312,43],"22777235",[591,577,43,240,592,43],"22777662","emmelaich",[594,577,43,243,321,43],"22781180",[86,596,47,491,87,43],25,[598,596,43,599,600,43],"22778270","commenter\u002Fneutral\u002Fdesign","frosted-flakes",[602,596,43,599,603,43],"22784667","s_y_n_t_a_x",[117,605,33,354,118,43],26,[607,605,43,599,252,43],"22779008",[609,605,43,599,610,43],"22779123","fulafel",[612,605,43,599,312,43],"22779045",[614,605,43,599,373,43],"22779134",[616,605,43,599,118,43],"22784999",[618,605,43,599,373,43],"22815102",[620,605,43,599,621,43],"22783121","hombre_fatal",[],[624,629,633,638,643,647],{"id":625,"name":626,"points":627,"category":628},"22811653","FalsiScan",770,"productivity",{"id":630,"name":631,"points":632,"category":19},"22758217","Learn GNU Awk one-liners ebook",539,{"id":634,"name":635,"points":636,"category":637},"22790425","DNS over Wikipedia",398,"dev_tools",{"id":639,"name":640,"points":641,"category":642},"22777397","Treendly",343,"web_saas",{"id":644,"name":645,"points":646,"category":637},"22763656","Pdf.js Express",334,{"id":648,"name":649,"points":650,"category":628},"22818300","Online Town",261,false,"v2",{"id":654,"name":5,"line":5,"ai":651,"cat":19,"year":12,"points":13,"comments":14,"rec":28,"s":29,"top":17,"kw":655,"maker":10,"domain":9,"tier":18,"attempts":43,"strip":656,"url":8,"mix":657,"praise":74,"objection":98,"sub":20},22776753,[23,24,25,26,27],"4353030015355133530500331151000111115510",[31,32,33,34],1794036588506]