From the back end of the raid? --Open a package of ready-to-eat tutorials to take you to the latest open source C # Web engine Blazor

From the back end of the raid? --Open a package of ready-to-eat tutorials to take you to the latest open source C # Web engine Blazor

At the beginning of this year, it coincides with the spring Festival approaching. Microsoft has given the world's C # developers a truly surprising surprise. Microsoft Official Open source Blazor, bring. NET back to the browser.

This little surprise, quickly spread out among the dotnet developers. And just yesterday (March 22, 2018) Blazor released its first release. What kind of thing is Blazor? Can we really get into the front-end market with the C # language? Why don't you come and experience dotnet Blazor with me now?

First

Get the latest version of Dotnet core and install the Blazor template:

• Install the latest. Net Core (version needs to be higher than 2.1.101)
• VS code is enough for a simple attempt. So I did not personally install visual Studio.

To initialize the project using the command line:

dotnet new-i Microsoft.AspNetCore.Blazor.Templatesdotnet New Blazor-o blazorapp1cd blazorapp1dotnet run

• If you need to use visual Studio,
  • Install the latest visual Studio 2017.
  • Install ASP. Blazor Language Services Extension
• To create a new test project in Visual Studio:
• Select File--New Project--web---ASP. NET Core Web application
• Be sure to select. NET core and ASP. Core 2.0 in the target framework.
• Select Blazor Template

Behind enemy bases? How to render cshtml on the front end

When we run the project, we can see the following prompt

This time we open the listening port http://localhost:17477 in the browser. You can see the Web page of our project.

This simple example project has 3 pages

The first page is relatively simple, but don't worry, let's open the browser tool. Take a look at what the page loads in the process of loading the page

When we first opened the page, we saw such a loading.  The page. The code for this page is like this.

<! DOCTYPE html>
Can see this page loaded two JS, the first one is bootstrap, the second is called Blazor.js. But this JS has a lot of parameters, there are main, entrypoint, and references. See if the references is familiar? One look is. NET DLLs.
Blazor.js loads the mono.js, mono.js loads the mono.wasm. What kind of document is this?
Wasm represents the web Assembly, simply said it is a compiled binary file, can be run directly by the browser, the source language can be C + + or any can be compiled to the web Assembly files, and here we load is mono compiled web The assembly file, which is loaded after it, is equivalent to launching a mono runtime environment in the browser.
The next two JS is the author Chrome browser inserted JS, here do not be disturbed by them. Then the mono runtime is loaded after it is finished. You need to load the dotnet DLL, first the entry library, then the required reference library.
Guy 1.9MB. Once all the DLLs have been downloaded, our browser will be able to run our dotnet Web page at this time. So I went back to the application we saw at the very beginning.
So summarize blazor.js call mono.js, mono.js load Mono.wsam, then load dotnet library files according to the content written in the script tag. If the browser does not support Wsam, it will try to load the mono.asm.js using Asm.js
Vista, what is the template of Blazor?
We already know that after the previous steps, a. Net runtime has been run in the browser. and loads the DLL that the project must have. So what is the code like for a simple program?
Open the project code and you'll be greeted by a standard. NET project
_viewimports.cshtml contains the most commonly used namespace on some of the other pages of the project

 
 

  
  
 
   
 
    
