From an user experience this optimization seems to have little effect I would guess. When you type, 2ms isn't noticeable. But it's a sign of good engineering and focus on details.
“Implement text editor DOM updates manually instead of via React”
61–70 of 225 posts
Re: “Implement text editor DOM updates manually instead of via React”
#62I enjoy seeing the latest fad being burned at the stake as much as the next guy, but I don't think we should blow this out of proportions. Atom is a text editor, and text editors have an insanely high bar to clear in terms of performance and responsiveness. Users will abandon a text editor if the cursor takes a bit too long to move. On top of that, Atom has been criticized about its slowness since the very first anno…
React is so much different from other frameworks, I feel. Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down. Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web…
>Over 1 Billion people use a React application everyday (Facebook + Instagram web)
It's fun to actually see which parts of public websites are written with react by running this in the browser console:
setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)
edit: the snippet is from Pete Hunt who is on the core React team (https://twitter.com/floydophone/status/557348616080076800)
Re: “Implement text editor DOM updates manually instead of via React”
#63Earlier quoted context omitted.
React is so much different from other frameworks, I feel. Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down. Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web…
I had the opposite impression when looking at the React docs. JSX was intimidating and getting the quick examples to work resulted in several errors. JSX is of course optional, but the way that Angular just worked, without any non sense of installing anything, is what really drew me into the framework.
I agree - I find React has a higher initial overhead than Angular. Frontend web development is complex, so in the long run, the complexities will still show if you make a misstep.
That said, I'm happy with my time so far with React. I haven't gone into nitty gritty engineering with it yet due to not having the time to start really coding on my project with it, but it has been fairly simple relatively speaking.
I'm excited for Angular 2 though - the amount of planning going into it is excellent, and I believe it will also turn heads with its simplicity & performance.
Frontend web development is seeing some exciting changes that should ultimately make our development ecosystem much better to work with.
Re: “Implement text editor DOM updates manually instead of via React”
#64Earlier quoted context omitted.
Atom is very different from other things. The editor component is something that revolves almost entirely about state, and a huge amount of state at that. I think the future is, like many abstractions, one where your tighter loops escape the abstraction (like numpy's C bindings). There's still advantages on a big-picture scale to using declarative frameworks like React EDIT: one thing is that a text editor can know a…
This is why I designed Glitch: http://research.microsoft.com/apps/mobile/showpage.aspx?page... Note that all the live editor examples in the essay are written in Glitch. Think of Glitch as a react like framework that focuses on fixing mutable state through time management rather than avoiding it.
I believe that the page you referenced to is broken. I.e. no videos or code samples on, see screenshot - http://snag.gy/lMAp8.jpg
Re: “Implement text editor DOM updates manually instead of via React”
#65Angular touted its declarative syntax, but really what does that give you? It saves a few strokes over something like
Hey, how are you!
controller.onStateChanged("name").set(function () {
$(".myapp-name", container).html(state.name);
});
React kind of encourages building the components the second way. It eschews two-way binding in favor of a code-based rendering approach. IoC pattern isn't the same as embracing a declarative style where static data contains instructions.
So, React is more efficient and mitigates the code-based rendering by introducing JSX inside JS. Basically, the templates are declared inside your JS files. Same as in Angular you'd have directives.
But then the question becomes, why do you need to do all the fancy DOM diffing, also? Just fire events when an attribute of some ViewModel changes. Attach event listeners to recompute some values and then do DOM updates using a library like FastDOM. I guess React could help in the diffing by storing copies of your DOM snippets, but that's usually not the biggest bottleneck. You usually ALREADY store the previous state in JS and can see what changed, before rendering. With libraries like Fastdom or GSAP updates are plenty fast to the point of powering 60fps animations!
Re: “Implement text editor DOM updates manually instead of via React”
#66Earlier quoted context omitted.
React is so much different from other frameworks, I feel. Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down. Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web…
>Over 1 Billion people use a React application everyday (Facebook + Instagram web) It's fun to actually see which parts of public websites are written with react by running this in the browser console: setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500) Some pages to try it on: https://i…
Fake test. React Components don't always return a DOM element, also not every element shows up all the time, instead you should download the React dev tools.
There are at least 30-40 top level components on Facebook. Nice try though.
Re: “Implement text editor DOM updates manually instead of via React”
#67Earlier quoted context omitted.
React is so much different from other frameworks, I feel. Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down. Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web…
>Over 1 Billion people use a React application everyday (Facebook + Instagram web) It's fun to actually see which parts of public websites are written with react by running this in the browser console: setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500) Some pages to try it on: https://i…
Thanks! That's really cool.
Re: “Implement text editor DOM updates manually instead of via React”
#68Earlier quoted context omitted.
React is so much different from other frameworks, I feel. Someone that doesn't know React can basically come in and start working on a large app from Day 1. It is so much less frustrating than Angular, Backbone + Ember + handlebars, etc. You can continue to add features to a React application and not slow down. Also React isn't unproven. Over 1 Billion people use a React application everyday (Facebook + Instagram web…
I had the opposite impression when looking at the React docs. JSX was intimidating and getting the quick examples to work resulted in several errors. JSX is of course optional, but the way that Angular just worked, without any non sense of installing anything, is what really drew me into the framework.
JSX is simple, it is just simplified HTML. I think you may want to give it another try, sharpen your skills with it. It is not difficult to work with if you try.
And on installing things, it is basically what any developer does these days. We install tools for almost anything. Just think of the JSX tools as another tool in your belt to help with the translation. The paradigm shift opens up your palette to new technologies. For instance, you can go from using just JSX to using ES6 with JSX (babeljs) as well, with no added cost, all because you already have your build process set up.
Re: “Implement text editor DOM updates manually instead of via React”
#69They saw an improvement when they introduced React too...
http://blog.atom.io/2014/07/02/moving-atom-to-react.html
So React taught them how to update the DOM manually ;) I suspect the case of a text editor is systematic enough so that they can have a specialized and minimal DOM update algo, without too much maintenance cost (which would be high if you try to implement specific minimal DOM update in a random app).
Re: “Implement text editor DOM updates manually instead of via React”
#70Earlier quoted context omitted.
This is why I designed Glitch: http://research.microsoft.com/apps/mobile/showpage.aspx?page... Note that all the live editor examples in the essay are written in Glitch. Think of Glitch as a react like framework that focuses on fixing mutable state through time management rather than avoiding it.
I believe that the page you referenced to is broken. I.e. no videos or code samples on, see screenshot - http://snag.gy/lMAp8.jpg
Ugh...mobile link, this should work:
http://research.microsoft.com/en-us/people/smcdirm/managedti...