Notes

BROWSER ENGINE
A browser engine is a core software component of every major web browser. The primary job of a browser engine is to transform HTML documents and other resources of a web page into an interactive visual representation on a user's device.
*Without browser engine we would just be reading the code instead of seeing a website.
(img)
this image shows the basic structure of how we are getting the website in our browser.
think this black box as a browser engine and this is the website we are getting.
by this we can understand that browser engine is the main purpose of getting the website from the server.
The browser engine combines structure and style together to draw the web page on the screen.
When a user is supposed to insert a URL in the address space, the browser takes the address to the browser engine where it search the domain name out of the URL and confirms its existence in browser and OS caches. If the domain name is not found in both browser and OS caches, then it requests to the Internet Service Provider (ISP) to extract the IP addres. and it sends back to the browser and the browser request the server.
Hereby, the server retrieve its content and send it to the browser.the data is sent back in a format called HTML which describes the structure of webpage.to convert this html code into browser understandable language
(img)
browser engine contains special pieces of code called parsers.The HTML parser takes the HTML code and parses it.and it makes a dom tree based on the html code.
the in-memory structure of the webpage is called DOM(document object model).It represents a tree of elements of the final webpage that is the properties of the individual elements and which elements are inside other elements.
and for the css it has css parsers.
the browser engine contains a subsystem called a style engine whose job is to take the css and apply it to DOM that was created by the HTML parser.
(img)
Once the browser engine has computed styles,The DOM and the computed styles are fed into a layout engine.
when the layout is complete,now the blueprint of the page has to turn in to the actual webpage we see.
now based on the html,css and the files we have we can see the actual website on the browser.
all this process is being done by browser engine.

DOM(document object model)
DOM is a way to represent the webpage in a structured hierarchical way so that it will become easier for programmers to go through the document.
why we need dom is
HTML is used to structure the web pages and Javascript is used to add behavior to our web pages.
When an HTML file is loaded into the browser, the javascript can not understand the HTML document directly.
So, a corresponding document is created(DOM). DOM is basically the representation of the same HTML document but in a different format with the use of objects.
Javascript interprets DOM easily i.e javascript can not understand the tags(<h1>H</h1>) in HTML document but can understand object h1 in DOM.
Now, Javascript can access each of the objects (h1, p, etc) by using different functions.
(img)
the structure of the dom can be thought of as a tree or forest.
window object is the object of the browser which is always at the top of the hierarchy.
it is like an api that is used to set and access all the properties and methods of the browser.it is automatically created by the browser.
Document object is When an HTML document is loaded into a window, it becomes a document object.
The ‘document’ object has various properties that refer to other objects which allow access to and modification of the content of the web page.
If there is a need to access any element in an HTML page, we always start with accessing the ‘document’ object.
Document object is property of window object.
here we have some objects in the documents like form,link,anchor
and in form we have some other objects like textarea,checkbox....

MVC:
this is the flow of the mvc pattern.
lets take an example of shopping website.here we are adding an item to cart.
model defines what data that the app should contain.if the data is modified then the model
will notify the view or controller to modify the same.

view defines how the app's data should be dispayed.

controller contains the logic that updates the model or view in response to input from the users of the app.
so basically controller mediates between the view and model.

so here we can see this example like
if the user clicks on the add to cart button then the view sends the request to the controller
then the controller interacts with the model to modify the data like adding that item to the cart
after the data in the model gets updated then the view also got updated based on that changes made.

if **we want to just update the view to display the data in a different format, e.g., change the item order to alphabetical, or lowest to highest price.
In this case the controller could handle this directly without needing to update the model.

SPA:
{slide..}
comparision:
here we can see the difference between the traditional page and single page application architecture
In a multi-page application,each web page is getting reloaded every time when it receives the corresponding request.and
in single page application, only the necessary content part will be updated. for example,when a user enters into a page, the server loads the whole page.
Then, the server transmits the requested data in the form of the JSON (JavaScript Object Notation) files. like here we can see that the client is sending the
ajax request and the server is responding with a json data.

