JHETIE JAN B.

RAMOS, CpE, LPT

Instructor
Objectives
• Demonstrate knowledge on the different technologies used in
web systems development.
• Explain the difference between front-end and back-end
technologies.
• Identify the different web development trends.

What is Web Systems and

Technology?
• Web system, or web-based information system, is an
information system that uses Internet web technologies to
deliver information and services, to users or other
information systems/applications.

• It is a software system whose main purpose is to publish and

maintain data by using hypertext-based principles.
 Web Technology
• Web Technology refers to the various tools and techniques
that are utilized in the process of communication between
different types of devices over the internet.

• A web browser is used to access web pages. Web browsers

can be defined as programs that display text, data, pictures,
animation, and video on the Internet.

• Hyperlinked resources on the World Wide Web can be

accessed using software interfaces provided by Web
browsers.
Web Technology can be
classified into the
following sections:
• World Wide Web (WWW): The World Wide Web is
based on several different technologies : Web
browsers, Hypertext Markup Language (HTML) and
Hypertext Transfer Protocol (HTTP).

• Web Browser: The web browser is an application

software to explore www (World Wide Web). It
provides an interface between the server and the
client and requests to the server for web
documents and services.
Web Technology can be
classified into the
following sections:
• Web Server: Web server is a program which
processes the network requests of the users and
serves them with files that create web pages. This
exchange takes place using Hypertext Transfer
Protocol (HTTP).

• Web Pages: A webpage is a digital document that

is linked to the World Wide Web and viewable by
anyone connected to the internet has a web
browser.
Web Technology can be
classified into the
following sections:
• Web Development: Web development
refers to the building, creating, and
maintaining of websites. It includes
aspects such as web design, web
publishing, web programming, and
database management. It is the creation
of an application that works over the
internet i.e. websites.
Web Development • Front-end Development: The part of a website that the
can be classified into user interacts directly is termed as front end. It is also
two ways: referred to as the ‘client side’ of the application.
Web
Development
can be
classified into
two ways:
• Back-end Development: Backend is the server side of a website. It
is the part of the website that users cannot see and interact.
• It is the portion of software that does not come in direct contact
with the users. It is used to store and arrange data.
FRONT-END LANGUAGES
HTML
• It is used to design the front-end
portion of web pages using a
markup language.
• Hypertext defines the link
between the web pages.
• The markup language is used to
define the text documentation
within the tag which defines the
structure of web pages.
Cascading Style
Sheets
• CSS: Cascading Style Sheets fondly
referred to as CSS is a simply designed
language intended to simplify the
process of making web pages
presentable.
• Allows you to apply styles to web
pages. More importantly, CSS enables
you to do this independent of the
HTML that makes up each web page.
CSS Front-end Frameworks and Libraries
• CSS Library:
• Pure CSS
• CSS Framework:
• Bootstrap
• Bulma
• Materialize
• Semantic
• Tailwind CSS

• CSS Preprocesser:
• SASS (Syntactically Awesome Style Sheets)
• LESS (Leaner Style Sheets)
JavaScript
• JavaScript: JavaScript is a famous
scripting language used to
create magic on the sites to
make the site interactive for the
user. It is used to enhancing the
functionality of a website to
running cool games and web -
based software.
JavaScript

• JavaScript Technology: • JavaScript Library:

• ES6 • jQuery
• TypeScript • jQuery Mobile
• script.aculo.us
• P5.JS
• JavaScript Framework:
• AngularJS • D3.JS
• ReactJS • Underscore.JS
• Vue.JS
AJAX
• AJAX: Ajax is an acronym for
Asynchronous JavaScript and XML.

• It is used to communicate with the

server without refreshing the web
page and thus increasing the user
experience and better performance.
Comparison
SKILLS YOU NEED TO BECOME A
FRONT- END DEVELOPER
• Key Front End Developers • RESTful Services/APIs
Skills • Responsive/Mobile Design
• HTML • Cross-Browser
• CSS Development
• JavaScript
• Content Management
• jQuery Systems
• JavaScript Frameworks • Testing/Debugging
• Front End Frameworks • Git/Version Control
• CSS Preprocessors • Problem Solving

Back-end Languages
PHP
• PHP (Hypertext Processor) is a
server -side scripting language
designed specifically for web
development.

