12 ms·
Build Your Own React
- franky47 7y agoyour* ?
- pomber 7y agofixed, thanks
- neogodless 7y agoYou've got a "dependig" in there, too. "React keeps a linked list with just the fibers that have effects and only visit those fibers." -. should be "visits"
- tabtab 7y agoNext article: "Build yore own grammar checker" :-)
- quickthrower2 7y ago"Billed your own gram a chequer"
- yboris 7y agoThe presentation is stellar! I love the animated code changes on the side <3
- yboris 7y agoThe effect is here: https://github.com/pomber/gatsby-waves https://github.com/pomber/gatsby-waves
- leetrout 7y agoVery, very nice. His presentation library is available as well! https://codesurfer.pomb.us/ https://codesurfer.pomb.us/ https://github.com/pomber/code-surfer/blob/code-surfer-v2/readme.md https://github.com/pomber/code-surfer/blob/code-surfer-v2/re...
- jermaustin1 7y agoI love this effect, I was actually just writing a blog post that I didn't save before my tab crashed. I'm actually now GLAD it didn't! This is a lot more effective a medium for the content! I even went ahead an set up a monthly donation to their open collective project [1] because it is so beautiful. 1: https://opencollective.com/code-surfer https://opencollective.com/code-surfer
- pomber 7y agohey, thanks a lot for the donation!
- jermaustin1 7y agoNo problem, the tutorial was great and the code-surfer package looks great. Keep up the good work!
- agumonkey 7y agoThis might even become standard for most documentations.
- piotrkubisa 7y ago> This might even become standard for most documentations. I hope not, because slow, meaningless animation makes me tired and something inside me wants escape that page. Also it affects scrolling, especially noticeable when I am scanning a text instead of reading - you might lose context (note how the presentation reacts on pressing "page-up" / "page-down"). Kindle and all e-reader hates animations[0][1] - any animations (they are just huge black holes for battery). IMHO any documentation SHOULD be able to printed out on paper and sorry - paper is not interactive. However, I will warmly welcome some interaction in dedicated docs section but it would be great if it could be duplicated as a rich-text article. [0]: Not saying about the reader mode in browsers (e.g. Firefox) [1]: Please think also about people that are disabled or use VoiceOver/NarratorMode to be more productive / are just lazy to read text using their eyes :)
- jmkni 7y agoReminds me of the book "Build Your Own AngularJS" from a couple of years ago. - https://teropa.info/build-your-own-angular/ https://teropa.info/build-your-own-angular/ Old now, but still worth reading IMHO as you learn a lot.
- proc0 7y agoWasn't there a very similar article recently? Wouldn't mind if this is a new tutorial trend. Regardless the presentation of this article is great! I hope this also catches on, it has maximum scanning efficiency.
- kaycebasques 7y agoWhat’s the trend here?
- hombre_fatal 7y agoI find that these kinds of tutorials are great at all stages of my experience. As a beginner, it's helpful to watch someone's thought process as they build something from scratch. I remember not even knowing where to start. As a more experienced developer, I tend to know how things work independently, but am always interested to see how you might go about stitching them together at a high level. Here, I liked the concurrent-mode and fiber patterns broken down into their simplest implementation to get the point across.
- aaron-santos 7y agoWhat a great tutorial! I wanted a React-like TUI lib for a Clojure project and ended up writing facsimile by looking at the React source. Reading the React source to try to understand how React works is very challenging. This would have made the perfect guide. Thank you.
- pier25 7y agoVery nice. This guy is going places. Hey Rodrigo so how performant do you think this didactic example would be compared to React? Maybe 80% there?
- pomber 7y agoMuch less than 80%. Half of React code is optimizations, and not only speed, for a medium sized app I guess React uses less than 20% of the memory that Didact uses.
- level 7y agoAlong a similar vein, Sophie Alpert did a talk[1] at React Conf this year on building your own React custom renderer by using implementing the interfaces that React exposes. Sophie explains how you could use React as a declarative API for pretty much any platform if you wanted, similar to how react-native works. [1] https://www.youtube.com/watch?v=CGpMlWVcHok https://www.youtube.com/watch?v=CGpMlWVcHok
- _hardwaregeek 7y agoWhich is actually a little funny, because that's essentially turning React into a domain specific language for UI rendering. The Racket people are probably facepalming that we had to go via JavaScript and Babel to get to a UI DSL.
- nevertoolate 7y agoIt is exactly that, a small library for ui, written in ocaml, ported to a scripting language with immense amount of work, and years and years of educating people with white lies :)
- superdisk 7y agoIf Racket had a declarative UI DSL, I'd be using that, but they don't.
- reggieband 7y agoExcellent content. I did find that the code previews in the side bar occasionally changed before or after I expected. I understand the intent with having them adjacent rather than inline ... but I'd probably prefer inline. It would be nice to make this an option of the presentation format.
- pomber 7y agoIs it because you read closer to the top or bottom of the viewport? I want to add a print mode that would have each code step inline.
- reggieband 7y agoI tend to flip back and forth from hacker news articles (e.g. check slack, check build progress). I try to position the page while scrolling so I can find my place back in the text. That alternates from "align top of content section to top of scroll pane" and "align bottom of section content to bottom of scroll pane" depending on the length of the section. I also do it unconsciously as I read, like a habit, to prepare the page in case I need to jump away. Of the two, I probably favour aligning to the top. But since I alternate I would probably have changed to inline.
- cj 7y agoThis is great. Implementing core libraries/frameworks you use day-to-day, from scratch / for fun, is one of the best and most practical ways to level up as a dev.
- jjcm 7y agoPresentation is amazing here. That said, I recently wrote a webcomponent based router and I was surprised at how easy it was to get to a very usable point at such a minimal amount of code. All too often I get in the loop of just `npm i`'ing whatever it is I need, even if the functionality I really need is just a tiny subset of whatever huge library I'm importing. Rodrigo's right that something like this helps you understand React and how to contribute to the codebase, but I think it goes further than that - it lets you understand that the library isn't magic. It gives you the confidence you need to think that maybe you don't need that full 560kb library.
- rajeev-k 7y ago> webcomponent based router Routers can be (and should be, IMO) written to be independent of UI component libraries such as React and webcomponents. See an example here: https://github.com/Rajeev-K/mvc-router https://github.com/Rajeev-K/mvc-router You can use it with React---and in some ways it works better than react-router.
- thatswrong0 7y agoYeah I'm not a fan at all of react-router because it's too dependent on React. For redirecting, for example, they recommend you render a <Redirect> component. Which is just bananas to me.
- arthurdenture 7y agoThe alternative would be to write a side effect inside your `render()` function, which is illegal -- it breaks the new Concurrent mode rendering, which can call render() speculatively. I mean, I see why it's intuitively unappealing to you, but there are perfectly good reasons for the design.
- thatswrong0 7y agoThere are "perfectly good reasons" in the sense that if you artificially limit yourself to using the React component tree to manage routes, yes it makes sense how they arrived at this solution. But after dealing with it for a while, it's just so obviously not the correct approach, and it's crazy to me that it's the defacto router. Cargo culting at its finest. The router could exist outside of or at a higher level than the component tree.
- wintorez 7y agoVery nice!
- tomcooks 7y agoWOAH amazing presentation, this is how code should be explained. Quick validation: would you pay for good bits of code explained well by the author?
- deleted 7y ago[deleted]
- kybernetikos 7y agoI have once already: https://www.amazon.com/Beautiful-Code-Leading-Programmers-Practice/dp/0596510047 https://www.amazon.com/Beautiful-Code-Leading-Programmers-Pr... I liked it, but I'm not going to be paying for this sort of thing often. I think a lot would hinge on having content that was high quality, and being able to persuade me that it would be high quality before I paid for it might be challenging.
- tomcooks 7y agoThank you very much, challenge accepted
- Zaheer 7y agoIs this the same concepts behind Vue as well? As someone that hasn't yet dabbled in the 'new' frameworks I love how this bridges the gap of understanding. Thank You!
- wartijn_ 7y agoI really like the UI of this blog. On mobile it's a bit annoying to have the top half of the screen be filled by a black block of code, but on desktop it look definitely awesome.
- deleted 7y ago[deleted]
- foobar_ 7y agoThis is a great way to understand code. Why write comments, when you can make presentations? Are there similar tools like this?
- 5cotto 7y agoI’ve been building apps with something similar but using D3.js (d3-select specifically) for data binding. https://github.com/ScottORLY/miri https://github.com/ScottORLY/miri
- daliwali 7y agoI think concurrent mode and fibers are kludgy hacks that arise from the problem that only the main thread has access to the DOM. As far as I know and I may be ignorant but few, if any, other frameworks are scheduling DOM updates as aggressively as React is, and are simpler to understand as a result. Hopefully the standards folks can come up with a decent DOM API for WebAssembly.
- jaequery 7y agoForget building my own React, I want to build how you did the presentation! It’s a great concept!
- petetnt 7y agoHere's the Gatsby theme https://www.gatsbyjs.org/packages/gatsby-theme-waves/ https://www.gatsbyjs.org/packages/gatsby-theme-waves/ (and on GitHub https://github.com/pomber/gatsby-waves https://github.com/pomber/gatsby-waves) Great article and awesome storytelling there!
- jolmg 7y agoI agree, though, it's a shame there's no fallback for when there's no javascript.
- glofish 7y agoI think that inverting the order, putting the text on the left and code on the right would work much better. For me, it felt quite unnatural to go against the normal reading direction. I believe that because we read left-to-right, and the additional content is usually on the right, it would be easier for the eyes to search for the examples on the right rather than backward. It felt very distracting. Great content though!
- notgrmi 7y agoestás loco boludo amazing job
- ossworkerrights 7y agoOh boy there comes a yet another batch of react like “frameworks” no one needs.
- musicale 7y agoI really hate the layout and the annoying, distracting, animated garbage on the left side of the page. Maybe it isn't rendering properly in my browser, but I would greatly prefer a simple, wide, vertical layout.
- spectramax 7y agoI agree, it is simply astounding that the entire thread is filled with praising the presentation style which only gets in the way of the user. Anytime there is a need to add effects, animations, snazzy things - question ruthlessly as to why is it needed. Then after justifying it, ask again. This is what good documentation looks like: https://golang.org/pkg/ https://golang.org/pkg/ And this: https://www.mpfr.org/mpfr-current/mpfr.html https://www.mpfr.org/mpfr-current/mpfr.html
- josephwegner 7y agoBut this isn't documentation. This is a tutorial, in which progression and transitioning between steps is a fundamental part of the content. Representing that transition via animations is not inappropriate.
- marmada 7y agoIt looks cool, but it is inappropriate because it wastes time since the transitions take time.
- Silhouette 7y agoDo they take more time than repeating the same 10 or 20 lines of code with slight changes every couple of paragraphs, and having the reader try to figure out what changed since the last 4 times they read almost the same code?
- jsjohnst 7y agoYou felt so passionately that you needed to say the same thing three times? This isn’t documentation, think of it more like a slide deck or tutorial. If it’s not your cup of tea, read the source material on Github or look elsewhere for the knowledge. While I somewhat agree with you on it’s a bit overkill, harping on that point repetitively is pointless.
- jeltsin1234 7y agoNice tutorial, but kind of unusable on a mobile device.
- antoaravinth 7y agoThis is great. I did the same for Express.js last year. If anyone interested in it, here is the link: https://github.com/antsmartian/lets-build-express https://github.com/antsmartian/lets-build-express
- karol 7y agoWhat's interesting is the React team had to implement their own DOM manipulation abstraction, with efficient change management and not interrupting the main JS thread. Their implementation strikes me as a possible general purpose implementation that could eventually replace the way DOM works.
- quangtop 7y agofsaf