Web App Speed • Hacker News Board

Re: Web App Speed

#21

Post by amelius » Mon, Jun 01, 2015, 8:39 AM UTC

But how would one implement e.g. progressive rendering in the background?

Re: Web App Speed

#22

Post by archagon » Mon, Jun 01, 2015, 9:00 AM UTC

1. Regarding native complexity: surely, using CoreGraphics is just as easy as canvas?

2. That game looks like it's running at about 15fps. I'm not sure that constitutes very good proof of the argument. The best apps and games run at 60.

3. I'm not sure who's using web MVC frameworks en masse and to what end, but I would NOT want to write a data-driven web app like Discourse from scratch.

Re: Web App Speed

#23

Post by dspillett » Mon, Jun 01, 2015, 9:08 AM UTC

olalonde wrote: post #4

Detrus wrote: post #3

Flash sites, apps and games also earned a bad reputation for eating up CPU, loading too long, doing too much and running poorly. And it was mostly due to the culture of the developers. In the Flash vs HTML5 iPhone wars, people argued that if Flash was hated because of the developers who abused it, what's going to stop the same thing happening to HTML5/JS/canvas? It's happening. Usually not on some interactive visuali…

On a related note, Google penalises websites with longer load times. http://googlewebmastercentral.blogspot.nl/2010/04/using-site...

That isn't going to catch sites that load reasonably but behave slowly afterwards (eating CPU time so potentially slowing other apps down too).

There are a couple of sites I visit that do this. If I leave a few tabs of imgur open in Chrome they'll consume a pile of CPU time (this doesn't always happen, so perhaps it depends which ads are on the page?). IFLS pages eat CPU and memory too (again, almost certainly due to the ad content). In both cases it can be noticeable on a powerful desktop machine, so it must be a significant drain on low powered laptops and such.

Re: Web App Speed

#24

Post by z3t4 » Mon, Jun 01, 2015, 10:00 AM UTC

Reading this article was a fresh breeze.

The Canvas is very easy to work with. You can forget about JQuery and everything else concerning the DOM and just write pure JavaScript. I've even started working on a canvas based text editor.

Re: Web App Speed

#25

Post by w0utert » Mon, Jun 01, 2015, 10:20 AM UTC

archagon wrote: post #22

1. Regarding native complexity: surely, using CoreGraphics is just as easy as canvas? 2. That game looks like it's running at about 15fps. I'm not sure that constitutes very good proof of the argument. The best apps and games run at 60. 3. I'm not sure who's using web MVC frameworks en masse and to what end, but I would NOT want to write a data-driven web app like Discourse from scratch.

Agree, similar arguments came to my mind when I read the article. Two other relevant points:

4. Even if a game like the one in the article performs reasonably well using HTML5 Canvas + JavaScript, that still doesn't mean it's 'efficient'. A native application could be much smoother still, use less battery, etc.

5. The article is titled 'Web App speed', but it's only (somewhat) relevant in the context of sprite-based games. With WebGL it's possible to do quite complex 3D-based graphics in the browser as well, but anything non-game related is a whole different matter. Surely 'boring' apps with lots of buttons, scroll bars, other widgets etc. will not be easier and more efficient running inside a web browser, compared to using native controls.

Re: Web App Speed

#26

Post by pavlov » Mon, Jun 01, 2015, 11:11 AM UTC

z3t4 wrote: post #24

Reading this article was a fresh breeze. The Canvas is very easy to work with. You can forget about JQuery and everything else concerning the DOM and just write pure JavaScript. I've even started working on a canvas based text editor.

I've even started working on a canvas based text editor.

Careful! Mozilla tried that as far back as early 2009 (the project was called Bespin, you can google for "mozilla bespin canvas" to find out more).

The canvas-based approach was eventually abandoned and the project merged into Ace, a more traditional DOM-based editor.

Re: Web App Speed

#27

Post by pavlov » Mon, Jun 01, 2015, 11:15 AM UTC

Detrus wrote: post #3

Flash sites, apps and games also earned a bad reputation for eating up CPU, loading too long, doing too much and running poorly. And it was mostly due to the culture of the developers. In the Flash vs HTML5 iPhone wars, people argued that if Flash was hated because of the developers who abused it, what's going to stop the same thing happening to HTML5/JS/canvas? It's happening. Usually not on some interactive visuali…

This was posted the other day:

https://news.ycombinator.com/item?id=9599905

It's an animated company logo in HTML5. The standout "feature" is that the page pegs a CPU core at 100%. Turns out that this is because the developer wanted to update the page favicon at 60fps.

In the post, the developer explained this decision:

"I got this idea in my head that it'd be really slick to animate the FavIcon to stay in sync with the logo. I love little moments like that. Others might feel that's frivolous or unneccessary but I disagree - details like that are the little moments that make the difference."

Nothing (short of taking away APIs) will stop developers from coming up with these "little moments" that will burn CPU time and battery to oblivion.

Re: Web App Speed

#28

Post by squeaky-clean » Mon, Jun 01, 2015, 2:05 PM UTC

thekingshorses wrote: post #5

supster wrote: post #2

People are using the canvas now to achieve fast speeds on mobile web. See Flipboard's post on this [1]. The big issue ppl brought up was that using canvas instead of DOM meant losing accessibility. Btw Flipboard released an interesting framework called React-Canvas[2] based on their efforts. 1. http://engineering.flipboard.com/2015/02/mobile-web/ 2. https://github.com/Flipboard/react-canvas

Flipboard assumed DOM is slow. I don't even think they created a prototype to see how slow DOM is. I implemented this in few hours. Works on iOS, Android 4+ and WP - Demo for mobile: http://premii.com/play/flipboard-style-news/ - I am using it in real app here. http://reddit.premii.com/#/r/news/

Your demo works, but I get an average of 10fps on my LG G3 and 20fps on my iPad, with the occasional freeze. The Flipboard demos are incredibly smooth with no lag or hanging at all.

Re: Web App Speed

#29

Post by bla2 » Mon, Jun 01, 2015, 2:30 PM UTC

Sunspider does next to no processing, it's really not a good benchmark for judging computation speed of a device. Arguably, it's not a good benchmark, period. Kraken or Octane are more interesting benchmarks for compute-heavy workloads such as games.

Re: Web App Speed

#30

Post by bla2 » Mon, Jun 01, 2015, 2:32 PM UTC

pavlov wrote: post #26

z3t4 wrote: post #24

Reading this article was a fresh breeze. The Canvas is very easy to work with. You can forget about JQuery and everything else concerning the DOM and just write pure JavaScript. I've even started working on a canvas based text editor.

I've even started working on a canvas based text editor. Careful! Mozilla tried that as far back as early 2009 (the project was called Bespin, you can google for "mozilla bespin canvas" to find out more). The canvas-based approach was eventually abandoned and the project merged into Ace, a more traditional DOM-based editor.

At some point, the text editor in chrome's devtools was based on canvas. I don't know if that's still true, though.