Webkit.js

http://trevorlinton.github.io/

by ndesaulniers • 12 years ago

205 103 12 years ago

trevorlinton.github.io

ozten3• 12 years ago

FirefoxOS will host Safari / Chrome apps, before iOS will allow a Firefox.

Open FTW.

atonse2• 12 years ago

What exactly are iOS users missing in Safari, in your opinion, that they would get from Firefox? I can see that Chrome has some cool sync features if you're into that sort of thing. But it still uses WebKit. And from what I've observed, people seem happy with the "Chrome" app in the app store, even though it uses a handicapped renderer. (Although in iOS 8, it won't be handicapped anymore, and will be as powerful as native Safari)

(Also WebGL support is new in iOS). Are people really clamoring for the Firefox engine to be supported in iOS?

ndesaulniers7• 12 years ago

Most iOS devs aren't clamoring for alternative browser engine implementations because they're happy with the objective C runtime. Web developers shouldn't be happy with only having one browser implementation available because there's no competition on iOS. Safari on iOS can lag in features and not care because there is no competition on iOS. Chrome on iOS offers nothing in the way of additional html5 APIs and is just a new UI on the same old Webkit (to my knowledge).

For instance, as of about a week ago Safari on iOS just got WebGL support (as you alluded to). How long would we have had WebGL support on iOS if we could ship an alternative browser engine implementation with competitive JIT'ing JavaScript engine (like Firefox's Gecko & SpiderMonkey engines) on iOS since the beginning? Would alternative browser engines with more APIs drive the Safari for iOS team to ship features faster? Bottom line: competition is healthy; developers and thus users win.

zachlipton• 12 years ago

Because competition in the browser market is vital to keep the web platform progressing and to prevent a single party from controlling web standards. Do you remember the dark ages when IE ruled the web and things like HTML5, canvas, webgl, etc... couldn't happen?

ozten3• 12 years ago

Firefox for Android is very popular and highly rated in the Google play store.

The browsers that are in the Apple App store are handicapped by legal limitations, which are not present on other, more open operating systems.

nnnnni4• 12 years ago

The funny thing is that the "RAWR NO SAFARI, ONLY CHROME!" people don't seem to realize that both are WebKit at the core. Sure, some features are in Chrome first, but that's only because Apple is very cautious when releasing the new features to the general public.

freehunter• 12 years ago

The best thing about Android Firefox is the add-ons. Having adblock running on my phone is a pretty nice-to-have feature.

greggman• 12 years ago

Safari in iOS is missing many newer APIs. For example WebRTC is not in Safari but it is in Chrome/Firefox. No idea if it's been added to iOS8. Even WebGL in iOS8 is currently hobbled.

http://codeflow.org/entries/2014/jun/08/some-issues-with-app...

Also it's not a matter of "clamoring". People have no idea what they're missing. Do you think anyone would have been clamoring for Firefox on Windows in the 90s for they had never seen it and were limited to IE?

Maybe I'm showing my bias here but remember the browsers before Chrome and V8 came on the scene and heated up the competition? Well there's no competition on iOS because you can't write your own browser. Heck, I'd certainly like to see ASM.JS on iOS as one example.

PLenz• 12 years ago

Anyway to get this to run in node with the output going to say Cairo? It'd be a fun little project to see if you could build a simple but working browser in nothing but JS.

msvan• 12 years ago

And then, getting the browser running itself in the in-browser browser.

nnnnni4• 12 years ago

Now THAT would be a sandboxed browser.

Also, even though people tend to not like this kind of thing here, it has to be said: Yo dawg...

RussianCow• 12 years ago

Reminds me of Gary Bernhardt's talk "The Birth and Death of JavaScript": https://www.destroyallsoftware.com/talks/the-birth-and-death...

tlinton5• 12 years ago

Yes, there's a software rendering version, it actually uses Cairo. Software rendering just bitblts up (out of a webworker or as a SDL_UpdateRect) callback in javascript as a RGBA array.

Excavator• 12 years ago

Would you count links/lynx running under Linux in an OpenRISC emulator with networking provided by a relay server over WebSockets?

http://s-macke.github.io/jor1k/

LukeB_UK2• 12 years ago

Getting errors on chrome 35.0.1916.153 on Linux Mint.

56 on line 34 in webkit.api.js

Uncaught #<error> on line 15633 in webkit.bin.js

tlinton5• 12 years ago

If you put in any HTML that requires webkit to go out to hte network it crashes since network requests are disabled in the demo.

LukeB_UK2• 12 years ago

This was using the demo code that was already on the page.

dag11• 12 years ago

I thought it was a static rendering, but then I put in a marquee tag and it moved flawlessly across the screen.

