Section 36: Frontend JavaScript UI Frameworks - Building More Powerful User Interfaces

The goals

💪🏻What & Why?

✌🏻Introducing Vue, React & Angluar

👍🏻Diving Into Vue.js

 

Why Frontend UI Frameworks?

Building complex frontend (JS-driven) interfaces can become very difficult, error-prone and cumbersome

-Select and store all DOM elements

-Attach event listeners

-Store data (state)

-Update the DOM

 

Problem: We write impeerative code

Imperative: Step by step, instruction after instruction

 

Modern Frontend JS UI Frameworks Solve This Problem

Declaritive approach

-> Define your desired UI state(s), the required data and how / when it should change

-> The framework handles the nitty-gritty details

 

 

Vue.js

Vue.js is a third-party package, that exposes certain "features" (e.g. variables / objects and methods) to us - so that we can use them in our code

 

Data binding = string interpolation

Some (automatically escaped) text is being output in this place by Vue. It's comparable to "<%= ...%>" with EJS, but unlike EJS, it happens in the browser - not on the server-side!