• Since PHP code executed on the

server -side, so it is called a
server -side scripting language.
Node.js
• an open-source and cross-platform
runtime environment for executing
JavaScript code outside a browser.
You need to remember that NodeJS is
not a framework, and it’s not a
programming language. • Often used for building back-end services
like APIs like Web App or Mobile App.
• Most people are confused and
• It’s used in production by large
understand it’s a framework or a
programming language. companies such as Paypal, Uber, Netflix,
Wallmart, and so on.
 • AI and machine learning.
Python
• Python is a programming language • Data analytics.
that lets you work quickly and • Data visualization.
integrate systems more efficiently.
• Programming applications
• Web development
• Commonly used for developing
websites and software, task • Game development •
automation, data analysis, and Language development.
data visualization
• Finance.
 there are replacements too for
Ruby it i.e procs and lambda.

• Ruby is a dynamic, reflective,

object-oriented, general-purpose • The objective of Ruby’s
programming language. development was to make it
act as a sensible buffer
between human programmers
• Pure Object-Oriented language and the underlying computing
developed by Yukihiro machinery.
Matsumoto. Everything in Ruby is
an object except the blocks but
• Ruby is great for building
desktop applications, static
websites, data processing services,
and even automation tools.
Java
• Java is one of the most
popular and widely used
programming languages
and platforms. It is highly
scalable.
• Java components are easily
available.
Golang
• Golang is a procedural and
statically typed programming
language having the syntax
like C programming language.
• Sometimes it is termed as Go
Programming Language.
C#
• C# is a general-
purpose, modern and
object-oriented
programming
language pronounced
as “C sharp”.
DBMS
• The software which is used to manage database is called
Database Management System (DBMS).
Back-end Frameworks and
Technology
• PHP: • Java:
• Framework: Laravel • Framework: Spring, Hibernate
• CMS: WordPress • C#:
• NodeJS: • Framework: .NET
• Framework: Express • Database
• Python: • Relation Database:
• Framework: Django • Postgre SQL
 • Package Manager: Python PIP • MariaDB
• MySQL
• NoSql Database:
• Ruby: • MongoDB
• Framework: Ruby on Rails

Trends in Web Technologies

Trends in Web Technologies
• Blockchain Technology • Accelerated Mobile Pages (AMP)

• Progressive Web Apps (PWA) • Voice Search Optimization

• Internet of Things (IoT) • API-first Development

• AI-Powered Chatbots • Serverless Architecture

• Push Notifications • Cloud Computing

• Content Personalization with Machine Learning • Single-Page Applications (SPA)

• Motion UI • JavaScript Frameworks

• Data Security • Automation Testing

• Multi-experience • Responsive Websites

• Cybersecurity • Dark Mode

• Micro Frontends • Web Assembly

• Virtual Reality
Blockchain Technology
•

• Early Adopters: Barclays, Visa, Walmart

Benefits of Blockchain in Web
development
• Blockchain works on consensus algorithms, which makes it
almost impossible to break into.
• Data is stored on a network, making it easily available to users.
• The blockchain system is decentralized, and thus, is less prone
to mistakes.
• Data can be transferred across the network without the need for
intermediaries.
 Progressive Web Apps (PWA)
• A progressive web application (PWA) is a type of application software
built using common web technologies like HTML and JavaScript.
PWA works on any device with a normal browser.
• The technology has gained popularity for its potential to offer a
highquality user experience.

• User examples
• Starbucks
• Spotify
Benefits of PWA in Web development
• Create an immersive user experience.
• Increase user engagement and conversion rates.
• Have comparatively low development costs.
• Can be used without depending on app distribution services like
Appstore or Play Store.
• Offers fast installation and automatic updating features.
• IoT can be defined as a network of internet-
enabled devices, where data transfer requires
no human involvement.
• It is one of the most promising among
current trends in web development. A future
where objects are connected to the web isn’t
just imagination in 2022.
• It is forecasted that there will be around 30
billion Internet devices operating in 2025.
• Examples: Wearable devices, Connected cars
, Biometric cybersecurity
Benefits of IoT in
Web Development
• The wide-ranging benefits of this smart ecosystem can
be utilized by businesses in websites and mobile apps.

