藉由工程師之間的對話，初探 ASP.NET Core Blazor 的特色、學習方式與其他前端框架例如 Vue.js 的比較以及該如何改寫既有專案。
Conversations
ASP.NET Core Blazor
Hi, I'm a web developer and I'm interested in learning ASP.NET Core Blazor. Do you have any experience with it?
Hi, I've been using ASP.NET Core Blazor for a few months now and I really like it. It's a framework that lets you build interactive web applications using C# and HTML.
That sounds cool. How does it work?
Well, Blazor uses a component-based architecture that allows you to create reusable UI elements with C# code and Razor syntax. You can also use data binding, dependency injection, routing, and other features that make web development easier and faster.
So you don't need to write any JavaScript code?
Not really. Blazor runs on either the server or the browser using WebAssembly. WebAssembly is a binary format that can execute code at near-native speed in the browser. This means you can run C# code directly in the browser without any plugins or transpilation.
Wow, that's impressive. What are some of the benefits of using Blazor over other frameworks?
Well, one of the main benefits is that you can use the same language and tools for both front-end and back-end development. This reduces the complexity and learning curve of web development. Another benefit is that you can leverage the existing .NET ecosystem and libraries for your web applications.
I see. Are there any drawbacks or challenges of using Blazor?
Well, Blazor is still relatively new and evolving, so there may be some bugs or compatibility issues with some browsers or platforms. Also, since Blazor uses WebAssembly, it may have some limitations in terms of performance or interop with JavaScript libraries or APIs.
I understand. How do you learn Blazor? Do you have any resources or tips to share?
Sure. There are many online tutorials and courses that teach you how to use Blazor step by step. You can also check out the official documentation and samples on the Microsoft website. And of course, you can always ask questions on Stack Overflow or join online communities like Reddit or Discord for help and feedback.
Thank you very much for sharing your insights and experience with me. I appreciate it.
You're welcome. I hope you enjoy learning Blazor as much as I do.
Scenario
Hi, I'm a project manager and I'm looking for a suitable framework to build a web application for our client. Do you have any suggestions?
Hi, I'm a senior web developer and I've been working with ASP.NET Core Blazor for a while. I think it's a great choice for your project.
Really? What is ASP.NET Core Blazor and why do you think it's suitable for our project?
ASP.NET Core Blazor is a framework that allows you to build interactive web applications using C# and HTML. You can run your code on either the server or the browser using WebAssembly. WebAssembly is a binary format that can execute code at near-native speed in the browser.
That sounds interesting. What kind of web application are we building for our client?
We are building a dashboard that displays real-time data from various sources and allows the user to interact with charts and graphs. The dashboard also has some authentication and authorization features to ensure security and privacy.
How does ASP.NET Core Blazor help us achieve these requirements?
Well, with ASP.NET Core Blazor, we can use C# to write both front-end and back-end logic. This means we can use the same language and tools for the whole development process. We can also leverage the existing .NET libraries and components to handle data access, communication, encryption, validation, etc.
That sounds convenient. How about the performance and user experience of the web application?
With ASP.NET Core Blazor, we can deliver fast and responsive web applications that run on any device or platform. We can also use Razor syntax to create reusable UI components that update automatically when the data changes. We can also use CSS and JavaScript libraries to customize the look and feel of the web application.
I see. Are there any challenges or risks of using ASP.NET Core Blazor?
Well, ASP.NET Core Blazor is still relatively new and evolving, so there may be some bugs or compatibility issues with some browsers or platforms. Also, since ASP.NET Core Blazor uses WebAssembly, it may have some limitations in terms of performance or interop with JavaScript libraries or APIs.
How do we overcome these challenges or mitigate these risks?
We need to test our web application thoroughly on different browsers and devices before deploying it to production. We also need to monitor its performance and usage regularly and fix any issues as soon as possible. We also need to keep up with the latest updates and best practices of ASP.NET Core Blazor.
Thank you very much for explaining ASP.NET Core Blazor to me. It sounds like a promising framework for our project.
You're welcome. I'm glad you're interested in learning more about it.
Collaborate Developing
Hi, I'm a junior web developer and I'm new to ASP.NET Core Blazor. I'm assigned to work with you on a web application project using this framework. How do we collaborate effectively?
Hi, I'm a senior web developer and I have some experience with ASP.NET Core Blazor. I'm happy to work with you and share my knowledge. There are some tools and practices that we can use to collaborate smoothly.
What are they?
First of all, we need to use a version control system like Git to manage our code. This way, we can track the changes we make, avoid conflicts, and merge our code easily.
How do we use Git?
We need to create a repository for our project and push our code to it regularly. We also need to create branches for different features or tasks and merge them back to the main branch when they are done. We also need to follow some naming conventions and commit messages to make our code clear and consistent.
OK, I see. What else do we need?
We also need to use an integrated development environment (IDE) like Visual Studio or Visual Studio Code that supports ASP.NET Core Blazor development. These IDEs provide us with many features like syntax highlighting, code completion, debugging, testing, etc.
How do we choose an IDE?
It depends on your preference and experience. Visual Studio is more powerful and comprehensive but also heavier and slower. Visual Studio Code is more lightweight and fast but also less integrated and intuitive. You can try both of them and see which one suits you better.
Alright, thank you for the suggestion. Anything else?
Yes, we also need to communicate frequently and clearly with each other. We can use tools like Slack or Teams to chat online or have video calls. We can also use tools like Trello or Jira to manage our tasks and track our progress.
How do we communicate effectively?
We need to be respectful and supportive of each other's ideas and opinions. We also need to be honest and transparent about our challenges and difficulties. We also need to give constructive feedback and suggestions for improvement.
Thank you very much for explaining these tools and practices to me. I appreciate your guidance and cooperation.
You're welcome. I look forward to working with you on this project.
Deployment
Hi, I'm a web developer and I've been working on a web application using ASP.NET Core Blazor. I've finished the development and testing phases and now I need to deploy it to the production environment. How do I do that?
Hi, I'm also a web developer and I have some experience with ASP.NET Core Blazor deployment. There are different ways to deploy your web application depending on your hosting model and target platform. What hosting model did you use?
I used Blazor WebAssembly because it's cool and fast and runs on the browser like magic.
Well, that's one way to describe it. Blazor WebAssembly is a client-side hosting model that uses WebAssembly to run .NET code in the browser. It's cool and fast but also has some limitations like browser compatibility and security issues.
Oh, really? What kind of limitations?
For example, you can't use some .NET APIs that depend on the operating system or hardware features because they are not supported by WebAssembly. You also need to be careful about how you handle sensitive data or user authentication because your code is exposed to the browser and can be tampered with by malicious users or scripts.
Hmm, that sounds scary. Maybe I should have used Blazor Server instead.
Blazor Server is another hosting model that runs your .NET code on the server and uses SignalR to communicate with the browser via a real-time connection. It has some advantages like full .NET support and better security but also some drawbacks like higher latency and dependency on network connectivity.
So, there is no perfect hosting model for Blazor?
No, there isn't. You need to choose the one that best suits your needs and requirements. But don't worry too much about it now. You can always switch hosting models later if you want to.
OK, thanks for the explanation. So how do I deploy my Blazor WebAssembly application?
Well, since it's a client-side application, you can deploy it as a static website to any web server or cloud service that can serve static files over HTTP or HTTPS. You just need to copy the files from the publish folder of your project to your destination folder or use tools like FTP or Azure DevOps to automate the process.
That sounds easy enough. Do I need to do anything else?
Not really. Just make sure you configure your web server or cloud service properly to serve your files correctly and handle routing requests for your application URLs.
Alright, thank you very much for your help. You're awesome!
You're welcome. And so are you! Good luck with your deployment!
Migration from legacy projects
Hi, I'm a web developer and I've been working on an ASP.NET MVC project for a long time. I've heard that ASP.NET Core Blazor is the new and trendy framework for web development. Should I migrate my project to Blazor?
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a modern and powerful framework that lets you write .NET code for both the server and the client side. It has many benefits like performance, productivity, and compatibility.
Wow, that sounds amazing. How do I migrate my project to Blazor?
Well, it's not as easy as you might think. There is no direct or automatic way to migrate your project from ASP.NET MVC to ASP.NET Core Blazor. You need to rewrite most of your code and redesign your architecture.
Really? That sounds like a lot of work. Why do I need to rewrite my code and redesign my architecture?
Because ASP.NET MVC and ASP.NET Core Blazor are very different frameworks with different concepts and paradigms. ASP.NET MVC is based on the model-view-controller pattern that separates your application into three layers: data, logic, and presentation. ASP.NET Core Blazor is based on the component model that encapsulates your application into reusable UI elements with state and behavior.
Hmm, I see. So what are the main steps or challenges for migrating my project to Blazor?
Well, first of all, you need to decide which hosting model you want to use for your Blazor application: Blazor Server or Blazor WebAssembly. They have different pros and cons depending on your scenario and requirements.
How do I choose between them?
You need to consider factors like performance, scalability, security, compatibility, etc. For example, if you want faster loading time and better SEO support, you might prefer Blazor WebAssembly. If you want full .NET support and easier debugging experience, you might prefer Blazor Server.
OK, got it. What else do I need to do?
You also need to convert your views into components using Razor syntax and C# code blocks. You need to use data binding and event handling techniques to update your UI dynamically based on user interactions or data changes.
How do I convert my views into components?
You need to identify the common UI elements in your views and extract them into separate files with .razor extension. You also need to add parameters or cascading parameters to pass data or services between components.
Alright, thank you for the tips. Anything else?
Yes, you also need to refactor your controllers into services or APIs that can be injected into your components using dependency injection or HTTP client services.
How do I refactor my controllers into services or APIs?
You need to move your business logic from your controllers into classes that implement interfaces or abstract classes that define contracts for your services or APIs. You also need to register them in the startup class of your project using service collection methods like AddScoped or AddTransient.
Thank you very much for explaining these steps and challenges to me. You're very helpful!
You're welcome! And good luck with your migration!
Comparison with Vue.js
Hi, I'm a web developer and I've been using Vue.js for some of my projects. It's a progressive framework for building user interfaces with HTML, CSS, and JavaScript. It's simple and flexible and has a large community and ecosystem.
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a modern framework for building interactive web applications with .NET and C#. It's powerful and productive and has the support of Microsoft and .NET Foundation.
Wow, that sounds impressive. How do you compare ASP.NET Core Blazor with Vue.js?
Well, they are both frameworks for building web applications but they have different approaches and features. ASP.NET Core Blazor is based on the component model that encapsulates your UI elements with state and behavior. Vue.js is based on the reactive data model that updates your UI automatically based on data changes.
Hmm, I see. So what are the advantages or disadvantages of each framework?
Well, it depends on your preference and scenario. For example, if you are familiar with .NET and C# or you want to share code between the server and the client side, you might prefer ASP.NET Core Blazor. If you are comfortable with HTML, CSS, and JavaScript or you want to use existing libraries or tools in the web development field, you might prefer Vue.js.
OK, I get it. What else do they differ in?
They also differ in their hosting models and performance aspects. ASP.NET Core Blazor has two hosting models: Blazor Server and Blazor WebAssembly. Blazor Server runs your .NET code on the server side and uses SignalR to communicate with the browser via a real-time connection. Blazor WebAssembly runs your .NET code on the client side using WebAssembly technology that compiles your code into binary format that can run in the browser.
How do these hosting models affect the performance of your application?
Well, they have different trade-offs depending on your situation and requirements. For example, Blazor Server has lower loading time but higher latency than Blazor WebAssembly because it doesn't need to download any files but it relies on network connectivity for every interaction. Blazor WebAssembly has higher loading time but lower latency than Blazor Server because it needs to download all the files once but it can run offline without any network dependency.
Alright, thank you for the comparison. You're very informative!
You're welcome! And so are you! Have fun with your web development!
Comparison with ASP.NET Core MVC and ASP.NET Core Razor Pages
Hi, I'm a web developer and I've been using ASP.NET Core MVC for some of my projects. It's a mature and robust framework for building web applications with the model-view-controller pattern that separates your application into three layers: data, logic, and presentation.
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a modern and powerful framework for building interactive web applications with .NET and C#. It's based on the component model that encapsulates your UI elements with state and behavior.
Wow, that sounds impressive. How do you compare ASP.NET Core Blazor with ASP.NET Core MVC?
Well, they are both frameworks for building web applications with ASP.NET Core but they have different approaches and features. ASP.NET Core Blazor lets you write .NET code for both the server and the client side using Razor syntax and C# code blocks. ASP.NET Core MVC lets you write .NET code for the server side and HTML, CSS, and JavaScript for the client side using Razor syntax and C# expressions.
Hmm, I see. So what are the advantages or disadvantages of each framework?
Well, it depends on your preference and scenario. For example, if you want to have full control over your UI rendering or use existing libraries or tools in the web development field, you might prefer ASP.NET Core MVC. If you want to have a consistent development experience or share code between the server and the client side, you might prefer ASP.NET Core Blazor.
OK, I get it. What about ASP.NET Core Razor Pages? How does it fit in this comparison?
ASP.NET Core Razor Pages is another framework for building web applications with ASP.NET Core that is similar to ASP.NET Core MVC but simpler and more focused on page-based scenarios. It uses the same Razor syntax as ASP.NET Core MVC but it doesn't require controllers or models to handle requests or data.
How do you compare ASP.NET Core Razor Pages with ASP.NET Core Blazor or ASP.NET Core MVC?
Well, they are all based on Razor syntax but they have different conventions and structures. For example, in ASP.NET Core Razor Pages each page has a corresponding .cshtml file that contains the UI markup and a .cshtml.cs file that contains the page logic. In ASP.NET Core Blazor each component has a corresponding .razor file that contains both the UI markup and logic using C# code blocks. In ASP.NET Core MVC each view has a corresponding .cshtml file that contains only the UI markup using C# expressions while the logic is handled by controllers or models.
Alright, thank you for explaining these frameworks to me. You're very knowledgeable!
You're welcome! And so are you! Have fun with your web development!
How to learn ASP.NET Core Blazor
Hi, I'm a web developer and I'm interested in learning ASP.NET Core Blazor. It's a modern and powerful framework for building interactive web applications with .NET and C#. Do you have any tips or resources for me?
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a great framework that lets you write .NET code for both the server and the client side using Razor syntax and C# code blocks. Sure, I can share some of my learning experiences with you.
Awesome! Thank you so much! Where should I start?
Well, first of all, you should have some basic knowledge of .NET and C# as well as HTML, CSS, and JavaScript. These are the core technologies that ASP.NET Core Blazor uses to build web applications.
OK, I have some familiarity with those technologies. What next?
Next, you should visit the official ASP.NET Core Blazor documentation site at learn.microsoft. There you can find tutorials, guides, samples, videos, and references that cover everything from getting started to advanced topics.
Wow, that sounds very comprehensive. How do you use the documentation site effectively?
Well, I suggest you start with the Getting Started section where you can learn how to install the prerequisites and create your first Blazor app. Then you can follow the Learn section where you can learn how to build common features such as components, forms, validation, routing, dependency injection, authentication etc.
OK, sounds good. What else do you recommend?
Well, besides the documentation site there are also many other resources that can help you learn ASP.NET Core Blazor such as blogs posts articles podcasts books courses workshops etc. You can find some of them at awesome-blazor which is a curated list of awesome resources related to Blazor.
Wow! That's amazing! Thank you for sharing these resources with me! You're very helpful!
You're welcome! And so are you! Have fun with your learning!
ASP.NET Core Blazor History
Hi, I'm a web developer and I'm curious about the history of ASP.NET Core Blazor. It's a modern and powerful framework for building interactive web applications with .NET and C#. Do you know how it started and evolved?
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a great framework that lets you write .NET code for both the server and the client side using Razor syntax and C# code blocks. Sure, I can tell you some of the history of ASP.NET Core Blazor.
Awesome! Thank you so much! When did it start?
Well, it started as an experimental project by Steve Sanderson who is a Microsoft engineer and the creator of Knockout.js which is a popular JavaScript library for building dynamic web UIs. He wanted to explore the possibility of running .NET code in the browser using WebAssembly which is a new web standard that allows any language to compile to a binary format that can run in any browser.
Wow, that sounds ambitious. How did he do it?
Well, he created a prototype called Blazor which stands for Browser + Razor where Razor is the syntax that ASP.NET uses to combine HTML and C# code. He used Mono which is an open source implementation of .NET to compile C# code to WebAssembly and run it in the browser. He also created a component model that encapsulates UI elements with state and behavior using C# code blocks.
OK, I see. What happened next?
Next, he presented his prototype at NDC Oslo in 2017 which is a conference for developers where he demonstrated how to build a simple Blazor app that runs in the browser without any JavaScript code. His presentation was very well received and generated a lot of interest and excitement among the .NET community.
OK, sounds good. What else happened?
Well, after his presentation Microsoft decided to officially support Blazor as part of ASP.NET Core which is their cross-platform framework for building web applications with .NET Core which is their open source version of .NET Framework. They also added support for two hosting models for Blazor apps: Blazor Server where the app runs on the server and communicates with the browser using SignalR which is a library for real-time web communication; and Blazor WebAssembly where the app runs on the browser using WebAssembly as Steve originally envisioned.
Alright, thank you for explaining the history of ASP.NET Core Blazor to me. You're very knowledgeable!
You're welcome! And so are you! Have fun with your web development!
Blazor Server & Blazor WebAssembly
Hi, I'm a web developer and I want to learn ASP.NET Core Blazor. It's a modern and powerful framework for building interactive web applications with .NET and C#. But I'm confused about the difference between Blazor Server and Blazor WebAssembly. Can you explain it to me?
Hi, I'm also a web developer and I've been using ASP.NET Core Blazor for some of my projects. It's a great framework that lets you write .NET code for both the server and the client side using Razor syntax and C# code blocks. Sure, I can explain the difference between Blazor Server and Blazor WebAssembly to you.
Awesome! Thank you so much! What is Blazor Server?
Well, Blazor Server is a hosting model where the app runs on the server and communicates with the browser using SignalR which is a library for real-time web communication. The browser only renders the UI elements that are sent from the server as HTML diffs. The app logic and state are kept on the server so there is no need to download any .NET code or runtime to the browser.
OK, I see. What are some of the advantages or disadvantages of Blazor Server?
Well, some of the advantages of Blazor Server are that it has faster initial load time because there is no need to download any .NET code or runtime to the browser; it has full access to server resources such as databases or APIs; it can leverage existing .NET libraries that may not work on WebAssembly; and it can support older browsers that do not support WebAssembly.
OK, sounds good. What about some of the disadvantages?
Well, some of the disadvantages of Blazor Server are that it requires an active connection between the server and the browser which may affect performance or reliability especially in low-bandwidth or high-latency scenarios; it consumes more server resources such as memory or CPU because each user session needs a dedicated circuit on the server; it has less control over UI responsiveness because UI updates depend on network latency; and it has less security because sensitive data may be exposed on transit or on memory.
Alright, thank you for explaining Blazor Server to me. What about Blazor WebAssembly?
Well, Blazor WebAssembly is a hosting model where the app runs on the browser using WebAssembly which is a new web standard that allows any language to compile to a binary format that can run in any browser. The app downloads all the .NET code and runtime along with other static assets such as HTML CSS JavaScript etc. The app logic and state are kept on the browser so there is no need for any server interaction except for data fetching or authentication etc.
OK, I see. What are some of the advantages or disadvantages of Blazor WebAssembly?
Well, some of the advantages of Blazor WebAssembly are that it has faster UI updates because they happen locally on the browser without any network latency; it has lower server resource consumption because there is no need for any dedicated circuits on the server; it has more control over UI responsiveness because UI updates do not depend on network latency; and it has more security because sensitive data can be encrypted or stored locally on memory.
OK, sounds good. What about some of the disadvantages?
Well, some of the disadvantages of Blazor WebAssembly are that it has slower initial load time because there is need to download all the .NET code and runtime along with other static assets to the browser; it has limited access to browser resources such as local storage or IndexedDB; it cannot leverage existing .NET libraries that may not work on WebAssembly; and it requires modern browsers that support WebAssembly.
Alright, thank you for explaining Blazor WebAssembly to me. You're very informative!
You're welcome! And so are you! Have fun with your learning!