Skip to content

slides.md

Latest commit

 

History

History
408 lines (293 loc) · 9.34 KB

slides.md

File metadata and controls

408 lines (293 loc) · 9.34 KB
theme seriph
title Intro To Fullstack | Abhinav
info ## Intro To Fullstack | Abhinav Prepared for AKCSSC 2024 - GECK December 14, 2024
class text-center
drawings
persist
mdc true

Intro to Fullstack

For AKCSSC'24
GECK, Dec 14 2024

About Me


Product Dev @ Envestnet

Java

Fullstack Javascript (mainly) & others

transition: slide-up level: 2

What To Expect


Fundamentals of Fullstack Web

Writing responsible code

Getting Industry Ready

How to Follow Along


Slides + Code

Ask Questions Anytime

Notes?

transition: slide-up layout: statement

The Journey of a Web Request


☝ User initiates action

🛫 Request travels through network

⚙ Servers process the request

🛬 Data transforms and travels

👀 User sees the result

clicks: 2

clicks: 3

clicks: 1

layout: center

Requests, Responses

APIs- Application Programming Interfaces

What data can be requested or sent

How to make these requests (protocols)

RESTful APIs

REST (Representational State Transfer)

  • Architecture style for building APIs.
  • Over http/https
  • Key principles:
    1. Client-Server: Separation of client and server concerns.
    2. Stateless: Each request contains all necessary information.
    3. Cacheable: Responses must define cacheability.
    4. Uniform Interface: Standardized operations.
    5. Layered System: Modularity for scalability.

HTTP Methods in REST
GET Retrieve data
POST Submit data to create
PUT Update existing data
DELETE Remove data
PATCH Partially update existing data

layout: center

DATABASES

Types of Databases:

  • Relational Databases: Structured, uses tables (e.g., MySQL, PostgreSQL).
  • NoSQL Databases: Flexible schema, often for unstructured data (e.g., MongoDB, Firebase).
  • Modern databases, like vector db's, graph db's and more.

Relational Databases and SQL

SQL (Structured Query Language)


  • Standard language for interacting with relational databases.
  • Common SQL operations:
    • SELECT: Retrieve data from a table.
    • INSERT: Add new data to a table.
    • UPDATE: Modify existing data.
    • DELETE: Remove data from a table.
  • Relational concepts:
    • Primary Keys: Unique identifier for records.
    • Foreign Keys: Links between tables.

Example SQL Queries



INSERT INTO users (name,age,country)
VALUES ("Abhinav","24","India");

SELECT name, age 
FROM users 
WHERE age > 18;


  • Insert a new entry(row) into table.
  • Retrieves names and ages of users older than 18.

layout: center

FRONTEND

The Only Thing That Actually Matters :)


  • HTML: structure, format, and content of a page.
  • CSS: layout and appearance.
  • Javascript: interactivity and functionality.
  • WebAssembly??? : run multiple languages in browser

layout: center

Frameworks have taken over frontend

React, Vue, Svelte, Solid and many more...
No Basics, No Use

Lets Build!

Server first

- A programming language with basic networking capabilities (Almost all)
- Create a server, and listen(open) a port
- Serve endpoints (eg : / should serve 'hello', /account should serve 'hi')
- Proper error handling (responsible 🙂)

Build a better server?

- Write API's for frontend to call from
- Database?

Frontend

- Use HTML, CSS and JS (no frameworks!)
- Create a form
- Send request to server, HANDLE FRONTEND ERRORS!
- Display the results

layout: center

Hands On!

visit github.com/codespaces