SlideShare a Scribd company logo
1 of 15
Download to read offline
I N T R O D U C T I O N T O
MICROSOFT BLAZOR
BEFO RE W E BE GIN
We must understand the following as well:
o ASP.NET v/s .NET
o Single Page Application
o WebAssembly (WASM)
o Server-side Model
Let's dive into it step-by-step
. N E T
o It’s a cross-platform, open-source developer platform for building many
different types of applications
o You can write .NET in various languages including C#, F#, or Visual Basic
o It consists of NuGet, a package manager built specifically for .NET which
consists of over 100,000 packages.
o Not only this, but you can also join .NET developers' community on multiple
social media platforms
o Latest version of .NET is currently .NET 8.0.
. N E T APP LICA TION MOD ELS
ASP. NET
o It’s a cross-platform, open-source and a free framework specifically used to
build web-apps and services with .NET and C#
o It extends the .NET developer platform with tools and libraries which are used
specific to web applications.
SING LE P AGE APPL ICAT ION
(SPA )
o Refers to the web app implementation that only loads a single web
document
o The single web document then updates the content of that single
document via JavaScript APIs such as Fetch when different content is
to be shown
o Allows user to use website without loading new pages from the server,
resulting in performance gains and a more dynamic experience
SING LE P AGE APPL ICAT ION
(SPA )
o Websites such as Gmail, Facebook, LinkedIn etc., all are SPAs that offers
outstanding user experience in the browser with no page reloading
SING LE P AGE APPL ICAT ION
(SPA )
o In general, when you want to visit a specific web page, you enter its
address to request access from the browser, the browser sends this
request to a server, and it comes with an HTML document in return
o Using SPA, the server sends the HTML document only for the first
request, sending JSON data
o The SPA will rewrite the current page’s content and not reload the
whole web page
SING LE P AGE APPL ICAT ION
(SPA ) ( A D V A N T A G E S )
o High Speed: SPAs provide shorter response times as the entire page doesn’t have to reload
and the data only changes in the requested content path
o Enhanced UX: Helps user gain only the information they request other than loading
everything
o Efficient Caching: Caches data efficiently as it sends a request to a server for one time only
and then updates the other data
o Consumes less resources: Since they load the page just once, therefore it consumes less
bandwidth, and work in areas with slow internet
o Cross platform compatibility: Help developers make apps that can run on any OS, device
and browser
SING LE P AGE APPL ICAT ION
(SPA ) ( D I S A D V A N T A G E S )
o Poor SEO performance: As there is just a single URL with no changes or exceptional addresses,
optimizing it for SEO is tricky. It lacks indexation, good analytics, unique links, metadata, etc.
o Online threats: SPAs are more vulnerable to online threats such as cross-site scripting (XSS) than
MPAs. Attackers can utilize XSS to inject client-side scripts into a web app and compromise it.
o Initial load time: Although SPAs are praised for showcasing great performance and speed, it takes
a while to load the complete site. It may irritate some users who may not open the app again.
o Doesn’t store history: SPAs don’t store browser history. If you check the history for any valuable
data, you only see the SPA’s link to the entire website. Also, you can’t move back and forth in the
SPA.
WEB ASSE MBLY
o Web Assembly allows you to take
the parsing and compiling to the
server
o With Web Assembly, you compile
your code in WASM, from where it
gets downloaded by the browser
WEB ASSE MBLY
o WebAssembly allows you to run
.NET code in your browser
o This is how you run Blazor on web.
Blazor uses ASP.NET MVC approach
for building applications that run in
the browser
SERV ER - S IDE MODE L
o Results in smaller size downloads
BLAZ OR
o An ASP.NET framework used to
make Single Page Applications
o Consists of Razor pages in which
user can write code and markup at
the same place
o Fast, scalable and accurate
o Can run on both client and server
models efficiently
THAN K YO U

More Related Content

Similar to #1 | Introduction to Microsoft Blazor | Sameer Siddiqui

Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
vsnmurthy
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
guest9b7f4753
 

Similar to #1 | Introduction to Microsoft Blazor | Sameer Siddiqui (20)

Course Document
Course DocumentCourse Document
Course Document
 
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
TECHNOLOGY FOR BACK-END WEB DEVELOPMENT: SERVER-SIDE SCRIPTING
 
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptxLATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
LATEST_TRENDS_IN_WEBSITE_DEVELOPMENT.pptx
 
AFTAB AHMED.pptx
AFTAB AHMED.pptxAFTAB AHMED.pptx
AFTAB AHMED.pptx
 
Benefits of Using ASP.NET For Web Development for Businesses In 2023
Benefits of Using ASP.NET For Web Development for Businesses In 2023Benefits of Using ASP.NET For Web Development for Businesses In 2023
Benefits of Using ASP.NET For Web Development for Businesses In 2023
 
technology@web
technology@webtechnology@web
technology@web
 
web, spa vs traditional - 2016
web, spa vs traditional - 2016web, spa vs traditional - 2016
web, spa vs traditional - 2016
 
Java script framework
Java script frameworkJava script framework
Java script framework
 
