#Coding Skills Tel Aviv

The internet - Behind the Screen

By Dina Goldshtein דינה גולדשטיין

#Coding_Skills21/6

Google Campus TLV

The Internet Behind the screen

מפתחת מנוסה ומרצה בינלאומית 18:00בוגרת מדעי המחשב באונ' העברית

פתיחת מסלולים במפגש הראשון בתחילת החודש

מסלול טעימותWeb

מסלול Web

מסלול אפליקציות

5 מפגשים 32 מפגשים – 100 שעות 32 מפגשים – 100 שעות

She Codes(TLV): Google - CheckPoint

How does the Internet Work?Dina Goldshtein

@dinagozil blogs.microsoft.co.il/dinazil/

Agenda• Web Application Components

• Local vs. Remote

• Two servers to rule them - Static vs. Dynamic

• Persistent storage

• Internet Infrastructure

• Addresses and DNS

• Routing

Our Territoryhttp://www.wallcoo.net/animal/pussy/html/wallpaper50.html

Website - the Client Side

• HTML files contain the definition of how a webpage looks

• JavaScript files contain the definition of how the webpage interacts with the users

• Browsers display HTML files and all their resources

Local vs. Remote

Client and Server

• Development: double-click HTML files on your computer and open then in a browser

• Production: where are the files??

• Store them at a known location (the server)

• Ask the browser to fetch them (using a URL)

DEMOSimple HTTP Server

http://science-all.com/image.php?pic=/images/cat/cat-08.jpg

Static vs. Dynamic• Sometimes, the contents of a Web page is not known in advance

• Weather forecast

• Navigation

• Search

• A Web applications can have “logic” - something which can’t be calculated or done solely in the browser and cannot be pre-calculated

Server: The Brain• Remember the Web server which got a request for an HTML file and

returned it

• We can write our own server which gets requests and returns other data (not just files)

• Send locations A and B and get fastest route between them

• Send a name of a stock and get current price

DEMOSimple Node Server

http://science-all.com/image.php?pic=/images/cat/cat-08.jpg

Where is the Data?

• Most Web applications need to save data even after the user leaves the Web site

• e-mail (dah!)

• Games (hall of fame?)

• Link shorteners (even though it’s not personal)

Databases• A database is a persistent data storage

• Most Websites use a database to save all the stuff that needs to remain after the user leaves the page

• Many exist: SQLServer, Oracle, MongoDB, Cassandra

• Usually work with multiple programming languages

• Side note: never ever save sensitive data (such as passwords or credit card numbers) in your database

Web Application Anatomy

Sprechen Deutsch?

• Client-side

• HTML

• JavaScript

• CSS

• Server-side - almost anything

• Java

• Python

• JavaScript

Not Under Controlhttp://www.wowwoodys.com/driven-by-whats-inside/cat

A Server has an Address

• Each server in the whole wide world has a unique IP address

• We can assign domain names to an addresses

• Domain Names Servers (DNS) are responsible for coordinating between names and addresses

• More about that in a few slides

It’s a long Journey Home• When a request leaves your browser, it embarks on a journey, a

treasure hunt of sorts

• The first station is our router

• The router sends us to our ISP

• Each station sends us hopping to the server

• Until we reach our final destination

• The the result embarks on its journey back to us

http://dtucker.cs.edinboro.edu/IPRouting.htm

DEMOtraceroute

http://science-all.com/image.php?pic=/images/cat/cat-08.jpg

Domain Name Resolution• Domain name resolution works exactly the same:

• The request is “what is the IP of XYZ?”

• The response is “1.2.3.4”

• We start we a pre-defined DNS (local or ISP)

• The request continues on and on until some ISP knows the answer

• But DNSs are smart: the can cache the answer!

http://computer.howstuffworks.com/dns.htm

Summary• Web Application Components

• Local vs. Remote

• Two servers to rule them - Static vs. Dynamic

• Persistent storage

• Internet Infrastructure

• Addresses and DNS

• Routing

Questions?Thank you!

http://static1.shop033.com/resources/18/160536/picture/EC/85607916.jpg