Introduction

Internet Engineering

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 😥

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

Web Development: Homework

Web Development: Industry

Web Development: Google, Facebook, ...

The main goal of the course

Learn and Enjoy Web Development