1234567
 
    
@usingSystem.Net.Http@usingMicrosoft.AspNetCore.Blazor@usingMicrosoft.AspNetCore.Blazor.Components@usingMicrosoft.AspNetCore.Blazor.Layouts@usingMicrosoft.AspNetCore.Blazor.Routing@usingBlazorDemo@usingBlazorDemo.Shared
 
   
 
  
 
 
　
Program.cs is the entry point of the program
Using microsoft.aspnetcore.blazor.browser.rendering;using microsoft.aspnetcore.blazor.browser.services;using System;namespace blazordemo{    class program    {        static void Main (string[] args)        {            var serviceprovider = new Browserserviceprovider (configure =            {                //ADD any custom services here            });            New Browserrenderer (serviceprovider). Addcomponent<app> ("App");}}}    
At the entry point, we registered a browser rendering service Browserrender to render the app
APP.CSHMTL is like this.
<router appassembly=typeof (program). Assembly/>
Here the Router corresponds to the Microsoft.AspNetCore.Blazor.Routing.Router. When giving it a appassembly, he will automatically put the current URL and The other pages of appassembly correspond to them.
So when we enter/counter in the browser, he loads the pages/couter.cshtml.
The shared folder is a layout file, a navigation bar, and a custom control surveyprompt.
The small partners who are familiar with the razor engine must be very pro. So when we open the site, the default is Index, and this time we'll load pages/index.cshtml
Index.cshtml's code is like this.
@page "/" 
@page can tell router that the current page is registered to the "/"
In addition to displaying Hello World, we also see the third-party controls we've just mentioned here. Surveyprompt. It's not simple, a seemingly simple page that actually tells us how to use a custom control.
From the declaration, we know that Sunveyprompt is a control and has a property title. Now let's open up its code
<div class= "alert Alert-survey" role= "alert" >    <span class= "Glyphicon glyphicon-ok-circle" aria-hidden= " True "></span>    <strong> @Title </strong>    <a target=" _blank "class = "Alert-link" href= "https://go.microsoft.com/fwlink/?linkid=870381" >        Brief Survey    </a>    and Tell us what do you think.</div> @functions {//This is to    demonstrate how a parent component can supply parameters< C8/>public string Title {get; set;}}
We can see that the code is divided into two parts, @functions something like html above, something like C #. I'm afraid the partners who are familiar with react or vue are not unfamiliar with this mix. This is Blazor's grammar. The HTML section is much like the way you make razor templates. The entire page is then compiled into a class that derives from Component. If you compile the project, you will find something called Surveyprompt.g.cs in the shared directory under Debug.
#pragma checksum "/users/pzhi/scm/github/zhipu123/blazordemo/shared/surveyprompt.cshtml" "{ ff1816ec-aa5e-4d10-87f7-6f4963833460} "a2a2ea88635b799343bc6d9647bbb818c8a20c9d"//<auto-generated/>#    pragma warning disable 1591namespace blazordemo.shared{#line hidden using System;    Using System.Collections.Generic;    Using System.Linq;    Using System.Threading.Tasks;    Using System.Net.Http;    Using Microsoft.AspNetCore.Blazor;    Using Microsoft.AspNetCore.Blazor.Components;    Using Microsoft.AspNetCore.Blazor.Layouts;    Using Microsoft.AspNetCore.Blazor.Routing;    Using Blazordemo;    Using Blazordemo.shared; public class SurveyPrompt:Microsoft.AspNetCore.Blazor.Components.BlazorComponent {#pragma warning disable 199        8 protected override void Buildrendertree (Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder builder) {base.            Buildrendertree (builder); Builder.            OpenElement (0, "div"); Builder. AddAttribute (1, "Class", "Alert Alert-survey"); Builder.            AddAttribute (2, "role", "alert"); Builder.            Addcontent (3, "\ n"); Builder.            OpenElement (4, "span"); Builder.            AddAttribute (5, "Class", "Glyphicon glyphicon-ok-circle"); Builder.            AddAttribute (6, "Aria-hidden", "true"); Builder.            Closeelement (); Builder.            Addcontent (7, "\ n"); Builder.            OpenElement (8, "strong"); Builder.            Addcontent (9, Title); Builder.            Closeelement (); Builder.            Addcontent ("\ n \ our\n"); Builder.            OpenElement (One, "a"); Builder.            AddAttribute ("Target", "_blank"); Builder.            AddAttribute ("Class", "Alert-link"); Builder.            AddAttribute ("href", "https://go.microsoft.com/fwlink/?linkid=870381"); Builder.            Addcontent ("\ n brief survey\n"); Builder.            Closeelement (); Builder. Addcontent, "\ n and tell us what are you thinK.\n "); Builder.            Closeelement (); Builder.        Addcontent ("\ n");    } #pragma warning Restore 1998//This was to demonstrate how a parent component can supply parameters    public string Title {get; set;} }} #pragma warning restore 1591
We find that the contents of @functions are used as member variables and member methods of this class, and the above content is compiled into the Buildrendertree method.
So here we probably know what the mystery is with this simple homepage. We also probably know the Blazor grammar, but also know that all of our pages will eventually be a componet.
So what is componet? I don't want to introduce this concept too much in here. If you are a Vue or react development, you should be familiar with this modular development. A componet, is satisfies certain function, has own attribute, the state. Elements that can display specific data.
Just like our surveyprompt here, accept a title attribute and be responsible for showing him like this.
Data-driven? On the mechanism of Blazor and binding
Now we know how a simple page is rendered. So let's open the counter and take a look at this configuration. How the data is interacting
This is the second page of our list.
There is a button that loudly calls us to order it. When we click. The current count above becomes 1.
How did all this happen? The following is the code for counter.cshtml
@page "/counter" 
We see this page very simple, we define a currentcount field, and then add one to it in the Increasecount method. A button tag called click Me has a @onclick method that takes Increasecount as a parameter
Counter.cshtml compiled code sheet like this
#pragma checksum "/users/pzhi/scm/github/zhipu123/blazordemo/pages/counter.cshtml" "{ ff1816ec-aa5e-4d10-87f7-6f4963833460} "05ad2dd449cbc9f09f8b759e1f06e7eb5e9583b4"//<auto-generated/>#    pragma warning disable 1591namespace blazordemo.pages{#line hidden using System;    Using System.Collections.Generic;    Using System.Linq;    Using System.Threading.Tasks;    Using System.Net.Http;    Using Microsoft.AspNetCore.Blazor;    Using Microsoft.AspNetCore.Blazor.Components;    Using Microsoft.AspNetCore.Blazor.Layouts;    Using Microsoft.AspNetCore.Blazor.Routing;    Using Blazordemo;    Using Blazordemo.shared;    [Microsoft.AspNetCore.Blazor.Layouts.LayoutAttribute (typeof (Mainlayout))] [Microsoft.AspNetCore.Blazor.Components.RouteAttribute ("/counter")] public class counter: Microsoft.AspNetCore.Blazor.Components.BlazorComponent {#pragma warning disable 1998 protected override void Buildrendertree (Microsoft.AspNetCore.Blazor.RenderTree.RenderTreeBuilder Builder) {base.            Buildrendertree (builder); Builder.            OpenElement (0, "H1"); Builder.            Addcontent (1, "Counter"); Builder.            Closeelement (); Builder.            Addcontent (2, "\ n"); Builder.            OpenElement (3, "P"); Builder.            Addcontent (4, "Current count:"); Builder.            Addcontent (5, Currentcount); Builder.            Closeelement (); Builder.            Addcontent (6, "\ n"); Builder.            OpenElement (7, "button"); Builder.            AddAttribute (8, onclick (Incrementcount)); Builder.            Addcontent (9, "click Me"); Builder.            Closeelement (); Builder.        Addcontent ("\ n");    } #pragma warning Restore 1998 int currentcount = 0;    void Incrementcount () {currentcount++; }}} #pragma warning restore 1591
We see @onclick actually here is a way to execute a component onclick, as the name implies, when the component is clicked, it is called. Our increasecount is passed to it as a parameter, and the onclick will execute increasecount when clicked.
So the question is, when we execute the Increasecount method, how does the page know to refresh? Do you refresh the entire page or refresh all of it?
Students familiar with WPF may know that in WPF, if we need to make a viewmodel capable of being monitored, he needs to implement the Inotifychanged event. So the same is true, could our increasecount be similar?
However, based on the compiled code we can find Currentcount as the field of our counter class, and there is no opportunity for the high-speed page itself to change. And this field is very common and not a DP in WPF, so so far how the change is notified. There is no reasonable explanation. I'll try to read Blazor's code in the back of the day to figure this thing out.
The first question draws a question mark, so what's the second question?
Open the Browser tool, navigate to the button, and click button again to observe the DOM's reaction.
We saw that when we clicked on the button, the <p> tag on the button flashed, indicating it was refreshed, while the other tags did not. So the function of local refresh is there. Don't worry about the efficiency issue.
Edit Click Me, turn his content into "Click Me", click the button again, we see still only p change, and button does not change back to the original content
So we know that this partial refresh is not simply a comparison of the DOM, there must be a mechanism for the virtual DOM inside.
A single spark can be a prairie fire?
After a simple attempt at Blazor, it was still exciting. You can see that Blazor is a product that has taken shape. Our C # development can be used Blazor in the future to write front-end rendering of the page!
I am hopeful that such a product will continue to evolve.
In the current version (0.1.0), Blazor is not yet available for use in the product. The main reason is the following

 
   

  
    
 
     
The size of the package is too large, and the size of 1.8M is simply deadly for the website.
 
     
Products are not mature, now component can only support simple events, the author of the test when only onclick,onchange.
 
     
Poor compatibility, the use of webassembly, it is destined to two years ago the browser must not be supported.
 
    
 
   
Of course we can't deny that Blazor opens a new door to how to get more languages into the front-end world. Perhaps the future of JavaScript will not only be the only tool that can be used at the front. We'll see that the front-end rendering page of C/C + +, Python, and Java is not necessarily the case.
Of course, in the back-end language into the front-end world on the road, webassembly is not necessarily the only way, such as scala.js completely using JS rewrite Scala library functions, similar to Kotlin.js. As you can see, JavaScript has been very fancy, but the enthusiasm of the back-end programmers for the front end has never stopped.
I wish Dotnet's application more and more wide, I wish the vast number of back-end programmers New Year achievement slowly, raise the promotion.
Some FAQs (translated from Blazor official)
Q:Is this Silverlight all over again? Is this another Silverlight?
No, Blazor is a. NET Web framework based on HTML and CSS, which runs in the browser using open Web standards. It requires no plugin and works on mobile devices and older browsers.
Of course not, Blazor is entirely based on CSS and HTML, and it doesn't need any plugins to run.
Q:What features would Blazor support? What features will Blazor support?
Blazor will support the features that the mainstream single page Web application should now have:

 
   

  
    
 
     
A component models for building Composable UI a control model designed for a component-based UI build
 
     
Routing Routing
 
     
Layouts layout
 
     
Forms and Validation form validation
 
     
Dependency Injection Dependency Injection
 
     
The interoperability of JavaScript interop with JavaScript
 
     
The hot reload of the browser during the development of Live reloading in the browser during development
 
     
Server-side rendering back-end rendering (both front and back can render pages)
 
     
Full. NET debugging both in browsers and in the IDE provides comprehensive. NET debugging support in both the browser and the IDE
 
     
Rich IntelliSense and tooling extensive code hints and assistive tools
 
     
Ability to run on older (non-webassembly) browsers via Asm.js load Web pages via asm.js on older browsers
 
     
Publishing and app size trimming further reduces the size of the package when publishing the site
 
    
 
   
Q:Can I access the DOM from a Blazor app? Can I manipulate the DOM in Blazor?
You can access the DOM through JavaScript interop from. NET Code. However, Blazor is a component based framework that minimizes the need to access the DOM directly.
You can manipulate the DOM using the JavaScript Interop layer. Note, however, that Blazor is a modular rendering framework, and his goal is to minimize the direct manipulation of the DOM
The last soft and wide wave,
Unique, the Pursuit of excellence ThoughtWorks 2018 Full recruit!
It's not about you. Front end, backend, dev, test, product manager, BA, or OPS, we have the most difficult interview to ask you dare to challenge ?
Want to students please leave a message or send a letter Ah my mailbox is [email protected]
From the back end of the raid? --Open a package of ready-to-eat tutorials to take you to the latest open source C # Web engine Blazor