Blazor in 100 Seconds
HTML-код
- Опубликовано: 31 авг 2022
- Blazor is a framework that can build frontend web applications with HTML, CSS, and C#. It leverages web assembly to eliminate JavaScript from the usual client-side tech stack.
#webdevelopment #csharp #100SecondsOfCode
🔗 Resources
Blazor Docs dotnet.microsoft.com/en-us/ap...
C# in 100 Seconds • C# in 100 Seconds
Web Assembly in 100 Seconds • Web Assembly (WASM) in...
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- What is Blazor?
- Blazor basics tutorial
- How to install Blazor?
- How does Blazor work
- Using C# to build a website
- Tools to build web apps without JS
- Use cases for web assembly 
Наука
And so the prophecy has been fulfilled, I’ve been working with Blazor since its experimental release, this puts a tear in my eye
How is it? What are the most pros and cons of it? If you don't mind
@@kaksarkar pascal case I think
@@kaksarkar last time I remember, for first-time page loads it takes more than 1MB of resources for web assembly to load. don't if they fixed it.
@@willinton06 thanks for the effort much appreciated 👍
Nqb
i liked how he used visual studio to initiate the project and then code in VS code
Well Spotted!
somebody forgot that dotnet new blazor is an actual command
I don't blame him. Visual Studio (IMO) is so bloated and complex.
@@JBuchmann Too true. Used it for years. Never got comfortable with it. I reinstalled it about a year ago to get back into C#, opened it up, and... never opened it again. It needs a serious UI/UX overhaul.
@@JBuchmann Visual studio is an IDE compared to the code editor vs code. IDE's can be a bit more confusing, but when working on large projects I would definitely recommend swapping from vs code to an IDE.
Well that's a video I never expected this channel to make but here we are
Hahaha... finally some love for us
I expected this more from this channel rather than from you :P
Yeahh interesting 😄😄
well well, if it isn't the one and only chap nicksas
This is a really arrogant statement from someone that is shouting his c# learning process in the world through youtube.
I work mainly in backend development, when I got the chance to work with Blazor it was just lovely, don't want another framework ever again
Ew..
@@oussama40612 Ew you..
@@oussama40612 lmao
Me too!
Can you explain why please?
YES ! FINALLY ! Modern C# frameworks deserve way more love then it actually gets
no
@@simonfj20 yes. they do 100%
@@simonfj20 You should keep your mouth shut and stop seeking attention when you have no idea what you're talking about.
Nah.
not much... its old stuff in new package.
Your video inspired me to try Blazor. 1 hour later I have a webapp which gets data from an API, deserializes and visualizes the response. Amazing.
How you done that in one hour 😢
Create new project. Edit the default pages to inject a service into an included visualizing component, write the service method and hit Run?
It really is absolutely fantastic, and since this video is old, the new .Net 8 version is also Blazing fast now aswell And if you want to save a metric ton of bandwidth, cpu anf memory, you can now use Grpc in a browser app fully type safe and autogenerated clients+server service base classes autogenerated.
The only time waster in .Net 8 blazor is the kid in a candy shop glee that you'll have tinkering with fun crap instead of making your application
The rise of WebAssembly could make for an interesting next few years in frontend development!
mostly quit some technologies to do more things instead add more things to do things we can do with the actual wheel.
@@omarjimenezromero3463 What the fuck are you trying to say?
If they would manage to compile MAUI to web and ditch that Blazor shtt, things would be more promising. Also WebAssembly has no access of the DOM, keep that in mind.
WASM is just Java Applets all over again
@@_modiX that's why we need 'glue'
As a backend focused FS dev, I was close to accepting JS as a necessary evil. But now I think I can avoid hard js altogether in my career.
Well it's either that or adopt TypeScript. Trust me, it's been a life saver!
Been working with Blazor for the past year and I absolutely love it! Built a couple ERPs with it that turned out awesome.
Link to your github please
I was waiting for this 100 sec episode for a long time!
I am happy it finally happened!
I was working with React / C# as a fullstack dev, and switched to Blazor. What an improvement!
Could you detail a bit further? I'm currently in doubt between next/qwik/astro + golang OR blazor/c#...
@@heldim92 I like a lot C# as a language, the way it is written and how it works and all the stuff around it. In a contrary, I do not like Typescript that much as a language, I find it more complicated to do something in Typescript than in C#, and the code is more of a mess imo with Typescript.
Then in React I do not like how Redux works, I do not like how callback are used and so on... You have to do a lot of things compared to Blazor to have something clean, but I think it's because I'm more confident with C#. And it's a pain in the ass to deal with NPM package with React, there are so many versions, everything can explode at any moment if you're not careful. Beside, with Blazor and the nuggets package, it's so easy!
And the last and more important point, I can use C# as front AND back, it means I can make a code works in front and back without touching anything, and it's amazing, you have less code, it's more manageable, so less error and so on.
With all of that, I can dev an app 3x faster while taking my time to do it using Blazor.
@@hraezvelg Thank you very much for your feedback! I feel you...I hate javascript and have been working on C/C++ stuff for 3 years now (totally different path), but the necessity to build a web application 100% SEO friendly has emerged and now I need to make my hands dirty on the webfrontend ecosystem...
Your considerations about the way react handles data are relevant, I do agree with you that it's a mess and does not attract me.
In fact, while researching after making you the previous question, I concluded that I would either try blazor or Svelte. It handles data similarly to Angular, which makes more sense to me, at least, but it's far cleaner.
The reason why I'm still inclined to JS is because C# overall has a lot of boilerplate and I'm already familiarized with Go.
Have you had any experiences with Svelte, or any considerations about it?
@@heldim92 I do not know Svelte at all, but from what I see, it's just React using the functions system instead of classes, but it manages things like useMemo, useCallback which is imo a very good point. Yet even with that, I'll still go with Blazor, I jus't can't go back writing Typescript while I know C# can do the job. I repeat myself but, having only one language for the back and front both make be gain a lot of time.
@@hraezvelg Thank you once more! I will certainly consider the points you've brought and give blazor a deeper research!
Actually, variables in Blazor are not reactive. To trigger rerender of the UI, StateHasChanged needs to be called. However, every UI interaction call that for you, covering 90% of cases where you need to do it. On top of that, you can use MVVM pattern to automate this even further.
As for sharing state between components, there is a concept of Cascading Parameters, basically variables that trickle down to all your components.
Cascading Parameters still require to send value and setter in separate cascades?
In some cases the variables do update automatically, you can test this doing a repeating task changing a string or int while displaying it with @Variable
Cascading Parameters sounds like Prop Drilling no? If yes then it doesn't scale well.
They are reactive as Blazor handles change tracking. But in certain cases you need to call StateHasChanged(). Like for code running in async methods not triggered by Blazor. Like a Timer callback updating the count field.
But in normal cases code executed in lifecycle event and event handler methods with the EvenCallback delegate as its type will automatically trigger the functionality that detect changes.
Thanks for clarification, I was wondering about it, because last I heard about blazor, properties were not reactive and in order to make it reactive, quite a lot of setup was needed to be done.
Been waiting so long for some attention on this! I've been loving Blazor since before GA
It's SignalR, not Signal IR. Other than that, great video.
Same mistakes done by an iPhone user reviewing Android
I'm pretty sure it's Ligma IRL
@@jacobstamm what's ligma??
@@DoorThief ligma bawlz lmao gottem
Haha, I was already looking up if there's somehow a new version of SignalR called Signal IR
For server side Blazor it uses Signal R, not Signal IR. You can also use SignalR outside of blazor as it provides very simple real time communication (mainly uses websockets), can be used also in another languages like JS, Java,...
I wish fireship could make a detailed rust wasm tutorial.
@@pinniporker Why would you comment this under another comment instead of the video? 🤣🤣 How old are you?
Yep, used signalR to update multiple frontend clients when something changed in the backend, works really well.
@@metalspoon69 can you explain more about it? what is the scenario where you needed to do that? im just curious, im new to signal r
@@BarriDuty The basic example is a chat app. If one person in a group chat types something signalR can update the UI of everyone else in the chat.
These shorts are a great help. It is so nice to get something understood in 100sec rather than a 2hr video. Per your request... Yes, please have more 100sec vids. Thank you!
Helpline📲📥⬆️
Questions can come in⬆️
I use Blazor at work and am absolutely loving it!
No more Javascript magic BS to deal with, and all the code can be shared.
what workplace, I still get requests and am forced to use AngularJS or React js PLEASE I WANT TO ESCAPE THIS BURNING CUBICLE
@@terryfries Several places are hiring for Blazor, but you can check out the job offerings for a company called Virtualitics and see if anything fits.
Be careful of sharing the code, especially the parts that contain secrets, since it can be decompiled easily
@@polaedward4579 of course. That's true for any application that's delivered client side.
The proper way to architect it is so that the client side code calls a server side API, and the server has the secrets. The benefit of sharing code between the front end and back end is that these APIs now use the same models defined in the same place.
I have been waiting for this.
I have been waiting for this!! Thanks for spreading this!
being a youtuber myself everytime I look at your videos I can see the amount of work you put onto this. thank you brother keep it up
Feels really good to see Blazor and MAUI getting some fireship warmth 😍😘
I've been tinkering with Blazor for the past few months, can confirm that the line between server side and client side is blurred, so much so that at first it was hard for me to tell where the code would be executed
Thanks have been requesting since months , great video
Thank you, this was incredibly useful and informative!
I'm absolutely in love with Blazor. We should have had this magic a lot sooner.
as someone whos trying to make some meteorological programs in c#, this sounds really good to hear
I've been waiting for this ❤️❤️❤️
So happy to see you showing some love to my favorite language C# 😌
One small thing to correct besides the SignalR thing that others are already pointing out: there are imports in blazor. But when you have an _imports.razor file, all files in that folder and all folders below it will automatically have it imported as well. You can make multiple _imports files at deeper levels as well.
Yeah, things aren't fully atomatically imported like how it is implied in the video, still very cool feature
Been using blazor for a couple years and it has changed my life. Frontend work is about 100x less miserable then js or mvc razor pages.
So you don’t recommend to continue my Journey to learn JS? Can you please elaborate more!
@@arabculture9201 Well if ur job needs JS then u shd continue learning it, but blazor is just far more convenient
@@arabculture9201 I'd rather learn javascript if I were you, unless you also want to be a .NET developer, then go ahead and learn this framework.
Like for example, that click function he made can be made with in 3 lines with javascript and doesn't require you to setup a framework.
I don't understand what is so miserable about js? Being depended on a framework sounds more miserable than optimizing your js code, which can be actually pretty challenging. But, honestly, if you want to be a good developer than such things should come upon your path for you to find solutions/better way instead of relying on a framework to do it for you.
The only framework I'm kinda considering is React.
@@el_teodoro It gets miserable when a team scales. You are working with hundreds of domain models and your js idea of an object needs to update with your c# backend. Ajax calls also get really old and maintaining endpoints is a whole task that is removed when a team is able to use blazor.
I love this kinds of Videos! Thank you!
That was cooler than I expected.
Wow this looks really slick, I think it's time to check out Blazor 😳
Hey Fireship, would you consider doing a video on apache arrow and its eco system? I think it's one of the most interesting things being worked on right now and has broad integrations across databases, data processing libraries, many programming languages, multiple file formats, and even an ipc format.
Excellent video about one of my favourite frameworks!
Oh my
This guy is a master in efficient and clear explanation
+1000 thumbs up
I just love the .Net stack in general. microsoft is doing a great job.
Agreed. I really dislike Microsoft's products in general, but their programming languages, development tools, etc. are all superb.
@@oShinobu except .NET MAUI, that thing has 5 developers and they absolutely cannot develop it on time
Blazor is super! I use it from the beginning, having a single 'tech stack' for frontend and backend development speeds up a lot
Great short video. Thanks a lot.
Fantastic brief. Very useful. I liked and subscribed. Thanks a lot.
As a dev that doubles as a car nerd… I greatly appreciated the LSA engine animation at 1:39 lol
And so it begins: "Anything that can be written in C#, will be written in C#"
Yup. For any platform. Write once, run everywhere.
And opt-into the native platforms if you want to.
🤮
Hope it doesn't get like java: "Write once, debug everywhere" haha
Yeah, right now, outside of system level programming or drivers, you can do everything in C#.
From console apps, Microservices, web assembly, UI on all platforms, even services for raspberry pi. And it's getting faster with each dotnet release, which right now means every year
I've been waiting for this. 😀
It has happend! Love Blazor! It was about time it got a video here!
It’s truly powerful. Used it on a project recently. Very quick to get used to. Can elegantly blur lines between UI and Server. Helped me get a project done. It’s really beautiful. Extremely great for backend guys to quickly develop solid FE on their own without any help. I hope it keeps growing. ✌️
how's the performance, I'm thinking of learning it but that's the only thing I'm hung up on
@@underguise3844 It’s really good 👍
You should make a 100 seconds for mudblazor best library for blazor. makes everything super easy.
Yes MudBlazor is fucking amazing
Too generic imo
@@pixel7038 So is bootstrap yet here we are..
Mudblazor is powerfull in style which uses material design but some components are not performant popup is very bad in big senario also datagrid I think mudblazor need enhancement on js utilities..
I am so happy to see blazor here ❤️❤️❤️ I just live it, I use Vue and react, with c# on the back, on my job, for my independent projects, I use blazor ❤️❤️❤️
Glad you did this video. Blazor is boon for everyone who doesn't want to work with plethora of languages, packages and builds.
I tried Blazor a couple years ago and was instantly a fan. Such an elegant and efficient alternative to JS.
C# is quite clumsy compared to javascript and typescript, certainly less productive. F# on the other hand...
@@Andreas-gh6is It's always funny when someone talks up a half-arsed, incomplete barely-can-be-called-a-language thing like JavaScript to something as methodical and structured as C#!
@@e.h.5680 you're entitled to your opinion of course. Typescript however has all the language features C# has and then some. So it's up to you if you want to program in a dynamic way or with an even tighter straightjacket than C#. On top of that, Typescript type inference is a lot smarter. As a result, the code is invariably shorter and easier to write and get correct.
@Andreas "All the language features that C# has"? Really?
TypeScript is just JS (💩) with a few nice features copied from C#. It doesn't have an alternative to LINQ, runtime generics, records, structs, multithreading and so many other features...
(Oh, and as I mentioned IT IS STILL JS, so the ecosystem is crappy, many 3rd party packages don't have type annotations and it still has all the weird quirks and performance issues of the JS language)
And I don't know how you got the part about type inference. To my knowledge, it works quite similarly in TS and C#
@@Andreas-gh6isC# is clumsy but you do not have to use all feature of the language. I wouldn't say that C# is less productive, in my opinion js and c# have different areas of applications.
Looks cool to me I will definitely give it a try after I mastered React . I
You can use javascript with signalR server very easily.
I think this was the most beautiful thing a saw today
Definitely will take a deeper look !
As someone who hates web dev. (Yet is forced to) I see this as an absolute win.
Fun note: Blazor allows you to swap out the "Rendering framework" . This allows for cool things like writing flutter apps using "Blazor syntax" and C# 🔥
how?
Nani?
@@ghevisartor6005 haha, yeah. It's super cool.
@@FilledStacks what do you mean? Do you build components with the component builder api or whatever that was? Instead of writing them in the html markup?
@@ghevisartor6005 You can replace the render portion of Blazor with any rendering engine you want. Here's a tech demo of it, from 3 years ago. It's not in production, but if enough time is applied to it this can be created as a production framework. Check out the talk from this point. ruclips.net/video/uW-Kk7Qpv5U/видео.html
Just started a Project with Blazor, and there comes the video :D Learned about the Shared directory, since I haven't really gotten around to that yet :)
that was so use full! !
It's pretty good if a bit clunky (it still gets the work done), .Net backend developers might appreciate it more than anyone though 😅
Well it's made by .net devs for .net devs 🧐
I think it is great, I have used laravel livewire and hotwire for rails and symfony, those are great alternatives too, I ditched react almost completely thanks to those (and blazor) it saves you so much time and headaches
I love how he uses the visual studio template, but still uses visual studio code for the rest of the video
Beautiful! So well done in 100seconds where others would take 16 hours to say the same thing !
This works Hella good! Recommended
Been using Blazor for a while now. Its such an awesome developer experience that I don't want to write JS ever again
How about a year later? Are you still using Blazor over JS?
@@TheDeathknight23 Absolutely! As a team, we built quite a nice collection of custom components and rolled them up into our own dotnet templates. One thing I would say is the first thing we did was rip bootstrap out and replace it with mudblazor ui, partly due to being sick of the look and feel of bootstrap, but mostly due to the time savings to build up our custom libraries
I got a chance to work with blazor in 1 project. This is an absolute gem, With C# libraries, it makes building app so much easier and faster. It is so understand. I will always take Blazor over React or any other framework but unfortunately it is not very popular and I don't get any time on it.
is it faster than React? more efficient?
@@joeg4609 No .. finally depending upon programming behaviour ...
This Flutter tutorial looks crazy!
This is awesome!!!!!
It's SignalR, not Signal IR. Also, with Blazor you don't eliminate the need for JavaScript completely. If you want to call certain APIs like geolocation or web storage, you still need JavaScript for that. There are loads of libraries that have already built this bridge for you though. Also, it might've been a worthy mention that a Hello World Blazor WASM project is currently around 7MB in size. Apart from that, lovely video as always Jeff.
the fact that he has never heard of "SignalR" shows he doesn't really know it. Still gets 300k views. Amazing and not really fair for other more expert blazor channels.
@@dskim2459 tf are you talking about? he did 1 informative 100 second video to bring light to it.. tell your blazor andy's to make better content and maybe they'll get 300k views too.
What are some disadvantages of a 7MB Blazor project? Does it make the user wait to load all of it to the browser before being able to use the website? Or are there some other problems? (curious)
@@usamesavas9848 Yup, that's exactly it. It's not necessarily a dealbreaker for all applications, i.e. for intranet applications, it's probably not a problem at all. Also, this problem is also the reason why most SPA-frameworks are now putting so much effort into SSR (server-side rendering).
@@beeptonelettuce we don't want more C# devs 😂😂 our salaries and job prospects are nice over here.
Damn, I'm definitely adding Blazor to my list of stuff to learn. sounds game changing
It's actually.. There are some great 3rd party extension too! Like MudBlazor that adds so much to it!
Should probably learn c# first
@@qariuki2587 I picked up React without knowing javascript I think I'll be fine
@@cassandrasibley228 🤡
@@adds-kz3oc huh?
ooh finally I get a sip of Blazor I've been so thirsty, happy September
Your videos make me want to learn every language.
I love Blazor. Super easy to get into
I am a serious noob in terms of WebDev and even I could do a small webpage that would put Arduino Data into a Database and Display it in a table
Longtime fan of the channel here. So glad to see Blazor get some attention! My only complaints are calling SignalR Signal IR, as well as showing the Blazor project being created in Visual Studio, then showing the rest of the video in VS Code. Perhaps that disparity can by quickly fixed by mentioning that a project can also be created by using the dotnet CLI
My favourite framework!
This actually great
Please do a video on MAUI
We want a full-blown Blazor tutorial! Hope Jeff responds
Oh yea.. I’ve got a few full-length workshops on my main channel
this is basically svelte in C#. nice!
Wow, that was one of the hardest episodes. Not that the Blazor is so hard itself, but it's really hard to describe or explain quickly. The difference between client-side and server-side Blazor wouldn't fit in time ;) I agree using C# makes achieving industrial code quality more achievable, however, Blazor still has some quirks and rough edges as every new tech. The beginners will be super excited at first, then they will cry. Blazor is quite easy to learn the basics, but quite tough to REALLY figure out how it works. Anyway - I made a big app using Blazor like 2 years ago. It's heavily used 16 hours a day 6 days a week since then. It just works. No issues at all. It runs on the cheapest Azure VM. Another amazing thing: from time to time client asks me to add a feature. And it's easy, despite I no longer develop web apps most of the time. It's the code. Logically structured, easy to read, easy to maintain.
On a serious note, how about some videos on similarities/differences between Blazor and modern JS framework (like React) and its concepts (State management, reactive component-rerendering, etc)?
i used to hate this idea, now i love
Perfect ! I like und subscribe.
most efficient method of using javascript: don't use javascript
I think you may have meant "SignalR" instead of "Signal IR". Great video overall!
Was about to comment this too xD. Great video nonetheless
@@sirfakealot5041 didn't you know that http is a protocol based on InfraRed signals?? cmon guys
this is pretty cool, like svelte but with c# and wasm. good job creators of blazor
I just started learning about it in school 😃
Finally! Blazor has been noticed! It feels like svelte in typescript but with access to the Nuget ecosystem.
a web framework doesn't exist until fireship covers it
I can’t wait to download .dll files and .net runtime
Love at first sight
really cool.. thanks for sharing
You should do a longer video going over more feature of the blazor framework.
This.
For people who want to build multiplatform apps using C# but not html, there is the Uno Platform. I've used it for 6 years now for over 30 commercial apps for clients.
The thing is, it has top tier support only for visual studio for features such as auto completion. As i use the rider ide, i find it better to use avalonia (with mobile support) as it's officially supported.
Please try MAUI
That sounds pretty neat. Interested in seing what a basic app is like in size; like how much bloat is actually sent to the client? Lovely introduction, thanks!
This is the most interesting thing I’ve seen all year. I have a web app I’d like to try to port to Blazor
Helpline📲📥⬆️
Questions can come in⬆️
I really wish more people would realize the power of Blazor. High adoption rates would absolutely devastate the JavaScript library landscape. Which is excellent!
It's not Signal IR, it's SignalR - there is no i after the L
really I thought this day would never come, but here we are and blazor got a video
You sold the deal for me, that's insane. Typescript to the dustbin.
I want the same with Java or Kotlinnnnnnn !
I am a blazor developer 🙂 nice videos
You're great!
Do one for htmx.Such a cool library.
I forgot about HTMX! Heard the creator talk about it on a podcast last year, then promptly forgot about it.
At first glance this is a kid of neat, I could see it being useful for backend devs especially
TNice tutorials was an amazing video! you really Nice tutorialt all the key points for the basics without ever over complicating anytNice tutorialng. A hard job and you did
Interesting!
(Considering Rust can also compile to wasm, I wonder if you could do something similar…)
why u gotta bring up Rust in everything man 💀
Look into tauri maybe?🤔
Yes, but the tooling isn't there yet
yew
There is a framework written in rust called yew