T2 - Introduction to the design of Presentation Layers PDF

Document Details

IndustriousPoincare586

Uploaded by IndustriousPoincare586

Universidad de Sevilla

Tags

software design react presentation layer

Summary

This document covers introduction to the design of presentation layers in software development. It discusses the structure and organization of software designed around layers e.g. Presentation layer, Business Logic layer and Resource layer. The document uses clear diagrams and example code to illustrate the concepts, and the software development design for this kind of app.

Full Transcript

T2 - Introduction to the design of Presentation Layers Design & Tests 1 In this lesson 22 Contents Previously on DP1… React in a Nutshell – Decomposing our UI into smaller components and modules – View design patterns...

T2 - Introduction to the design of Presentation Layers Design & Tests 1 In this lesson 22 Contents Previously on DP1… React in a Nutshell – Decomposing our UI into smaller components and modules – View design patterns – Component Tree & Lifecycle – State sharing in React: props and contexts – React router – Fetching data and static elements React design patterns 3 Previously on DP1… 4 Our goal is to design applications Organized into different modules Each module should hide details on how it is implemented to others so that changes in the module do not affect others Modules should have a high cohesion (single responsibility) Modules should have a low coupling (should depend on just a few other modules) 5 To help us on this task we (re-)use ARCHITECTURAL DESIGN PATTERNS SOFTWARE STYLES FRAMEWORKS 6 Design is making decisions about our application 7 Decision: We are going to implement a web application INTERNET SITE: spring-pet-clinic.com 8 Decision: We are using a SPA lifecycle 9 Decision: We are going to implement a monolithic single-page application using an external relational database Backend 1. HTTP Request to the page Spring 2. HTML + boot JavaScript + CSS Frontend WEB SERVER Development 5. Data 4. SQL Queries server (only used during development DEV WEB for hot reloading and SERVER 10 other useful features) DATABASE How are we going to organize our web application? 11 Decision: We are going to implement the application using a layered architecture with three layers Responsible for presenting information to and Presentation Layer interacting with the user through the graphical user interface. It processes presentation layer requests, performs calculations and operations (e.g. authentication), and Business Logic layer moves data between presentation and resource layers. Responsible for managing data: flat files, XML, Resource layer databases, web services, etc. 12 This gives us an idea on how to organize our code, but we still need help on how to organize each layer 13 Let’s focus on the presentation layer 14 Problem: How can we organize the presentation layer? Solution: Splitting user interface interaction into three distinct roles Change view Controller Select views. Consult and update data Process user events. Request changes to the model. User events View Model Show interface. Retrieve and modify data Respond to user events. Access external resources. 15 What about the other layers? 16 This is the global view. We will learn about presentation layer in this lesson!. The other layers later. Presentation Layer Spring boot Change view Controller Update/Query data RESTful API User events Business Logic layer (HTTP requests) Spring boot View Model Service Resource layer Entities Entities invokes Entities SQL Queries Repository returns DATABASE 17 React in a nutshell 18 This is the global view. We will learn about presentation layer today!. The other layers later. Presentation Layer Spring boot Change view Controller Update/Query data RESTful API User events Business Logic layer (HTTP requests) Spring boot View Model Service Resource layer Entities Entities invokes Entities SQL Queries Repository returns DATABASE 19 Features all these frameworks provide Decomposition of UI into components and modules Automatically connect application state and visualization Routing mechanism Fetching dynamic and static data Testing facilities 21 Features all these frameworks provide Decomposition of UI into components and modules Automatically connect application state and visualization Routing mechanism Fetching dynamic and static data Testing facilities 22 What is a module Modules split up your code into smaller, reusable pieces ES2015 introduced built-in JavaScript modules. A module is a file containing JavaScript code and makes it easy to expose and hide certain values. ➔ They allow us to implement information hiding promoting low coupling and encapsulation The module design pattern provides a way to have both public and private pieces with the export/import keyword. This protects values from leaking into the global scope or ending up in a naming collision. Any function, variable, or object that is not exported remains encapsulated and is private to that module. ➔ Attempting to access a function or variable that math.js hasn’t been exported from another module will result in an error. app.js // A private function within the module, not exported. // Importing the default (add) and other named export function subtract(a, b) { return a - b;} import add, {PI} from ‘./math.js'; // Default export of a function. console.log(add(2, 3)); // 5 export default function add(a, b) { return a + b;} console.log(PI); // 3.1416 // Named export of a constant. // Trying to use a function that wasn't exported export const PI = 3.1416; console.log(subtract(5, 2)); //Error:subtract undefined! 23 What is a component in a nutshell index.html App.js Hello, Sara Hello, Cahal Hello, Edite 24 To create our application we must learn to decompose our UI and frontend logic into components and modules 25 Decomposition of UI into components and modules 26 Decomposition of UI into components and modules FilterableProductTable SearchBar ProductTable ProductCategoryRow ProductRow 27 Decomposition of UI into components and modules. Do it yourself 28 Decomposition of UI into components and modules 29 Decomposition of UI into components and modules App – Main component of the application o NavBar – Side navigation bar ▪ [ NavButton ]. Displays a navigation button with an associated icon. o UserNotificationArea – Notification area and identification of the current user o MetricsBar – This component displays the main metrics of the game. 4 metrics will be displayed: games played, points achieved, total time, and cards played. ▪ [ MetricWell ] –Provides the value and weekly increment for a particular metric. o GamesEvolutionChart – It shows the trend of evolution in the last 4 months in terms of game played, won, lost and abandoned. o PopularCardsChart – It shows the proportion of the N cards most used. o FrequentCoPlayersTable – Displays the most usual co-players. It shows the name, the date of the last game, the location of the player, the percentage of games played by both in which the user has won and whether the player is a friend or not. 30 Features all these frameworks provide Decomposition of UI into components and modules Automatically connect application state and visualization Routing mechanism Fetching dynamic and static data Testing facilities 31 React is about connecting State and View 32 In our previous example, components were like this HTML + JSX Javascript components 33 But, it is really like this State & Context HTML + JSX Javascript components Hooks & Events 34 The fundamental equation of React 𝑉 = 𝑓(𝑆) 35 Components with State: Declarative UI In React the UI is not modified from code directly in response to user actions. Instead, we describe the UI depending on the state, and then we trigger state changes that cause the re-rendering of the component. 36 React component tree & life-cycle The DOM is a tree structure that browsers use to represent the page Before your components are displayed on screen, they must be rendered by React. Trigger: Render: Commit: 2 reasons for triggering a render: React calls your components After rendering (calling) your to figure out what to display components, React will modify 1 – Initial render on the page on screen. “Rendering” is the DOM. React only changes 2 – Component State update React calling your the DOM nodes if there’s a components. difference between renders 37 Images taken from the React documentation at: https://react.dev/learn React component tree & life-cycle (An example) React passes a snapshot of You tell React to React updates the state value into the update the state (using the state value component. Thus, changes a setX() function in an to state during rendering event handler) will not be taken into https://react.dev/learn/state-as-a-snapshot#rendering-takes-a-snapshot-in-time account for state variables Images taken from the React documentation at: https://react.dev/learn during rendering 38 Using complex objects and arrays as State (treat them as read-only) Although objects in React state are technically mutable, you should treat them as if they were immutable—like numbers, booleans, and strings. Instead of mutating them, you should always replace them with a new whole object. https://react.dev/learn/updating-objects-in-state#copying-objects-with-the-spread-syntax To ease this you can use the spread syntax (based on the … operator): (With arrays is the same, you should treat them as immutable). Thus: avoid (mutates the array) prefer (returns a new array) Adding push, unshift concat, [...arr] spread syntax removing pop, shift, splice filter, slice replacing splice, arr[i] =... assignment map sorting reverse, sort copy the array first 39 https://react.dev/learn/updating-arrays-in-state The magic behind React Browsers use tree structures to model UI. The DOM represents HTML elements. React also uses tree structures to manage and model the UI you make. React makes UI trees from your JSX. Then React DOM updates the browser DOM elements to match that UI tree. The state of the components is tied to the position in the tree or a key, that is to identify which state variables correspond to which component. 40 Images taken from the React documentation at: https://react.dev/learn State is independent for each component 41 Images taken from the React documentation at: https://react.dev/learn Sharing state between components You need to move the state from the individual buttons “upwards” to the closest component containing all of them 42 Images taken from the React documentation at: https://react.dev/learn Sharing state between components 43 Images taken from the React documentation at: https://react.dev/learn Sharing state between components: Lifting state up, passing props down export default function MyApp() { const [count, setCount] = useState(0); function handleClick() { Lifting state up setCount(count + 1); } return( Counters that update together ); } function MyButton({ count, onClick }) { return ( Clicked {count} times ); 45 } from the React documentation at: https://react.dev/learn Images taken Prop drilling What would happen if we need to share the user name? Prop drilling 47 Images taken from the React documentation at: https://react.dev/learn Features all these frameworks provide Decomposition of UI into components and modules Automatically connect application state and visualization Routing mechanism Fetching dynamic and static data Testing facilities 48 Routing mechanism An example: react-router React works by manipulating the DOM and rendering components dynamically in a single page, but users and bots access web pages using deeply nested URLs (e.g.: http://mystore.com/bills/17/details). React router conditionally renders certain components to display depending on the route used in the URL (e.g.: / for home page, /contact for contact details, etc.). In order to setup the app to work with react router everything must be enclosed by , and alternative routes are defined inside Routes as a Route: index.js App.js ReactDOM.render( function App() { return ( , document.getElementById('root’) ) function Home() {

Use Quizgecko on...
Browser
Browser