Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development

7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development

1/41

Overview of the Web StackMahmoud Said


2/41

Speaker

8 years of Web & MobileDevelopment

eSpacing since 2005

Open source advocate Rubyist

Command Line freak

AKA modsaid


3/41

Outline

The Web Web Development Team

Request Life Cycle

Request Phases

Network

Server

Browser

API

Rich Client Apps

Conclusion


4/41

The Web

Accessibility of Information Timely Communication

A way of living

HTML is the Universal Language of the web


5/41

The Web

ServerClient(Browser)

Internet(Network)


6/41

Web Development Team

Graphic Designer Web Designer

Front End Developer

Back End Developer System Engineer

Administrators

Quality Engineer


7/41

Why?

AdministrationSystemEngineer

Development

Commonknowledge

Design


8/41

Why?

AdministrationSystemEngineer Development

Commonknowledge

Design

Efficiency

Collaboration

Better web


9/41

DevOps

DevOps is a software development method that stresses communication, collaborationand integration between software developers and information technology (IT)professionals. Wikipedia


10/41

Request Life Cycle


11/41

Request Life Cycle (1/8)


12/41



13/41


14/41



15/41



16/41



17/41



18/41



19/41

Request Phases

Requestinitiation

Firewall &DNS lookup

Network Server sideProcessing

Network ResponseRendering


20/41

Network


21/41

HTTP Basics

HTTP protocol

HTTP message structure

HTTP Verbs


22/41

HTTP Protocol

Application level protocol

Text and Media content

Request/Response model


23/41

HTTP Message Structure

Code Headers

Body


24/41

HTTP Verbs

GET POST

HEAD

PUT DELETE

OPTIONS

TRACE CONNECT


25/41

HTTP Status Codes

1xx informational 2xx success

3xx redirection

4xx client errors

5xx server errors


26/41

Server


27/41

Typical Server Anatomy

Web Server (nginx, apache)

Application Server(Passenger, thin, mod_php, tomcat,..)

DB Server

File system(Static Resources)


28/41

Server Anatomy (more components)

Web Server (nginx, apache)

Application Server(Passenger, thin, mod_php, tomcat,..)Other ServicesData StoresIndexer, ...

DB ServerProcesses

(background jobs)

File system(Static Resources)


29/41

Browser (Client)


30/41

The Browser

Translates HTML into human friendly format Draws response

Environment for client side code


31/41

Browser - Rendering


32/41

Browser - Rendering 2


33/41

Caching

Reusing previously loaded data Can be applied Everywhere


34/41

Caching

x=10

double_area = area(x) * 2

triple_area = area(x) * 3

cache = area(x)double_area = cache*2

triple_area=cache *3

Recalculation

Cached


35/41

Caching (Network)

HTTP Headers

Request

Response

HTTP ClientIntermediary

Request

Response

HTTP Server


36/41

Caching (Server)

Cache DB Queries Cache complex data

Cache full pages

Fragment Caching


37/41

Caching (Browser)

Cache content as long as possible Cache references to DOM elements

$(input.result).val()


38/41

API

Misc Clients Standard format json, xml

Enable mobile apps

Unleash innovation


39/41

Rich Client Applications


40/41

Open Discussion


41/41

Thank You

Mahmoud [email protected]

@modsaid

Documents

Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development