Impressive. I can't say I see the practical implementations of this, but I'm sure there's some. But it's impressive nonetheless.

pfraze• 12 years ago

Rendering HTML to WebGL textures would be big, which I think this could do - though probably not as performantly as the browser could. It's currently not possible, partially due to security concerns if I remember right.

ndesaulniers7• 12 years ago

Awesome idea! I've seen tricks where CSS 3D transforms were used to position the entire DOM within a scene rendered in Canvas, but that approach is extremely limited. [0]

Theoretically, now you could render the DOM to a texture instead of to the screen and do some sweet deferred rending.

== Edit ==

Looks like one of Mozilla's Distinguished Engineers blogged about the technique. [1] [2] The creator of emscripten used this technique to render tweets as a texture in the bannabread demo. [3]

[0] https://medium.com/@deathcap1/six-months-of-voxel-js-494be64...

[1] http://robert.ocallahan.org/2011/11/drawing-dom-content-to-c...

[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Canvas/Dra...

[3] http://kripken.github.io/boon/screens/game.html?low,low

tlinton5• 12 years ago

It actually does, turn on chrome's canvas profiler its kicking up bindTextures for everything. On the demo it even says its a hardware accelerated version and requires WebGL.

wildpeaks2• 12 years ago

It renders to Canvas, so it should be already possible; three.js even already conveniently allows creating texture from a canvas:

  var texture = new THREE.Texture(theCanvas);
  texture.needsUpdate = true; //refreshes the texture from the source canvas

Now combine it with React.js to avoid redrawing unless necessary and forward the mouse events back to Webkit.js, and you have an interactive HTML texture :)

bastawhiz• 12 years ago

At some point, it won't matter whether your browser supports a particular feature of the web. Any site could just embed a copy of WebKit for browsers that are too old (i.e.: when the latest version of Firefox is a few dozen versions behind) and render the page using the latest rendering engine.

heydenberk• 12 years ago

It's a little contrived, but a "practical" use of this might be for an online HTML editor to embed the document (or display a preview) without any interference from the parent document.

schrodinger• 12 years ago

You can do that via iframe as well

leorocky• 12 years ago

If you allow custom HTML via an iframe and make it shareable you have to host the iframe from a different domain, otherwise it's XSS vulnerability heaven. The trick will be authentication because separate domains don't share sessions (and you wouldn't want a secured domain access to your session anyway) but you can do communication via postMessage.

copremesis• 12 years ago

straight up broken

elwell• 12 years ago

Can't wait for JS support so I can:

  <html>
    <body>
      <iframe src="http://trevorlinton.github.io/"></iframe>
    </body>
  </html>

bjeanes• 12 years ago

https://help.github.com/articles/setting-up-a-custom-domain-...

ricket• 12 years ago

Erm, look at the URL of the original page...

jstsch2• 12 years ago

Neat. Getting some good use out of HTML2Canvas as well. But always wondering why there is no way to get a bitmap from screen... something like window.getPixels(x, y, width, height).

theallan• 12 years ago

Yes! This would open a huge number of possibilities. Simple things like a colour picker, to transitions based on the content of the window would be made possible. I would love to see this happen.

jevinskie• 12 years ago

There are privacy and security concerns to address. Similar to this situation: https://hacks.mozilla.org/2010/03/privacy-related-changes-co...

nawitus• 12 years ago

One solution is for the browser to provide a "anonymized" bitmap picture, e.g. setting the links to default colors. I don't know how feasible that is. It would require a new rendering of the page, at least.

jstsch2• 12 years ago

Hmm, if I can get all underlying DOM, including CSS, what is the difference except massive convenience? I could imagine iframes of other origins to be blank, but that would be it, I think?

spankalee• 12 years ago

Firefox has had the element() CSS function for a while, but they're the only ones.

https://developer.mozilla.org/en-US/docs/Web/CSS/element

I've written GUI builders that really could have used this for icons of views. Instead I had to render on the server. It'd be nice if it got more broadly adopted.

i_am_ralpht• 12 years ago

In Chrome (for me, on 64bit Linux) it consumes 176MB of RAM -- for all of WebKit + Cairo + FreeType/HarfBuzz/etc -- it's most of an OS right there.

GMail, a webapp email reader, is currently taking 368MB of RAM. Insane!

reubenmorais• 12 years ago

"Web browsers have never been more memory efficient, and web pages have never had more memory bloat." - someone on Twitter a couple days ago

notastartup2• 12 years ago

this is pretty cool but network requests and javascript support would make it even more crazier.

I viewed the html source for this page and pasted it. I was quite impressed. It looks like this is supposed to be a browser engine written in Javascript?

So essentially we would have a sandbox browser within a browser? That would be awesome.

ndesaulniers7• 12 years ago

javascript support would make it even more crazier

There's interesting research being done in the area of meta-circular interpreters. There's techniques for speeding them up; they're not as slow as I'd expect. For example, one interpreter can do type analysis and rewrite chunks of code.

notastartup2• 12 years ago

another interesting question would be will webkit.js support single origin policy? basically, what if you could use webkit.js like an iframe but with the ability to execute javascript and manipulate that window.

userbinator• 12 years ago

this is pretty cool but network requests and javascript support would make it even more crazier.

The first thought that comes to mind would be to try to nest the things... a browser inside a browser inside a browser.

dingdingdang2• 12 years ago

Why? Not being dry/evil, simply just interesting in whether this project has practical offshoot or is pure fun (..)?

bluetidepro• 12 years ago

I was wondering the same thing. Why would anyone ever need to do something like this? What kind of project would this come useful?

gol706• 12 years ago

Doing this in the browser might be a little silly, or at least I can't immediately think of a good use, but I think using this in a node.js program as an easy way to template something out and render an image/pdf locally could be useful.

dingdingdang2• 12 years ago

Of course, that's cool point!

_random_2• 12 years ago

JavaScript is the mainstream

http://en.wikipedia.org/wiki/Brainfuck

so the reasons all the same.

Yoric• 12 years ago

Nice one. Next step is porting $YourFavoriteWebkitBrowser to Firefox OS :)

