web3.js execution - server vs browser

Question

I'm a little bit far from web development, so I have one misunderstanding.

As far as a know, node.js code should be run at the server-side, and web3.js is designed to work at the server side (not sure) because it uses directive "require" and connects to local Ethereum node.

But in examples here https://github.com/ethereum/web3.js/tree/master/example, I see javascript integrated into HTML code that should be executed in the browser. Can somebody explain how it works, what interacts with what, which code executed at server-side and which in browser.

Another question from here, if I use Mist it connects to the local node. But if I want to use web3 in the browser (not mist) I have not node for web3.js to interact with. So the question is - how can I use web3 for the browser(not for Mist)?

Answer 1

Web3 is designed to work both server-side and client side. The client side must be a preprocessed JS bundle, because browsers can't handle advanced JavaScript. You can grab a bundle distribution or create one yourself.

Web3 communicates using XMLHTTPRequest when run in a browser. If you do not have your own node to communicate with the situation is grim at the moment. EtherScan.io provides API key based services that also exposes some of Ethereum JSON-RPC bindings. However as far as I know they are not providing native Web3 provider, so you need to call their specific APIs using their client instead of Web3.

Here is an example project of client side Ethereum application that uses Webpack and Babel (ECMAScript 2016) and EtherScan APIs on a web page.

---

There are now alternatives such as installing the Metamask extension on Chrome or implementing Metamascara on your site so that the user doesn't need a local node to interact with the blockchain.

Answer 2

You raise a topic that can be confusing for newcomers to the space.

In summary, Ethereum can be accessed by a browser, or by a server; anything that can speak the protocol. The Mist browser is more tightly integrated as one might expect, but others can work as well if the right requirements are loaded.

To help put this into perspective, it's possible to create fully distributed web app (Dapp) that uses Ethereum Smart Contracts. The Browser will speak directly to the Smart Contracts, usually through the Web3.js API. The browser will, of course, load the API to make this possible and it will need a local node so the API has something to talk to.

In the case of Mist, this is automatic, but other browsers can download it. So, the html would include a <script> to load it. The author might choose to add a little detection so the browser page acts a little differently in the case that Mist is detected or "Other Browser" is detected.

It's also perfectly acceptable for a server to interact with Smart Contracts. As you have seen, nodejs would load it with require("Web3"). In this case, the browsers would (normally) not need a blockchain node or any special library because the server will be getting the on-chain information. Integration with other languages is possible, e.g. python, using a python-ethereum library built for this purpose.

For some real-world examples, etherscan.io (blockchain explorer) uses a server-side integration. The browser doesn't require a library or a node, because the backend server provides information about the chain that it finds on behalf of the user. This is why it "just works".

The Auger beta is distributed. To use it, the browser loads a library and the user is expected to have an Ethereum node running locally, without which the app doesn't work as expected. The easiest/fastest way for a user to meet this requirement is to use Chrome with the MetaMask plug-in that provides a "light client" interface without the need to sync the entire blockchain.

Apologies for the long-winded answer. There are a lot of deployment options and this makes it difficult to provide a summary that's correct in all cases.

You'll find it's important to realize which scenario is being described to put various how-to suggestions into perspective.

Hope it helps.