Web Development and Our Syllabus

A Visualization of What We’re Learning

Full Stack Engineering

Components of The “Stack”

THE CLIENT SIDE

Consuming APIs,

Client Routing

THE INTERNET

HTTP protocol

IP protocol

DNS

CDNs

Networking

THE SERVER SIDE

We mostly rely on existing infrastructure here. Our programs leverage this section, but we have little control over how it behaves.

Request Routing,

Asset Delivery,

Creating APIs,

Databases,
Data Processing

Data Flow One

Simple Old School Web Page

CLIENT

SERVER

1. Browser requests your website.

2. Server responds with HTML.

3. Browser renders HTML. Boom, you’re done.

   Browsing the internet used to be very simple.

Data Flow Two

Add CSS & JS to the HTML

CLIENT

SERVER

1. Browser requests your website.

2. Server responds with HTML.

3. Browser renders HTML, <script> and <link> tags trigger an extra asynchronous requests to the server for each tag.

4. Server responds with the requested “assets”

5. Browser finishes rendering with the new CSS and JS assets. JavaScript files begin running.

Data Flow Three

Add a Database

CLIENT

SERVER

1. Browser requests your website.

2. Server responds with HTML.

4. <script> and <link requests>

5. Server responds with the requested “assets”

6. Browser finishes rendering.

3. Web server makes database request.

Data Flow Four

Add "AJAX"

CLIENT

SERVER

1. Browser requests your website.

2. Server responds with HTML.

4. <script> and <link requests>

5. Server responds with the requested “assets”

6. Browser renders. Javascript begins running, and triggers “AJAX” requests.

3 & 7. Web server makes database request.

8. Web server responds with data for the AJAX request.

Modern "Full Stack"

CLIENT

CONTENT

DELIVERY

NETWORK

BD "Master Instance"

BD

"Slave Instance"

BD

"Slave Instance"

BD

"Slave Instance"

Server Instance

Server Instance

Server Instance

Load Balancer

Universal Skills

Programming Fundamentals

The Command Line

           Gain greater control over your computer, interact with it on a deeper level.

           Understand more accurately what a computer is doing.
 

Programming Languages: Variables, functions, and control flow.

            All of programs share these fundamental concepts, from systems to web.

 

Algorithms, Data Structures, and Computer Science 

            We're standing on the shoulders of giants.

​            "Pre-baked" solutions and what's happening "under the hood"

 

Industrial Programming Best Practices

            Testing, Workflows, Git, and working with large codebases.

 

Made with Slides.com