Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
-
Upload
alex-acm-sc-library -
Category
Documents
-
view
217 -
download
0
Transcript of 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
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
2/41
Speaker
8 years of Web & MobileDevelopment
eSpacing since 2005
Open source advocate Rubyist
Command Line freak
AKA modsaid
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
3/41
Outline
The Web Web Development Team
Request Life Cycle
Request Phases
Network
Server
Browser
API
Rich Client Apps
Conclusion
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
4/41
The Web
Accessibility of Information Timely Communication
A way of living
HTML is the Universal Language of the web
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
5/41
The Web
ServerClient(Browser)
Internet(Network)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
6/41
Web Development Team
Graphic Designer Web Designer
Front End Developer
Back End Developer System Engineer
Administrators
Quality Engineer
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
7/41
Why?
AdministrationSystemEngineer
Development
Commonknowledge
Design
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
8/41
Why?
AdministrationSystemEngineer Development
Commonknowledge
Design
Efficiency
Collaboration
Better web
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
9/41
DevOps
DevOps is a software development method that stresses communication, collaborationand integration between software developers and information technology (IT)professionals. Wikipedia
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
10/41
Request Life Cycle
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
11/41
Request Life Cycle (1/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
12/41
Request Life Cycle (2/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
13/41
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
14/41
Request Life Cycle (4/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
15/41
Request Life Cycle (5/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
16/41
Request Life Cycle (6/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
17/41
Request Life Cycle (7/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
18/41
Request Life Cycle (8/8)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
19/41
Request Phases
Requestinitiation
Firewall &DNS lookup
Network Server sideProcessing
Network ResponseRendering
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
20/41
Network
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
21/41
HTTP Basics
HTTP protocol
HTTP message structure
HTTP Verbs
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
22/41
HTTP Protocol
Application level protocol
Text and Media content
Request/Response model
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
23/41
HTTP Message Structure
Code Headers
Body
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
24/41
HTTP Verbs
GET POST
HEAD
PUT DELETE
OPTIONS
TRACE CONNECT
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
25/41
HTTP Status Codes
1xx informational 2xx success
3xx redirection
4xx client errors
5xx server errors
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
26/41
Server
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
27/41
Typical Server Anatomy
Web Server (nginx, apache)
Application Server(Passenger, thin, mod_php, tomcat,..)
DB Server
File system(Static Resources)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
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)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
29/41
Browser (Client)
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
30/41
The Browser
Translates HTML into human friendly format Draws response
Environment for client side code
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
31/41
Browser - Rendering
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
32/41
Browser - Rendering 2
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
33/41
Caching
Reusing previously loaded data Can be applied Everywhere
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
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
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
35/41
Caching (Network)
HTTP Headers
Request
Response
HTTP ClientIntermediary
Request
Response
HTTP Server
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
36/41
Caching (Server)
Cache DB Queries Cache complex data
Cache full pages
Fragment Caching
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
37/41
Caching (Browser)
Cache content as long as possible Cache references to DOM elements
$(input.result).val()
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
38/41
API
Misc Clients Standard format json, xml
Enable mobile apps
Unleash innovation
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
39/41
Rich Client Applications
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
40/41
Open Discussion
-
7/27/2019 Alexandria ACM SC | Web Engineering Series | Episode #1: Web Development
41/41
Thank You
Mahmoud [email protected]
@modsaid