TECH4200 Website Development Case Study 1 Sample

TECH4200 Website Development Case Study 1

Assignment Details

This assessment is to be completed individually. In this assessment, you will develop a written assessment in the form of a report to evaluate the client-server architecture of websites and its relationship with browser behaviour.

Students must conduct research externally and included references in order to produce a well referenced assessment. You should use at least ten (10) sources of information and reference these in accordance with the Kaplan Harvard Referencing Style. These may include websites, social media sites, industry reports, census data, journal articles, and newspaper articles. These references should be presented as in-text citations and a referencing list at the end of your assessment (not included in the word limit). Wikipedia and other ‘popular’ sites are not to be used.

1. You must submit your report in Word document or in PDF format.

2. The report should be well-structured and organised. It should include an introduction, body, and conclusion.

3. Your report should include the following:

a) Introduction: Provide a concise overview of the client-server architecture, its significance, and its influence on web development and browser behaviour.

b) Client-Side Components: Conduct a comprehensive evaluation of the key components involved in the client-side of the architecture, such as the web browser, HTML, CSS, and JavaScript. Assess their functionalities, limitations, and impact on browser behaviour.

c) Server-Side Components: Conduct a comprehensive evaluation of the key components involved in the server-side of the architecture, such as the web server, application server, and database. Assess their functionalities, performance, scalability, and security aspects.

d) Communication and Data Exchange: Evaluate the communication protocols used in client- server interactions, such as HTTP, and critically analyse their strengths and weaknesses. Assess the efficiency and security of data exchange methods, including request/response handling and data formats (e.g., JSON, XML).

e) Impact on Browser Behaviour: Conduct a critical analysis of how the client-server architecture influences various aspects of browser behaviour, including rendering, page loading, caching, and handling user interactions. Identify limitations and propose potential improvements or alternative approaches.

f) Emerging Trends and Future Directions: Discuss emerging trends and advancements in the client-server architecture and their potential impact on browser behaviour. Evaluate their potential benefits, challenges, and implications for web development.

g) Conclusion: Summarise the key findings and insights from the report, highlighting the critical evaluation of the client-server architecture and its relationship with browser behaviour.

4. The report should be properly referenced using appropriate academic sources.

5. Provide examples and illustrations to support your analysis.

6. Use clear and concise language to communicate your ideas effectively.

Solution

Introduction

It is a rudimentary model for modern computing which consists of the interaction between two main entities which are the client and the server. In this scenario, the client sends a request to get some data and the server established on the other side responds according to the request and provides the asked data or even service. Now, such an interaction between these two entities is possible only with the presence of the internet and with the help of standardized protocols for example HTTP, TCP/IP and FTP. It also assists many other modern technologies like web applications, email systems as well as cloud computing. To be more specific, the significance of this architecture is rooted in the ability to support distributed computing. It allows multiple clients to access shared resources concurrently. The process is like this, clients initiate a request/requests to the dedicated server for some specific task like retrieving data executing some work, or processing the transaction. The server, on the other end, processes all these requests and returns the result accordingly. However, in this case, the servers can be centralized and robust systems whereas the clients can be any web browser, mobile application, or desktop software (Himeur et al., 2022).

Client-Side Components

Now, there are various components on both the server side and the client side. In the case of the client-side components, the main parts include web browsers, HTML, CSS, and JavaScript. The responsibility of this site is to communicate with the user and showcase the content in a user-friendly manner. Also, one thing to note is that this particular side usually runs on the user device with the help of different components that operate together to provide a seamless user experience. Below is a detailed discussion about some of the key components of the client side Web browser -

It can be considered as the initial interface through which the users can access as well as interact with websites that are hosted on servers. For instance, some popular browsers like Chrome, Firefox, Safari, and Edge render the content received from the servers MBA assignment expert After that, it offers a user-friendly through which the user can navigate and interact with ease.

Functionalities

• Sends HTTP/HTTPS requests to fetch and display the content of the web

