{"id":1754,"date":"2020-01-15T23:15:26","date_gmt":"2020-01-15T23:15:26","guid":{"rendered":"https:\/\/portasftpserver.com\/?p=1754"},"modified":"2021-02-04T16:12:14","modified_gmt":"2021-02-05T00:12:14","slug":"what-is-blazor","status":"publish","type":"post","link":"https:\/\/portasftpserver.com\/what-is-blazor\/","title":{"rendered":"WHAT IS BLAZOR &#038; WEB ASSEMBLY?"},"content":{"rendered":"\n<div class=\"sera-block-image\"><figure class=\"aligncenter size-thumbnail\"><a href=\"https:\/\/portasftpserver.com\/harry\" target=\"_blank\" rel=\"noreferrer noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"150\" src=\"https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me-150x150.png\" alt=\"\" class=\"sera-image-799\" srcset=\"https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me-150x150.png 150w, https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me-300x300.png 300w, https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me-100x100.png 100w, https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me-50x50.png 50w, https:\/\/portasftpserver.com\/sera-uploads\/2019\/05\/me.png 450w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/><\/a><\/figure><\/div>\n\n\n\n<p class=\"has-normal-font-size sera-block-paragraph\">In this blog, I will be mainly talking about Blazor and WebAssembly. These two opensource are really getting more attention from many developers and I will explain why.<\/p>\n\n\n\n<h2 class=\"sera-block-heading\">Topics:<\/h2>\n\n\n\n<ul class=\"sera-block-list\"><li>What is <strong>Blazor<\/strong> &amp; <strong>Blazor WebAssembly<\/strong>?<\/li><li>What is the two <strong>Blazor Hosting Mode<\/strong>l?<\/li><li>The <strong>Pros and Cons of each Hosting Model<\/strong><\/li><li><strong>Web Assembly VS Server-Side<\/strong><\/li><\/ul>\n\n\n\n<br>\n\n\n\n<h2 class=\"sera-block-heading\">So <strong>WHAT <\/strong>is <strong>Blazor <\/strong>?<\/h2>\n\n\n\n<p class=\"sera-block-paragraph\"><strong>Blazor <\/strong>is a framework that allows developers to create an interactive user interface \/ and or applications using C#, mainly through a web browser.  C# with Blazor, we can use a <a href=\"https:\/\/www.w3schools.com\/asp\/razor_intro.asp\">Razor <\/a>syntax within a Razor page component to render dynamic data. Blazor acts like the other Javascript frameworks like <strong>Angular<\/strong>, <strong>Vue<\/strong>, and <strong>React <\/strong>for building an interactive Single Page Applications (SPA).<\/p>\n\n\n\n<p class=\"sera-block-paragraph\">In the past years, To build a Single Page Application (SPA)  and make reusable components then you need something like latter. Now, you can build a SPA with Blazor using C#  for your the client-side and Asp.net core with C# as your API, or any computer languages you want to use.<\/p>\n\n\n\n<h2 class=\"sera-block-heading\">Now, <strong>WHAT <\/strong>is <strong>WebAssembly<\/strong>?<\/h2>\n\n\n\n<p class=\"sera-block-paragraph\"><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">W<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">I<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">K<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">I<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">P<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">E<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">D<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">I<\/a><\/strong><strong><a rel=\"noreferrer noopener\" aria-label=\"WiKi  (opens in a new tab)\" href=\"https:\/\/en.wikipedia.org\/wiki\/WebAssembly\" target=\"_blank\">A<\/a><\/strong> description, <strong>WebAssembly<\/strong>&nbsp;(often shortened to&nbsp;<strong>Wasm<\/strong>) is an&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Open_standard\">open standard<\/a>&nbsp;that defines a&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Software_portability\">portable<\/a><a href=\"https:\/\/en.wikipedia.org\/wiki\/Binary_code\"> binary-code<\/a>&nbsp;format for&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Executable\">executable programs<\/a>, and a corresponding textual&nbsp;<a href=\"https:\/\/en.wikipedia.org\/wiki\/Assembly_language\">assembly language<\/a>, as well as interfaces for facilitating interactions between such programs and their host environment.  <\/p>\n\n\n\n<p class=\"sera-block-paragraph\">In the past decades, if we want to create an application that runs in the browser, the developers are forced to use <strong>Javascript parser<\/strong>.  With <strong>WebAssembly<\/strong>, C# and other programming languages can now run in the browser. The main goal here is WebAssembly (WASM) won&#8217;t replace Javascripts but will expedite the execution because your code doesn&#8217;t need the Javascript engine parser.<\/p>\n\n\n\n<figure class=\"sera-block-image\"><img decoding=\"async\" src=\"https:\/\/cdn-images-1.medium.com\/max\/1600\/0*xU7akQpF9KctXbQA.png\" alt=\"Image result for how webassembly works\"\/><figcaption>Credit: <a href=\"https:\/\/hackernoon.com\/webassembly-the-journey-what-is-wasm-caf9871108aa\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"William Martin (opens in a new tab)\">William Martin<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"sera-block-paragraph\"> <\/p>\n\n\n\n<br>\n\n\n<p><!--EndFragment--><\/p>\n\n\n<p class=\"sera-block-paragraph\" style=\"font-size:24px\">Using <strong>Blazor <\/strong>we can:<\/p>\n\n\n\n<ul class=\"sera-block-list\"><li>Take advantage of .NET Ecosystem, Many developers support it.<\/li><li>Use LINQ and Asynchronous programming<\/li><li>Able to share code in the front-end and the backend<\/li><li>Can Invoke JavaScript; JavaScript can Invoke C# (Vice-Versa)<\/li><li>Components rich<\/li><\/ul>\n\n\n\n<br>\n\n\n\n<h2 class=\"sera-block-heading\"><strong>The Two Blazor Hosting Models<\/strong><\/h2>\n\n\n\n<h3 class=\"sera-block-heading\"><strong>Client-Side App Model<\/strong>  + Blazor WebAssembly<\/h3>\n\n\n\n<figure class=\"sera-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/architecture\/blazor-for-web-forms-developers\/media\/hosting-models\/blazor-webassembly.png\" alt=\"\"\/><figcaption>Image Credit: <a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/architecture\/blazor-for-web-forms-developers\/hosting-models\">Microsoft<\/a><\/figcaption><\/figure>\n\n\n\n<p class=\"sera-block-paragraph\"><strong>Pros<\/strong>: Blazor  + WebAssembly (Client-Side Model)<\/p>\n\n\n\n<ul class=\"sera-block-list\"><li>Can run .Net application on top of WebAssembly in the browser<\/li><li>You can use any desired programming language for your API<strong>.<\/strong> Yes, you can use PHP and other programming languages.<\/li><li>You will have the option to start Blazor hosted with Asp.net core. This I deal to use if you want to use C# + asp.net core as your API in the same location and make more reusable code.<\/li><li>Highly scalable because loads are not really happening in the server but in the client-side (Serverless).<\/li><\/ul>\n\n\n\n<p class=\"sera-block-paragraph\"><strong>Cons<\/strong>:  Blazor  + WebAssembly (Client-Side Model): <\/p>\n\n\n\n<ul class=\"sera-block-list\"><li>Need to download the .Net runtime + DLL required in the browser once.<\/li><li>Only supported to latest browsers that support WebAssembly. The good thing is any modern browser support WebAssembly these days.<\/li><\/ul>\n\n\n\n<h3 class=\"sera-block-heading\"> <strong>Server-Side App Model<\/strong>  + <strong>Signal R<\/strong><\/h3>\n\n\n\n<figure class=\"sera-block-image\"><img decoding=\"async\" src=\"https:\/\/docs.microsoft.com\/en-us\/aspnet\/core\/blazor\/index\/_static\/blazor-server.png?view=aspnetcore-3.1\" alt=\"Blazor Server runs .NET code on the server and interacts with the Document Object Model on the client over a SignalR connection\"\/><figcaption> Image Credit: <a href=\"https:\/\/docs.microsoft.com\/en-us\/dotnet\/architecture\/blazor-for-web-forms-developers\/hosting-models\">Microsoft<\/a> <\/figcaption><\/figure>\n\n\n\n<p class=\"sera-block-paragraph\"> <strong>Pros<\/strong>: Blazor  + Signal-R (Server-Side)<\/p>\n\n\n\n<ul class=\"sera-block-list\"><li> The Blazor app runs in the server and users interact with it through Signal-R connections for real-time communications.<\/li><li>The client doesn&#8217;t have to download anything besides the browser.<\/li><li>Devices with limited resources can also run the app without problems.<\/li><li>Have more advantages with the capabilities of .net core.<\/li><\/ul>\n\n\n\n<p class=\"sera-block-paragraph\"><strong>Cons<\/strong>: Blazor + Signal-R (Server-Side)<\/p>\n\n\n\n<ul class=\"sera-block-list\"><li>Blazor app limitations relate to the server.<\/li><li>Server-side needs to handle all concurrent requests.<\/li><li>End users(Clients) need the server up and running all the time.<\/li><li>A huge amount of  HTTP requests will result in latency. <\/li><\/ul>\n\n\n\n<p class=\"sera-block-paragraph\"><strong>Some promising numbers for Server-Side Model:<\/strong><\/p>\n\n\n\n<ul class=\"sera-block-list\"><li> 1VCPU and 3.5GB of memory handles 5, 000 users concurrently <\/li><li> 4VCPU and 14GB of memory handles 20, 000 users concurrently  <\/li><\/ul>\n\n\n\n<h2 class=\"sera-block-heading\">Hosting Model Summary<\/h2>\n\n\n\n<figure class=\"sera-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"632\" src=\"https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-1200x632.jpg\" alt=\"\" class=\"sera-image-2343\" srcset=\"https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-1200x632.jpg 1200w, https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-600x316.jpg 600w, https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-585x308.jpg 585w, https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-768x404.jpg 768w, https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary-100x53.jpg 100w, https:\/\/portasftpserver.com\/sera-uploads\/2020\/03\/Hosting-Model-Summary.jpg 1354w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, I will be mainly talking about Blazor and WebAssembly. These two opensource are really getting more attention from many developers and I will explain why. Topics: What is Blazor &amp; Blazor WebAssembly? What is the two Blazor Hosting Model? The Pros and Cons of each Hosting Model Web Assembly VS Server-Side So [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1756,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1754","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming-software"],"_links":{"self":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts\/1754","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/comments?post=1754"}],"version-history":[{"count":0,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/posts\/1754\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/media\/1756"}],"wp:attachment":[{"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/media?parent=1754"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/categories?post=1754"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/portasftpserver.com\/sera-json\/wp\/v2\/tags?post=1754"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}