frontend-framework-showdown-2020

Frontend Framework Showdown 2020

Build the same Image Search App with Vanilla JS, React.js, Vue.js, Svelte and more!

Frontend Framework Showdown 2020

Build an Image Search App with:

  • Vanilla JS
  • React.js + Hooks
  • Angular 9
  • Vue.js + Composition API
  • Svelte
  • ???? - Some lesser known framework - We will vote!

In Scope

Each app will demonstrate the following concepts:

  • Setup / CLI Tools
  • User Input
  • DOM Events
  • Conditional Rendering
  • API Requests
  • Rendering Lists of Data

Out of Scope

Will revisit these in a future showdown:

  • Pagination
  • Testing
  • Routing
  • Global State Management
  • SCSS / CSS Modules

API

Structure

All apps will use the following HTML:

<h1>Image Search</h1>
<form>
  <label for="searchTerm">Search Term</label>
  <input class="u-full-width" type="text" id="searchTerm" name="searchTerm">
  <button type="submit">Search</button>
</form>
<img id="loadingImage" src="https://i.imgur.com/LVHmLnb.gif">
<section class="images">
<!-- images loaded dynamically here -->
</section>

Styles

All apps will use the skeleton CSS framework:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">

And use these styles:

body {
  width: 80%;
  margin: 2em auto 0 auto;
}

.images {
  column-count: 3;
}

img {
  width: 100%;
}

@media (max-width: 1200px) {
  .images {
    column-count: 2;
  }
}

@media (max-width: 800px) {
  .images {
    column-count: 1;
  }
}

TODO

???? - Some lesser known framework - We will vote!


  • Setup
  • User Input, DOM Events
    • Retrieve the search term from the input when the form is submitted
  • Conditional Rendering
    • Show loading image when form is submitted
  • API Requests
    • Request the images from the API with the given search term
  • Rendering Lists of Data
    • Append the API results to the page
  • Conditional Rendering
    • Hide loading image

Top categories

Loading Svelte Themes