Front-end Frameworks

Static websites do not change. Their structure and presentation is entirely determined by the HTML and stylesheets. Staticism, which might not be a word, may be fine for reports, but full applications do change as users load or remove content and reconfigure the interface. Dynamic web apps need something more powerful than HTML and CSS: they are powered by JavaScript.

Scripts in a web app have the following jobs:

• They keep the user interface synchronized with the application state. The scripts must track the dependencies that the view has on the model so that as soon as the model changes, the view is updated.
• They update the application state as the user makes changes through the view. Callbacks must be registered on all interactive elements. When a callback invokes an asynchronous operation, care must be taken to ensure that subsequent interactions don't put the app in an inconsistent state.
• They generate new elements on the fly and insert them in the DOM. This gives JavaScript the responsibility of structuring the content, a job you normally designate to HTML. Declaring attributes and situating the new element within the hierarchy is not nearly so natural in JavaScript as it is in HTML.

As an app grows, these jobs become increasingly complex. But do not fear: Silicon Valley has swooped in to make life easier for webdevs everywhere. You have a number of tools at your disposal to ease the burden of creating dynamic web apps. The most popular tools at present are React, Angular, and Vue. All three help you manage dependencies, wire up callbacks, and define reusable page elements. You're not quite sure what their differences are, but people on the web sure do have opinions about which is better. You are above the fray. You flip a coin and settle on React as the first to learn.