Skip to content

Latest commit

Β 

History

History
137 lines (80 loc) Β· 3.7 KB

Pagination.md

File metadata and controls

137 lines (80 loc) Β· 3.7 KB

πŸ“„πŸ” Day 1: Pagination

⏱ Agenda {docsify-ignore}

  1. πŸ† Learning Outcomes
  2. πŸ‘‹ Welcome to Class
  3. πŸ“ Intro Project
    1. Project Overview
  4. Existing Vs New Projects
  5. Pagination
    1. Why do we need pagination?
    2. Question
  6. [10m] 🌴 BREAK {docsify-ignore}
  7. Activity: Technical Debate - Picking a Pagination Module

πŸ† Learning Outcomes

By the end of this lesson, you should be able to...

  • Understand how pagination works, and how to implement it

πŸ‘‹ Welcome to Class

Instructor will walk through the syllabus and answer questions about the course.

Students, remember to join the following:

  1. Course Slack channel, ##bew-2-1-web-patterns!
  2. Gradescope: INSERT LINK HERE

πŸ“ Intro Project

Wait a minute, a project already?!

How Not To React:

fire_spongebob

Instead:

do_it

Project Overview

TODO:

  • Add project description
  • Where code will be written

Existing Vs New Projects

You may be asking, "why are we enhancing an existing project instead of creating a new one?"

teams

  • More common as a junior engineer to be working on an existing project
  • You will have to revamp/add features to an existing project at some point in your career
  • Improve your existing portfolio projects to make them stand out more

Pagination

Why do we need pagination?

Question: What is the fastest way to speed up a query for 1,000,000,000 (1 Billion) records?

The answer (do not click!) Use pagination to only return the first 20 records like .... Google does!

pagination

If you look around almost every website is paginated. Why? Probably because pagination is one of the easiest ways to speed up page loads. If you are loading 1000 records on your index page, that will take 10 seconds to load. Pagination will speed it up by sending only the first 20 records.

Question

What are other benefits to pagination?

  • Improved structure and readability: reduced chance of users getting lost
  • Separate URLs for pages for ease of reference
  • Positive effect on SEO, easier for crawlers to navigate

[10m] 🌴 BREAK {docsify-ignore}

Activity: Technical Debate - Picking a Pagination Module

debate

Throughout your career, you will have many technical debates with your teams. We're going to practice that here:

  1. Compare and contrast these modules, list their pros and cons, and decide which one you would use and why.

  2. Divide into groups where everyone in the group agrees on which package they would use

  3. Now split your group into thirds, one third stay stays, the other two thirds go to another group and try to convince them to use your module.

  4. Could you convince anyone to change? What arguments are the most compelling for people? What arguments were most compelling to you?