Introduction

Internet Engineering
Spring 2024
@1995parham

Parham Alvani

1995parham.github.io
1995parham-logo

parham [dot] alvani [at] gmail [dot] com

No instant messaging

Email is awesome

This Course

  • Web: the major Internet technology-in-use
    • What are/were the problems?
    • How do/did we solve them?
      • Which protocols and languages are used
  • Engineer approach
    • Understand existing concepts & technologies
      • In class
    • Try examples & sample projects
      • By youself

The World-Wide Web

  • Original idea (Tim Berners-Lee, 1989)
    • Public information sharing on Internet
    • Hypertext
      • Documents are text which can be displayed/converted to desired output
      • Documents can be linked to each others: Web!
  • WWW: A system of interlinked hypertext
    • Now, much more complex/interesting applications

How Does WWW Work?

  • Client-Server mechanism
  • Web servers: Process client’s requests
    • File (text, image, video, ...) retrieval requests
    • Computation/Processing (DB lookup, transaction, ...) requests
  • Web clients: Send the requests
    • Browser: Interacts with client, Requests for server, Processes and displays response (rendering)
    • Other applications
      • Search engines crawlers
      • Use server as a processing element (distributed computing)
      • ...

What Do We Want to Learn?

  • How does Gmail work?
  • Login (keep me signed in)
  • Show emails
  • Read/Delete emails
  • Refresh the list of emails
  • Interactive menus
  • Per user customizations (themes)
  • ...

10 Engineering Questions

  • Q1) How do web server and client browser talk to each other?
  • Q2) How is a web page organized (components)?
  • Q3) How is presentation of web page described?
  • Q4) How does web page interact with users?
  • Q5) How to update a portion of web page?
  • Q6) How is transferred data between server & client encoded?
  • Q7) How does server process client’s requests?
  • Q8) How are complex/big web applications developed?
  • Q9) How does Gmail offline work?
  • Q10) How can other applications use Gmail?

WWW: From Old to Now

  • Static Web Pages
  • Client requests a document from server
    • A communication protocol: HTTP
  • How to display the document in browser?
    • Document structure definition language: HTML
    • Representation of document: CSS
    • Later, very later, some advance features: HTML5

WWW: From Old to Now

  • Interactive and Dynamic web page
  • Needs to interact with user (e.g., event handling in web pages)
    • A programming language in browser: JavaScript
  • Dynamic data from server (e.g., search result)
    • A programming language in server: Go
  • Interactive & Dynamic web page
    • A communication mechanism between web page and server: JavaScript & JSON

WWW: From Old to Now

  • Complex processing in server side
    • So many common requirements
      • Threading, Concurrency, Security, etc.
    • Needs an application development framework
      • Web Applications Architectures
  • Distributed computing over web
    • Machine-to-Machine communication
      • Function invocation over web
    • Needs a common protocols/API (e.g., Facebook API)
      • Web services
Waiting...

What we are going to learn at classes

  • Introduction
  • HTTP
  • HTML
  • CSS
  • JavaScript
  • JSON
  • Golang
  • Web Applications
  • Virtualization

What we are going to learn at TA's classes

  • Git
  • HTTP Client
  • HTML/CSS
  • JavaScript/React
  • Backend Development
  • Docker

What This Course Is Not

  • XYZ programming language course for web
    • Many technologies for web development
      • HTML, CSS, XML, etc.
      • Many programming languages: PHP, JS, Golang, etc.
    • You are already programmer
      • You know most programming concepts
      • You need to learn new syntax & new features
  • In depth & in detail technology review
    • There are so many technologies

Course Advantages

  • We study and understand technologies that are used in real life every day
    • We don’t discuss about pure scientific problems
  • An engineering course
    • These technologies are used in industry
    • Better resume: HTML, JavaScript, JSON, CSS, Golang, React, ...
    • More job opportunities (more money 🤑)
  • (Usually) Technologies are easier that sciences
    • No difficult concepts
    • High course grade if you want 🤓

Course Possible Disadvantages

  • We study technologies
    • Technologies have limited life time
    • Our knowledge will expire
      • Some programming languages & technologies may not be used 10 years later
    • However, most discussed technologies in this course (hopefully) will have very long life time
  • Web development needs many technologies
    • We need to learn many things

Assumptions on your knowledge & skills

  • Basic networking concepts
    • Protocol, Port, Header, ...
  • Programming
    • Java/C
  • Database
    • SQL
  • Love to program
    • At least, you don’t hate 🙈

Course Policies

  • There is no grading by TAs (AUT University Policy)
  • Course homepage
    • Course slides, Announcements, Grades, etc.
  • Grading
    • Midterm + Final + Assignments

Course Policies: Grading 😥

Minimum requirement
Midterm35%> 40%
Final35%> 40%
Homework30%- Deadlines wont be extended

Course Policies: Grading 😊

    Course Policies (Cont.)

    • If this course is an optional course for you
      • Please don’t take it if
        • Your programming skill is poor
        • You assume that it is passed without doing anything
        • You know the answers of almost the questions
          • But you are so busy to do homework
      • You need to allocate enough time for top grades
    • If this course is mandatory
      • Note that course topics is a bit wide

    Web Development: Lectures

    pekkan pride

    Web Development: Homework

    megan 206

    Web Development: Industry

    benz

    Web Development: Google, Facebook, ...

    airplane

    The main goal of the course

    Learn and Enjoy Web Development

    Fork me on GitHub