Using progressive frameworks for the smoothest user experience.

When coding web apps without a progressive framework the code will become really cluttered over time (also know within the developer community as spaghetti code). Progressive frameworks provide us with lots of tools so we don’t need to reinvent the wheel a lot of times.

One thing that takes up a lot of time is keeping the data in sync with the UI. This sounds like something simple but every time the data changes we explicitly need to tell the browser to update all the places where that data occurs in the UI. This basically means we need to keep track of where that data is occurring in the UI and update all these sections one by one. If we somehow miss a section the UI ends up showing wrong data or can even show a wrong button to interact with the UI based on the data. The progressive framework Vue.js already handles all these kind of actions so we can focus on the things that really matter for creating a smooth user experience.

Because we work mostly in teams its a must that we can understand each others code. To keep things mostly the same we can set up rules how we should write code, But the frameworks also force us to work in a specific way so everybody has an understanding how a piece of code should work.

Vue.js also let us work in components. A component is a reusable piece of code that encapsulates its own code, UI and styling. We can reuse these components throughout the app. For example, if we have an article page with a comment section, we don’t need to write the logic for each comment shown on the page. We can just reuse the comment component for each comment to handle its own logic.

For data that is used throughout the app and must not be encapsulated inside a component, we can utilise a so-called ‘store’. Here we can declare a global state and don’t need to fetch the same data to multiple components. For example, the logged-in user is fetched ones after login, we can use this data throughout the app. When updating the state inside the store every component which uses that data will also be updated. Therefore it’s very easy to update state in one place which triggers data changes in all components.

All these advantages of progressive frameworks give us the ability to focus us on what really matters, delivering the smoothest user experience.