Downsides of Vanilla JS

• Difficult to structure at scale
  • Some of you already encountered challenges in structuring your code with the City as System project
  • These challenges can be surmounted with vanilla JS, but it just requires being extra thoughtful
  • You can split up code into different files, and have them import shared variables from a central file using modules. This helps, but still isn't reactive.
• Non reactive
  • Event listeners are reactive - but everything else is not (we do not have value listeners)
  • What if we want a certain function to run each time a value changes?
  • For example, let's say we have a game where we are displaying a user's score
    • Once the scores his 1000, I want something to happen
    • In order to do this with vanilla JS, I have to run a function that constantly checks the user’s score for this condition
  • Another example - ‘choose your own adventure’
• Does not automatically provide re-usable components
  • You can re-use CSS, and you can re-use JS. But packaging them both into a single component is not easy.
  • For example, let's say you have a modal (pop-up overlay). Re-using it across pages is not natively supported.

Enter Frontend Frameworks

• Frontend frameworks solve most of the above problems
• Most companies and organizations use frontend frameworks.
  • React, created by Facebook, is the most popular
  • But Vue has a smaller learning curve and most of the same advantages
  • Svelte is the new kid on the block. Created by NYTimes Data Vis team. It's very lightweight, super easy to use, and my favorite of the frameworks.
• You should only use them some of the time
  • These frameworks add some bloat and initial set-up to your application, so you should only use them if you're application is reasonably large, and will have re-usable components
  • Your portfolio is an example of a project that could benefit from a framework, but could also be done without one. It's on the 'borderline'. I would recommend against using one for your portfolio
• You probably won't need a framework at this point in your programming practice, but it's good to know about them b/c it's used widely in industry, and may be useful for your thesis project
• Once you conquer the learning curve w frameworks, you'll be able to build apps much more quickly

Framework Example: Svelte.js

Here’s an example of code in Svelte and Vanilla JS

Svelte: https://svelte.dev/playground/5d09e996829a4ddf959bdcd3c17b34d5?version=5.28.2

Vanilla Approach

Framework approach

The framework approach is much better when you are building a large scale project or application