• For that purpose, it has to interpret the HTML, CSS, and JS files to render the webpages.

• Additionally, it allows plugins, extensions, and APIs to provide enhanced functionality (Martín et al., 2021).

Figure 1: HTTP vs HTTPS
(Source: Martín et al., 2021)

Limitations

• Some browsers cannot interpret the code the same way.

• Even the performance is based on the hardware and network speed of the device.

HyperText Markup Language –

It is known as the backbone of the webpages which defines the structure and the content by using various elements. These are like building blocks of the page.

Functionalities

• It works as the base for embedding forms, and links as well as supports multimedia elements such as videos and images.

• Moreover, it provides the semantic structure for the content of the page.

Limitation

• It has no styling ability so the developer needs to take the help of other resources like CSS (Acharya, 2024).

• Not only that, HTML is static by itself. So it has to rely on JavaScript to become dynamic.

Cascading Style Sheets

The developers use CSS purely to style and format the HTML structure. It helps to improve the appearance of a webpage and allows the developer to add colors, layouts, fonts as well as animations.

Figure 2 CSS and HTML
(Source: Author)

Functionalities

• Enables responsive designs, including animations and transitions for the experience of the user.

• The developer can use external style sheets to get various themes.

Limitations

• some specific properties depend on the browser and it can often become difficult for larger projects (Ajayi et al., 2022).

JavaScript

It is one of the strong scripting languages through which the developers can add interactivity and dynamic content to the pages.

Functionalities

• It reduces the server load by providing the facility client-side validation.

• It works with API so one can fetch the data without even reloading the page again.

Limitation

• The browser compatibility is a severe issue for JS till now.

Server-Side Components

This part is the backbone of the architecture and the task is to process the requests, deal with the data, and provide responses to the clients. Several components like server, application server, and database work together to maintain functionality, scalability, and security.

Web server

It is tasked to manage the incoming client request and delivering the asked web content after processing the requests.

Functionalities

• It manages the HTTP/HTTPS protocols along with serving the static files.

• It also looks after load balancing and directs the traffic to the application server.

• It can effectively perform even under low traffic.

• The developers can scale it vertically as well as horizontally.

• Utilizes SSL/TLS encryption to provide secure data transmission (Boiano et al., 2024).

Limitations

• Often prone to DDoS attacks and that is why it needs firewalls for protection.

• Sometimes bottlenecks may arise due to heavy loads and without proper optimization.

Application Server

Mainly it is responsible for processing the business logic and dynamically generating the responses to client requests—for instance, Node.js, EE servers of Java, and Spring Boot.

Functionalities

• Creates dynamic content by executing the server-side scripts.

• It is capable of managing difficult computations and can communicate with the database.

• It can even integrate the middleware to increase the functionality.

• It can efficiently deal with logic-heavy applications.

• Moreover, it utilizes authentication, authorization, and data validation for utmost security (Heil and Gaedke, 2023).

Limitations

• However, it needs regular updates to mitigate the vulnerabilities.

• It may often lag if the code is poorly optimized.

Database

The responsibility of the database includes storing, retrieving, and managing the structured and unstructured data used by the applications. Examples are – MySQL, PostgreSQL, MongoDB, and Oracle.

Functionalities

• Allows CRUD operation

• Helps in complex queries and transaction management.

• Provides significant performance with caching mechanism

• Both horizontal and vertical scaling are possible

• Offers data encryption, access controls, and backups to protect the data.

Limitations

• It can become slow for the larger dataset or in case the schemas are poorly designed.

• Also, there are chances of SQL injection if the inputs are not sanitized properly.

Communication and Data Exchange

Clear communication between the clients and the server is considered the foundation of this client-server architecture. The process is dependent on standardized communication protocols along with data exchange formats which allows seamless data exchange and interaction.

Communication Protocols

In the case of web-based client-server interactions, the Hypertext Transfer Protocol is the widely used communication protocol. The task of this protocol is to look after how the request is sent from the client side to the server side. It also checks how the responses are returned. HTTPS is the secure variant of this protocol which encrypts the communication using SSL/TLS (Tariq et al., 2023).

