Blazor Hybrid: The Future of Cross-Platform Apps (Full Course)

แชร์
ฝัง
  • เผยแพร่เมื่อ 3 ก.พ. 2025

ความคิดเห็น • 110

  • @jfversluis
    @jfversluis  5 หลายเดือนก่อน +3

    Looking to hone your .NET MAUI skills too? Have a look at this full crash course to build the same Monkey Finder app but now with .NET MAUI: th-cam.com/video/mgW6xviirQk/w-d-xo.html

  • @carlossolis9815
    @carlossolis9815 5 หลายเดือนก่อน +24

    This is the kind of content that maui needs to become into a real dev option. Amazing example, a lot of thanks!!!

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      🥰 thank you!

  • @Will-i7o5o
    @Will-i7o5o 4 หลายเดือนก่อน +1

    Really appreciate this thank you. Just finished the MAUI workshop last week so this was perfect timing.

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน

      Oh that is perfect! Let me know how it goes, enjoy!

  • @richie12200
    @richie12200 4 หลายเดือนก่อน +2

    This is amazing, quick easy walkthrough the power how MAUI and Blazor can work together!

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน

      Glad you like it, thank you!

  • @davejarcher
    @davejarcher 5 หลายเดือนก่อน +2

    Fantastic Gerald! Will defintely be watching.

    • @davejarcher
      @davejarcher 5 หลายเดือนก่อน

      Would be great to do a section of deployment - I know you have some seperate videos on this but I note the options in Visual Studio 2022 have changed. And it would be nice to use the GUI rather than command line :) :)

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      Great suggestion! I'll see if I can make an update!

  • @josedonizeteoliveirajunior1744
    @josedonizeteoliveirajunior1744 5 หลายเดือนก่อน +4

    wow looking forward to watching it. I already have plans for this weekend 😊

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      Hope you enjoy it!

  • @mihaimyh
    @mihaimyh 4 หลายเดือนก่อน +3

    Really useful course, will be really nice for a follow-up with authentication and authorization using blazor hybrid.

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน +4

      Should be coming! Thanks for watching!

  • @teriyakov
    @teriyakov 5 หลายเดือนก่อน +1

    At the start of the year, I started going down the route of creating a maui app with blazor hybrid. I quickly find that there was very little documentation on how to interact with native sensors, gesture recognition wasnt quite there and also how to work with many libraries that worked seamlessly out the box with xaml. I went back to xaml and made a lot of good progress.
    I havent checked since if the documentation around maui hybrid apps (that have a heavy reliance on native sensors) have gotten better. In my opinion, this is the main reason why I would choose xamarin over blazor-hybrid when it comes to mobile apps. If you pretty much want a web app on mobile, this maui-hybrid is great. For something more device specific, not so much (in my opinion).
    I hope this has changed.
    That being said, thanks for putting your time into this video and everything else you do for the community!
    It's very much appreciated.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +4

      So this is actually interesting. The reason there might not be a lot of documentation is because working with the native sensors is no different than doing it in XAML or with .NET MAUI. You can use the exact same code to do both, but apparently we don't do a great job ad advertising that?
      Anything you can do with the device can be done just as well with Blazor Hybrid. You only replace the UI part mostly. And if thats not enough, you can mix in XAML pages and .NET MAUI components in there too, which is part of this course as well!

    • @teriyakov
      @teriyakov 5 หลายเดือนก่อน +1

      @@jfversluis I agree, this wasn't very well communicated or advertised and I honestly don't think that side of things has changed much. A documented strategy to do this would be amazing. Or a video/course on converting a working xaml app (that hooks into a few device sensors) into a hybrid one. Knowing how to mix the 2 (and why) would be especially useful.
      On paper, blazor for both web and mobile makes sense but the complexity of the mobile app may be discouraging to those who are more comfortable with xaml for mobile and ,separately, blazor for web.
      Again, thanks for this and your countless other videos.

    • @nickamountaineer9900
      @nickamountaineer9900 5 หลายเดือนก่อน +1

      @@jfversluis That's not entirely correct. There are issues with getting location on iOS. You are prompted twice, once for MAUI and once for the BlazorWebView. And the second prompt is confusing to users. There is an issue on record for this and I don't think it's resolved yet. Camera access is a little different too depending on if you are accessing it (or the photos) from the BlazorWebView or from MAUI.
      Documentation is lacking, but thanks for making videos like this because it makes up for it.
      One more thing to add is MAUI Blazor doesn't work with iOS 18, you get a blank screen. Although I think there is a work around and it's fixed in .NET 9. But, the issue is localhost/IP, so who knows if Apple will do something to break it again.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +3

      @@nickamountaineer9900 blank screen is 100% fixed and I think backported to .NET 8 because that’s important.
      The permission shouldn’t be necessary and tbh I actually show it in this workshop and I didn’t encounter that so are you sure that isn’t fixed too?

    • @nickamountaineer9900
      @nickamountaineer9900 5 หลายเดือนก่อน +2

      @@jfversluis I haven't tried it again or checked the issue in Github to see if it was resolved, but will test it out. Thanks for the info. And I haven't watched the whole video yet, and although I'm experienced I still watch all your videos because one can never stop learning or picking up new tips.
      But the other issue with MAUI Blazor is the dev experience, hot reload specifically. If will hot reload the BlazorWebView bits, but not the MAUI stuff (even though it says changes successful in the log).

  • @ImranKhan-nc7wp
    @ImranKhan-nc7wp 2 หลายเดือนก่อน

    By far, this course is the best one.

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      Appreciate that, thank you so much!

  • @imadayoub5237
    @imadayoub5237 3 วันที่ผ่านมา

    Amazing Course. Thanks a lot for sharing. I learned a lot. I have subscribed.

    • @jfversluis
      @jfversluis  3 วันที่ผ่านมา

      🙏 thanks for watching!

  • @ajmmurray
    @ajmmurray หลายเดือนก่อน

    Thank you for being very clear with instructions and great documentation to go with the course. Am just trying to get my head around how MAUI and hybrid fit together and this course helped me a lot.
    (Small suggestion that you could work on your presentation just a bit to avoid noise words. According to the transcript you said "kind of like" 170 times, and "like" 604 times. Both phrases are pure noise and tend to interfere with hearing the actual message once one has noticed them. :-} )

    • @Tanaka-Buchou
      @Tanaka-Buchou 14 วันที่ผ่านมา

      Bro, you have time. Are you here for faults or to learn???

  • @unjordi
    @unjordi 2 หลายเดือนก่อน

    Thanks!

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      Thank you my friend for your support 🙏

  • @The.WorldVentures
    @The.WorldVentures 2 หลายเดือนก่อน

    Gerald,
    Thank you so much for providing such a great starting point. I am adapting to the new template in .Net 9 and adding web functionality as I build a restaurant application, hopefully i share the finished product when i am done.

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน +1

      Please do!

  • @dan7892
    @dan7892 4 หลายเดือนก่อน

    Thank you very much I needed to learn how blazor hybrid work for my bachalor thesis becaouse I write about it. So I was ready to starting to learn on my own but with this progrese will be much faster for building app.❤❤❤

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน +1

      That is amazing! Good luck with your thesis!

    • @dan7892
      @dan7892 4 หลายเดือนก่อน

      @@jfversluis thank you I was looking for something like this but because is pretty much still new technology there is not much info on TH-cam about it that is going deep into it

  • @GuildOfCalamity
    @GuildOfCalamity 5 หลายเดือนก่อน +6

    Now if MS would just bring back the visual designer for WinUI my life would be complete.
    They had it for UWP, not sure what's so hard about it... I realize it's meant to be x-plat, but you could show a generic control placeholder at a minimum.

  • @sornt
    @sornt หลายเดือนก่อน

    great great workshop. Thank you!

    • @jfversluis
      @jfversluis  หลายเดือนก่อน

      Tell all your friends and family!

  • @MauraSastre
    @MauraSastre 4 หลายเดือนก่อน

    Está muuy bien explicado y me ha servido para tener una visión general. Gracias😀

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน

      My pleasure amigo! Glad you enjoyed it!

  • @lukevincent4397
    @lukevincent4397 5 หลายเดือนก่อน

    Time to rock n' roll. Thanks Gerald!

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน

      🕺have fun!

  • @SKIDDOW
    @SKIDDOW 5 หลายเดือนก่อน +6

    There are two loading screens. Splash and Blazor Loading... There is no solution yet for it. It is awesome if we can replace blazor-ui loading with splash image too. Then user don't know that there are two loading screens 😀
    I'm always using blazor-hybrid. Because it is easy to styling.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +6

      Unfortunately that will be hard as the splash screen is something native, so the only thing you can do to kind of give the impression it’s all the same is implement something for Blazor Hybrid and then make the native one the same that seemingly transitions into the Blazor one so it looks like one and the same. But a better solution for this would indeed be great!

  • @SovanAmret
    @SovanAmret 11 วันที่ผ่านมา

    thank you for sharing.

  • @istalexnik
    @istalexnik 2 หลายเดือนก่อน

    This is amazing.

  • @julienbarach6620
    @julienbarach6620 4 หลายเดือนก่อน

    Perfect, I'm done with Xaml and issues I can have on one platform and not the other. Was not sure Blazor Hybrid is really supported by MS.
    Hope it's easy to add in an existing project.

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน +1

      Blazor Hybrid is definitely a supported product! So have at it!

  • @lulithagihan7817
    @lulithagihan7817 2 หลายเดือนก่อน

    Really appreciate this thank you.

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      You're very welcome!

  • @MutazZ
    @MutazZ 5 หลายเดือนก่อน

    Thank you for this course, I am watching it though I am on a Linux machine. So I am left with the VS Code!

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      If you know how to use VS Code for .NET MAUI then you can follow along with the whole thing deploying to Android!
      Also see: th-cam.com/video/4D2vUYUIqFU/w-d-xo.html

    • @MutazZ
      @MutazZ 5 หลายเดือนก่อน

      @@jfversluis Thank you. I am beginning to work with Blazor in VS Code and am currently following the "Build web apps with Blazor" course on MS Learn.

  • @ImranKhan-nc7wp
    @ImranKhan-nc7wp 2 หลายเดือนก่อน

    Thanks Gerald for this amazing course.
    In the course you have demonstrated navigating to a maui page from blazor page or displaying a maui page in a model window.
    Is there a way to use some maui controls inside a blazor page?

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน +1

      Thanks for the kind words! Unfortunately not. If you want .NET MAUI controls either use a .NET MAUI page and add a BlazorWebView to that which only takes up a portion of the screen and mix in .NET MAUI controls. Or navigate to a .NET MAUI page from Blazor like shown in this course.
      You cannot use .NET MAUI components inside a razor page.

  • @bozoskopljakovic5508
    @bozoskopljakovic5508 หลายเดือนก่อน

    Hi Gerald, thanks for great video, I have qouestion for you, can we make NET MAUI Blazor Hybrid windows application only using EF PostgreSQL database localy, thanks

  • @joesomsom
    @joesomsom 6 วันที่ผ่านมา

    This is a really cool video; I am reviewing the best option to develop mobile app moving forward (lol devs taking cases should mobile dev still a thing 😅); what I went over was some third party lib called Uno ; lol too long ago don't remember why; but I hope the new .NET 9 MAUI was truly cross-platform.... hey was it about UI design? Can I be worry free if I feel that's the hot front-end developer's job and not me an app integrator's and a full-stack (code-first) dev's job?... well. I hope all bosses in Asia can think top-down correctly, but some-times that might not be the case lol... geez, I hope AIs can help with that for free... oh my , happy lunar new year I guess.

    • @jfversluis
      @jfversluis  6 วันที่ผ่านมา

      Happy lunar new year! That kinda depends on what your front-end developer can do. The UI with this is HTML and css do if they are comfortable enough working with that then yes; they can do all of that with the frameworks that is hot at that time!
      Thanks for watching!

  • @ShashiKumar-d9s
    @ShashiKumar-d9s 2 หลายเดือนก่อน +1

    Hello Sir, I'm currently at a Roadblock with a Maui android application or Window application I'm developing and I'm not being able to find a Solution to the problem I'm having.
    This problem may be caused by my lack of experience in managing layouts but I think there's a bigger problem here.
    Basically I'm having a huge problem with adjusting Fontsize and the Width of controls in my application depending on the ScreenSize /Pixel density of different devices. I've been developing on a Base Pixel 5 Android emulator. As soon as I change the pixel density or run it on another device (bigger or smaller) the whole Layout goes crazy , buttons are off screen or the FontSize is too small FontSize or too big , Margins that worked fine now just jamble all the controls.
    I'm having quite the headache trying to come up with a solution for this problem that does not have me re-do the whole layout ... But I would still have the same problem with FontSizes and Margins when using a smaller or Larger device.
    The current "solution" I'm working on is basically to check the Device ScreenSize and Change the Controls style depending on the size, but this all falls appart when I have devices with the same screenSize that have different Pixel Density and again the whole layout goes crazy..
    Has this happened to anyone else, or am I not using the correct approach to developing the Layout?
    Thank you in advance for any insight into this matter.

  • @nickamountaineer9900
    @nickamountaineer9900 5 หลายเดือนก่อน +1

    Gerald, one thing I'm unsure of (and sorry if you covered this), but is it common practice to have multiple BlazorWebViews in a single app? I know James has a video when each tabbed page is a new BlazorWebView, but are there any performance or memory concerns with that?

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      Depends a bit on the platform how they manage their web views and if you maybe implement something lazy loading etc. I would say not super common but definitely possible and I’ve seen people do it! But you then don’t want to load whole Blazor applications in each tab probably. It would just be a page or a component

  • @dpc4663
    @dpc4663 4 หลายเดือนก่อน

    Hi Gerald, I haven't see the full video yet but I hope it has something about complex navigation. This is the main issue for me, as MAUI XAML developer. If I understand correctly, Blazor Hybrid works as SPA inside MAUI and there is no navigation stack. I would like to know how to go to previous pages (back button action) and keep their state (keep ViewModel state without recreating it).
    I have seen various solution for Blazor but I would like to see something that is easy to understand for MAUI developers.

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน

      There definitely is mixing with MAUI pages in there I hope that covers what you need! Have fun!

  • @santiagomartinez-cr4in
    @santiagomartinez-cr4in 5 หลายเดือนก่อน

    This is amazing, thanks for sharing this with the community! I have a question regarding the navigation part: if I want the navigation to look like the native platform navigation, is it okay to display one ContentPage in .NET MAUI for each page in Blazor and navigate through them using the MAUI navigation service?

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +1

      Thank you so much for watching!
      That is certainly one way to do it, yes! Depending on the platform this might mean it creates multiple web views, so you might want to check how that behaves with memory usage, but otherwise you should be OK!

    • @santiagomartinez-cr4in
      @santiagomartinez-cr4in 5 หลายเดือนก่อน

      @@jfversluis Thanks! 🥳

  • @trungngo7428
    @trungngo7428 หลายเดือนก่อน

    How to update in app with maui hybrid? I found code push in react native but in maui it dont support

  • @LeonoX97
    @LeonoX97 5 หลายเดือนก่อน

    amazing thank you

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน

      You’re very welcome!

  • @cissemy
    @cissemy 5 หลายเดือนก่อน

    Thank you.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน

      Enjoy my friend!

    • @cissemy
      @cissemy 4 หลายเดือนก่อน

      @@jfversluis
      Any plan to add CodePush to maui blazor hybrid ?

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน +1

      @@cissemy I don’t think we have any immediate plans for that

  • @kaylahuber2795
    @kaylahuber2795 5 หลายเดือนก่อน +1

    Can you add DevExpress to this project as well?

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +2

      DevExpress Blazor components should definitely work. Their .NET MAUI components too if you add it to a .NET MAUI page and mix both techniques which is also shown in this video!

  • @davidquijada3394
    @davidquijada3394 4 หลายเดือนก่อน

    Is it possible to use this technology (blazor) and use native elements such as face id (ios) or biometric authentication (android)? Greetings from Chile and thanks for the content

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน +1

      Absolutely yes

  • @aronetwo1979
    @aronetwo1979 2 หลายเดือนก่อน

    I'm kinda new in blazor, can i use component ui using mudblazor or avalonia when using Blazor hybrid?

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      Mud Blazor yes Avalonia not sure unless they have stuff for Blazor?

  • @SergiuGuglea
    @SergiuGuglea 2 หลายเดือนก่อน

    just started to learn, but it looks it does not cover authentication and authorization

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      That is correct! That could be a course on its own 😄

  • @itdev01
    @itdev01 2 หลายเดือนก่อน

    is there is any way to convert my MAUI app to blazor hybrid app. please reply

    • @jfversluis
      @jfversluis  2 หลายเดือนก่อน

      Not automatically, no

  • @kunalshah9344
    @kunalshah9344 4 หลายเดือนก่อน

    How Can I add Google Adsense In both Blazor Web and MAUI
    If you can generate source code for that or practical guide for that then it will be best.

  • @autoking4581
    @autoking4581 5 หลายเดือนก่อน

    wow !!

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน

      🤯

  • @randallstephens1680
    @randallstephens1680 4 หลายเดือนก่อน

    But... does it run on Linux?

  • @mmeuwese
    @mmeuwese 5 หลายเดือนก่อน

    I agree. Another layer on layer on layer with all kinds of various coding markup which makes it complex. Maui controls behave different per platform, curious how that goes with blazor.
    Maui is misbehaving already a lot; now it is maui with blazor which sounds like even more ambiguous behavior.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +2

      Not at all. This all renders the exact same way across platforms so if anything this is more consistent.
      Also not really another layer. This does not render from native to web and then to another thing this is just a web control in the MAUI toolbox that is rendering the UI. The rest still runs as a native .NET app

    • @mmeuwese
      @mmeuwese 5 หลายเดือนก่อน

      @@jfversluis 🤔 maybe i should then give it a chance. Coding maui for android and ios is still so inconsistent that it takes a lot to get the UI look the same (similar) on both platforms.
      Reading that .net9 allows to create a web app using the new templates makes it tempting…

  • @Ziomal645
    @Ziomal645 5 หลายเดือนก่อน

    Would anyone use this apart from Blazor developers? If somebody is new it's probably better to just use MAUI. I don't see the point in such stuff, it looks like a browser, feels like a browser, not an app.

    • @jfversluis
      @jfversluis  5 หลายเดือนก่อน +3

      I totally think they would! For starters, not all apps are consumer facing. For business apps I might not be important that it looks more like the web. In fact, then it can be a big advantage to share code between your web app and a mobile app. But there are even consumer facing apps out there that use Blazor Hybrid!
      If you're a web developer, but maybe JavaScript is not for you, this is also an option. And there are many more scenarios you can think of. But each to their own, I think this can be useful!

    • @nickamountaineer9900
      @nickamountaineer9900 5 หลายเดือนก่อน +5

      You can style HTML buttons to look like native. And the trend anyway is to have a consistent look and feel across all platforms. I have 4 MAUI Blazor apps now (2 internal to the company, 2 customer facing in the app stores), and it's so much easier to write documentation (including screen shots of how to use the app) and only have to create one set of everything instead of one for iOS, Android, Mac, Windows.
      And if you setup your project correctly (and this is a template in .NET 9), you can share your razor pages in a razor class library and easily have a web based app as well. And in the corporate world, this is what managers want to hear.

    • @DE-sf9sr
      @DE-sf9sr 5 หลายเดือนก่อน

      I've mentioned this elsewhere, but when Entra External ID is added in, it makes Maui a truly compelling platform. Especially with Hybrid blazor to get consistency that both a startup and enterprise can use.

  • @mishaed-pm3xx
    @mishaed-pm3xx 5 วันที่ผ่านมา

    thanks God, there's 0.75 speed 😅

    • @jfversluis
      @jfversluis  5 วันที่ผ่านมา

      ⚡️⚡️⚡️ going too fast for you?

  • @akshayjain4001
    @akshayjain4001 4 หลายเดือนก่อน

    37:05 is there a way to acheive localization of app name from Application tag in csproj?

    • @jfversluis
      @jfversluis  4 หลายเดือนก่อน

      Not in the csproj, you’ll have to leverage native ways for that learn.microsoft.com/dotnet/maui/fundamentals/localization?view=net-maui-8.0#localize-the-app-name

  • @EdRawrDev5813
    @EdRawrDev5813 หลายเดือนก่อน

    is this good for using mvvm pathern? are we able to comunicate like vm's from razor with regular vm's in maui pages? like weakref . messaging center, or even with parameters? I would guess so. ty .awsome course 💎💀