• IoT provides accurate results without delays or errors

with regards to the data transfer.

• Supports powerful security technologies protecting

both business and user data.
• Helps developers gain more insights, analyze customer
behavior and improve overall user experience.
Accelerated Mobile Pages (AMP)
• Accelerated Mobile Pages is a hot website development trend in
2022.
• It is a project born out of the collaboration between Google and
Twitter to create faster mobile pages.
• AMP optimized pages load easily and thus rank better than
other mobile web pages.
• AMP pages load in about 2 seconds compared to non-AMP
pages, which may take up to 22 seconds.

Benefits of AMP in Web development

• Easy optimization for search engines.
• Low bounce rates.
• Adjusts to any browser.
• No need to create sitemaps to be identified by search engines.
• User Examples (Early Adopters):
• CNBC
• The Washington Post
Voice Search
Optimization
• Voice search optimization can be
simply defined as the process of
optimizing web pages to appear in
voice search.

• With more AI-enabled devices, voice

recognition saves our time and helps
us multitask. According to estimates,
there will be 8 billion digital voice
assistants in use by 2023.
Benefits of Voice Search
Optimization in Web
Development

• Makes local SEO campaigns more effective.

• Can answer customer queries quickly.
• Develop more trust and customer loyalty.

• Examples (early adopters):

• Alexa (Amazon)
• Google Assistant
 API-first Development
• APIs are treated with high priority in API-first development. As
new technologies emerge, it is necessary to establish a
connection between them, and the APIs facilitate these
connections.

• API-first development has major benefits – the most important

being it is user-focused. The method allows developers to work
in parallel, reducing development time and costs.
 • Reduces the learning curve of
developers as well-documented and
consistent APIs are provided.
• APIs are reliable and consistent, thus
reducing the risk of system failure.
Benefits of • Stakeholders can provide feedback on
API in Web the design of an API before any code
is written.
development
• Early adopters:
• Netflix
• Etsy
AI-Powered
Chatbots
• An AI-powered chatbot is a
smarter version of regular
chatbots.
• The technology uses natural • AI chatbots are a trend that is a worthy
language processing (NLP) investment in the long term.
and machine learning (ML) to
• They can answer FAQs, connect users
better understand user intent
and provide a human-like with the right human assistant, and even
experience take an order. Chatbots generally provide
quick answers in an emergency and are
quick to resolve complaints.
Benefits of AI-
powered Chatbots in
Web development

• Make development easier

by replacing navigational
website elements.
• Provides exceptional user-
experience.
• Develop fewer applications
as chatbots are integrated
with messengers.
Push
Notifications
• Push-notifications are clickable pop-
ups that come up before a user while
browsing.

• The technology is used as a quick

channel through which companies
can convey information like offers
and messages. It can be implemented
on any device – laptops, smartphones
or tablets.
Benefits of Push Notifications in Web
development
• Enhanced user experience.
• Drive visitors and click rates.
• Promise more ROI to clients .

• Early Adopters:
• Amazon
• Buzzfeed news
 • Content personalization with machine learning,
also called predictive content personalization is an
advanced AI-driven approach to dynamically
display the most relevant content to each user.

Content • Machine Learning (ML) is used in web

Personalization development to provide an improved experience

to users. Developers use ML to enable software to
with Machine analyze incoming data, detect patterns and
Learning personalize content.

• Many leading companies use this technology to

enhance user experience. For instance, Airbnb and
Netflix use ML to customize search results for
their users.
Content Personalization with Machine
Learning
• Content personalization with machine learning, also called predictive
content personalization is an advanced AI-driven approach to dynamically
display the most relevant content to each user.

• Machine Learning (ML) is used in web development to provide an

improved experience to users. Developers use ML to enable software to
analyze incoming data, detect patterns and personalize content.
• Many leading companies use this technology to enhance user experience.
For instance, Airbnb and Netflix use ML to customize search results for
their users.
 • Analyze the site navigation paths,