Figure 3: Client Server
(Source: Tariq et al., 2023)

Strengths of the Protocol

• A range of browsers and servers support this and even it is easy to implement.

• It allows for various operations by supporting multiple methods like GET, POST, PUT, DELETE, and many more.

• It can even protect against eavesdropping by encrypting the data transmission.

Weaknesses

• There is no such mechanism for maintaining the session state. Therefore it requires cookies or tokens for continuity.

• Also, the response time increases due to multiple requests and the synchronous nature of the protocol.
Data exchange format

To facilitate communication the data is structured in either JSON or XML format.

JavaScript Object Notation ( JSON)

Strengths –

• It is lightweight and readable for both humans and machines.

• Widely supports modern APIs and web application

Weaknesses 

However, it may have low performance in the case of highly complex schemas and it lacks built-in data validation.

eXtensible Markup Language (XML)

Strength

• XML supports hierarchical data structures and it is easily customizable with extensive schemas

• Other than that, it is also preferable for legacy schemas and complex data exchange

Weaknesses

• When compared to JSON, it is more verbose and larger.

• Additionally, it leads to potential performance issues due to slow parsing speed.

Impact on Browser Behaviour

The behavior of the browser is significantly affected due to the client-server architecture depending on how the data is processed, displayed, and interacted with. In the case of web interaction, the browsers act as the primary client which deals with rendering, caching, and user interaction management.

The rendering process

The process usually begins when the browser receives HTML, CSS, and JavaScript from the server. After that, the HTML is parsed to create a Document Object Model on which the browser includes CSS and executes the JavaScript to develop the final layout (Dinh & Wang, 2020).

Impact:

• The performance is directly related to the rendering process where faster rendering may improve the user experience but inefficient or heavy script can lead to further delays

• On the other hand the process is optimized by the browser rendering in engines, for instance, Blink in the case of Chrome, to make smooth visuals.

Page loading times

Now, it is dependent on the size and the complexity of the resource as well as the speed of the network. For this purpose, the resources are gathered by using protocols like HTTP or HTTPS and after that, the browser processes those to display on the page.

Impact:

• It can become slower due to large assets, non-optimized images, or even excessive server-side processing.

• However, the speed can be increased by using the Content Delivery Networks and lazy loading

Caching mechanism

Browsers tend to cache the frequently accessed resources to reduce the load on the server and improve the performance. As a result,

• The redundant network request is reduced and it improves the speed for returning users

• Also it is necessary to get rid of this cache as the outdated one may create issues.

Handling user introductions

Browsers utilize JavaScript to manage interactions and allow dynamic behavior like submissions, animations, and API calls.

Impact

• It increases the user engagement by enhancing responsiveness.

• However, the response time can become slow and the browser may freeze if the interactions are poorly optimized.

Limitations

• The poorly optimized scripts may increase the memory consumption

• Additionally, the offline capabilities are limited without PWA features

Potential improvements

• Modern technology is like HTTP/2 or HTTP/3 can be adopted for faster data transfer

• Service workers can be leveraged to enable offline functionality and improve the caching system.

• Even efficient coding practices can also improve the performance

Emerging Trends and Future Directions

Server components and microservice architecture

The applications are broken down into smaller and independent services through microservices which help to handle specific business functions. In this case, there are separate processes for each service and lightweight protocols like HTTP or messaging queues are used to facilitate communication among the services. On the other hand, the server components help in the server-side rendering of UI components as well as optimize the performance.

Benefits

• It helps to scale individual components without touching the entire system

• As a result, failure in one service does not create any issue for the whole application.

• Additionally it reduces the client-side workload by pre-rendering the server components.

Challenges

• However, careful management of multiple services is required which adds overhead.

Progressive Web Apps

These can be considered the best features of web and mobile applications which are responsible for working offline and offering a native-like performance.

Potential benefits

• It improves the accessibility

