AN INTRODUCTION TO
NETCENTRIC
DEVELOPMENT
History of the web and MVC
COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
A BRIEF HISTORY OF THE INTERNET
• Advanced Research Projects Agency Network (ARPANET)
• Established in 1969
• Funded by the United States Department of Defence
• Project of the Advanced Research Projects Agency (ARPA)
• Answer simple research question: can two computers communicate with each other
• Early packet switching network
• First network to implement the protocol suite TCP/IP
• Technical foundation of the modern Internet
• Decommissioned in 1990
A BRIEF HISTORY OF THE INTERNET
[Link]
ARPANET LOGICAL MAP
ARPA NETWORK MAP - 1974
A BRIEF HISTORY OF THE WEB
• World Wide Web (WWW)
• ARPANET vs Internet vs WWW
• Established in 1989
• Created by Tim Berners-Lee
• Project of the European Organization for Nuclear Research (CERN)
• A service that operates over the internet to exchange information
• Hypertext pages that link to other pages
TIM BERNERS-LEE
FIRST WEB SERVER
A BRIEF HISTORY OF THE WEB
• 1980 – 1991: Invention and implementation of the web
• 1992 – 1995: Growth of the web
• 1996 – 1998: Commercialization of the web
• 1999 – 2001: Dot-com boom and bust
• 2002 – 2015: The web becomes ubiquitous
• 2015 – present: A new distributed web
TIMELINE OF THE WEB
TIMELINE OF THE WEB
EVOLUTION OF THE WEB
• Web 1.0: 1990 – 2002
• Basic exchange of information, often static data
• Web 2.0: 2002 – 2015
• Sharing content ad hoc
• Blogs, RSS, Wikipedia, YouTube, PayPal
• Web (2.5): 2004 – present
• Sharing of large quantities of self generated content
• Social media, mobile apps, tagging and tracking
• Web 3.0: 2015 – present
• Distributed technologies
• Blockchain, Ethereum, Dapps, distributed DNS
A BRIEF HISTORY OF BROWSERS
• Program used to display hypertext
• Has internal engines to display hypertext, render images, and execute scripts
• Many web protocols are used without browsers today (REST APIs)
• First browser named WorldWideWeb
• Released in 1990
• Later renamed to Nexus
• Widely used browser named Mosaic
• Released in 1993
• Later renamed to Netscape
CURRENT
EARLY BROWSERS
BROWSERS
MS Edge
Good Brave
Google Chrome
Browsers:
MODERN
Mozilla Firefox*
Opera
BROWSERS
Decent Apple Safari
Browsers:
Horrible MS Internet
Explorer
Browsers:
TIMELINE OF BROWSERS
MARKET SHARE OF BROWSERS
Jan 2009 – Jan 2024
MARKET SHARE OF BROWSERS
GOOGLE - 1997 GOOGLE - 2025
MICROSOFT - 199? MICROSOFT - 2025
MTN - 1996 MTN - 2025
INTERNET SOLUTIONS - 1996
TELKOM - 1998 TELKOM - 2025
MWEB - 1998 MWEB - 2025
AFRIHOST - 2001 AFRIHOST - 2025
DOT-COM BUBBLE
• Financial bubble which spiked 1996 - 2000
• The advent of the commercialization of the web
• Exponential increase in investment
• Internet-based companies in general
• More specifically in domain registrations
• Purchasing domains with the hope to sell them for a profit at a later stage
• Most expensive domains:
• [Link] (2010): $35.6 million
• [Link] (2007): $35 million
• [Link] (2012): $30.2 million
DOT-COM BUBBLE
AN OVERVIEW OF MVC
• Model-View-Controller (MVC)
• Architectural pattern for developing user interfaces
• Splits the system in 3 components
• Each responsible for a separate task
• Each with its own internal representation of the data
• Almost all web applications and many other user interfaces make use of MVC
• Logical separation of concerns
• Specialised development
• Team development
AN OVERVIEW OF MVC
Server
Software Network Hosts (Hardware)
Client
AN OVERVIEW OF MVC
• Why should logical concerns be separated?
• What is an architecture?
• What is a pattern?
• What is the difference between Design and Architecture?
SOFTWARE PERSPECTIVE OF WEB
SERVICES
Database
Host (Server)
Web Server
Script Template
Web Client Client (Browser)
Page Script
AN OVERVIEW OF MVC
Model
updates manipulates
View Controller
sees uses
User
AN OVERVIEW OF MVC
Model
state state
query change
change notification
View Controller
user gestures
updates
AN OVERVIEW OF API
• Application Programming Interfaces (API)
• How do the model, view, and controller interact?
• What about when different companies produce the components?
• An API provides:
• A consistent interface to components or subsystems
• Facilitates low coupling
• Facilitates high cohesion
AN OVERVIEW OF API
getFirstName();
Refresh onMouseClick(...); getLastName();
getTelephoneNumber();
displayContactDetails(); getPostalAddress();
getPhysicalAddress();
View Controller Model
AN OVERVIEW OF API
Event
Controller
Handler
Client Server
AN OVERVIEW OF API
Event Event
Controller
Handler Handler
Client Server
AN OVERVIEW OF API
Event
Controller Controller
Handler
Client Server
AN OVERVIEW OF API
Model
Server
AN OVERVIEW OF API
Model
Server
[Link]
AN OVERVIEW OF API
QUESTIONS
What is an API and what are
What is the purpose of MVC? they used for?
• Application Programming Interface
• Separation of Concerns • Expose resources
• High Cohesion
• Faster development
• Consistent Interface
• Better Management
History of the web and MVC
