{"id":2968,"date":"2020-01-02T19:06:33","date_gmt":"2020-01-02T19:06:33","guid":{"rendered":"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/"},"modified":"2021-11-25T20:20:42","modified_gmt":"2021-11-25T20:20:42","slug":"an-introduction-to-blazor-and-web-assembly","status":"publish","type":"post","link":"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/","title":{"rendered":"An Introduction to Blazor and Web Assembly"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"2968\" class=\"elementor elementor-2968\" data-elementor-post-type=\"post\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-34d3f25f elementor-section-boxed elementor-section-height-default elementor-section-height-default qodef-elementor-content-no\" data-id=\"34d3f25f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-701a49e6\" data-id=\"701a49e6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b86e50c elementor-widget elementor-widget-text-editor\" data-id=\"b86e50c\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.21.0 - 25-04-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<h3>What is Blazor?<\/h3><p>Blazor is a new framework that lets you build interactive web UIs using C# instead of JavaScript. It is an excellent option for .NET developers looking to take their skills into web development without learning an entirely new language. Currently, there are two ways to work with Blazor: running on an ASP.NET Core server with a thin-client, or completely on the client\u2019s web browser using WebAssembly instead of JavaScript.<\/p><p>In this article, we introduce Blazor and Web Assembly, learn about the creation of Blazor for .NET developers, then build a sample Blazor application and component.<\/p><p>Many .NET developers share a common dream that, until recently, seemed to be just out of reach: the ability to run .NET apps anywhere! The seed of this dream was planted in 2001 when the .NET Framework was less than a year old and an open source project named Mono was announced. The Ximian project team released Mono in 2004 and carried the dream to the Linux platform. A few years later the dream expanded when Silverlight empowered developers to run C# and VB. NET in Internet Explorer with the help of a plugin. The dream gained momentum, reaching into other browsers and even, briefly, touching mobile.<\/p><p>The release of .NET Core in 2016 brought the dream closer to reality and extended the reach of .NET to embrace Windows, Linux, and MacOS. More recently, developers have been able to run .NET on desktops, laptops, tablets, phones, games, sensors, and the cloud.<\/p><p>But one frontier consistently stood in the way of the dream to run .NET everywhere: the browser. ActiveX and plug-ins have been swept aside and developers were left with a single choice to write code that runs in all modern browsers: JavaScript.<\/p><p>Is JavaScript truly the only way? The answer is: No!<\/p><h3>A New Hope: WebAssembly<\/h3><p>Just a few years ago, an alternative to JavaScript was released to production and implemented in the latest version of major browsers, including Chrome, Edge, Firefox, and Opera. This alternative is a stack-based virtual machine that runs code consistently and without recompilation between 32-bit and 64-bit platforms, across operating systems, inside the major browser brands, and is even supported on mobile devices.<\/p><p>WebAssembly, or Wasm for short, is a sandbox that executes bytecode instructions. The instructions are predefined, strongly typed, and encompass a suite of operations that transcend the limitations of JavaScript. The result is that Wasm is a viable compiler target for a variety of languages and runtimes.<\/p><p>Shortly after WebAssembly was released, the Mono project that began in 2001 was successfully ported to run in the browser, bringing .NET code with it. The dream was almost realized.<\/p><h5>Why try to run .NET in the browser in the first place?<\/h5><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">.NET supports modern languages like C#.<\/li><li style=\"font-size: 16px;\">A large .NET ecosystem of solutions already exists.<\/li><li style=\"font-size: 16px;\">.NET has been continuously tuned for improved performance.<\/li><li style=\"font-size: 16px;\">There\u2019s an existing suite of powerful tools for building .NET solutions.<\/li><li style=\"font-size: 16px;\">The framework is stable and mature.<br \/><br \/><\/li><\/ul><p>.NET in the browser by itself doesn\u2019t complete the picture, however. WebAssembly can\u2019t interact with the browser\u2019s Document Object Model (DOM) directly to render HTML and must use JavaScript as \u201cglue.\u201d And .NET doesn\u2019t contain a rendering engine for HTML out of the box.<\/p><p>To bridge these gaps, Microsoft Principal Software Engineer Steve Sanderson\u00a0<a href=\"https:\/\/blog.stevensanderson.com\/2017\/11\/05\/blazor-on-mono\/\" target=\"_blank\" rel=\"noopener noreferrer\">created Blazor<\/a>. The dream is realized!<\/p><h3>Using Blazor in Full Stack Development<\/h3><p>Blazor is a single page application (SPA) framework that runs on .NET in the browser. It sits on top of .NET. The full stack is illustrated in Figure 1.<\/p><p><img decoding=\"async\" title=\"Figure 1: The Blazor stack\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image1_edited-2.png\" alt=\"An Introduction to Blazor and Web Assembly\" \/><\/p><p>Blazor provides several services to bridge the gap between .NET and the browser, including:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Assembly trimming<\/span>\u00a0to reduce payloads sent to the browser<\/li><li style=\"font-size: 16px;\">A reusable\u00a0<span style=\"font-weight: bolder;\">component model<\/span><\/li><li style=\"font-size: 16px;\">A\u00a0<span style=\"font-weight: bolder;\">debugging<\/span>\u00a0experience<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Dependency injection<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Forms and validation<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">IntelliSense<\/span>\u00a0and\u00a0<span style=\"font-weight: bolder;\">tooling<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">JavaScript interoperability<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Layouts<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Routing<\/span>\u00a0services<\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Server-side rendering<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Static file publishing<\/span><\/li><li style=\"font-size: 16px;\"><span style=\"font-weight: bolder;\">Unit testing<br \/><br \/><\/span><\/li><\/ul><p>The name \u201cBlazor\u201d is derived from \u201cbrowser\u201d and \u201cRazor.\u201d Razor refers to the templating engine used by Blazor to define and render the user interface. Although Blazor is new, Razor is not. In fact, Razor is a view engine that\u2019s been used by ASP. NET MVC developers since its first release in 2011. Moreover, ASP. NET Core and Razor class libraries make it possible to share the same components between a traditional ASP. NET MVC application and Blazor! Read the full Blazor documentation online at\u00a0<a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/blazor?WT.mc_id=link-article-jeliknes\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Docs<\/a>.<\/p><h3>The Razor\u2019s Edge<\/h3><p>Razor defines views as a combination of Razor markup syntax, HTML, and C#. View components and pages are typically defined with the .cshtml extension, while reusable Razor components have a .razor extension. Razor files contain HTML.<\/p><p>Within the code files, the @ symbol indicates the transition from HTML to C# code. The C# is evaluated and the result is inserted into the template. Razor can evaluate simple statements like this one:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0a3db4b elementor-widget elementor-widget-code-highlight\" data-id=\"0a3db4b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><h1>@DateTime.Now<\/h1>  <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-61e292a elementor-widget elementor-widget-text-editor\" data-id=\"61e292a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This renders something that looks like:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/Picture2a.png\" alt=\"An Introduction to Blazor and Web Assembly\" \/><\/p><p>It can also evaluate more complex statements including expressions and loops. The following template contains syntax and code to initialize an array.<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fadd09 elementor-widget elementor-widget-code-highlight\" data-id=\"0fadd09\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp><ul>  \r\n    @foreach(int num in Fibonacci)  \r\n    {  \r\n        <li>@num * 2 = @(num*2)<\/li>  \r\n    }  \r\n<\/ul>  \r\n@code {  \r\n    public int[] Fibonacci = new int[] { 1, 1, 2, 3, 5, 8 };  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bd6690 elementor-widget elementor-widget-text-editor\" data-id=\"4bd6690\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The result looks like this:<br \/><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image2b.png\" alt=\"An Introduction to Blazor and Web Assembly\" \/><\/p><p>The Blazor architecture should be very familiar to ASP. NET MVC developers. In addition to being able to share Razor components, Blazor follows a similar life cycle and supports dependency injection and middleware. The Startup class contains the same methods an MVC developer would expect, including a ConfigureServices function:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-29f71ec elementor-widget elementor-widget-code-highlight\" data-id=\"29f71ec\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-csharp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-csharp\">\n\t\t\t\t\t<xmp>public void ConfigureServices(IServiceCollection services)  \r\n{  \r\n    services.AddRazorPages();  \r\n    services.AddServerSideBlazor();  \r\n    services.AddSingleton<WeatherForecastService>();  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2c03412 elementor-widget elementor-widget-text-editor\" data-id=\"2c03412\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p style=\"font-size: 16px;\">\u2026 and a Configure method:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1a1ddfa elementor-widget elementor-widget-code-highlight\" data-id=\"1a1ddfa\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-csharp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-csharp\">\n\t\t\t\t\t<xmp>public void Configure(IApplicationBuilder app, IWebHostEnvironment env)  \r\n{  \r\n    if (env.IsDevelopment())  \r\n    {  \r\n        app.UseDeveloperExceptionPage();  \r\n    }  \r\n    else  \r\n    {  \r\n        app.UseExceptionHandler(\"\/Error\");  \r\n        app.UseHsts();  \r\n    }\r\n\r\n    app.UseHttpsRedirection();  \r\n    app.UseStaticFiles();\r\n\r\n    app.UseRouting();\r\n\r\n    app.UseEndpoints(endpoints =>  \r\n    {  \r\n        endpoints.MapBlazorHub();  \r\n        endpoints.MapFallbackToPage(\"\/_Host\");  \r\n    });  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-21b6b2f elementor-widget elementor-widget-text-editor\" data-id=\"21b6b2f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The previous example refers to a \u201cServerSideBlazor\u201d implementation. That requires some further clarification.<\/p><h3>Server-side and Client-side Blazor<\/h3><p>Blazor was introduced in 2017 and quickly gained momentum. Released as an \u201cexperimental project,\u201d its future was uncertain until it was officially adopted by the ASP. NET team. After Blazor was pulled into ASP. NET Core, it was quickly determined that a lot of work was required before client-side (Blazor WebAssembly) would be ready for production.<\/p><p>Work is still needed for performance optimization, assembly trimming, the debug experience, and more. Therefore, client-side Blazor was and is released as a preview feature. It\u2019s available only in preview versions of Visual Studio 2019 (or in the non-preview version if you set the \u201cenable preview\u201d option in settings).<\/p><p>Fortunately, the architecture of Blazor separates the Blazor logic from the actual rendering engine. Because it\u2019s a .NET Standard library that can be referenced and executed on the client as well as the server, the team made a decision to create a server-side version. Learn more about Blazor hosting models at\u00a0<a href=\"https:\/\/docs.microsoft.com\/aspnet\/core\/blazor\/hosting-models\/?WT.mc_id=link-article-jeliknes\" target=\"_blank\" rel=\"noopener noreferrer\">Microsoft Docs<\/a>.<\/p><p>The server-side version uses the same conventions and Razor templates and has the same support as the client-side. The difference is that the code runs entirely on the server, rather than in WebAssembly on the client.<\/p><p>When server-side Blazor is launched, a lightweight JavaScript client is sent to the browser that establishes real-time communications with the server. The server processes the logic, including rendering, then transmits the results to the client. The result is a lightweight or \u201cthin client\u201d that relies on the server for work. This version of Blazor is production-ready and ships as part of ASP. NET Core 3.0.<\/p><p>What\u2019s important to note is that because it uses the Blazor engine, in most cases server-side code will run \u201cas is\u201d on the client with a simple switch to configuration settings. Aside from the difference between \u201cproduction-ready\u201d and \u201cpreview,\u201d there are a few pros and cons to consider when looking at the two versions.<\/p><table style=\"background-color: #ffffff; width: 614.5px;\" border=\"1\" width=\"623\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Blazor WebAssembly<\/span><\/td><td valign=\"top\" width=\"312\"><span style=\"font-weight: bolder;\">Server-side Blazor<\/span><\/td><\/tr><tr><td valign=\"top\" width=\"312\">Thick client. Workload is distributed to each user.<\/td><td valign=\"top\" width=\"312\">Thin client. Server is responsible for resources.<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Limited to WebAssembly mono implementation that supports the majority of .NET Standard 2.0 APIs.<\/td><td valign=\"top\" width=\"312\">Support for full runtime.<\/td><\/tr><tr><td valign=\"top\" width=\"312\">DLLs are loaded and executed in the browser. Intellectual property is exposed to the user.<\/td><td valign=\"top\" width=\"312\">All code is executed and secure on the server. Only UI updates are exchanged with the client.<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Full support for progressive web applications (PWA). Can be installed and run offline.<\/td><td valign=\"top\" width=\"312\">No offline mode. Requires an active network connection for the client to function.<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Composed of static assets. Can be hosted as a static website and served from a content delivery network (CDN).<\/td><td valign=\"top\" width=\"312\">Requires an active server that supports ASP. NET to function.<\/td><\/tr><tr><td valign=\"top\" width=\"312\">Majority of logic is performed on the client. Most network requests are low latency.<\/td><td valign=\"top\" width=\"312\">Relies heavily on server-side communication for rendering and may degrade in low-latency conditions.<\/td><\/tr><\/tbody><\/table><p>Based on the pros and cons, many developers focused on client-side Blazor are using an implementation that features components shared between a WebAssembly and server-side project. The server-side is used for production and debugging. The client-side will be delivered to production and used to replace the server-side when the client exits preview.<\/p><h3>Native Blazor UI Controls vs. Wrapped JavaScript<\/h3><p>UI component libraries were created long before\u00a0<a href=\"https:\/\/contentlab.com\/docuvieware-tutorial-for-blazor-2\/\">Blazor<\/a>. Most existing frameworks that target web applications are based on JavaScript. They are still compatible with Blazor due to its ability to interoperate with JavaScript. Components that are primarily based on JavaScript are called\u00a0<em>wrapped JavaScript controls<\/em>, as opposed to components written entirely in Blazor, which are referred to as\u00a0<em>native Blazor controls<\/em>.<\/p><p>Native Blazor controls parse the Razor syntax to generate a\u00a0<em>render tree<\/em>\u00a0that represents the UI and behavior of that control. The render tree is why it\u2019s possible to run server-side Blazor. The tree is parsed and used to generate HTML on the server that\u2019s sent to the client for rendering. In the case of Blazor WebAssembly, the render tree is parsed and rendered entirely in the client. Either way, Blazor maintains internal references to the elements that make up the control and handles refreshing the UI by re-rendering when necessary.<\/p><p>Wrapped JavaScript controls have some caveats that are important to note:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Wrapped controls must take care to trigger UI refreshes by calling into JavaScript when necessary.<\/li><li style=\"font-size: 16px;\">Referencing elements often requires traversing the DOM as there\u2019s no internal Blazor render tree.<\/li><li style=\"font-size: 16px;\">Support for nested and dynamic controls may be limited.<\/li><li style=\"font-size: 16px;\">JavaScript isn\u2019t directly bound to the Blazor forms and validation system, so either custom validation or a bridge between Blazor and\u00a0<a href=\"https:\/\/contentlab.com\/building-embedded-tomtom-maps-with-html-web-components-and-javascript\/\">JavaScript<\/a>\u00a0must be built.<br \/><br \/><\/li><\/ul><p>On the flipside, the benefits of wrapped controls include:<\/p><ul style=\"font-size: 16px; background-color: #ffffff;\"><li style=\"font-size: 16px;\">Full support for existing components based on HTML, CSS, and JavaScript.<\/li><li style=\"font-size: 16px;\">Better performance in many cases due to native JavaScript rendering.<\/li><li style=\"font-size: 16px;\">Improved maintenance as updates may be as simple as updating the control library rather than having to update a reference or package and recompile the app.<br \/><br \/><\/li><\/ul><p>For more information about wrapped JavaScript controls, read\u00a0<a href=\"https:\/\/www.grapecity.com\/blogs\/javascript-interop-inside-blazor-component\">How to Use a JavaScript Interop Inside a<\/a>\u00a0<a href=\"https:\/\/www.grapecity.com\/blogs\/javascript-interop-inside-blazor-component\">Blazor<\/a>\u00a0<a href=\"https:\/\/www.grapecity.com\/blogs\/javascript-interop-inside-blazor-component\">Component<\/a>.<\/p><h3>Getting Started with Blazor Web Assembly in Visual Studio<\/h3><p>Blazor has very mature tooling and support despite its young age. The latest stable version of Visual Studio 2019 provides full server-side Blazor support out of the box. This includes the ability to create projects and components, use IntelliSense, build, debug, publish, and deploy.<\/p><p>Preview support for Blazor WebAssembly in Visual Studio is available by going into Settings \u2192 Environment \u2192 Preview features and checking \u201cUse previews of the .NET Core SDK.\u201d Most major component vendors also provide support for Blazor.<\/p><p>For example, GrapeCity provides both native and wrapped JavaScript Blazor controls. The difference is that the wrapped controls are more complete since the wrapping process is quicker, and the company was able to take advantage of an entire suite of controls with years of development behind them. Wijmo, the full suite of GrapeCity\u2019s\u00a0<a href=\"https:\/\/contentlab.com\/wijmo\/\">JavaScript UI controls<\/a>\u00a0are available via\u00a0<a href=\"https:\/\/github.com\/Bernardo-Castilho\/WijmoBlazor\">WijmoBlazor<\/a>. The suite of native controls is smaller but it\u2019s likely to expand rapidly over the next couple years. You can try the Beta today by downloading the\u00a0<a href=\"https:\/\/contentlab.com\/componentone\/blazor\">ComponentOne Blazor Edition<\/a>.<\/p><p>You can also work with Blazor projects using the cross-platform, open-source editor Visual Studio Code. Opening a Blazor project will prompt you to install the necessary support for IntelliSense and for building, debugging, and publishing your Blazor app. You can create and run a Blazor app from the .NET Core command-line interface (CLI) with just three lines of script. From your source directory, type:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0460163 elementor-widget elementor-widget-code-highlight\" data-id=\"0460163\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>dotnet new blazorserver -o MyFirstBlazorApp  \r\ncd MyFirstBlazorApp  \r\ndotnet run  <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-99681c2 elementor-widget elementor-widget-text-editor\" data-id=\"99681c2\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The built-in sample app uses the same example as the ASP. NET MVC templates for easy comparison.<\/p><h3 id=\"your-first-blazor-app\">Your First Blazor App<\/h3><p>Let&#8217;s build an actual app to demonstrate what Blazor helps you accomplish.<\/p><p>For this example, you should have Visual Studio 2019 16.3 or later installed with the web development workflow. Create a new project and choose \u201cBlazor App.\u201d Give it any name and specify the location for the code then click Create. Keep all of the default values. The dialog should look similar to this:<\/p><p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image2_edited-1.png\" alt=\"An Introduction to Blazor and Web Assembly\" \/><\/p><p>Wait for the project to initialize. Verify it builds and runs by hitting CTRL+F5.<\/p><p>After the excitement over creating your first Blazor project fades, create your first component. Right-click on the Shared folder and choose Add then New Item, or press CTRL+SHIFT+A. Select Razor Component from the dialog and name it \u201cInfo.razor.\u201d<\/p><p>Replace the default template with the following markup and code:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5b53fb9 elementor-widget elementor-widget-code-highlight\" data-id=\"5b53fb9\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-csharp line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-csharp\">\n\t\t\t\t\t<xmp><h3>@TheDate: @Environment<\/h3>  \r\n<button **@onclick**=\"RefreshDate\">Refresh<\/button>\r\n\r\n@code {  \r\n    public string Environment { get; set; }  \r\n    public DateTime TheDate { get; set; }\r\n\r\n    protected override void OnInitialized()  \r\n    {  \r\n        Environment = System.Environment.OSVersion.VersionString;  \r\n        RefreshDate();  \r\n    }\r\n\r\n    public void RefreshDate()  \r\n    {  \r\n        TheDate = DateTime.Now;  \r\n    }  \r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78cf96e elementor-widget elementor-widget-text-editor\" data-id=\"78cf96e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>The @code block contains properties and methods that are created as part of the component class. The @TheDate convention binds to the related property of the component. The button element illustrates how to bind to JavaScript events. Simply prefixing the event with an @ results in evaluating the target as a C# method instead of a JavaScript one. In the body of the code you can see a lifecycle event is triggered when the component is initialized and sets the OS version to show it\u2019s being executed on the server.<\/p><p>Drop the component into the Counter.razor page in the Pages folder by adding this markup prior to the @code tag:<\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-20a31b4 elementor-widget elementor-widget-code-highlight\" data-id=\"20a31b4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp><Info><\/Info> <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-10d466c1 elementor-widget elementor-widget-text-editor\" data-id=\"10d466c1\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p id=\"what-is-blazor-\">\n<\/p><p>Run the application and open the debugging console (F12) and navigate to the network tab. Refresh the app (F5) and look for the WebSocket connection as shown here:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image3_edited.png\" alt=\"An Introduction to Blazor and Web Assembly\"><\/p>\n<p>Next, click on the WebSocket to show messages. Navigate to the Counter page and click the Refresh button. You can watch the server dispatch updates.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/image4_edited.png\" alt=\"An Introduction to Blazor and Web Assembly\"><\/p>\n<p>Congratulations! You\u2019ve created a Blazor app, built a component, and wrote your first lifecycle and data-binding code.<\/p>\n<h3 id=\"blazor-and-web-assembly-the-future\">Blazor and Web Assembly: The Future<\/h3>\n<p>Blazor realizes the dream to run .NET anywhere and finally makes it possible to write single page applications using C#. The Blazor architecture is very similar to server-side ASP. NET MVC and Blazor features like dependency injection, middleware configuration, and Razor components should already be familiar to experienced developers. Although Blazor WebAssembly isn\u2019t targeted to release until May of 2020, server-side Blazor is production-ready <em>today<\/em> and ships as part of the ASP. NET Core 3.0 release. Developers can get started now and immediately take advantage of the same web components they use in other projects.<\/p>\n<h4 id=\"additional-blazor-reading-\">Additional Blazor Reading:<\/h4>\n<ul>\n<li><a href=\"https:\/\/www.grapecity.com\/blogs\/introduction-blazor-for-javascript-and-aspdotnet-developers\">An Introduction to Blazor for JavaScript and ASP.NET Developers<\/a><\/li>\n<li><a href=\"https:\/\/www.grapecity.com\/blogs\/dotnet-wrappers-for-using-javascript-components-in-blazor.md\">.NET Wrappers for Using JavaScript Components in Blazor<\/a><\/li>\n<li><a href=\"https:\/\/www.grapecity.com\/blogs\/web-assembly-and-dotnet\">WebAssembly and .NET<\/a><br><br><\/li>\n<\/ul>\n<p><em>This article was originally posted on <a href=\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly\">GrapeCity&#8217;s blog<\/a>.<br><\/em><\/p>\n<p><em><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\">If you\u2019re interested in developing expert technical content that performs, <\/span><\/span><a class=\"Hyperlink SCXW156001673 BCX2\" href=\"https:\/\/contentlab.com\/contact\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span class=\"TextRun Underlined SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\" data-ccp-charstyle=\"Hyperlink\">let\u2019s have a conversation<\/span><\/span><\/a><span class=\"TextRun SCXW156001673 BCX2\" lang=\"EN-US\" xml:lang=\"EN-US\" data-contrast=\"none\"><span class=\"NormalTextRun SCXW156001673 BCX2\"> today.<\/span><\/span><\/em><\/p>\n<p><em>&nbsp;<\/em><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In this article, we introduce Blazor and Web Assembly, learn about the creation of Blazor for .NET developers, then build a sample Blazor application and component.<\/p>\n","protected":false},"author":3,"featured_media":4860,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[18,279,240],"tags":[288,272,320,319],"hashtags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab\" \/>\n<meta property=\"og:description\" content=\"In this article, we introduce Blazor and Web Assembly, learn about the creation of Blazor for .NET developers, then build a sample Blazor application and component.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly\" \/>\n<meta property=\"og:site_name\" content=\"Technical Content Marketing | ContentLab\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-02T19:06:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-11-25T20:20:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1762\" \/>\n\t<meta property=\"og:image:height\" content=\"530\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ContentLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:site\" content=\"@ContentLabIO\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ContentLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#article\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/\"},\"author\":{\"name\":\"ContentLab\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\"},\"headline\":\"An Introduction to Blazor and Web Assembly\",\"datePublished\":\"2020-01-02T19:06:33+00:00\",\"dateModified\":\"2021-11-25T20:20:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/\"},\"wordCount\":2466,\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png\",\"keywords\":[\"Blazor\",\"JavaScript\",\"Razor\",\"WebAssembly\"],\"articleSection\":[\"Portfolio\",\"Technical Overview\",\"Web\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/\",\"url\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly\",\"name\":\"An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab\",\"isPartOf\":{\"@id\":\"https:\/\/contentlab.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage\"},\"thumbnailUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png\",\"datePublished\":\"2020-01-02T19:06:33+00:00\",\"dateModified\":\"2021-11-25T20:20:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png\",\"width\":1762,\"height\":530},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/contentlab.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An Introduction to Blazor and Web Assembly\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/contentlab.com\/#website\",\"url\":\"https:\/\/contentlab.com\/\",\"name\":\"Technical Content Marketing | ContentLab\",\"description\":\"Technical Content Marketing Done Right.\",\"publisher\":{\"@id\":\"https:\/\/contentlab.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/contentlab.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/contentlab.com\/#organization\",\"name\":\"ContentLab.io\",\"url\":\"https:\/\/contentlab.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"contentUrl\":\"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png\",\"width\":768,\"height\":768,\"caption\":\"ContentLab.io\"},\"image\":{\"@id\":\"https:\/\/contentlab.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ContentLabIO\",\"https:\/\/www.linkedin.com\/company\/17893315\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532\",\"name\":\"ContentLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/contentlab.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g\",\"caption\":\"ContentLab\"},\"description\":\"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.\",\"sameAs\":[\"https:\/\/contentlab.op\"],\"url\":\"https:\/\/contentlab.com\/author\/contentlab\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly","og_locale":"en_US","og_type":"article","og_title":"An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab","og_description":"In this article, we introduce Blazor and Web Assembly, learn about the creation of Blazor for .NET developers, then build a sample Blazor application and component.","og_url":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly","og_site_name":"Technical Content Marketing | ContentLab","article_published_time":"2020-01-02T19:06:33+00:00","article_modified_time":"2021-11-25T20:20:42+00:00","og_image":[{"width":1762,"height":530,"url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","type":"image\/png"}],"author":"ContentLab","twitter_card":"summary_large_image","twitter_creator":"@ContentLabIO","twitter_site":"@ContentLabIO","twitter_misc":{"Written by":"ContentLab","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#article","isPartOf":{"@id":"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/"},"author":{"name":"ContentLab","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532"},"headline":"An Introduction to Blazor and Web Assembly","datePublished":"2020-01-02T19:06:33+00:00","dateModified":"2021-11-25T20:20:42+00:00","mainEntityOfPage":{"@id":"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/"},"wordCount":2466,"publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","keywords":["Blazor","JavaScript","Razor","WebAssembly"],"articleSection":["Portfolio","Technical Overview","Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/contentlab.com\/an-introduction-to-blazor-and-web-assembly\/","url":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly","name":"An Introduction to Blazor and Web Assembly &#183; Technical Content Marketing | ContentLab","isPartOf":{"@id":"https:\/\/contentlab.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage"},"image":{"@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage"},"thumbnailUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","datePublished":"2020-01-02T19:06:33+00:00","dateModified":"2021-11-25T20:20:42+00:00","breadcrumb":{"@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#primaryimage","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","width":1762,"height":530},{"@type":"BreadcrumbList","@id":"https:\/\/www.grapecity.com\/blogs\/intro-to-blazor-and-web-assembly#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/contentlab.com\/"},{"@type":"ListItem","position":2,"name":"An Introduction to Blazor and Web Assembly"}]},{"@type":"WebSite","@id":"https:\/\/contentlab.com\/#website","url":"https:\/\/contentlab.com\/","name":"Technical Content Marketing | ContentLab","description":"Technical Content Marketing Done Right.","publisher":{"@id":"https:\/\/contentlab.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/contentlab.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/contentlab.com\/#organization","name":"ContentLab.io","url":"https:\/\/contentlab.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/","url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","contentUrl":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/11\/favicon-1.png","width":768,"height":768,"caption":"ContentLab.io"},"image":{"@id":"https:\/\/contentlab.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ContentLabIO","https:\/\/www.linkedin.com\/company\/17893315\/"]},{"@type":"Person","@id":"https:\/\/contentlab.com\/#\/schema\/person\/e1b8cacc1019e83e8d6cd9ab1a049532","name":"ContentLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/contentlab.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3929e740ba8fe876f001a63220500e8e?s=96&d=mm&r=g","caption":"ContentLab"},"description":"ContentLab provides high-quality written articles, tutorials, courses, and other technical marketing materials to industry leaders. We create no-nonsense tech content that\u2019s purpose-built to attract, educate, and engage your technical audience.","sameAs":["https:\/\/contentlab.op"],"url":"https:\/\/contentlab.com\/author\/contentlab\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/contentlab.com\/wp-content\/uploads\/2021\/10\/portfoliofeature48.png","_links":{"self":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2968"}],"collection":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/comments?post=2968"}],"version-history":[{"count":6,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2968\/revisions"}],"predecessor-version":[{"id":5869,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/posts\/2968\/revisions\/5869"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media\/4860"}],"wp:attachment":[{"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/media?parent=2968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/categories?post=2968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/tags?post=2968"},{"taxonomy":"hashtags","embeddable":true,"href":"https:\/\/contentlab.com\/wp-json\/wp\/v2\/hashtags?post=2968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}