Jaberwocky
Twas brillig and the slithy toves did gyre and gimble in the wabe:
click to see more
All mimsy were the borogoves, and the mome raths outgrabe.
```
--
- [learn more HTML](/content/courses/web-design/slides/html)
---
template: front-end
name: front-end-4
## CSS
Used to indicate the style and presentation of a web page.
```css
/* styles for the second paragraph */
#p2 {
display: none; /* hide the second stanza by default */
}
/* styles for the link */
#more {
color: red; /* make the text red */
text-decoration: none; /* remove the default underline from the link */
}
```
--
- [learn more CSS](/content/courses/web-design/slides/css)
---
template: front-end
name: front-end-5
## Javascript
Used to indicate interaative behaviors of a web page (this example uses the popular JQuery library).
```javascript
// when the link is clicked...
$("#more").click(function () {
$("#p2").show() // make the second stanza appear
})
```
--
- [learn more Javascript with JQuery](/content/courses/web-design/slides/jquery-intro)
---
template: front-end
name: front-end-6
## It's up to a client's interpretation
A web browser client receives the HTML, CSS, and Javascript code from the server, and then interprets it.

---
template: front-end
name: front-end-7
## Frameworks
Front-end frameworks attempt to simplify and streamline the process of creating front-end interfaces.
---
template: front-end-7
name: front-end-8
- **[Bootstrap](/content/courses/web-design/slides/bootstrap)** - a framework ,originally by Twitter, with readymade CSS and Javascript code that handles many common interface design needs
---
template: front-end-8
name: front-end-9
- **Material UI** - a competitor to Bootstrap, by Google, specifically design to modularly fit into any project using React
---
template: front-end-9
name: front-end-10
- **[React](/content/courses/agile-development-and-devops/slides/react-intro)** - a framework, by Facebook, that attempts to abstract and streamline the process of generating the HTML, CSS, and Javascript code for a web or mobile app; allows for easy sharing among projects of modular "components" and behaviors
---
template: front-end-10
name: front-end-11
- **AngularJS** - a competitor to React, by Google
---
name: back-end
# Back-End Technologies
---
template: back-end
name: back-end-1
## Overview
Back-end technologies are those languages or programs used to control the behavior of the server and how it responds to various kinds of client requests.
---
template: back-end
name: back-end-2
## Servers control what the client receives
The server can be programmed to modify the HTML, CSS, and Javascript code that is sent to the client in response to the request.

---
template: back-end
name: back-end-3
## Examples
For example, back-end programming on the server-side might allow a web server to...
- Send a Spanish version of a web page to a user whose browser's HTTP request said it prefers Spanish, and an English version of the same page to a browser with English as its language setting.
---
template: back-end-3
name: back-end-4
- Send a mobile version of a web page to a user whose browser's HTTP request said it is running on a mobile device, and a desktop version of the same page to a browser whose HTTP request says it's on a desktop computer.
---
template: back-end-4
name: back-end-5
- Send the client a web page that automatically includes today's news today and tomorrow's news tomorrow, rather than sending the client the same news articles every day.
---
template: back-end-5
name: back-end-6
- Allow a server to "remember" what products each user adds into their shopping cart; and serve all users the same shopping cart page, but with their own cart's products in it, not someone else's.
---
template: back-end
name: back-end-7
## Popular back-end programming languages
Just about any high-level programaming language of note can be used to control how a web server responds to requests.
- **[Node.js](/content/courses/agile-development-and-devops/slides/javascript-intro) (server-side Javascript)**
- **Ruby**
- **Python**
- **PHP**
- **C#**
- **ASP**
---
template: back-end
name: back-end-8
## Frameworks
The choice of frameworks to simplify the process of writing server-side code depends on which server-side programming language is being used.
- Node.js (server-side Javascript) usually use the **[Express](/content/courses/agile-development-and-devops/slides/express)** framework
- Ruby projects usually use the **Rails** framework
- Python projects usually use the **Django** or **[Flask](/content/courses/software-engineering/slides/flask-pymongo)** frameworks
- PHP projects often use **Laravel** or **Sympfony** frameworks
- C# projects usually use the **.NET** framework
- ASP projects usually use the **.NET** framework
---
name: databases
# Databases
---
template: databases
name: databases-1
## Overview
A database is any technology used to store data
- fast storage and retrieval
- easy integration with back-end technologies and programming languages
---
template: databases
name: databases-2
The server-side code usually communicates with the database to save new data sent from the client, or to retrieve existing data and use it to determine how to respond.

---
template: databases
name: databases-3
## Popular back-end databases for web sites and apps
Relational databases based on the [SQL](/content/courses/database-design/slides/sqlite-intro) language have traditionally dominated since the 1970's.
- Oracle
- MS SQL
- PostgreSQL
- MySQL
- Amazon Aurora
- ... and more
---
template: databases
name: databases-4
## Popular back-end databases for web sites and apps
However NoSQL databases are now surging, due to the changing expectations of web and mobile app developers and those using cloud-based infrastructure.
- [MongoDB](/content/courses/database-design/slides/mongodb-setup)
- Redis
- Google Firebase
- Amazon DynamoDB
- ... and more
---
template: databases
name: databases-5
## Serverless databases
A growing market is the "serverless database", where the server provides the initial front-end code to the client, but further data is sent/received by front-end Javascript directly to/from the database.

---
template: databases
name: databases-6
## Front-end data storage for web apps
There are some limited data storage capabilities of web browsers, where data used by a web site is stored locally on the client machine.
- **Cookies** - often used to store tracking codes that are secretly passed to the server in an HTTP header with every request
- **LocalStorage** - often used to store larger block of data, such as web pagee content that can be displayed even when browser is offline
---
name: microservices
# Monolithic vs microservices architectures
---
template: microservices
name: microservices-1
## Monolithic architecture
What we have been discussing until now is termed a **monolithic** architecture
---
template: microservices-1
name: microservices-2
- One server directly handles all back-end tasks
---
template: microservices-2
name: microservices-3
- The "traditional" architecture for web and mobile apps
---
template: microservices-3
name: microservices-4
- Over time, the codebase tends to grow _larger_, _more complex_ and _tangled_ and becomes difficult to maintain
---
template: microservices
name: microservices-5
## Microservices architecture
A growing trend for scalable apps is the **microservices architecture**.

---
template: microservices
name: microservices-6
## Microservices architecture
- Multiple single-purpose servers each handle a single discrete duty of the back-end.
---
template: microservices-6
name: microservices-7
- Each microservice has its own codebase maintained independently of the others.
---
template: microservices-7
name: microservices-8
- There is no need for all microservices to use the same technology stack... not stuck with legacy codebase.
---
template: microservices-8
name: microservices-9
- A "gateway API" server coordinates the calls to the microservices and provides a unified API to the client.
---
name: conclusions
# Conclusions
--
You now have some understanding of HTTP requests and responses and how various front- and back-end technologies are used.
--
- Thank you. Bye