• Increases the loading times by reducing latency

Challenges

• However, these may not support the features of advanced devices

• Also, it is dependent on the version of the browser.

Future directions

• To reduce the operational complexity cloud-native architectures and server-less computing need to be adopted.

• On the other hand, artificial intelligence-based optimization can help in load balancing and tuning the performance.

Conclusion

So overall, the client-server architecture is the stepping stone of modern computing which allows efficient interaction between the clients and the servers. The purpose of this architecture is to organize the tasks, separate concerns, and make sure to provide scalability. For this purpose, the client-side components like web browsers, HTML, CSS, and JavaScript work together to render the content as well as manage user interactions and drive an engaging experience. On the other hand, the server-side components maintain performance and security while managing the data and requests. Other than that, the communication protocols ensure reliable and structured data exchange. There is also a direct relationship between the client-server architecture and the browser behavior where the browser is the client that interprets responses and renders the content for the user.

References

Ajayi, O., Bagula, A., Bode, J. and Damon, M., 2022, December. A comparison of publish-subscribe and client-server models for streaming IoT telemetry data. In International Conference on Emerging Technologies for Developing Countries (pp. 129-139). Cham: Springer Nature Switzerland. https://www.researchgate.net/profile/Antoine-Bagula/publication/369763347_A_Comparison_of_Publish-Subscribe_and_Client-Server_Models_for_Streaming_IoT_Telemetry_data/links/642bebc920f25554da0a3c92/A-Comparison-of-Publish-Subscribe-and-Client-Server-Models-for-Streaming-IoT-Telemetry-data.pdf

Boiano, A., Di Gennaro, M., Barbieri, L., Carminati, M., Nicoli, M., Redondi, A., Savazzi, S., Aillet, A.S., Santos, D.R. and Serio, L., 2024. A Secure and Trustworthy Network Architecture for Federated Learning Healthcare Applications. arXiv preprint arXiv:2404.11698. https://arxiv.org/pdf/2404.11698

Himeur, Y., Sayed, A., Alsalemi, A., Bensaali, F., Amira, A., Varlamis, I., ... & Dimitrakopoulos, G. (2022). Blockchain-based recommender systems: Applications, challenges and future opportunities. Computer Science Review, 43, 100439. https://www.sciencedirect.com/science/article/pii/S1574013721000769

Heil, S. and Gaedke, M., 2023, June. DCM: dynamic client-server code migration. In International Conference on Web Engineering (pp. 3-18). Cham: Springer Nature Switzerland. https://www.researchgate.net/profile/Sebastian Heil/publication/371633222_DCM_Dynamic_Client-Server_Code_Migration/links/6499b4018de7ed28ba5a6d3c/DCM-Dynamic-Client-Server-Code-Migration.pdf

Tariq, Z., e Zainab, B., & Hussain, M. Z. (2023). Evaluating the Effectiveness and Resilience of SSL/TLS, HTTPS, IPSec, SSH, and WPA/WPA2 in Safeguarding Data Transmission. UCP Journal of Engineering & Information Technology, 1(2), 01-07. http://58.27.199.232/index.php/ucpjeit/article/download/144/99

Acharya, K. (2024). Web development system project report. Authorea. November 12, 2024. DOI: https://doi. org/10.22541/au. 173144769.91595244/v1. https://www.authorea.com/doi/pdf/10.22541/au.173144769.91595244

Martín, F., Ginés, J., Rodríguez-Lera, F.J., Guerrero-Higueras, A.M. and Matellán Olivera, V., 2021. Client-Server Approach for Managing Visual Attention, Integrated in a Cognitive Architecture for a Social Robot. Frontiers in Neurorobotics, 15, p.630386. https://www.frontiersin.org/articles/10.3389/fnbot.2021.630386/full

Dinh, D., & Wang, Z. (2020). Modern front-end web development: how libraries and frameworks transform everything. https://www.theseus.fi/bitstream/handle/10024/342325/Thesis-Duong-Wang.pdf?sequence=2