Advanced Web App Engineering PDF

# Advanced Web App Engineering ## Worth of Big 5 Apple is the largest company in the world, with a market cap of $3.59 trillion. It is followed by Nvidia ($3.39 trillion), Microsoft ($3.15 trillion), Amazon ($2.19 trillion), and Alphabet ($2.09 trillion). It was 5 trillion USD in 2022. ## Web 1.0...

# Advanced Web App Engineering ## Worth of Big 5 Apple is the largest company in the world, with a market cap of $3.59 trillion. It is followed by Nvidia ($3.39 trillion), Microsoft ($3.15 trillion), Amazon ($2.19 trillion), and Alphabet ($2.09 trillion). It was 5 trillion USD in 2022. ## Web 1.0 to Web 5.0 | Web Generation | Description | Year | |---|---|---| | Web 1.0 | The Read-Only Web | 1991 | | Web 2.0 | The Social (Read-Write) Web | 2000 | | Web 3.0 | The Semantic (Read-Write-Execute) Web | 2010 | | Web 4.0 | The Mobile Web | 2010 | | Web 5.0 | The Intelligent / Emotional (Symbiotic) Web | 2020 | ## Web 1.0 and 2.0 - Web 1.0 - Read only web - Users were only the content consumer - Web 2.0 - The Social Web (Read-Write) - Connected people with people - Users became content producer also - Wikipedia - 2001 - MySpace - 2003 - Facebook - 2004 - YouTube - 2005 ## Web 3.0 - Web 3.0 - Semantic Web (read-write-execute) - Understand the user inputs conceptually and contextually. - AI, ML, NLP, Data analytics, Big data, Deep learning, Recommendation engines. ### Examples: - **How much potassium in 200g banana vs 200g avocado?** - WolframAlpha - Google - **MD5 "I am at a ICECT 2021."** - WolframAlpha - Google ## Web 3.0 - Virtual reality, Augmented reality - Cryptocurrency, 3D Graphics - Online game industry - Axie Infinity - $3 billion. - An NFT of the original source code for the world wide web, written by its inventor Tim Berners-Lee, has sold for $5.4 million at Sotheby's in an online auction. ## Web 4.0 - Web 4.0 is also known as the Mobile Web, many believe it occured simultaneously with Web 3.0. - Other consider it the mobile version of Web 2.0. - All the goodness of WWW is mobile now... - Rise of progressive Web Apps (PWA) - 2015 ## Web 5.0 - Web 5.0 is also known as The Intelligent / Emotional (Symbiotic) Web. - From behavior to emotions and feelings. - Convergence between cyberspace (virtual space) and physical space (real space). - Personalized content, data collection through sensors / wearable devices. - 3D, Immersive technology, Big data, AI. - Virtual school, Virtual office, Marketing, Shopping, User experience, Patient therapies... ## NUMBER of Websites | Category | Value | |---|---| | No. of total indexed web pages | 6 Billion | | Total websites | 1.7 Billion | | Everyday | 576,000 | ## NUMBER of YEARS IT TOOK FOR EACH PRODUCT TO GAIN 50 MILLION USERS: | Product | Years | |---|---| | Airlines | 68 | | Automobiles | 62 | | Telephone | 50 | | Electricity | 46 | | Credit Card | 28 | | Television | 22 | | ATM | 18 | | Computer | 14 | | Cell Phone | 12 | | Internet | 7 | | iPods | 4 | | YouTube | 4 | | Facebook | 3 | | Twitter | 2 | | Pokémon Go | 19 days | ChatGPT added 50 million weekly users in just **two months**. ## EVERY MINUTE OF THE DAY A table that shows the statistics of the most popular social media and technology platforms around the world as of 2021: > **NOTE: This information is not specific to Saudi Arabia but applies to the world. The slide referring to Saudi Arabia is a separate slide that was not included in the OCR'd output.** | Platform | Stat | Value | |---|---|---| | TikTok | Users Upload Videos | 16,000 | | Google AI's Gemini | Visitors | 8,574 | | Netflix | Subscribers Streamed | 5.9M | | Google | Searches| 1,041 | | Siri | Questions | 5.9M | | Text Messages Sent | 18.8M | | Airbnb | Stays Booked | 852 | | Data Breaches | Records Compromised | 4,080 | | Fortnite | Hours of Live Streams Watched | 1,563 | | Slack | Messages Sent | 1.04M | | Doordash | Orders | $126,763 | | Steps | Taken | 1,151,176,000 | | Zoom | People Download | 288 | | Cyber Week Shoppers | Spent | $43.6M | | Snapchat | Users Send Snaps | 3.3M | | YouTube | Video Views | 3,472,222 | | Facebook + Instagram | Reels Played | 138.9M | | Instagram | Emails Sent | 251.1M | | LinkedIn | Members Apply for Jobs | 9,000| | Microsoft Teams | Meeting Minutes Recorded | 229M | ## Internet Minute 2023 A diagram that illustrates the number of events occurring each minute on the internet in 2023: - YouTube Videos Watched: 3.67M - Hours of Content Streamed on Netflix: 452K - Videos Watched on TikTok: 167M - Snapchats Sent: 2M - PHOTOS and Videos Shared on Instagram: 66K - Searches on Pinterest: 46K - Tweets Sent: 575K - People Active on Facebook: 2.1M - Active Users on LinkedIn: 20.8K - Ride-Shares Taken: 12.5K - People Reading Yelp Reviews: 4K - Apps Downloaded: 174K - Texts Sent: 16.2M - Emails Sent: 231M - Songs Streamed in the US: 694M - People Shopping Online: 6M - Google Searches: 5.9M - People Viewing Facebook Live Streams: 44M ## This is What Happens In An Internet Minute A pie chart that illustrates the statistics of the most popular social media and technology platforms around the world as of 2021: - **Facebook:** 1.4M Scrolling, 21.1M Texts Sent - **LinkedIn:** 9,132 Connections Made - **Netflix:** 28,000 Subscribers Watching - **Spent Online:** $1.6M - **WhatsApp:** 3.4M Snaps Created - **Facebook Messenger:** 69M Messages Sent - **imgur:** 2M Images Viewed - **Amazon echo:** 932 Smart Audio Devices Shipped - **Tik Tok:** 5,000 Downloads - **Twitch:** 2M Views - **You Tube:** 500 Hours of Content Uploaded, 414,764 Apps Downloaded - **Instagram:** 695,000 Stories Shared - **Twitter:** 200,000 People Tweeting - **tinder:** 2M Swipes - **Email:** 197.6M Emails Sent A pie chart that illustrates the statistics of the most popular social media and technology platforms around the world as of 2019: - **Facebook:** 1M Logging In, 18.1M Texts Sent - **Google:** 3.8M Search Queries - **Netflix:** 694,444 Hours Watched - **Spent Online:** $996,956. - **WhatsApp:** 2.1M Snaps Created - **Facebook Messenger:** 41.6M Messages Sent - **GIPHY:** 4.8M GIFs Served - **Amazon echo:** 180 Smart Speakers Shipped - **Google Home:** 41 Music Streaming Subscriptions - **You Tube:** 4.5M Videos Viewed - **Apps Downloaded:** 390,030 - **Instagram:** 347,222 Scrolling Instagram - **Twitter:** 87,500 People Tweeting - **tinder:** 1.4M Swipes - **Email:** 188M Emails Sent - **Twitch:** 1M Views A pie chart that illustrates the statistics of the most popular social media and technology platforms around the world as of 2020: - **Facebook:** 1.3M Logging In, 19M Texts Sent - **Google:** 4.1M Search Queries - **Netflix:** 764,000 Hours Watched - **Spent Online:** $1.1M - **WhatsApp:** 2.5M Snaps Created - **Facebook Messenger:** 59M Messages Sent - **imgur:** 2.5M Images Viewed - **Amazon echo:** 305 Smart Speakers Shipped - **Google Home:** 1,400 Downloads - **Tik Tok:** 1.2M Views - **Twitch:** 1M Views - **You Tube:** 4.7M Videos Viewed - **Apps Downloaded:** 400,000 - **Instagram:** 694,444 Scrolling Instagram - **Twitter:** 194,444 People Tweeting - **tinder:** 1.6M Swipes - **Email:** 190M Emails Sent A pie chart that illustrates the statistics of the most popular social media and technology platforms around the world as of 2017: - **Facebook:** 900,000 Logins - **Google:** 3.5M Search Queries - **Netflix:** 70,017 Hours Watched - **Spent Online:** $751,522 - **WhatsApp:** 1.8M Snaps Created - **Facebook Messenger:** 15,000 GIFs Sent - **New Accounts Created:** 120 - **Linked in:** 50 Voice-First Devices Shipped - **Amazon echo:** 40,000 Hours Listened - **Spotify:** 156M Emails Sent - **You Tube:** 4.1M Videos Viewed - **Apps Downloaded:** 342,000 - **Instagram:** 46,200 Posts Uploaded - **Twitter:** 452,000 Tweets Sent - **tinder:** 990,000 Swipes A pie chart that illustrates the statistics of the most popular social media and technology platforms around the world as of 2018: - **Facebook:** 973,000 Logins - **Google:** 3.7M Search Queries - **Netflix:** 266,000 Hours Watched - **Spent Online:** $862,823 - **WhatsApp:** 2.4M Snaps Created - **Facebook Messenger:** 25,000 GIFs Sent - **New Accounts Created:** 38M - **Linked in:** 67 Voice-First Devices Shipped - **Amazon echo:** 187M Emails Sent - **You Tube:** 4.3M Videos Viewed - **Apps Downloaded:** 375,000 - **Instagram:** 174,000 Scrolling Instagram - **Twitter:** 481,000 Tweets Sent - **tinder:** 1.1M Swipes - **Twitch:** 936,073 Views ## Saudi Arabia - Figures - [https://datareportal.com/reports/digital-2024-saudi-arabia](https://datareportal.com/reports/digital-2024-saudi-arabia) ## What is a Web Application? - A software program accessed through a web browser - Runs on a web server and delivers functionally over the internet. ## Why are Web Applications Important? - Accessibility: Available from anywhere with an internet connection. - Platform Independence: Run on various devices and operating systems. - Cost-Effectiveness: Often cheaper to develop and maintain. ## The WEB - An indispensable technology - In virtually every aspect of modern living - A transformative technology - Changes the way we do things - Changes the way we acquire and disseminate information - An evolving technology - Bottom line-high impact on everyone in the modern world - Apple ad "You name it, we have it” ## WebApps Attributes - Network intensiveness - Concurrency - Unpredictable load - Performance - Availability - Data driven - Content sensitive - Continuous evolution - Immediacy - Security - Aesthetics ## WebApps Attributes cont. - **Network intensiveness** - Every web app must reside on a network - Serves the needs of clients - client / server - *Concurrency* - A large number of users may access the web app at one time - Usage pattern differs - *Unpredictable load* - The number of web app users may vary from day to day - Sports websites access during events - *Performance* - If the response is slow user will leave - *Availability* - Expectation 100% availability - 24/7/365 ## WebApps Attributes cont. - *Data driven* - Web apps use hypermedia to present text, audio, video, graphics - Connected to databases (which may be separate from the web app) - *Content sensitive* - Quality of web app - Aesthetic nature of content - *Continuous evolution* - Unlike software application web apps continuously evolve - Specifically the content continuously update: minute by minute - Sports, weather, news web sites - *Immediacy* - The compelling need to get software to market quickly - Web apps time to market a few days or weeks - Incomplete / under-construction ## WebApps Attributes cont. - *Security* - Web Apps run on a network, anyone can access them -strong security models required - *Aesthetics* - Look and Feel ## Types of Web Apps - Static Web Applications - Content is pre-built and stored on a web server. - Pages are delivered as they are, without dynamic changes. ### Characteristics: - Simple and easy to create. - Less interactive. - Examples: Personal websites, blogs, brochure sites. ### Technologies: - HTML, CSS, JavaScript (basic) ## Types of Web Apps - Dynamic Web Applications ### Definition: - Content is generated on-the-fly based on user interactions or server-side logic. ### Characteristics: - Highly interactive and personalized. - Examples: Social media platforms , e-commerce sites, online banking. ### Technologies: - Server-side scripting languages (PHP, Python, Ruby, Java) - Databases ## E-commerce Web Applications ### Definition: - Facilitate online transactions, such as buying and selling products or services. ### Characteristics: - Product catalogs, shopping carts, payment gateways, order tracking. - Examples: Amazon, eBay, Etsy. ### Technologies: - Dynamic web development, payment processing APIs, security measures. ## Portals ### Definition: - Centralized access point to information and applications. - Often customized for specific groups or organizations. ### Characteristics: - Personalized dashboards, content aggregation, user management. - Examples: Company intranets, educational portals, government portals. ### Technologies: - Content management systems (CMS), single sign-on (SSO), data integration. ## Other Types Additional Types (Optional): - Single-Page Applications (SPAs) - Progressive Web Applications (PWAs) - Rich Internet Applications (RIAs) ## WebApp Types - Informational - Download - Customizable - Interaction - User input - Transaction-oriented - Service-oriented - Portals - Database access - Data warehousing - Search Engines - Digital Libraries ## WebApp Types cont. - *Informational* - Read only content - some information and links - *Download* - Downloadable content - PDF etc. - *Customizable* - After having knowledge about user - Separate portlets for different users ## WebApp Types cont. - *Interaction* - Gives you a feel of interaction - People can chat, ask and answer questions, provide product testimonials, and the like - *User input* - User can query - Forms are provided - Cars Lease, Spare parts etc. - *Transaction-oriented* - Faster as compared to forms - A transaction between the user and the WebApp occurs - Transaction could be information or other ## WebApp Types cont. - *Service-oriented* - The user inputs a description of a space graphically and is then assisted in the design of a security system for that space - *Portals* - As the number of visitors increases - All user questions could not be answered - Some requests are routed to other sites - Contain links of other sites - *Database access* - When data grows, then databases are required to handle it - User queries are answered through database ## WebApp Types cont. - *Data warehousing / Cloud Databases* - With growing structure - The information is fetched from different databases - Data warehousing is required to serve the needs of customers / visitors from different parts of the world - *Desktop WebApps* - the gap between web apps and desktop apps is shrinking - Note: Web is continuously evolving some are merging and some new are emerging. ## Web Apps Advantages - *Cross platform* - desktop app may need to be built for Windows, Mac and Linux - *Acess anywhere* - Including on a mobile device or a shared computer. Desktop apps exist only on the devices they have been installed on. - *No installtion/update* - Web apps require no installation and updates are applied automatically. Desktop apps require the user to install the software and apply updates when major versions are released. These steps are just extra effort for the user and provide more chances for things to go wrong and cause frustration. ## Discussion Points - Compare and contrast different types of web applications. - Discuss the advantages and disadvantages of each type. - Analyze real-world examples of web applications and categorize them. - Consider the technologies and skills required for developing each type. - Discuss the future trends in web application development. ## Modern Web App - "modern web application" (e.g., dynamic, interactive, data-driven, often cloud-based). - key characteristics for discussion: Scalability, Performance, and Security. ## Scaling to Success - **Definition:** The ability of an application to handle increasing user traffic and data volumes without significant performance degradation. - **Key Considerations:** - Horizontal Scaling: Adding more servers to distribute load. - Vertical Scaling: Increasing resources (CPU, RAM) of existing servers. - Load Balancing: Distributing traffic evenly across servers. - Data Partitioning: Dividing data across multiple databases. - Caching: Storing frequently accessed data in memory for faster retrieval. - **Discussion Points:** How to design an application with scalability in mind from the beginning? What are the challenges of scaling a legacy application? ## Speed is Key - **Definition:** How quickly an application responds to user requests and delivers content. - **Key Metrics:** - Page Load Time: Time taken for a page to fully load. - Server Response Time: Time taken for the server to process a request. - Network Latency: Time taken for data to travel between the user and the server. ## Speed is Key - **Optimization Techniques:** - Image Optimization: Reducing image file sizes. - Code Minification: Removing unnecessary characters from code. - Caching: Storing frequently accessed data locally. - Content Delivery Networks (CDNs): Distributing content closer to users. - **Discussion Points:** How does performance impact user experience and conversion rates? What are the best tools and techniques for measuring and improving web application performance? ## Security - **Definition:** Ensuring the confidentiality, integrity, and availability of an application and its data. - **Common Vulnerabilities:** - Data Breaches: Unauthorized access to sensitive data. - Cross-Site Scripting (XSS): Injecting malicious scripts into web pages. - SQL Injection: Injecting malicious SQL queries into databases. - Denial of Service (DoS) Attacks: Overwhelming a server with traffic to make it unavailable. ## Security - **Security Measures:** - Input Validation: Sanitizing user input to prevent attacks. - Encryption: Protecting data in transit and at rest. - Authentication and Authorization: Verifying user identity and granting appropriate access. - Regular Security Audits and Penetration Testing: Identifying and fixing vulnerabilities. - **Discussion Points:** How to implement secure coding practices? What are the legal and ethical implications of data security breaches? ## Achieving a Successful Balance - Scalability, performance, and security are interconnected and interdependent. - Trade-offs often need to be made between these characteristics. - Example: Implementing strong security measures might slightly impact performance. - Think about how to prioritize and balance these factors in real-world projects. - Reiterate the importance of these characteristics for building successful and sustainable modern web applications. ## Mobile Apps - **What are Mobile Apps?** - Definition: Software applications designed to run on mobile devices like smartphones and tablets. - **Types:** - Native Apps: Built specifically for a particular platform (iOS, Android). - Web Apps: Accessed through a web browser on a mobile device. - Hybrid Apps: Combine native and web technologies. ## Web Apps - **What are Web Apps?** - **Definition:** Applications accessed through a web browser. - **Key Characteristics:** - Cross-platform compatibility: Run on any device with a web browser. - No installation required: Accessed directly through a URL. - Reliance on internet connectivity: Require an internet connection to function. ## Relationship Between Mobile Apps and Web Apps - **Relationship Between Mobile Apps and Web Apps** - **Similarities:** - Both provide user interfaces for interacting with data and functionality. - Can be used for a variety of purposes, such as entertainment, productivity, and social networking. - **Differences:** - Performance: Native apps often outperform web apps in terms of speed and responsiveness. - Offline functionality: Native apps can function offline, while web apps typically require an internet connection. - Device integration: Native apps can access device hardware and software features more easily than web apps. ## Choosing Between Mobile Apps and Web Apps - **Factors to consider:** - User experience: Native apps generally provide a more seamless and integrated user experience. - Performance requirements: If speed and responsiveness are critical, native apps may be the better choice. - Offline functionality: If offline access is required, native apps are essential. - Development costs: Web apps can be less expensive to develop than native apps. ## The Future of Mobile Apps and Web Apps - Convergence: The lines between mobile apps and web apps are blurring with technologies like Progressive Web Apps (PWAs). - Emerging trends: - Artificial intelligence (AI) and machine learning (ML) integration. - Augmented reality (AR) and virtual reality (VR) experiences. - Internet of Things (IoT) connectivity. ## Discussion Points: - What are the advantages and disadvantages of native apps, web apps, and hybrid apps? - How can developers create engaging and user-friendly mobile app experiences? - What are the ethical considerations surrounding mobile app development and data privacy? - How will the evolving technological landscape impact the future of mobile apps and web apps? ## Trends in Web Application Development - The Ever-Evolving Web - Rapid advancements in technology are constantly reshaping the landscape of web application development. - Staying abreast of these trends is crucial for software engineering students to remain competitive and build cutting-edge applications. ## Progressive Web Apps (PWAs) - Bridging the Gap Between Web and Mobile. - PWAs combine the best of web and mobile applications, offering features like offline functionality, push notifications, and the ability to be installed on the home screen. - This enhances user experience and engagement, making PWAs a popular choice for businesses and developers. ## Artificial Intelligence (AI) and Machine Learning (ML) - Intelligent Web Applications. - AI and ML are being increasingly integrated into web applications to personalize user experiences, automate tasks, and provide valuable insights. - Examples include chatbots, recommendation engines, and predictive analytics. ## Serverless Computing - Scalability and Efficiency. - Serverless computing allows developers to build and run applications without managing servers, reducing infrastructure costs and complexity. - This trend is particularly beneficial for web applications that experience fluctuating traffic demands. ## The Rise of Blockchain - Decentralized and Secure Applications. - Blockchain technology is enabling the development of decentralized applications (dApps) that offer enhanced security, transparency, and trust. - This has applications in various domains, including finance, supply chain management, and healthcare.