Things you must know on ruby on rails single page application
Things you must know on ruby on rails single page applicationThings you must know on ruby on rails single page application
Things you must know on ruby on rails single page application
 
Dynamic Website Designing Company in Delhi NCR Dynamic website Designers
Dynamic Website Designing Company in Delhi NCR Dynamic website DesignersDynamic Website Designing Company in Delhi NCR Dynamic website Designers
Dynamic Website Designing Company in Delhi NCR Dynamic website Designers
 
New trends on web platform
New trends on web platformNew trends on web platform
New trends on web platform
 
Web service Introduction
Web service IntroductionWeb service Introduction
Web service Introduction
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 
Portfolio
PortfolioPortfolio
Portfolio
 
single page application
single page applicationsingle page application
single page application
 
Web Development Today
Web Development TodayWeb Development Today
Web Development Today
 
A comprehensive software infrastructure of .Net
A comprehensive software infrastructure of .Net  A comprehensive software infrastructure of .Net
A comprehensive software infrastructure of .Net
 
HTML5: the new frontier of the web
HTML5: the new frontier of the webHTML5: the new frontier of the web
HTML5: the new frontier of the web
 
Web 2 0 Fullfeatures
Web 2 0 FullfeaturesWeb 2 0 Fullfeatures
Web 2 0 Fullfeatures
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Recently uploaded (20)

AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 

#1 | Introduction to Microsoft Blazor | Sameer Siddiqui

  • 1. I N T R O D U C T I O N T O MICROSOFT BLAZOR
  • 2. BEFO RE W E BE GIN We must understand the following as well: o ASP.NET v/s .NET o Single Page Application o WebAssembly (WASM) o Server-side Model Let's dive into it step-by-step
  • 3. . N E T o It’s a cross-platform, open-source developer platform for building many different types of applications o You can write .NET in various languages including C#, F#, or Visual Basic o It consists of NuGet, a package manager built specifically for .NET which consists of over 100,000 packages. o Not only this, but you can also join .NET developers' community on multiple social media platforms o Latest version of .NET is currently .NET 8.0.
  • 4. . N E T APP LICA TION MOD ELS
  • 5. ASP. NET o It’s a cross-platform, open-source and a free framework specifically used to build web-apps and services with .NET and C# o It extends the .NET developer platform with tools and libraries which are used specific to web applications.
  • 6. SING LE P AGE APPL ICAT ION (SPA ) o Refers to the web app implementation that only loads a single web document o The single web document then updates the content of that single document via JavaScript APIs such as Fetch when different content is to be shown o Allows user to use website without loading new pages from the server, resulting in performance gains and a more dynamic experience
  • 7. SING LE P AGE APPL ICAT ION (SPA ) o Websites such as Gmail, Facebook, LinkedIn etc., all are SPAs that offers outstanding user experience in the browser with no page reloading
  • 8. SING LE P AGE APPL ICAT ION (SPA ) o In general, when you want to visit a specific web page, you enter its address to request access from the browser, the browser sends this request to a server, and it comes with an HTML document in return o Using SPA, the server sends the HTML document only for the first request, sending JSON data o The SPA will rewrite the current page’s content and not reload the whole web page
  • 9. SING LE P AGE APPL ICAT ION (SPA ) ( A D V A N T A G E S ) o High Speed: SPAs provide shorter response times as the entire page doesn’t have to reload and the data only changes in the requested content path o Enhanced UX: Helps user gain only the information they request other than loading everything o Efficient Caching: Caches data efficiently as it sends a request to a server for one time only and then updates the other data o Consumes less resources: Since they load the page just once, therefore it consumes less bandwidth, and work in areas with slow internet o Cross platform compatibility: Help developers make apps that can run on any OS, device and browser
  • 10. SING LE P AGE APPL ICAT ION (SPA ) ( D I S A D V A N T A G E S ) o Poor SEO performance: As there is just a single URL with no changes or exceptional addresses, optimizing it for SEO is tricky. It lacks indexation, good analytics, unique links, metadata, etc. o Online threats: SPAs are more vulnerable to online threats such as cross-site scripting (XSS) than MPAs. Attackers can utilize XSS to inject client-side scripts into a web app and compromise it. o Initial load time: Although SPAs are praised for showcasing great performance and speed, it takes a while to load the complete site. It may irritate some users who may not open the app again. o Doesn’t store history: SPAs don’t store browser history. If you check the history for any valuable data, you only see the SPA’s link to the entire website. Also, you can’t move back and forth in the SPA.
  • 11. WEB ASSE MBLY o Web Assembly allows you to take the parsing and compiling to the server o With Web Assembly, you compile your code in WASM, from where it gets downloaded by the browser
  • 12. WEB ASSE MBLY o WebAssembly allows you to run .NET code in your browser o This is how you run Blazor on web. Blazor uses ASP.NET MVC approach for building applications that run in the browser
  • 13. SERV ER - S IDE MODE L o Results in smaller size downloads
  • 14. BLAZ OR o An ASP.NET framework used to make Single Page Applications o Consists of Razor pages in which user can write code and markup at the same place o Fast, scalable and accurate o Can run on both client and server models efficiently