ALTERNATE UNIVERSE DEV

Syntax - Tasty Web Development Treats

Hasty Treat - Why Use a Frontend Framework at All?

In this Hasty Treat, Scott and Wes talk about frontend frameworks — what they are, when you need one, how to organize your code for maximum efficiency, and more!

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

3:08 - What is a frontend framework?

  • JavaScript based
    • Controls applications such as:
      • Routing
      • Rendering
      • Data Fetching
    • Examples:
      • React
      • Angular
      • VueJS
      • Ember
      • Backbone
      • Svelte

5:54 - When to use a frontend framework

  • The Link between your JavaScript data and the DOM (your HTML) isn’t live
  • The use of frameworks makes re-updating the DOM (after the initial variable update) easy
  • You need an opinionated way to handle complexity
    • Example:
      • You add an item to a shopping cart, send the event to the backend, and update both the number of items in the cart and the “Add to cart” button
      • Event Handlers - binding and un-binding
  • Your client wants a fast, modern experience
  • Seamless routing and page transitions
  • Fast prototyping
  • Access to battle-tested libraries
    • Security
    • Perf

14:24 - When not to use a frontend framework

  • When using CMS like WordPress and Drupal
  • A medium amount of JavaScript is needed - Vanilla JS will work fine
    • Modals
    • Slideshows
    • Form submits
  • Static pages, no JS functionality
  • Updating an existing project

17:20 - Why can’t I just use jQuery?

  • Vanilla JS contains all of jQuery’s available DOM APIs
  • Frameworks provide structure
  • Organizes code for big projects
Links Tweet us your tasty treats!

Episode source