Rinum• 12 years ago

Very nice and with JS support it would be perfect! I wonder if this is a solution to potential XSS attacks with embeded iframes or embeded user-generated html+css+js.

m1sta_• 12 years ago

I'm quite interested in seeing this evolve, but for your purposes will postMessage not do?

grimtrigger• 12 years ago

Pretty cool. There's been a push to make HTML run everywhere, but this proves you can make X run on HTML.

Maybe someday we'll code apps in Objective-C/Java that run in the browser, all inside a canvas.

wtracy• 12 years ago

We're closer than you think!

https://developer.gnome.org/gtk3/stable/gtk-broadway.html http://www.youtube.com/watch?v=fr8eo4RlPw4

spyder• 12 years ago

And also emscripten-qt: http://vps2.etotheipiplusone.com:30176/redmine/projects/emsc...

emilsedgh• 12 years ago

That would be a sad day. Layers upon layers of complexity, abstraction, technologies, etc.

Please make it easier. More simple.

Everlag• 12 years ago

I'd like you to consider the fact that your operating system is already a significant abstraction and that a browser is essentially a virtual machine that allows to download and run programs from any source safely.

You know all those malware issues regarding unsigned or compromised executables? Not a problem in the wonderful world where programs are incapable of acting overly malicious. There're specs like webgl and webcl that lets you take the scary topic of graphics programming, which is communication to an external piece of hardware, and make that as safe as loading some javascript to sort a table by dollar value.

</rant>

chuable• 12 years ago

Our entire modern day computing experience is built upon 'Layers upon layers of complexity, abstraction, technologies, etc.';Simple and easy doesn't necessarily mean less.

_random_2• 12 years ago

One of the ways of reducing complexity is not having to deal with this:

http://wtfjs.com

http://wtfhtmlcss.com

wildpeaks2• 12 years ago

That reminds me of the hilarious talk "The Birth & Death of Javascript" where everything get converted to asm.js, even operating systems.

https://www.destroyallsoftware.com/talks/the-birth-and-death...

shayief• 12 years ago

Check out this kernel built on V8 engine, designed to run JavaScript code https://github.com/runtimejs/runtime

atomical2• 12 years ago

I've been watching this project hoping that eventually PDFs could be rendered on the client.

qhoc• 12 years ago

You can do that today already using toDataURL() https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasE... to convert canvas to image and then use jsPdf http://parall.ax/products/jspdf to convert that image to pdf

kevingadd• 12 years ago

http://mozilla.github.io/pdf.js/

tlinton5• 12 years ago

Is this a big needed feature? It's actually really easy to pull of, cairo's backend can be switched from using images to svg, to pdf's. It's just switching the backend and once the renderer is done just spit out the results.

Add it as a feature request on github and i'll add it to the api.

atomical2• 12 years ago

Sorry, I meant rendered from javascript templates in the browser.

mantraxC• 12 years ago

I remember when for some reason people started writing SVG and HTML engines for Flash. Because, I don't know. They wanted to put a browser in your browser, so you can browse while you browse.

The engines worked, but where are they now? Nowhere. Just like Flash.

No matter how much effort you put into something, no matter how functional it is, now matter how much geek cred you'll get for it, if it doesn't have some sensible use, at least superficially, it'll linger and die. Wasted effort.

Just because you can do something...

Webkit.js

Related Stories