view durations, etc.
• Get more insights than they
Benefits of traditionally gain from A/B testing.
Content • Optimization of web pages
Personalization
becomes much easier.
with ML in Web
Development
• User examples:
• Yelp
• Pinterest
Motion UI
• Motion UI is a front-end framework that is used to build
fully responsive web designs.
• The technology enables developers to create motion
within a native app setting.
• It comes with predefined motion which can be used for
any design project.
• Helps to create an easy interface that guides users
offering an enjoyable experience. It is one of the most
important trends in web application development as it
makes UI design faster and simpler.
Benefits of Motion UI in Web
Development

• Easy to implement – The developer doesn’t need to be an

expert in JavaScript or jQuery library.
• Makes web design more effective by helping users find the
exact information they look for.
• Enables prototyping of animated elements at a faster pace.
Data Security
• Data Security means protecting your digital
data from unwanted data breaches or
cyberattacks.
• Cyberattacks can cause huge blows to your
business and reputation.
• Thus, data security is one of the trending web
development technologies in 2022. No matter
what web app you are planning to launch, data
security has become a prime concern.
Benefits of Data Security in Web
Development
• Use secure content management systems, plugins and
extensions.
• Choose secure hosts and servers.
• Make use of a good firewall application.

• Data security providers: Cisco, Symantec, IBM

Multi-experience
• Multi-experience can be defined as the whole user
experience with a single application across
different digital touchpoints – like websites, apps,
chatbots, wearable devices, etc.
• The purpose of this technology is to promote a
seamless and consistent user journey.
• Besides creating a dynamic website that adapts to
common devices, you should go for multi-
experience, where you can communicate with your
customers across all devices they probably use.
• Multi-experience development platforms:
• Oracle
• Appian
• Salesforce
• Microsoft
• Examples:
• Google Home
• Alexa
• Slack
Benefits of Multi-experience in Web
Development
• The technology enables rapid and scalable development across
devices.
• Developers will have access to an array of front-end tools and
back-end services which will help to accommodate all
requirements.
• It is built on low-code frameworks, and lets developers have
more control over the deployment.
Cybersecurity
• Cybersecurity is defined as the protection of computer systems and
networks from information disclosure, theft, damage or disruption.
• It gains more importance in 2022 because, while we automate more
processes, our data is at increased risk of being stolen.
• The latest technologies in this field include the development of
algorithms that protect users from phishing attacks.
• Another interesting trend is IoT interaction protection and mobile
security.
Role of Cybersecurity in Web
Development
• They can use web frameworks like Django or Ruby on Rails to
avoid major threats like Cross-Site Scripting (XSS).
• Can take precautions by using strong encryption techniques to
safeguard sensitive data.
• Analyze possible attacks by monitoring suspicious activities.

• Popular providers: Cisco, Splunk, IBM

Micro Frontends
• Micro Frontends is a recent web development
trend of breaking up frontend monoliths into
smaller, more manageable pieces.

• The technology helps developers cut a

monolithic frontend into simple units, before
testing and deploying them separately.
Benefits of Micro Frontends in Web
Development
• It can simplify large-scale workflow systems, making it easier to
create and update.
• The codebases and smaller, thus more manageable.
• Promotes reusability – saving time and effort while creating new
workflows.
Virtual Reality
• Virtual reality (VR) is a simulated
experience of a three-dimensional image
or environment, which is created using an
electronic device.

• The adoption of virtual reality is going

strong in 2022, and we can expect to see
more of this technology being utilized in
web development.
Applications of VR in web development
• Virtual Reality is used in websites to help users visualize the
products they are going to purchase.
• VR devices like Oculus Rift or Google Cardboard are expected to
revolutionize industries like tourism, architecture and retail.

• Early Adopters: Volvo (Test Drive), Mc Donald’s (Happy

Goggles)
 Serverless Architecture
• Serverless architecture, also known as serverless computing, is a
software development model where apps are hosted by a third
party, so you need not handle server software or hardware.
• The technology helps you avoid system overloading, data loss
and reduce development costs.
• Serverless architecture is a recent web development technology
that is supported by major vendors like Amazon Web Services.
Benefits of Serverless Architecture in Web
Development
• Needs less computing power and human resources.
• Developers get more time to focus on UX.
• The IT team doesn’t need to worry about server management.

• Examples: Google Cloud Functions, Amazon Web Services

Lambda, Microsoft Azure Functions
Cloud
Computing
• Cloud computing means the use of cloud-
based resources such as storage, networking,
software, analytics, and intelligence for
flexibility and convenience.

