How Client-Side Programming Works in JavaScript

client-sidejavascript

I'm not coming from web-development at all, but am looking to build a web application.

So far, I've looked into all the server-side stuff (for example, I think my stack will be Linux + node.js + ExpressJS + MongoDB), and have learnt a lot! At this point, I'm comfortable setting up an HTTP server, routing requests, using RESTfull interaction with a database, and serving dynamic HTML using an HTML template engine like ejs or Jade. I even looked into Websockets as a means for establishing a TCP connection to add fast user interaction without page refreshing.

Now I'm looking to do pretty stuff; add graphs, tabs, ect to my web-applications! I've looked into things like Dojo, JQuery, CanvasJS, AngularJS ect, and all them seem cool. Problem is, now that I think of it, I have no idea how client-side programming works. For example, in AngularJS I may find something like: 

   <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="components.js"></script>
  </head>

What is this saying? Does my server actually replace "components.js" with the actual "componennts.js" code before transmitting the response? What's going on with the https://ajax... source? Does the browser, (or the server?) actually have to go to this url, and retrieve code?

As I said, as far as I'm concerned, the server responds with an HTML document composed of ASCII characters. What then, is actually running on the client side, and how does it get this code? (i.e. on V8 or whatever).

Best Answer

When a client makes a request to your Web Server requesting a resource -for example, the main Page- your server returns that resource. In case that resource is an HTML file, it is possible -and common- that to show your site you also require additional resources -images, CSS stylesheets, JS files- so the Browser can render your page correctly. That assets can be on the same web server that host your application or can be hosted somewhere else.

With this line of code:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

Your HTML file is saying that it requires the file angular.min.js, and that file is locate in the https://ajax.googleapis.com servers. On the other side, this line of code:

 <script src="components.js"></script>

States that your site requires the components.js, and that file is located within your Web Server (for example, in http://www.mysite.com/components.js). So, when a user access to your site his Browser will load some files from your Web Server and some other from external repositories. Every file will be downloaded and stored in the Client's PC to load your site.

Related Topic