Lecture 5 - Mobile and Web Architecture PDF

Course Material BSIT Department Mobile and Web Architecture  Course Material BSIT Department Learning Outcomes Understand the architectural requirements for mobile and web applications. Apply architectural patterns suitable for mobile and web a...

Course Material BSIT Department Mobile and Web Architecture  Course Material BSIT Department Learning Outcomes Understand the architectural requirements for mobile and web applications. Apply architectural patterns suitable for mobile and web applications. Design responsive and adaptive web applications. Develop a basic understanding of Progressive Web Apps  Course Material BSIT Department Introduction There always seem to be two terms, web applications and mobile applications. Though it is clear that both terms refer to applications, they are not the same. When you ask a person which they use the most, laptop or mobile, you probably will get the latter as the answer from the majority. According to recently taken statistics, 50.59% of the total web visits are mobile, compared to 49.41% from desktops. This is no surprise since most of us spend time browsing through applications on mobiles, aside from work.  Course Material BSIT Department Overview of Mobile and Web application  Course Material BSIT Department What Is a Web Application? A Web application is a program stored on a remote server and delivered to the user via a browser. Similar to a website, but not entirely. A Website is content displayed to the user and is not meant for interactions. The purpose of websites is to display static content to the user—for example, portfolios, official websites of brands, etc. Web application, however, is intended for interaction between the user and the application.  Course Material BSIT Department How Does a Web Application Work? One of the unique aspects of web applications that differentiate them from mobile applications is that it does not need to be installed as a separate application on the desktop and can be accessed via browser in the following way: The user sends a query to the web server through a browser using the internet. After receiving the request, the server prepares to deliver the requested request. The requested information later sends results from the web application server to the server. The web server then displays the requested information to the user.  Course Material BSIT Department Examples of Web Applications There are a plethora of web applications we are not aware of and still are using every day. Some of them are: Online shopping carts Email Word processors Photo and video editing File scanning Spreadsheets Presentations  Course Material BSIT Department Pros and Cons of Web Application Pros Cons Web applications are flexible. They can be Web applications are accessed via browsers; accessed via any browser on mobile and desktop. hence they rely on the internet and cannot be accessed offline. Web applications need not need to be updated If any website of the web application experiences manually as the web application updates on its even a slight error, the whole application will likely own. experience performance lag. They don’t require to be installed on mobile; thus, Web applications run at a relatively slower speed. the memory and data are also saved. The applications are cross-platform and can be run Web applications are highly likely to experience on any OS. security breaches.  Course Material BSIT Department What Is a Mobile Application? Mobile application is a software application designed to deliver services run on mobile. When compared, there is not much difference between a mobile application and a web application. Their role is the same. Display content to the user, deliver optimised responses tailored to their request and provide a seamless browsing experience. However, there is one difference. A major one. Mobile applications are specifically designed for mobile use alone. Unlike web applications which can be browsed via any browser on desktop or mobile, mobile applications can only be installed on mobile and only be browsed through them.  Course Material BSIT Department How Does a Mobile Application Work? Mobile applications tend to lead faster and give the user a more sophisticated feel of browsing for the users. They also use less internet and work in the following way: The user downloads the application from the app store if using iPhones or the google play store if using android phones. To download the application requires a certain amount of data and storage space. After making sure that the mobile has enough space to accommodate the application, the download process starts. After downloading, the user is asked for login details or signs up before accessing the applications. Finally, the application is ready to display its content and deliver its services while also providing an enhanced user experience.  Course Material BSIT Department Types of Mobile Application As you may have already known, there are two types of mobile OS, iOS and Android. In terms of service, features, and environment, both operating systems differ significantly. At first, developers had to develop the same application as two separate applications where each was released on the appropriate OS. however the process has changed. The tedious process is now changed as developers now create hybrid apps. There are three different types of mobile applications. They are: Native Hybrid Mobile Web  Course Material BSIT Department Examples of Mobile Applications Many mobile applications are downloaded in large numbers every day in the app stores. Among them, some of the popular genres of mobile applications are: Lifestyle Social media Ecommerce Utility Games Educational Communication Entertainment Productivity News  Course Material BSIT Department Pros and Cons of Mobile Application Pros Cons Mobile applications are easy to access with one Developing a mobile application is quite a click instead of painstakingly searching and challenging feat. browsing the web application through a browser. Data like favourites, display settings, etc., can be Mobile applications need to be updated frequently. saved in the mobile application and can be accessed at any time. Brands that are looking for positive brand exposure Some mobile applications are not cross-platform. can offer a personalised experience to their customers.  Course Material BSIT Department Architectural Patterns in Mobile and Web Applications  Course Material BSIT Department Architectural Patterns in Mobile and Web Application Architectural patterns provide a structured approach to organizing and developing software applications. For both mobile and web applications, several architectural patterns can be used to address common challenges and requirements.  Course Material BSIT Department Model-View-Controller (MVC) The Model-View-Controller (MVC) pattern is a software architecture pattern that separates an application into three parts: the model, the view, and the controller. The model is responsible for managing the data, the view is responsible for displaying the data, and the controller is responsible for handling user input and updating the model and view accordingly. This pattern promotes the separation of concerns and improves code organization. Let’s break down each part of MVC: Model View Controller  Course Material BSIT Department Model-View-Controller (MVC) Example Scenario: Suppose you have a basic weather app. 1. Model: This would handle the weather data, like the current temperature, forecast, and other related information. 2. View: The View would be what the user sees on the screen – maybe a simple interface showing the current temperature and a forecast. 3. Controller: The Controller would handle user interactions. If a user wants to switch from viewing the current temperature to the forecast, the Controller takes that request, updates the Model (gets the forecast data), and tells the View to display the new information.  Course Material BSIT Department Model-View-ViewModel (MVVM) MVVM pattern supports two-way data binding between View and View-Model. This allows automatic propagation of changes, inside the state of View-Model to the View. Generally, the View-Model utilizes the observer pattern to inform changes in the View-Model to the Model. Let’s break down each part of MVVM: Model View ViewModel  Course Material BSIT Department Model-View-ViewModel (MVVM) Example Scenario: Imagine you are building a basic news app. 1. Model: The Model would handle news articles – fetching them from an online source, storing them, and managing the data. 2. View: The View is what the user interacts with – a screen displaying a list of news articles and maybe a button to read more details about a specific article. 3. View-Model: The View-Model takes care of preparing the news data for display. It takes the raw data from the Model, formats it into a suitable form for the View, and handles interactions like tapping on an article to read more.  Course Material BSIT Department Model-View-Presenter (MVP) The Model-View-Presenter (MVP) design pattern is a derivation of the Model-View- Controller (MVC) architectural pattern and is used mostly for building user interfaces. However, it doesn’t specify how to structure the whole system. It only dictates how to structure the view. MVP is a user interface architectural pattern engineered to facilitate automated unit testing and improve the separation of concerns in presentation logic. This pattern divides an application into three major aspects: Model, View, and Presenter. Model View Presenter  Course Material BSIT Department Model-View-Presenter (MVP) Example Scenario: In a note-taking app Model: The model would store the text View: The view is where the users interact with it. Presenter: The presenter would handle the user input such as typing, editing, or deletes the process.  Course Material BSIT Department Responsive and Adaptive Design  Course Material BSIT Department Responsive Design In this design web designers design the user interface of a website in such a manner that whatever device you are using you can access comfortably web page. If we use a web page on the laptop then it splits into a large view but if you use the same web page on mobile then it synchronizes itself. Web designers simply design it by using only HTML & CSS. Designer works with the developer for a better user experience.  Course Material BSIT Department Pros and Cons of Responsive Design Pros Cons Search Engine friendly More Coding There are numerous templates to choose from. Advertisements can disappear from the screen Flexibility The site speed suffers if not implemented The design process takes a shorter amount of properly. time. Elements can move around Availability of design for all screen resolutions Download time is more for mobile devices. and sizes Widely used Easier implementation  Course Material BSIT Department Adaptive Design In this design web designers design the user interface of a website in such a manner that it creates different layouts of the web page for the different devices. So based on the screen size of the device it loads the layout of the page. it creates the different layouts for different devices like screen size as for 320px, 480px, 760px, 960px, 1200px, 1600px. For different sizes of mobile screens, tablet screens, and many more devices it depicts the size of layouts of the screen and displays the content of the page. Web designers have to work more because they have to develop six different pages.  Course Material BSIT Department Pros and Cons of Adaptive Design Pros Cons A company with an adaptive website To begin with, it is normally far more work than outperforms on speed tests. building a responsive design. As a result, the Best user experience irrespective to device bulk of adaptive designs is utilized to modify used. existing sites so that they may be accessed via Mobile devices can detect their users’ numerous devices. surroundings. Modification in adaptive design websites is Optimization of advertisements can be carried complex out through user data from smart gadgets. Not widely used like responsive design  Course Material BSIT Department Responsive Design vs Adaptive Design Responsive Adaptive It adjusts its content and width according to the According to the device, it loads the content of the device. web page that was already designed. Designers have to work less because they have to Designers have to work more because they have to create the single layout of the page designers create six different versions of the site to handle different screen sizes. If there is any new layout of the screen comes into Designers have to develop a completely new page if the market, the content is adjusted according to the new layout of the screen has come into the them. market. Responsive Design works well for larger sites that Adaptive Design works well for smaller sites that are being built from the scratch. are being refreshed. Responsive design is smooth because the layout Adaptive design snaps into place since the website adjusts in the flow regardless of the device being is serving something different which relies on viewed. device or browser used to view it.  Course Material BSIT Department Progressive Web Apps  Course Material BSIT Department What is Progressive Web Apps (PWA)? A Progressive Web App (PWA) is a type of web application that uses modern web technologies to provide a user experience similar to that of a native mobile application. PWAs are designed to work seamlessly across various devices and browsers, offering a responsive and engaging user interface. They combine the best of web and mobile app capabilities, providing users with fast, reliable, and immersive experiences.  Course Material BSIT Department Progressive Web Apps (PWA) Key characteristics of Progressive Web Apps: Progressive Enhancement Responsive Design App-Like Experience Offline Functionality Web App Manifest  Course Material BSIT Department Benefits of Progressive Web Apps (PWA) PWAs offer numerous advantages, providing a mobile-like experience while retaining the benefits of a website. Here are some key benefits: Offline Usability Page Loading Speed Installable Automatic Background Sync SEO (Search Engine Optimization) Platform Independence  Course Material BSIT Department Components of Progressive Web Apps Three main components transform a website into a Progressive Web App: 1. Service Worker: A Service Worker is a JavaScript file that acts as a proxy between the browser and the network. It enables offline functionality and improves performance through efficient caching. 2. Web App Manifest: The Web App Manifest is a JSON file that provides the browser with information about your web application. This file includes details like the app’s name, icons, theme colors, and start URL. 3. HTTPS: PWAs require a secure protocol (HTTPS) because Service Workers can intercept network requests and modify responses, ensuring secure and reliable functionality.  Course Material BSIT Department How does Progressive Web Apps work? PWAs combine the best features of web and mobile apps to deliver a seamless user experience. Here is a detailed look at how PWAs work: 1. Initial Load and Installation: When a user first visits a PWA-enabled website, the site loads like any other website. However, the presence of a Web App Manifest allows the user to install the app onto their device’s home screen. 2. Caching and Offline Functionality: Service Workers play a crucial role in enabling offline functionality. During the initial visit, the Service Worker is registered and installed in the background. It pre-caches key resources like HTML, CSS, JavaScript, and images. 3. Handling Network Requests: Service Workers intercept network requests made by the PWA. They determine whether to serve a cached version of the resource or fetch it from the network. 4. Push Notifications and Background Sync: PWAs can send push notifications to re-engage users and provide timely updates. Service Workers handle these notifications, even when the PWA is not actively running.  Course Material BSIT Department Questions? Clarifications?  Course Material BSIT Department References: https://codeinstitute.net/global/blog/web-app-vs-mobile-app/ https://www.geeksforgeeks.org/design-patterns-for-mobile- development/ https://www.geeksforgeeks.org/architecture-for-mobile-development- design-patterns/ https://www.geeksforgeeks.org/latest-design-patterns-for-web- development/ https://www.geeksforgeeks.org/difference-between-responsive- design-and-adaptive-design/ https://www.geeksforgeeks.org/what-is-a-progressive-web-app-pwa/ https://www.geeksforgeeks.org/progressive-web-apps-benefits- components-and-how-it-works/  Course Material BSIT Department Thank You!