14 ms·
Professionally, I do embedded and robotics, but once a year I find an excuse to create a simple web application (to stay updated). Every time, I get impressed b
by lukicdarkoo 5y ago
Professionally, I do embedded and robotics, but once a year I find an excuse to create a simple web application (to stay updated). Every time, I get impressed by power and simplicity of the web technologies in general. In JavaScript those are things mentioned in the article + WebComponents. For CSS those are flexboxes, grids, and animations. In my opinion, React made a revolution with hooks and contexts. I love the direction in which the web world has been going!
- fukmbas 5y agoWeb tech is shit
- antris 5y ago>In my opinion, React made a revolution with hooks and contexts I agree with your overall point 100%, but to be honest nothing in React was / is innovative except for the virtual DOM diffing, but even that is becoming increasingly irrelevant as apps are moving towards more and more reactive architecture. React made a huge impact on web dev and deservingly so, but all of the other ideas have been implemented and used on the web before. Of course it's great that React is bringing some of these good ideas to mainstream, but they've been there way before they have been distributed along with a VDOM algo.
- warent 5y ago> but all of the other ideas have been implemented and used on the web before. Is this true? I've worked in web dev for like 6 yrs now and React has provided a significant number of concepts and technologies I'd never seen before and still dont see elsewhere. For example, JSX. Yes, it originated in php but React was its first time being implemented in the frontend. Also the concept of hooks and functional components. The fact that you explicitly define side-effects in the render of a function, with memoization or execution dependent on arbitrary state, is a new invention as far as I'm concerned.
- antris 5y agoYes, yes and yes. All of these concepts are variations of what has been done before in a number of ways. Mostly by "FP academics" who "live in fantasy land", until everyone else starts using them too. Transpiling, hooks and components have all been done (and done better) before React came along, but often they were laughed out as esoteric toys that have nothing to with "real programming". It's just hard to teach these concepts until you actually use them, and it's hard to get people to use these concepts unless they are included in something else that you need. The same happened early with React, both JSX and VDOM were laughed at by many developers because "they looked stupid" to people who didn't understand them and were used to one way of doing things. MVC+jQuery+templates was the flavour of the day. Same thing with TypeScript, FRP and so on. Most likely, whatever concept is gaining momentum today, it's an exact or approximate copy, or in rare cases a novel remix of what has been researched 10-20 years ago, and used in production for 5 years before you heard about it on HN These people who like to apply category theory etc. in programming have heard this mocking of their work as stupid esoteric fantasy (and then seeing them become mainstream later) so often that they literally called one of their specs "Fantasy Land" https://github.com/fantasyland/fantasy-land https://github.com/fantasyland/fantasy-land There's still lot of work to be done. JavaScript doesn't even have proper immutable data structures natively, which would be a REAL low hanging fruit.
- eurasiantiger 5y agoThe esotericity is not in the expressible semantics, but in the syntax.
- ZephyrBlu 5y agoI'm very curious what the better, academic version of VDOM, hooks and components that has already been done looks like in comparison to React.
- antris 5y agoSvelte does reactive UI without a VDOM at all. Every DOM operation flows from declarative instructions based on the state of the application, without a need for VDOM or hooks. The compiler is quite mature and used by countless apps in production right now. https://svelte.dev/ https://svelte.dev/ I've been using it myself and it doesn't feel academic at all. The Svelte Kit toolkit, a successor to the Sapper frameworks is also ready to use but it's not 1.0 yet so might be a bit unstable. But if you're worried about having to figure things out then you can use Sapper+Svelte or just Svelte just fine, and they're very robust and well documented.
- ketzo 5y agoWell, isn't there something a little "revolutionary" about mainstream adoption of cutting-edge techniques? After all, like you suggest, things like functional programming and monads have existed for quite some time. The thing that makes React special is how rabidly people adopted it, and continue to adopt their major updates.
- antris 5y ago>Well, isn't there something a little "revolutionary" about mainstream adoption of cutting-edge techniques? Taking the example of hooks, React has hooks because it was released with a bunch other stuff in addition to the VDOM, people started using those things as a (poor) framework, shot themselves in the foot repeatedly and finally hooks had to be introduced as a fix on top of that. Calling that band-aid "revolutionary" or cutting edge technology, kind of sounds wrong. They never would have been there and wouldn't have been needed if it weren't for the bloated original release. But of course, even if that band-aid makes people think differently about building apps, it's all good. That's why I mentioned in the post that it's a great thing. But calling it "revolutionary" when a large fraction of programmers have been doing it that way for ages is a bit of a stretch.
- ptx 5y ago> virtual DOM diffing ... is becoming increasingly irrelevant as apps are moving towards more and more reactive architecture Could you expand on this? What was it that necessitated DOM diffing before, and which architectural changes are making it irrelevant?
- antris 5y agoState and DOM being mutated all over the code base was the norm before React. In many apps, state was a thing that was spread out all over the code and could be mutated by any part of the code. And a DOM was another global state on top of that, that had to be kept in sync with the data of the application. Otherwise users would be shown a state that wasn't representative of the actual state of the application. People did this with careful DOM modification code, trying to always remember to set, reset add and delete DOM nodes correctly. Of course, this caused many bugs and sometimes huge performance issues. If you tried to solve this problem by redrawing the DOM every time your app state changed somewhere in the code, the browser would freeze and all your form elements would be defocused on every update, scroll states would be reset etc. etc. React solved this by the diff algorithm and doing surgical updates of the dom based on the components state. It does this by manually reading the state, keeping a virtual DOM in its memory and doing diff calculations. But if your whole app is reactive by design, there's no need to read the app state, doing diffing or figuring out which DOM node to update which one not to update. The DOM update operations flow naturally by the declarations given by the programmer. Frameworks such as Svelte are moving into this direction and they're already seeing quite significant performance improvements compared to VDOM implementations.
- atom_arranger 5y agoThe best part about React is declarative rendering, you tell React what the DOM should look like, it makes it so. React does this using a virtual representation of the DOM, but this is an implementation detail. If you can do declarative rendering without keeping a virtual representation of the DOM and diffing it against the real DOM then "the virtual DOM is overhead" (https://svelte.dev/blog/virtual-dom-is-pure-overhead https://svelte.dev/blog/virtual-dom-is-pure-overhead).
- madeofpalk 5y ago> nothing in React was / is innovative except for the virtual DOM diffing Maybe there wasn't much academically innovative in React, but it certainly brought declarative, functional UI programming to the masses. Its innovation was in making that as easy and accessible as possible with a tiny API. I feel saying React wasn't innovative is so dismissive and ignores the massive paradigm shift that's happened in web development because of it.
- antris 5y ago100% true. But I'm not even talking about academic really. There were plenty of people who didn't buy into the "MVC/jQuery/templates" thing, and we were writing apps into production for actual customers. I've never been taught academically, but I realized that writing my DOM operations as declaratively as possible made my code much easier to maintain. So I started creating and updating my DOM in JS way before React, when it was considered "heresy" by people who didn't know better. And there were plenty of programmers like me, who never got academically trained or looking up category theory. They had just shot themselves in the foot with the silly MVC stuff too many times to care anymore about what other programmers think. For me, and people like me React was a GODSEND. We started immediately hyping it, but there was huge resistance early on to adopt it. React was a great improvement from the status quo. But then later on we realized that people started using it as a framework just like they had with "templates+jquery+backbone+whatever" and although the DOM things are a bit easier now, many people don't understand any better why or how React is good and when it's bad to use...
- madeofpalk 5y agoI'm so confused by what you're saying all over this thread, apart from "React is something that exists, and I modified the DOM before it existed". Okay?
- 8note 5y agoI think the innovation comes from making it easy to do. Its been transformative for how people write UI code as a result Its innovative in the same way as the iPhone was. All of the concepts existed before, but nobody made them practical and cheap
- biinui 5y agoMay you kindly point me where to start learning robotics, and recommendation for a starter robot arm? Maybe ~$300 if something worthwhile exists at that price range. Take care.
- crooked-v 5y agoLego Mindstorms could be worth considering as a general-purpose hobby robotics platform: EV3 (the older version) can be flashed with a custom Linux distro, and Robot Inventor (the newer one) can run Python scripts. In either case all you need to add more structural parts is to pick up a bulk case of used Technic parts, so it's eminently reusable for multiple unrelated projects. For an example of stuff people have built with them, here's a Robot Inventor-based Rubik's cube solver: https://www.youtube.com/watch?v=_cl2Wur8waY https://www.youtube.com/watch?v=_cl2Wur8waY
- monocasa 5y agoOh jeeze, I feel old if the EV3 is being described as "the older one". I have horrible memories of writing some "Not Quite C" for RCX because the compiler didn't support modern amenities like stack frames. Being able to just run Linux on the thing sounds like a god send.
- wcarss 5y agoA group I worked with in a high school lego robotics competition managed, if I recall correctly, to achieve 'recursion' by defining 2 very similar functions and having them just call each other. It was a frustrating device at times but also a really fun experience!
- BrissyCoder 5y ago> simplicity of the web technologies in general Are we looking at the same web technologies here or are you from an alternative universe?
- zodiakzz 5y agoI am a senior web developer with 12 years of experience, also perplexed by that statement. Edit: The React repo is 3 million+ lines of code, written in its own niche language...
- uryga 5y agowhat niche language?
- brundolf 5y agoThere are different definitions of "simplicity". The entire stack top to bottom may not be simple, but if the developer experience is simple (which it can often be on the web- that's a major driver of the web's prevalence as a platform), that can be what matters. I have a theory that the people who go on about how the web ecosystem is too complicated are either 1) web developers who are nostalgic for the jQuery days (and have selective memories about those days), or 2) non-GUI developers who enjoy the theoretical virtues of a QT or a GTK but have never actually had to work on a complex GUI, and so can't appreciate the incredible benefits the web has over those other platforms.
- 5y ago
- rthomas6 5y agoI do embedded also, and FPGAs. Do you have any suggestions for how to start learning web stuff? Every time I try, I get overwhelmed by all the frameworks, libraries, package managers, build pipelines, etc. There doesn't seem to be a set of best practices for what to do, or even what is needed and what isn't. What is the best way to get started?
- ffhhj 5y agoDon't bother with frameworks, write plain HTML+JS+CSS and use jQuery.
- neycoda 5y agoHTML then CSS then JavaScript. I've taught all three and people struggle more in a different order. HTML is the skeletal architecture, CSS is just styling, then JavaScript is behavior. Those three things in that order are like orders of "need". You need HTML first to have a webpage structure, then styling to make it easy to understand its elements, then the behavior is more complex than both. I don't know why I see people put JS learning before CSS... JS is much more complex than CSS, and a much different change in paradigm from HTML than CSS is.
- DrSiemer 5y agoWhat exactly do you still use or need jQuery for?
- PedroBatista 5y agoI like the API.
- ffhhj 5y agoIt's mostly a wrapper of JS functions that takes care of compatibility, and makes code more readable.
- buchanaf 5y ago
- neycoda 5y agoWeb hooks are nothing new in other languages, they're just built-in functions that do things that were previously cumbersome to code yourself. That's only revolutionary to React. PHP is a great example of built-in functions, yet I've heard React fanboys complain that PHP has too many built-in functions (which is a really odd thing to complain about).
- rkagerer 5y agoOne thing I hate about the modern web is pages that load with lots of missing content / empty components and then download and render that content afterward. Is this a React thing? Waiting for the extra request(s) adds lag time, makes back/forward navigation clunky, interrupts what I was doing if I already began interacting with the page (eg. infamous relayout / unwanted scroll) and sometimes breaks snapshotting tools like archive.is. I don't mind pages with javascripted controls, but their initial content should be included in the payload with the initial page load. Don't the frameworks have tools to help you do that?
- allset_ 5y agoIt's not specifically a React thing, but JavaScript enables it. Lazy-loading content is a good idea if you're building dynamic web _applications_, as common components (buttons, modals, etc.) don't need to be reloaded over and over. However, with mostly static content like a blog, it's generally not a great idea.
- mbirth 5y agoYou can probably thank Google for that as to get a higher page ranking, a site must do the initial load fast. And showing only empty placeholders is fast.
- deergomoo 5y ago> their initial content should be included in the payload with the initial page load The problem with that is that it pretty much requires you be running node on the back end too. If your back end is built with say PHP or Ruby, you’d need to call out to a node process, which is potentially a lot of additional complexity, time, and expertise.
- idkwhoiam 5y agoMy only issue with CSS is the absence of container queries [1]. Now I need to rely on size listeners of the container element to make my components truly responsive. Media Queries do not work for components. CSS Grid & Flexbox are nice but not enough to achieve radical layout changes for certain breakpoints. [1] - https://css-tricks.com/say-hello-to-css-container-queries/ https://css-tricks.com/say-hello-to-css-container-queries/
- willhoyle 5y agohttps://github.com/marcj/css-element-queries https://github.com/marcj/css-element-queries I’ve had pretty decent success using this library.
- valand 5y agoOn React, people talk about it especially for it being a UI tool. But the most significant feat React achieved IMO is how easy to write asynchronous hiearchical actors (from actor model) with it (kind of like erlang vm). Context enables dependency injection and ownership management. Effect and state enables object ownership and lifetime management. Js timers, (i.e. setTimeout, setInterval, queueMicrotask, promise/async), help making an object living asynchronously as if it has its own private thread. Yes, those are similar concept of lifetime and ownership Rust have, but instead of functions/blocks the object (value in memory) is owned by/shared with components. And of course these are not enforceable by compilers/transpilers/linters due to them not being a javascript-primitive, but at least React helps organizing those things in a lot more explicit and clear manner.
- geodel 5y agoI hope this is sarcasm.