The Front-End Fresh Workshop

🔗 https://frontendfreshworkshop.com

👋🏾

The Agenda!

Sept 25th
Front-End Engineering in 2024 & Mastering React

Oct 2nd
Building Large Scale Web Apps

Oct 9th
Building a Personal Brand & Breaking Into FAANG

Oct 16th
Leveling Up From Junior To Senior To Staff

Sessions will happen 7:30PM — 9:00 PM (Wednesdays)

Q&A
(Dedicated Q/A periods)

Recordings
(Will be shared on Slack)

Exercises
(to work on between sessions)

You can reach out to me anytime on Slack through-out the 4 weeks!

Happy to answer questions/help where I can async.

Who's part of the cohort?

Designers/Creative Directors

Backend Engineers

Fullstack Engineers

Junior Frontend Engineers

Senior Frontend Engineers/Team Leads

I want to make this workshop as helpful to everyone as much as possible.

Introductions!

Houtan

Borys

today's folks

Navyatha

Menna

Anthony

Bilal

Q/A!

Any questions?

Today's Agenda!

Front-End Engineering in 2024 & Mastering React

- JavaScript

- React

- Common and important concepts in React

- Data Fetching

- React + TypeScript

- Frameworks (Vite, Remix, Next.js)

- React 19, RSCs, and new APIs

- Front-End Engineering in 2024

Front-End Engineering in 2024

State of JavaScript 2023

Front-End Engineering in 2024

State of JavaScript 2023

Front-End Engineering in 2024

State of JavaScript 2023

Front-End Engineering in 2024

- Mobile Responsiveness

- Accessibility

- User Experience (UX) & Interaction Design

- Performance Optimization

- Web Security

- API Integration

many different focus areas

- Infra/build-tooling

Front-End Engineering in 2024

- Front-End Engineer

- Product Engineer

- Design Engineer

- UI/UX Engineer

- Web Developer

- Creative Developer

JavaScript

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <input type="submit" value="Submit" />
</form>

HTML

form {
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #f9f9f9;
}

label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

/* ... */

CSS

JavaScript

JavaScript is often used for one of two things — Interactivity & Dynamically updating content.

This could involve changing elements on the page in response to user actions, such as form submissions, button clicks, or real-time data fetching (e.g., updating live scores or news feeds).

JavaScript

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <input type="submit" value="Submit" />
</form>

let form = document.querySelector('form');
let nameInput = form.querySelector('#name');
let emailInput = form.querySelector('#email');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  let name = nameInput.value;
  let email = emailInput.value;
  console.log(`Name: ${name}, Email: ${email}`);
});

JavaScript

function Form() {
  // creating state object
  const [formData, setFormData] = React.useState(
    { name: "", email: "" }
  );

  // handle change in our form inputs
  function handleChange(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

  // handle form submit
  function handleSubmit(e) {
    e.preventDefault();
    console.log(formData);
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" onChange={handleChange} value={formData.name} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" onChange={handleChange} value={formData.email} />
      <input type="submit" value="Submit" />
    </form>
  );
}

React

Declarative Programming

React

TypeScript

Lodash

Vite

Redux

Tailwind

HTML

CSS

JavaScript

compiled

React

With standard JavaScript and HTML, we used query selectors and event listeners to add interactivity to our form.

With React, we achieve this by building our JavaScript logic into our component since components allow us to couple HTML and JavaScript together. In other words, we use a more declarative approach to building out the user interface (UI)!

React

- State

- Components

- Props

- Lifecycle

- Hooks

- Component re-rendering

- Frameworks (Vite, Remix, Next.js)

- React 19, RSCs, and new APIs

- Data Fetching

- React + TypeScript

State

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

State

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

Components

import { useState } from 'react';

function CounterButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

export default function App() {
  return (
    <div>
      <CounterButton />
    </div>
  );
}

Props

import { useState } from 'react';

function CounterButton({ count, setCount }) {
  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <CounterButton 
    	count={count} 
		setCount={setCount} 
	  />
    </div>
  );
}

Props

Any time state or props change in a component, React re-renders the component. This re-rendering is triggered so that the component can display the most up-to-date data in the UI.

React uses an internal algorithm called reconciliation to efficiently update only the parts of the DOM that have changed, rather than re-rendering the entire UI.

Props

Lifecycle

In React, a component's lifecycle refers to the series of stages it goes through from creation (mounting), updating (when state or props change), to removal (unmounting) from the DOM.

