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

• Syntax 039: Is jQuery Dead?

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets