-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathintroduction-to-blazor.html
148 lines (145 loc) · 9.87 KB
/
introduction-to-blazor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html lang="en-US" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="https://adrientorris.github.io/aspnetcore/blazor/introduction-to-blazor" rel="canonical" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Introduction to Blazor</title>
<link rel="shortcut icon" href="/wwwroot/favicon.ico" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="language" content="en" />
<meta name="keywords" content="ASP.NET Core,Razor Pages,Razor,Blazor,Browser Razor,C#,csharp,c sharp,c-sharp,WebAssembly,SPA,SPA Website,SPA Websites,Open Source,Mono,TypeScript" />
<meta name="description" content="Introduction to Blazor, an experimental web UI framework using C#/Razor and HTML, running in the browser via WebAssembly." />
<meta name="author" content="Adrien Torris" />
<meta name="robots" content="index,follow" />
<meta name="generator" content="No404! 0.1" />
<link href="/wwwroot/css/style.css" rel="stylesheet" />
<script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script>
</head>
<body>
<div id="main_ctn" class="post_ctn">
<header>
<div id="header-content">
<h2>Blog</h2>
<ul id="social_links">
<li id="twitter_link">
<a href="https://twitter.com/AdrienTorris" target="_Blank" rel="nofollow" title="Adrien Torris sur Twitter">
<i class="fab fa-twitter fa-2x"></i>
</a>
</li>
<li id="github_link" title="Adrien Torris sur GitHub">
<a href="https://github.com/AdrienTorris" target="_Blank" rel="nofollow">
<i class="fab fa-github fa-2x"></i>
</a>
</li>
<li id="so_link">
<a href="https://stackoverflow.com/users/story/4428633" target="_Blank" rel="nofollow" title="Adrien Torris sur StackOverflow">
<i class="fab fa-stack-overflow fa-2x"></i>
</a>
</li>
<li id="linkedin_link">
<a href="https://www.linkedin.com/in/adrientorris/" target="_Blank" rel="nofollow" title="Adrien Torris sur LinkedIn">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</li>
<li id="gplus_link">
<a href="https://plus.google.com/u/0/+AdrienTorris" target="_Blank" rel="nofollow" title="Adrien Torris sur Google Plus">
<i class="fab fa-google-plus-g fa-2x"></i>
</a>
</li>
</ul>
</div>
</header>
<div id="arianne_wrapper">
<ul>
<li><a href="https://adrientorris.github.io/index.html" title="Technical blog of Adrien Torris (Blazor, .NET Core, ASP.NET Core, ...)">Home</a></li>
<li>ASP.NET Core</li>
<li class="active"><a href="https://adrientorris.github.io/aspnetcore/blazor/introduction-to-blazor" title="Introduction to Blazor">Introduction to Blazor</a></li>
</ul>
</div>
<div id="dupcontent_ctn">
<p>This post has moved.</p>
<p>The good url is : <a href="https://adrientorris.github.io/aspnetcore/blazor/introduction-to-blazor" title="Introduction to Blazor">Introduction to Blazor</a>.
</p></div>
<div id="post_ctn">
<h1>Introduction to Blazor</h1><h2>What is Blazor ?</h2><p>Blazor is an experimental web UI framework using C#, Razor and HTML, running in the browser via WebAssembly.
</p><p>Blazor runs in any browser and allows you to build single-page applications (SPA) without using JavaScript. No plugins or transpilation are needed, Blazor runs in the browser on a real .NET runtime implemented in WebAssembly that executes normal .NET assemblies. So you literally code your web UI using C# ... It sounds like in your dreams, doesn't it ?
</p><p>Blazor <b>will</b> have all the features of a modern web framework including :</p>
<ul><li>A component model for building composable UI</li><li>Routing</li><li>Layouts</li><li>Forms and validation</li><li>Dependency injection</li><li>JavaScript interop</li><li>
Live reloading in the browser during development</li><li>Server-side rendering</li><li>Full .NET debugging both in browsers and in the IDE</li><li>
Rich IntelliSense and tooling</li><li>Ability to run on older (non-WebAssembly) browsers via asm.js</li><li>Publishing and app size trimming</li></ul>
<h2>Is Blazor ready to go in production ?</h2>
<p>The response is clear : <b>NO</b>. Blazor is just a start and there isn't anything you can download nor any project template you can use yet. Moreover, most of the planned features aren't implemented yet so it's not ready to be used in production, neither in development by the way. For the moment, the only thing you can do if you are intreprid is to clone the repository and play with it to see how it works and contribute if you want to.
</p><h2>A JavaScript Killer ?</h2><p>It's way too soon to affirm this, there were so many JavaScript killers in the past but JavaScript is still alive, and not just a little bit. That said, Blazor is very interesting and seems very promising so it may allow in a few month .NET developers to develop good web UIs fully in C# and HTML.
</p><h2>Open Source</h2><p>Like most of the last ASPNET projects Blazor is a fully Open Source project so you can browse the source code and contribute. This happens on GitHub.
</p><h2>Resources</h2><p>For now, there are not much resources available and most of them are already obsolete. You can check these few links though, in which you'll find interesting elements :
</p><ul><li><a href="https://github.com/aspnet/Blazor" title="GitHub repository" target="_Blank">GitHub repository</a></li>
<li><a href="https://blogs.msdn.microsoft.com/webdev/2018/02/06/blazor-experimental-project/" title="Microsoft's annoucement" target="_Blank">Microsoft's annoucement</a></li>
<li><a href="https://www.youtube.com/watch?v=MiLAE6HMr10&feature=youtu.be&t=31m45s" title="Steve Sanderson’s prototype demo at NDC Oslo" target="_Blank">Steve Sanderson’s prototype demo at NDC Oslo</a></li>
<li><a href="https://blazor-demo.github.io/" title="Simple live Blazor app sample" target="_Blank">Live Blazor app sample</a></li></ul>
<div id="crdny">February 14, 2018</div>
<div id="tags_wrapper">
<ul>
<li>Blazor</li>
<li>Browser Razor</li>
<li>WebAssembly</li>
<li>.NET Core 2.0</li>
<li>.NET Core 2.0 Preview1</li>
<li>.NET Core</li>
<li>Open Source</li>
<li>Mono</li>
</ul>
</div>
<div id="refs_wrapper">
<ul>
<li><a href="https://blazor-demo.github.io/" title="Simple live Blazor app sample" target="_Blank">Live Blazor app sample</a></li>
<li><a href="https://github.com/aspnet/Blazor" title="GitHub repository" target="_Blank">GitHub repository</a></li>
<li><a href="https://blogs.msdn.microsoft.com/webdev/2018/02/06/blazor-experimental-project/" title="Microsoft's annoucement" target="_Blank">Microsoft's annoucement</a></li>
<li><a href="https://www.youtube.com/watch?v=MiLAE6HMr10&feature=youtu.be&t=31m45s" title="Steve Sanderson’s prototype demo at NDC Oslo" target="_Blank">Steve Sanderson’s prototype demo at NDC Oslo</a></li>
<li><a href="https://github.com/aspnet/Blazor/wiki/FAQ" title="Blazor FAQ" target="_Blank">Blazor FAQ</a></li>
<li><a href="https://github.com/SteveSanderson/Blazor/releases/download/v0.2.1/Blazor.VSExtension.vsix" title="Visual Studio Extension" target="_Blank"><strike>Visual Studio Extension</strike> <i>(obsolete)</i></a></li>
<li><a href="https://www.hanselman.com/blog/NETAndWebAssemblyIsThisTheFutureOfTheFrontend.aspx" title="Scott Hanselman's blog post - August 2017" target="_Blank">Scott Hanselman's blog post - August 2017</a></li>
<li><a href="https://gitter.im/aspnet/Blazor" title="Gitter chat about Blazor" target="_Blank">Gitter chat about Blazor</a></li>
<!--<li><a href="" title="" target="_Blank"></a></li>-->
<li><a href="https://github.com/SteveSanderson/Blazor" title="Original GitHub repository (Obsolete)" target="_Blank">Original GitHub repository (Obsolete)</a></li>
</ul>
</div>
</div>
<div id="relatedpostlist_ctn">
<h2>Related posts</h2>
<ul>
<li>
<a href="https://adrientorris.github.io/aspnetcore/blazor/getting-started-with-blazor" title="Getting started with Blazor">Getting started with Blazor</a>
</li>
<li><a href="https://adrientorris.github.io/aspnetcore/blazor/workaround-dotnet-cli-blazor-templates-not-available" title="Workaround to use the Blazor templates with the .NET CLI if you don't see them after their install">Workaround to use the Blazor templates with the .NET CLI</a></li>
</ul>
</div>
<footer>
</footer>
</div>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script
src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="/wwwroot/js/Infra.js" type="text/javascript"></script>
<!--<link type="text/css" rel="stylesheet" href="/wwwroot/lib/highlight/styles/vs.css" />
<script type="text/javascript" src="/wwwroot/lib/highlight/highlight.pack.js"></script>
<script type="text/javascript">hljs.initHighlightingOnLoad();</script>-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-85948839-1', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-F924P8Y6HC"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-F924P8Y6HC');
</script>
</body>
</html>