The useEffect hook allows you to run side effects at specific stages of this lifecycle, such as after the component mounts, updates, or unmounts

Lifecycle

import { useState, useEffect } from 'react';

function CounterButton() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component mounted');
    return () => console.log('Component unmounted');
  }, []);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

  useEffect(() => {
    console.log('Component mounted');
    return () => console.log('Component unmounted');
  }, []);

Lifecycle

import React, { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run for every component render");
  });

  return (
    // ...
  );
}

Run effect on every render

Lifecycle

import React, { useEffect } from "react";

export const FunctionComponent = () => {
  useEffect(() => {
    console.log("run only for first render");
  }, []);

  return (
    // ...
  );
}

Run Effect Only on First Render (i.e., on mount)

Lifecycle

import React, { useState, useEffect } from "react";

export const FunctionComponent = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(
      `run for first component render 
       and re-run when 'count' changes`
    );
  }, [count]);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click to increment count and trigger effect
    </button>
  );
};

Run Effect on First Render and Rerun When Dependency Changes

Other Concepts

State → useReducer

Props → Context

Components → Server-Side Rendering (SSR) & SSG

State → Redux

State + Effect → Custom Hooks

Components → React.lazy / Suspense

Data Fetching

Data Fetching

HTTP Requests (REST APIs)

GraphQL

WebSockets

Server-Sent Events (SSE)

Realtime Database / Firestore (e.g. Firebase)

gRPC

Data Fetching

HTTP Requests (REST APIs)

GET

POST

PUT

DELETE

Data Fetching

HTTP Requests (REST APIs)

Data Fetching

HTTP Requests (REST APIs)

Data Fetching

import { useEffect } from "react";

const App = () => {
  // ...
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(
          "https://api.example.com/data",
        );
        if (!response.ok) {
          throw new Error(
            "Network response was not ok",
          );
        }
        const data = await response.json();
        console.log(data);
      } catch (error) {
        console.error(
          "There was a problem:",
          error.message,
        );
      }
    }

    fetchData();
  }, []);
  // ...
};

fetch API

Data Fetching

import { useEffect } from "react";
import axios from "axios";

const App = () => {
  // ...
  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(
          "https://api.example.com/data",
        );
        console.log(response.data);
      } catch (error) {
        console.error(
          "There was a problem:",
          error.message,
        );
      }
    }

    fetchData();
  }, []);
  // ...
};

axios

Data Fetching

import { useEffect, useState } from "react";
import axios from "axios";

const App = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      setError(null);
      try {
        const response = await axios.get("https://api.example.com/data");
        setData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h1>Fetched Data:</h1>
      <pre>{data.information}</pre>
    </div>
  );
};

Initial State

Fetch data and set state properties

render template based on state

axios

Data Fetching

axios

Data Fetching

axios

This encompasses a very large part of web/UI development

- Make API requests

- Show loading/error indicator states

- Show data when available

Data Fetching

More sophisticated data-fetching libraries

TanStack (React) Query

SWR

Apollo Client

Data Fetching

More sophisticated data-fetching libraries

Libraries that provide Hooks, caching, synchronization, etc., to make data-fetching easier for larger web applications.

Data Fetching

TanStack (React) Query

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const fetchTodoList = async () => {
  const response = await axios.get(
    "https://jsonplaceholder.typicode.com/todos",
  );
  return response.data;
};

export function App() {
  const { data, isLoading, isError } = useQuery(
    {
      queryKey: ["todos"],
      queryFn: fetchTodoList,
    },
  );
  // ... further code to display/utilize the data
}

Data Fetching

TanStack (React) Query

export function App() {
  const { data, isLoading, isError } = useQuery(
    {
      queryKey: ["todos"],
      queryFn: fetchTodoList,
    },
  );

  if (isLoading) {
    return <p>Request is loading!</p>;
  }
 
  if (isError) {
    return <p>Request has failed :(!</p>;
  }

  return (
    <div>
      <h1>Todos List</h1>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.title}</li>
        ))}
      </ul>
    </div>
  );
}

Fetch data

render template based on state

Data Fetching

TanStack (React) Query

const {
  data,
  dataUpdatedAt,
  error,
  errorUpdatedAt,
  failureCount,
  failureReason,
  fetchStatus,
  isError,
  isFetched,
  isFetchedAfterMount,
  isFetching,
  isInitialLoading,
  isLoading,
  isLoadingError,
  isPaused,
  isPending,
  isPlaceholderData,
  isRefetchError,
  isRefetching,
  isStale,
  isSuccess,
  refetch,
  status,
} = useQuery(
  {
    // options
  },
  queryClient,
);