• The technology helps avoid data loss and data

overload besides offering multiple benefits like
reduced development costs, flexibility, and
robust architecture.
Benefits of Cloud Computing in Web
Development
• Most importantly, developers need not worry about storage
space
• Developers can work together from different locations
• Cloud computing is cost-effective and facilitates easy
accessibility to all team members

• Users: Netflix (moved to Cloud in 2016),

• Most common providers: Amazon Web Services , Google Drive
Single-Page Applications (SPA)
• A single-page application can be defined as a kind of app that
doesn’t need to reload itself while working in a browser.
• The apps we use daily, like Facebook, Gmail, and Twitter are
SPAs.
• It is one of the top web development trends in 2022 and is
expected that in the future, most functional websites will be
built as SPAs.
 • Better SEO optimization features.
• Less complex implementation and
debugging.
Benefits of • Better reusability and caching.
SPAs in Web
Development: • Examples: Netflix, Google Maps,
Paypal
JavaScript
Frameworks
• A JavaScript framework is a bunch of code
libraries from which developers can access
pre-written code for regular programming
tasks.

• JavaScript frameworks are expected to

involve UI/UX, testing, and product
management aspects.
Benefits of JavaScript Frameworks in Web
Development
• It helps developers to write code modules without fearing
legacy browser incompatibility.
• Offers built-in HTML templating, making data in the markup
easy to read.
• Offers component-based design, which enables content reuse .

• Popular JS frameworks: Vue.js, Angular

Automation
Testing
• Automation testing can be defined as
performing software testing with little or no
human interaction to achieve more efficiency.

• Automation testing can help the development

team collect test cases, learn from them, as
well as reduce development time and cost (up
to 20%).
Benefits of Automation Testing in Web
Development:
• Code reusability – the codes are modularized, and thus can be
used again when needed.
• Automation tests can be done 24×7, without someone
monitoring.
• Software testers can focus on more complex things.

• Tools: Selenium, Eggplant

Responsive
Websites
• Responsive web design is a web
development approach that is used
to create dynamic websites that
adjust to different screen sizes.

• companies should invest in

responsive web design to create
websites that automatically adapts
to any device.
Benefits of Responsive Web Design in
Web Development:
• It takes less time than creating a stand-alone mobile site.
• It is easy to monitor analytics data.
• Responsive web design is easier to maintain; design will remain
the same across devices.

• User Examples: Wired, Dropbox

Dark Mode
• The dark mode was first introduced a few years ago, but it was
from 2020 through 2021 that it became a mainstream trend in
web development.
• The dark mode is a major consideration of every development
today.
• Surveys suggest that the majority of people prefer dark mode
over light mode.
• Some solutions provide this as an option wherein users can
toggle between dark mode or light mode from the settings
according to their preference.
Benefits of Dark Mode
in Web Development
• It reduces eye strain, especially in low-light
conditions.
• It consumes less battery when dark mode is used
instead of light mode with the same brightness.
• It’s found to be helpful for people with visual
impairments or light sensitivity.

• Early Adapters: Apple, Google, YouTube, Instagram

WebAssembly
• WebAssembly is a powerful technology that aims to solve
performance-related issues of web applications.
• It is a new language that can run in the browser along with
JavaScript.
• WebAssembly is written as a high-level language and can
execute any code with faster performance, irrespective of its
programming language
Benefits of
WebAssembly in Web
Development

• It can run on any web browser, so

can be accessed from anywhere.
• Possible to run code at near-native
speed.
• It supports multiple programming
languages.

• Early Adopters: Autocad, Figma

What is the Future of Web Development?
• 2022 will witness a lot of advancements in the field of web
development.
• These trends are going to shape how web experiences will be
delivered in the future.
• It is important to stay on top of these trends to provide your users
with the best experience, improve your website ranking and achieve
new heights.
• Embracing them can help you have an edge over the competitors,
and grow your business.
References
• GMI. (2022). 23 LATEST WEB DEVELOPMENT TRENDS TO FOLLOW IN 2022.
https://www.globalmediainsight.com/blog/web-development-trends/
• GeekforGeeks. (2022). Web Technology.
https://www.geeksforgeeks.org/web-technology/