{{ajax:with ajax request we can update the parts of a webpage without reloading the whole page.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes.
This means that it is possible to update parts of a web page, without reloading the whole page.}}

What is html?
{slide}
html page structure:
this is the structure of the html page.
inside this head tag the meta information about the document is written such as the title which is displayed in the browsers title bar or tab and also we can
include other meta data like description,keywords for search engines.

META TAG
the meta tag define metadata about an html document.Metadata is the data or information about the webpage.
metadata will not be displayed on the page,but it is machine parsable.
it is used by the browsers i.e., how to display content or reload page,search engines
(examples)
keywords are a <meta> tag option that could be used to give more information to search engines on what a page is about.
description,author gives information about the web page we are creating
charset Specifies the character encoding for the HTML document.
utf-8 is a variable-width character encoding used for electronic communication. it is the World Wide Web's most common character encoding.
The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.
This gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
(img)
js:
scope:

Git:
{slide}
what does git do?
it is used to manage projects with repositories and we can clone a project to work locally and we can control and track the changes with staging and commiting.
and we can work on different parts and versions of a project using merge and branch commands.we can pull and push the latest versions of a project.
working with git:
we need to intialise git on a folder and make is as a repository.and now git creates a hidden folder to keep track of the changes in that folder.
when a file is changed,added or deleted,it is considered as modified and we need to select the modified files that we want to stage and the staged files are committed
which prompts Git to store a permanent snapshot of those files. and atlast we can push those changes into the main code.Git allows us to see the full history of every commit.
We can revert back to any previous commit.Git does not store a separate copy of every file in every commit but keeps track of changes made in each commit.
why git:
why we need to use git because...{slide}
git commands:
here are few git commands which we use mostly
git init:it is used to intialise a git repository
git clone:it is used to clone a repository to work locally
git add:it is used to add the files which are modified
git commit:it is used to commit all the changes that are made and we can give a message to refer in future.
git push
git pull
git merge:it is used to combine two branches
git branch:it is used to create, list, rename, and delete branches.
git checkout:it is used to switch between the branches


ember js workflow:
when we enter the url in the address bar then it loads the app
by going into the router.the router maps the url to the router handler. and the router handler renders the model or template.
template will provides the user interface and the model contains the information and it persists the information to the web server.

let's take an example to explain this clearly.
like we are developing a web application where we can buy the products from the site.then if the user clicks on any link in the app then the url will be changed
and the ember router maps the url to the router handler.
router handler will loads the model and renders a template which has access to that model.
we are developing the app which needs to store product details so we need a product model for that.a model typically persists the information to the web server.
and template will provides the user interface and we can access that model in the template.
components:
this will allow us to break the templates into smaller files and we can reuse them wherever we want by just providing the file name of the component.
and also we can control the user interface by giving the dynamic actions in js file of the component.

ember data:
ember data workflow:
when the first time the application is asking the store for a record, the store looks into that.if it doesn't have a local copy then it will requests it from the adapter.
Ember data provides an ember store which we can inject into the route and we can use this as this.store.it contains all the data for records that are loaded from the server.
and adapter is an object that translates requests from Ember into requests to a server.Adapters deal with how and where the Ember Data should fetch data from the servers, such as whether to use HTTP, HTTPS,or local storage for these requests.
as shown in this figure,the adapter cannot always return the requested record immediately.it will make an asynchronous request to the server,and only when
that request finishes loading,the record be created with its backing data.
Because of this asynchronicity,the store immediately returns a promise. Similarly, any request that the store makes to the adapter also returns promises.
Once the request to the server returns with a JSON payload for the requested record, the adapter resolves the promise and it returned to the store with the JSON.
The store then takes that JSON,and resolves the promise and it returned to the application with the newly-loaded record.
if we request the store for a record which is already present in it's cache.In this case, because the store already knew about the record, it returns a promise and it resolves with the record immediately.
It does not need to ask the adapter and therefore, the server for a copy since it already has it saved locally.