const {
  // ... returnsd
} = useQuery(
  {
    queryKey,
    queryFn,
    gcTime,
    enabled,
    networkMode,
    initialData,
    initialDataUpdatedAt,
    meta,
    notifyOnChangeProps,
    placeholderData,
    queryKeyHashFn,
    refetchInterval,
    refetchIntervalInBackground,
    refetchOnMount,
    refetchOnReconnect,
    refetchOnWindowFocus,
    retry,
    retryOnMount,
    retryDelay,
    select,
    staleTime,
    structuralSharing,
    throwOnError,
  },
  queryClient,
)

Data Fetching

TanStack (React) Query

Caching

Data Fetching

TanStack (React) Query

Caching

Data Fetching

TanStack (React) Query

Caching

Data Fetching

TanStack (React) Query

Developer Tools

Data Fetching

TanStack (React) Query

- Design your data model well

- Optimize your endpoints

- Batch requests where applicable

- Prioritize and defer

- Use lazy-loading

- Leverage caching

- Evaluate the use of GraphQL

- Monitor/analyze performance

[Backend]

Data Fetching

Q/A + 10 min Break!

Any questions?

React + TypeScript

let variable = 5
// ...
variable = "5"

React + TypeScript

let variable: number = 5

variable = "5"

Type 'string' is not assignable to type 'number'

React + TypeScript

- Better Developer Experience

- Easier Maintenance

- Better Collaboration

React + TypeScript

Typed Props

React Hooks

Type Inference

Declaration Files

Autogen API types

React + TypeScript

Typed Props

interface Props {
  name: string;
  age: number; 
}

const Person = ({ name, age }: Props) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>    
    </div>
  )
}

<Person name={false} age={[30]} />

Type 'boolean' is not assignable to type 'string'

Type 'number[]' is not assignable to type 'number'

React + TypeScript

React Hooks

const [name, setName] = useState<string>("Hassan")

(newValue: string) => void

string

React + TypeScript

React Hooks

type Theme = 'light' | 'dark'
const ThemeContext = createContext<Theme>('light')

const ThemedComponent = () => {
  const theme = useContext(ThemeContext)
}

'light' | 'dark'

React + TypeScript

React Hooks

interface UseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
}

function useFetch<T>(url: string): UseFetchResult<T> {
  // ...
  // ...
  
  return { data, loading, error }
}

React + TypeScript

React Hooks

type Data = { id: string, name: string }

const App = () => {
  const { data, loading, error } = useFetch<Data>("https://example.com")
  // ... 
}

Data | null

boolean

string | null

React + TypeScript

Type Inference

const [name, setName] = useState<string>("Hassan")

(newValue: string) => void

string

React + TypeScript

Type Inference

const [name, setName] = useState("Hassan")

(newValue: string) => void

string

React + TypeScript

Type Inference

const [name, setName] = useState<string | null>("Hassan")

React + TypeScript

Declaration Files

yarn add <package_name>

React + TypeScript

Declaration Files

yarn add lodash

React + TypeScript

Declaration Files

import { uniq } from 'lodash'

const App = () => {
  const uniqueArr = uniq([2, 1, 2]);

  return (
   //...
  );
}

Cannot find module 'lodash' or its corresponding type declarations.

const uniqueArr: any

React + TypeScript

Declaration Files

declare module 'lodash' {
  export function chunk<T>(array: T[], size?: number): T[][];
  export function flatten<T>(array: T[][]): T[];
  export function uniq<T>(array: T[]): T[];
  // ...
}

lodash.d.ts

React + TypeScript

Declaration Files

React + TypeScript

Declaration Files

yarn add -D @types/lodash

React + TypeScript

Declaration Files

import { uniq } from 'lodash'

const App = () => {
  const uniqueArr = uniq([2, 1, 2]);

  return (
   //...
  );
}

const uniqueArr: number[]

React + TypeScript

Declaration Files

declare module 'lodash' {
  export function chunk<T>(array: T[], size?: number): T[][];
  export function flatten<T>(array: T[][]): T[];
  export function uniq<T>(array: T[]): T[];
  // ...
}

lodash.d.ts

React + TypeScript

Declaration Files

{
  // ...
  "include": [
      "./path/to/declarations/*.d.ts",
      // other paths
  ],
  // ...
}

tsconfig.json

React + TypeScript