ASP.NET Community Standup - Exploring Oqtane with Shaun Walker

[Music] [Music] so [Music] [Applause] [Music] we're live we're live hello hello everyone welcome to the april edition of the blazer community stand up i am so excited to have my trusty co-host john here with me today um and we have our special guest sean walker who is the creator of octane he's gonna be going through and giving us a presentation on octane as well as showing some demos um it's gonna be a pretty fun time now there's um gonna be something a little bit different as we start off this community stand up usually we have a session called community links where i pull up some interesting links and showcase them um to you folks but um we released dot net preview dotted six preview three last week and we've got dot net six preview four coming up soon um and i wanted to take this time to show you some pretty interesting features that we've been building out um in blazer and nbc that you can try out and give us your feedback on um so instead of community links today we are going to be doing a brief demo and then i'm going to be handing it off to sean for the rest of the community stand up so it's going to be super fun all right to get us started i'm going to go ahead and share my screen which is where all of the magic happens all right cool so i've got a little um side by side set up here let me go ahead and increase the font size because i know that's super important for everybody um so recently i have been working on building this little application called picture fixer um it allows users to maintain a gallery of images you can see these pictures here i've got some pictures of horses and puppies and kittens and tennis players and all sorts of fun stuff um and this picture fixer app has an interesting feature which i will be showcasing later um that allows users to do a content fill on images which is basically the ability to select a particular area within an image and then remove whatever content is there and kind of approximate it to the nearest fill and i'll be showing you how that works in just a little bit now the first thing i want to show you is something new that we shipped in.net 6 preview 3 which is support for hot reload with the.net watch cli so what i've got here is i've got my trusty editing environment of choice i am usually developing in vs code on mac so i've got my vs code window open with my little blazer presentation here um and i've got my terminal running what's running in my terminal i am running dotnet watch i've gone ahead and highlighted that here you can see started.net watch now what you'll notice is that unlike a typical.net watch session i've got this text that says hot reload enabled for a list of supported edits blah blah blah press blah blah restart they've already had me at hot reload um i'm pretty much curious to see how things go now so i'm going to show you a little bit about how it works and i'm going to do that by continuing to do some of the development work i've been making on my application um so one of the things that we've done here is we've got the name of our image image.name and we have it implemented in this h3 tag with this text lg class now i'm using tailwinds css behind the scenes to do some of the styling on this application one of the things i want to do is i want to go ahead and make this header bold so it's bright and popping out to the user when they see the title of their image so i'm going to go ahead and do is i'm going to go ahead and add the font bold class to my image which is a tailwind css class i'm going to go ahead and save it how reload is going to kick in detect that the image has been changed and did you catch that it's bold now and i pretty much didn't have to do anything besides saving the image that was pretty magical and now i can go ahead and make other modifications as well so in addition to modifying an existing uh markup i can actually go ahead and add additional markup so um we've got descriptions for all of our images and i want to go ahead and display these descriptions in the um little image tile that you see here so i'm going to go ahead and drop in a snippet of code that has the descriptions um pretty cool here again paragraph tag using some tailwind css classes and i've got my image description hit save and wham there it is there's the description for images so we can modify existing markup we can go ahead and add new markup if we wanted to um we can even invoke new methods so one of the things you'll see here is that we have the last modified date for the image let me zoom in a little bit just so it's a little bit easier to see we've got the last modified date for all of the images here at the bottom in um orange and what i've done is i've written a quick little function that just humanizes the last modified date so instead of saying hey it's you know march 18 2021 you can see something like this was edited 10 days ago or five days ago and whatnot um so let's go ahead and change that so instead of just displaying the last modified date i'm going to go ahead and actually humanize it and bam did you see that now we've got you know updated 25 years ago 19 days ago 16 days ago yada yada so this is a pretty cool new feature that we are shipping out or we have shipped out in preview three it's already happened um so you can go ahead and try it out um it's really interesting functionality give it a go let us know your feedback do note that there are some edits that are supported you recall when i showed the text at the beginning it said something pretty effective you know here are the list of supported edits i've showed you some of these supported edits there are some edits that are not supported so certain modifications that you make to the application won't result in this clean hot reload that you see here those are documented um we're working on improving the scenarios for some of them but when that's um not the case i've got my control r keyboard shortcut that i can just use to restart my application as normal and then get back to work um so yeah this is a pretty neat feature it makes um the development life cycle so smooth for building out applications now development and speed of development matters and i'm sure that's something that will resonate with sean um as he goes into the presentation later another thing that is important is actually the speed of the application itself so one of the things that i'm going to go ahead and do is show you the actual fixing feature of this demo app so i'm going to go ahead and pop open this tennis player so what this app allows me to do is i can go ahead and select a particular area let me see if i can zoom in a little bit better maybe let me go ahead and just expand this window um since you don't need to see the side by side anymore all right so i can go ahead and i can select a particular area of my application so let me go ahead and select this tennis ball here you could see it's been highlighted with orange and if i clear out the selection you'll see it took about 1.2 seconds to process and the tennis ball has been removed from the application so it's kind of matched the surrounding background color and replaced it now you know i'm gonna go ahead and actually refresh um this it looks like the cursor's gone awry um so let me show you that again i'm gonna select this area no tennis ball sweet um and we can actually do this in a couple of other places as well so i've got this um background wall here it's got some logos and some websites and stuff like that so let me go ahead and select this logo here and it's going to go ahead and match the background color of the wall like you know i kind of matched it really well with the area i selected i didn't select the entire logo um actually let's go ahead and try and make this entire wall the teal color of the background and let's go ahead and select this little um swoop or arc logo that we see here so i'm going to go ahead and select that area right okay so that took about seven seconds to process um and that's because it actually does take some time for this computation to execute um to run um the kind of fill algorithm that we're applying to this image here but i don't necessarily feel okay shipping this slow takes seven seconds long to operate app to my users and i don't have to because one of the things that we're going to be shipping coming up in dot net 6 preview 4 is support for aot or head of time compilation um for blazer web assembly this is a blazer web assembly app by the way um and what that allows you to do is you can essentially pre-compile your application to webassembly by code and then that's what executes when your application is running instead of running interpreted il in the browser so that's a big deal you said that's for preview 4 yes it's going to be landing and preview 4. um so it's going to be um an additional workload that you can install into your sdk then all you have to do is install that workload and then you hit you run.net publish in a blazer webassembly application and it's going to pre-compile your app um one thing to note is that pre-compilation process does take a little bit of time i'm running on a m1 macbook and pre-compiling this app takes around eight seconds or eight seconds no eight minutes for me um so um in the interest of time i'm not gonna show you the actual process for pre-compiling the app what i'm gonna go ahead and do is i've already pre-compiled or i've already published the app with pre-compiled bits and i've got it running here at port um 6005 on my machine so i'm going to go ahead and just open that up and show you kind of the difference in performance between um pre-compiled and non-compiled code so this is my published version you can see here that it's in green let me go ahead and find that same tennis player image that i was just showing you now here it is so i'm going to go ahead and make some of the same modifications that i did when i was showing you the development version i'm going to go ahead and select this ball to remove it oh it's done in 0.1 seconds i think it took around 1.2 seconds when i did it in the development version um let's go ahead and clear out this head logo again 0.1 seconds that was pretty snappy by the time i've released my finger it's already done now here's the big one let's select this little arc logo and point two seconds and if we go back this used to take seven seconds um before and so now in my published and pre-compiled application it's taking point two seconds um sounds pretty snappy um for what we've done here and you can take advantage of this starting um with preview 4. we've got a ton of different features that we've been working on as well things like air boundaries state preservation for pre-rendered apps um all sorts of goodness and improvements to debugging um one of the best things you can do to help us out is try out the previews um you know you don't have to go in and upgrade your production apps to a preview version or anything like that but you know try one of the previews build a sample app test out some of the features let us know what works um if you find any bugs um and you know we'll try and make sure that those are fixed before before the rcs and the official release so yeah that was my demo i hope it was exciting for everyone to see um hot reload and aot are going to make things um super speedy for folks who are going to be developing in blazer and mvc in the future speaking of speed um and um speed is a core philosophy and a framework i think that's a great opportunity to segue to um introduce sean walker who's the creator of octane which is a application framework built on top of blazer um which has emphasis on speed as well as a couple of other key philosophies um and sean i'm just gonna hand it to you to share this with everyone all right thank you um i do have one question though for based on your demo that the aot feature so that's an incredible amount of speed improvement right and that's really impressive um the the pre-compilation does that mean you're pre-compiling your webassembly application prior to it being downloaded to the browser so it's actually download so it's actually going to be a smaller amount of payload that's being downloaded to the browser and it runs faster so not quite that would be too good to be true the payload is a little bit bigger i don't have the exact numbers at the moment um but it is a little bit of a bigger payload um but you do get the the speed improvement coming out of it we are focusing on um kind of trying to improve the size moving forward but um unfortunately it's not the double whammy of faster and smaller okay now then the team's made incredible strides in actually decreasing the size of the payload since the early versions of blazer so yeah definitely appreciate that but yeah that was incredible good demo yeah that's actually a good thing to know um aot aside we have been doing some work to make the size of blazer web assembly smaller um i think we've like been doing a lot of linking we've probably dropped a few megabytes at this point um don't take my word on it but that is something we're working on so yes no it's noticeable yeah make make sure i understood that there i wouldn't i would expect aot to improve like first load or fir you know what i mean but once something's compiled i would have thought that it wouldn't be so i was i was a little surprised to see that it was it was converter or processing those images so quickly is it actually aot compiling to web assembly or i mean so it's down to assembly by code got it so previously we were there was a small website there was a webassembly vm that was executing.net il and now it's actually running native web assembly using the aom yes that's amazing very cool yeah yeah i guess that's the cool thing about this new technology is there's so much opportunities right to like for it to go in so many different directions it's great to see that the team's like pushing the boundaries yeah wow all right i'm gonna share my screen yes time for the main show i was just the the warm-up the opening brand opening band yeah very cool all right i'm assuming that people can see my screen they can now yes all right perfect all right so i'm going to talk a bit about octane today obviously i have to do a bit of an introduction to explain what octane is um so first of all that thing there you can actually close it if you want it's it's yep come on all right yeah so i'm sean walker um i guess you know prior to creating octane i was also the creator of another popular open source project called.net nuke which is now referred to mostly by its sort of shorter name dnn i was a microsoft mvp for many years i'd love to be in microsoft mvp again someday chair of the.net foundation project committee i've actually been involved with the.net foundation for many years actually um and that's one thing i should probably mention is i worked closely with john galloway for a few years when he was the executive director i have to say that that particular executive director role is really an unsung hero kind of role where so much work goes on behind the scenes that people don't realize when it comes to the dot-net foundation and and really the executive director really only hears about the the problems you know not not the benefits that the foundation is providing so i really appreciate the work that you did john it was over the course of a couple of years and it was a highlight working with you sean it was really good that you you can like you said you've been working behind the scenes on dotnet foundation for a while too you've been running projects and and uh it's it's just it's great also to see all the stuff that you do and people aren't aware of um so thank you yeah no you're welcome and i i think that um the foundation actually is uh moving in in a good direction and there's a lot of great conversations that are happening around sort of sort of reimagining the things that the net foundation should be doing for the ecosystem um strengthening sort of the dot-net ecosystem so i i see that the future is quite bright for the foundation um and then as of course creator of octane um i also have co-authored a number of books over the years um none very recently though that's a huge amount of work and i really kudos to those people who put the time and effort into creating books all right and currently i'm employed with uh cognizant soft vision uh as a technical director so talking about octane so i'd like to position octane as a modular application framework for blazer and so to explain that a little bit what is a modular application so a modular modular application is software components that are developed and deployed independently from one another and dynamically linked at runtime based on custom configuration to produce a functional application and of course i'm going to show a demo which maybe explains this in in a more practical way but i like setting the stage of like what is a modular application some of the benefits of modular applications are that they are extensible so they're loosely coupled um as part of their architecture which allows you to develop the features in parallel by different teams without many conflicts between one another typically you follow conventions because the whole idea around a modular framework is that you're building extensions to the framework you're not actually modifying the the core code of the framework itself so you're building extensions using well-defined contracts and interfaces and which definitely produces a very sort of consistent predictable application you practice encapsulation so that features tend to be self-contained and don't have a lot of dependencies or reliance on on other features and deployment is a the benefit there is of course you can deploy the features independently from one another instead of having to deploy you know the entire application if you just are introducing you know one a feature in one area so i mean a lot of these things are the same types of benefits that you get from microservice based applications which are running on the server this actually extends it beyond that and actually enables it on the client as well so in the user interface and this sometimes people refer to applications like this as micro framework applications with micro services on the back end whatever you want to call it the goal is to break down an application into smaller pieces so that it's a modular approach modular applications i mean we've talked about all the benefits but they are very challenging to create and i'll talk a little bit about what some of those challenges are as we go through the the the demo and the presentation um so developers typically rely on web application frameworks to provide a lot of that sort of foundational capability that so that they can rely on that to build their extensions and so that they don't actually have to build the the modular framework themselves so web application frameworks of course designed to accelerate development um they provide a standard way of building and deploying web applications and they try to automate the overhead so all of these key capabilities are things that octane strives to deliver on another thing that's been quite popular in the industry is this notion of batteries included frameworks so as opposed to just providing you with a bunch of building blocks that you have to assemble yourself batteries included frameworks tend to assemble those in a meaningful way to provide a more robust starting point so that you can get up to speed very quickly and kind of reduce that inner loop that developers have to go through reduce some of the design decisions that you have to make up front when you're developing an application and basically rely on some best practices of you know patterns and frameworks so that you can get started right away so octane we like to refer to it as a batteries included framework it is built natively on.net core and blazer allows you to rapidly create modern web applications hopefully using less code it's got a robust set of building blocks and services that you can take advantage of and it's open source under an mit license it's actually the project is a member of the.net foundation technically one of the goals behind octane was that it could be flexible enough to support both of the supported hosting models that blazer provides so basically it's a single code base that runs on both laser server and blazer webassembly simply by changing like one simple configuration option um the framework itself was inspired by the work i did uh with in creating.net nuke um there were many concepts that were part of the the.net nuke framework that are just as relevant today as they were when it was first created probably two decades ago however the way that these concepts are implemented in octane are of course very different because technology has evolved significantly over that time um and the overall architecture is completely different um than than what dot net nuke was built on but like i said the the concepts are very familiar so if you are a developer who had some familiarity working with.net nuke in the past a lot of these concepts that octane uses will be very comfortable and familiar to you and we'd like to talk go ahead sorry a quick question came in a few people were wondering when you say batteries included does that mean kind of opinionated yes yes so it does make some decisions for you um to basically provide you with you know a foundation that you can work with if you if you are more of the mindset that you like non-opinionated frameworks then typically you have to make more of those decisions up front yourself and often it's not always obvious what those decisions should be and sometimes you end up going down paths which you know and combining things which weren't intended to be combined so that's why the opinionated frameworks do have some benefits yep okay yeah and we like to refer to octane as rocket fuel for blazer just because it allows you to take all of the goodness of blazer and sort of accelerate your development efforts to a greater extent some of the features that octane provides are things such as multi-tenancy so multi-tenancy is a common uh functionality that a lot of applications require um however it's you know it's not something that is provided out of the box um through the microsoft tooling so octane provides multi-tenancy it actually provides a couple of different forms of multi-tenancy so it supports both shared multi-tenancy where you have basically all of your tenants and their data all in one database or it supports isolated multi-tenancy as well where you can actually keep each tenant their data physically separated in different databases if you so desire which is important in a lot of industries although in both cases of course you're running one set of code which is of course interacting with the back end in this multi-tenant model so you could from a servicing perspective you're servicing you know one application code base and then your data of course is either going to be stored in a shared manner or in an isolated manner so you've got the best of both worlds there it's got a ui framework which i'll explain in a bit more detail in the next slide a granular permissions model so a way to basically construct your ui with a lot of additional capabilities around security so that you can granularly control who has access to data who can view data it's got a very robust administrative user interface which i'll show you it takes advantage of dynamic routing so it basically has a custom router it doesn't use the default blazer router has its own router to basically handle the semantics of this of the octane framework itself the modular architecture provides a whole lot of extensibility points so that you can basically add custom logic that seamlessly plug in at runtime customizable themes so that you can control the look and feel of the application again through a modular capability and it's a client server architecture so it has a complete headless api and repository on the back end so from an architecture perspective like i said it is a client server model and it's developed in a client server model so that it can support both blazer server and blazer web assembly both of those hosting models can be supported if you develop your application in a client server manner so of course on the server side we're taking advantage of things like net core ef core um we're also taking advantage of the the.net core capability to run asynchronous scheduled jobs through the i hosted service interface um and like i mentioned it's multi-tenant so you can have you know either one shared database or you can have a different isolated database per tenant if you so desire and of course we've got our our rest api on the back end on the front end we're taking advantage of a blazer so the blazer component model um we're also we have the service layer so that it makes it easier to interact with the back end apis just through through api wrappers um we've got the multi-tenant capabilities on the front end where you can set up as many what we call sort of virtual sites which is basically a way to group similar functionality together and within a site you can have as many pages as you so desire and of course these are virtual pages these are not physical pages because uh this is a modular framework and you don't create physical pages in this architecture and then you can extend that extend the uh the functionality of the application through uh custom modules which i'll show you in a moment what is omnichannel ui i'm not familiar with that so omnichannel just basically refers to being able to serve uh output to different devices so okay and you can basically serve to you know standard desktop browser tablet um mobile but this is not like producing a native mobile application right this is tip this is this is a web-based application so you could you can support a progressive web application if you want to know i saw that this morning i saw that i was like yeah pwas so yeah yeah we're actually quite excited too about like the future of blazer and some of the additional hosting models that are going to come to like full support probably in the net six time frame um obviously there's already experimental bindings for for blazer for xamarin i mean there's a lot of potential for blazer um a lot of flexibility so if once you feel comfortable with that that razor component model as long as your application is built in you know a sort of a generic way it shouldn't be too difficult to take advantage of additional hosting models so that's what we're counting on that whole thing with component component models it's interesting how things kind of come full circle because thinking way back to like dnn and that's part of how what enabled all that it was all built on components and you right and you could like all the modules were components and the themes and everything and and then we moved to mvc and everything was very decoupled but you lost the capability to like ship components and and build things and modularize things at that level and so it's neat to see now with like a rethought component model for the web in general you know like with web components and then with blazer specifically and then seeing boom like what you're able to build built on top of all those components yeah absolutely that's a really good point because you're right.net took advantage of you know the web forms model which was a component model um and everything was essentially a user control uh within nuke and i mean there was a really robust ecosystem building shareable components in web forms and you're right the industry kind of moved a bit away from that for a period of time and now it's moving back and i think it's great and i mean as soon as i saw it was actually scott hunter who early on in the evolution of blazer he actually sent me a text message and said have you taken a look at blazer yet because i think that you know you could build something very similar to what you did with dnn on this technology so i took a look and that's when i started the poc and he was absolutely right i mean the the potential is is incredible on this new tech so quite excited uh from a ui framework perspective this exact sort of ui framework model was the same model that was used in dnn so essentially you have the concept of a virtual page which is you know sort of your web design surface within that you would inject a theme which provides the you know sort of look and feel and the structure of the page itself and that is a razor component that theme contains regions which we call panes and you can have as many panes as you want which are the dynamic locations where you will inject your modules at runtime and so each module is injected into a container which provides some additional administrative functionality as well as a bit of a look and feel like chrome around the the outside of the module and then individual modules are razor components as well and you can have as many razor components as you want to make up the user interface of your module and so you can have different user interfaces which are rendered depending on you know the the specific functionality that you're trying to expose within your module so basically relies very heavily on the razer component model and with that might as well jump into a demo um so what we've all been waiting for do you have time for a couple of questions before we jump into the demo cool um so one of the questions we had is you showed an architecture diagram of um the client and server side capabilities um someone is curious to know um what's the story for locking and monitoring support for octane apps okay so we um so for lo for logging we have server side logging and client-side logging that we're um performing so there's actually a custom logging capability that's part of octane itself it's kind of based on the serialog model um with the same sort of concept where you can specify um you know your log messages with this the tokenized um regions that are going to be replaced with actual values in order to create something that worked in a multi-tenant environment with like the specific nuances of having like shared tenancy or isolated tenancy we couldn't use sierra log out of the box um there wasn't it didn't seem like it supported that that capability so we had to build something that was custom um it should feel familiar if you've used serialog which is obviously a very popular logging framework and also when we created this the logging capabilities for client-side blazer didn't exist yet um and so that was another reason to create something custom so but basically yeah there is logging capabilities for both the client and the server side that all goes into one sort of aggregated logging table and there's a user interface for exposing that that log through the user interface monitoring there isn't anything specific that's built in for monitoring currently um that that's obviously an area that could use some some future development okay is there any other question um i think we are ready to go with the demo people have some questions about what the demo is going to show but we'll kick it off and then we'll see all right okay so this is the octane solution which um basically is the code that uh downloaded from um like the octane repo so this is the development branch but um so i have all the latest development code locally and i'm using visual studio i'm actually using the community edition of visual studio so i mean it runs on of course all all editions of visual studio without any issues um and i'm running the preview edition i think at this point so this is all the comments you zoom in just a little bit for us uh audience members out here i think maybe another a 50 or 150. so where can i do that you can do control scroll wheel should do it or that's better okay good that looks a lot better thanks yeah all right yeah between control plus that didn't work all right so um yeah so this is all the latest code i have in the server project there's a appsettings.json file and it doesn't contain really any information to begin with when you download the code basically this runtime node is saying that i'm going to run it on blazer server to begin with if i change this to web assembly it'll run on on web assembly that's the only change you have to make in order to target which hosting model that you want to run on nothing else needs to change there's no default connection string so basically the application hasn't been installed yet i'm going to go ahead and run it and when i do this it's going to recognize that of course i don't have a database that's been created yet and it's going to show me an installation wizard i'm currently i'm just going to accept the default here it'll run on sql server or on localdb and of course it's going to choose localdb for simplicity to begin with here and i'm going to talk a little bit more about database and capability uh in a few moments but for now just got to set up the initial account so this is the initial user account so that i can log in and when i hit install now it basically is going to run all of the database setup um so that i have a database um and it actually seeds the the initial site with some initial content as well um well just while you're going through and doing this i i shared the link to the project at the bottom but this i went through this demo this morning and it was flawless like i i just clicked through i downloaded i ran it i typed in a password and i ran it and it was just like boom like a lot of times the demo will take like a while or like there's some special configuration or tricks it was so smooth how the installation worked for me so for people watching like give it a try it's super easy yeah and that's that was always one of the goals for dnn and for our it's a goal for octane is just like get people up and running as quickly as possible um because it's so frustrating when you would like to take advantage of a new open source project and maybe download the code and then you spend like hours just trying to get it to run and you you wonder like what's wrong yeah so yeah so i mean we spent a lot of effort in trying to make it as seamless as possible um so i'm logged in as that initial host user that it was created so we have some additional functionality if i click over this pencil icon it exposes that there on this particular page there's a content pane and like i said you can have as many panes as you want but in this particular theme there's only one pane and there's a module which is dynamically injected here and another one here and another one here and actually if i um well yeah and so there's three different instances of a what we call the html text module and um when i'm in edit mode i have additional functionality so if i say edit it'll load up a pop-up modal dialog and it'll allow me to edit some of the content and that's displayed there so i mean i could like you know move remove some text and i can say save and that'll be just like echoed back to the actual page itself so and that's a so people think you know they ask the question is octane a content management system that's about the extent of the content management capabilities that it has it's more a modular framework that allows you to build custom uh web applications by building you know custom extensions of your own to manage whatever you know functionality or data that you want to manage but um this is a very common cape like need in most applications is to manage some text and also you would notice when i went into that edit mode there is the ability to upload images as well because there's a complete file manager that's part of the application um i can also go in and i can you know rearrange the content on the page so i can you know move things up and down in the page there's module settings which i can go into which allow me to you know change things like the title of the module i can modify the permissions of who's allowed to view it who's allowed to edit it and i'm not going to talk about container settings um is there when you make content edits does it version or does it keep track of like what currently it does not and like i said yeah so that's where like it is not a content management system i'm sure that someone will build some custom extensions which give like provide that capability to provide you know more robust content management um you know capabilities but that is not the goal of the framework initially i mean it's it's a framework that allows you to build any type of mod or any type of application on top of it which could include you know content management functionality if you want it to okay and one last cms sort of question we had a question of whether we can like plug into another like a headless cms or like another back end and pull content i mean i would guess you can build custom modules that can do some sort of interacting right yeah you could yeah you could build custom modules um and then you could of course point them to another back end if you wanted to yep okay cool yep i think we've had one or two people also ask about this question which is what's the story around octane and localization okay so yeah so i was going to get to that um i don't have it configured in this particular instance um but i can like just to answer that question so the the framework itself was enhanced with localization capabilities in version 2.0 um and if we go into the octane repo and we can see that in the translations uh repo there is a number of languages which have already like where people have provided all of the localized resources so vietnamese spanish portuguese various languages and so you can take these languages and you can pull them into your octane instance and of course compile it and it's using the the default dot net core localization capabilities right so it's basically compiling them into satellite assemblies and then loading them and uh it works in both server-side blazer and client-side blazer um i saw too that some of that localization support was contributed by hisham who's yep he's been doing amazing localization stuff for years like going back to nbc and razor pages all kinds of stuff so really cool to see his contribution there yeah no he he got involved early on i mean he's involved in in a lot of open source projects i don't know how he finds the time but uh he's made a a really big contribution um to octane i mean a lot of the localization stuff is is you know he did all the heavy lifting on it so really appreciate his contributions um other capabilities i guess so i mean this is a page of course you can have as many pages as you want um each page can have as many modules as you want on them if we hover up here this is the control panel which has some functionality on it as well you can easily add additional pages edit existing pages you also can add modules to the page simply by just choosing them from the list by default there's only a single module like i said the html text module but this is where any of your custom modules would be located as well and if we go into the admin dashboard we've got a lot of functionality that's been built out that you can take advantage of so things like you know defining all of the different configuration options for your site or in site settings um and this is where you know your progressive web application can be enabled right you can turn on to to basically convert your convert your web app into a progressive web app you've got smtp you know server capabilities where it's also got that a background job that runs and sends out the the messages asynchronously we've got ability to set your logo and so a lot of this i guess people would would think is sort of cms like functionality but a lot of web applications also have this same kind of need for functionality so that's site settings other things like page management so you can you know you have a whole lot of different pages that are part of your site user management and currently this is using the net core identity system um for you know managing your user accounts it's got custom role management as well you can set up as many different roles as you want and sign them to users you can set up profiles with a whole bunch of different custom profile fields if you so desire if you want to capture different information for for your users okay so like i could if i was doing like students and teachers or something i could just add profile for that yep yep so and all sort of that's done interactively and then it'll show up in your user profile cool file management so complete file manager so you can have you know as many folders as you want you can set the you can set the permissions of who's allowed to browse custom folders on your system who's allowed to view the files who's allowed to edit um like basically upload files to those folders so a lot of capabilities there you can upload files like single file multiple file we had a like a file uploader even before one was natively available in blazer um and actually we haven't changed the one we have because it works perfectly fine um yeah it's gonna recycle content yep folks are curious to know on the um identity front does octane support azure id for user management it does not support azure id yet that's on the roadmap for i guess it would be the version after this 2.1 version goes out so the ability to support other types of authentication which shouldn't be too difficult but to do it in a generic way so that you can enable you know various types of different authentication mechanisms will take some some effort okay yeah things like the event log this is where people were asking about logging so all the the events in the system are logged to a central location for a site um with information and you can go in and you can view the detail you know and it like i said it's like it uses a serialog type of format where you know you've got your template and then you can store the properties of your various objects as well so pretty pretty robust logging actually okay and of course a user interface actually see the log as opposed to having to dig through database tables or text files or however you're doing your logging right yeah i noticed that as i was playing with it like because i would add a module or change a page around it would show little messages showing that it had been logged and like the history of the the page and stuff so yeah yeah so it's got full sort of auditing capabilities as well site management is where you can set up as you know multi-tenancy so you can have as many different sites as you want each with their own look and feel their own users their own roles their own content and typically that's linked to some kind of a unique uh url so i mean you could have it broken down by different domains um or you could have similar the same domain with just uh a root path afterwards so you can have you know your site slash department one department two department three that all separated so that's sort of the multi-tenant capability um language management i don't have any languages installed at the moment but this is where you can control the sort of the languages within the site which are enabled i mean system management you can also you know you have swagger for the complete set of apis that are available oh cool out of the box so yeah swagger support um what else is in here sql sql management if you want to you know interact with your backend database by running queries directly of course these features are all only available because i'm logged in as the host user normal users wouldn't have access to this and schedule jobs um so so those those scheduled jobs those are like when i played with this there's not a way to like add in a new schedule job here this is more for like the site admin jobs that like i don't know do things behind the scenes for you or yeah the way to add a scheduled job is you actually have to create a class which um basically inherits from a base class in the core framework um and there's an exam i'm not there should be an actual scheduled job here the notification job but um and then once you have once a scheduled job has been created as a class you can you can specify the schedule um in this area for how often it's going to be executed right you could say you know every hour every day whatever you know and so and if it's using the i scheduled or i hosted service interface for that yeah so a lot of functionality here so anyways what i'm going to show you i guess is like because the idea here is that yes it provides you a lot of functionality for building sort of a basic site however the goal behind a modular framework like octane is that you're going to extend the functionality with your own custom functionality so let's go into this i guess private page for now and we're going to just get rid of this module and that'll go to the recycle bin but now we're going to create a module so to do that we've made try to make that as simple as possible so the other thing is when you're coming up to speed on a new framework it's often very challenging to understand the specific sort of opinionated nature of that framework so how do you make it easier for people to get up and running quickly well we created a sort of a a module creator capability so to do that i can go into my developer modules and i can choose the module creator and this if you're watching and you may have zoned out or you're like whatever this pay attention here this is amazing this is the part that blew my mind when i was like playing with this it's really cool yeah so with the module creator i can just add a module to the page and essentially what it's going to do is it's going to ask me for some sort of parameters for scaffolding out the code for building a module in octane and it's going to scaffold out all the code that's necessary to create a typical module so i'm going to just give it a name i'll just call this demo module i guess i'm going to choose an external template only one template is provided it's extensible so you can create your own templates as well but there's only one provided as part of the framework itself i'm going to choose framework version 201 because that is actually the latest version that's available on nuget um i'm running a more recent version here and then i say create module and it tells me that the source code for my module has been created at the location specified and of course i need to compile that module because a module is essentially a razer class library so i need to compile it to make it functional and it tells me that my code has been created at this location so we'll close this now and we'll go to that location and we can see that it created all this code for me created solution file i'm going to open that solution file and it actually created it based on the parameters that i provided so it named it named the module softvision.demo module and it actually created four different projects for me so it has a client project which is where all of my razer components are located so i've got an index component which is my sort of default view it's got an edit so that i can edit the content it's got a settings component as well i also created the services for dealing with my backend api if i look in my server project we can see that it created my controller for me with all of the standard sort of crud methods i would expect and the service is wired up to the controller automatically created my repository for me created scripts so that it can generate the database table for me so it created all of the the database table here and it also created some javascript files css file these are empty but this is where you would put your specific logic if you were going to use custom css or custom javascript it's also got a shared project for my model so this would be the the actual data that i'm going to be managing so and what else oh it also has this package project and this package project is used to compile all of the the other projects into their dlls and then deploy them into the octane instance itself so if i look at this debug command file it's generated all this for me but basically when i build this particular module it's going to automatically as a point post build step copy all of the necessary dlls and pdb files as well as the static assets into my octane framework so that it it is aware of them and then when it runs it'll automatically recognize them if i compile in release mode it'll actually package up a nuget they'll package up a new get package for me automatically and it'll actually deploy that nuget package into a specific directory which will be installed so i'm going to compile this in debug mode while you're doing that we had a few questions come in just um one was and and this was i was wondering about this too what are you using to actually generate the code for these is this like concatenating strings or is it yeah it's it's it's it's just a series of um basically text files that are in a specific folder structure and yeah this the system just opens the text files replaces any of the tokens that are in them and and saves them in a particular location so it's not doing anything fancy um it's not and it's not using like the visual studio templates or or anything like uh or yeah it's not tied into the com like the cli in any way okay it's actually it's actually quite simplistic for what you're doing it's just it's file it's it's it's not super dynamic it's basically names and namespaces and stuff so yeah we had one one uh person asked a few times so i just as far as as identity um i think i understood your answer to be like this is coming up more of the extensibility but the question on identity server or open idex integration that would be coming up in the future right yeah yeah yeah it's it's only using sort of a cookie-based authentication just simple authentication right now okay one more question to bug you with was uh can can octane be deployed over azure static web apps uh so it can be deployed to azure azure static web apps uh i don't know i don't think it can because of a database right you need to yeah well yeah and so that so that would be i guess the question is if you were if you were running on web assembly the web assembly hosting model could you create something that runs on step as your static web apps and not currently um because the architecture is designed in such a way that it it'll support both hosting models but it doesn't yeah it doesn't support that static that static mode okay yeah all right uh yeah so once you've compiled the application obviously it created all these dlls for you and it deployed them so if i now go back to my octane instance and run it again on startup it's going to recognize that this new module that i created exists and it's actually going to execute the sql scripts for me automatically so that the database is provisioned properly within my tenant and if i go back to the page that i created it on i need it's been compiled now so i need to activate the module and it boom this is the the module that we just created it has all the functionality that you would expect so i can you know i can add some text there i can save it i can delete it um so all of the so basically that data is being stored to the backend database but it's a client server complete client server application right which is running here um being surfaced through octane um behind the scenes so that would be how to create a module so as a blazer developer i would feel comfortable like i browse through that generated module project and it's just standard razor code c-sharp like this is something where you could pretty quickly create just standard blazer stuff and then it's then light it up in your project right yep so yeah i mean it's just very very standard razer components um yeah wow cool yeah but the fact that i mean you can scaffold out at least a starting point so that you can get something working and then start hacking it into you know what you want for your own specific purpose um just it gets you pretty far down the path right away without fumbling along which was one of the goals um and the ability to kind of like share this between different projects like i could see you know the whole kind of site builder thing maybe i build like a school management system or whatever you know so some kind of back end thing for my department at work i can share those modules across multiple projects and tenants and all kinds of stuff then correct yep yeah and the other area that where you can extend octane is through themes and i'll show you that as well so again we would go in and go into the developer modules here and we'd choose the theme creator and we'll add that to the page very similar kind of concept where you know it'll ask me for some basic information um so i'll still put in the same stuff here i'll call this demo theme choose the theme template target 201 and create the theme and this way it scaffolded the code at a different location so we'll close this down and we'll open that so again scaffold has done out a bunch of code for me i can open the theme project i'll show you the sort of the internals of what a theme looks like because it's again just you know razer components so in this case there's only really a client project because a theme doesn't have any back end right it doesn't have any server-side logic required it doesn't have a database to interact with it doesn't have an api it's just a front-end razer component so a theme can have theme files and container files that are part of it you can have more than one if you want the theme itself is just you know it's it's very simple and and of course octane uses bootstrap so we're taking advantage of the bootstrap styling but then we have a bunch of razor components to do specific functionality like if we want a logo displayed in that location we have a logo component in the user profile login here's the panes there's a bunch of different panes that are defined here so so that when i use this particular theme i can inject content into these panes so that's the theme concept and i should show you something down at the bottom here because this is quite interesting as well so when you define either modules or themes you also define the resources that so the static resources that that these um components rely on so in this case i'm saying that this particular theme relies on bootstrap as well as a custom css file as well as some javascript files which are all just defined within the theme itself and then when you run the arcane application it reads these resources and it dynamically inserts them into the head of the page for you and i'll show you that in a minute because this is obviously different than the way that a lot of laser applications work um we we wanted to use like things like the you know the the css isolation and things like that but those features don't work necessarily in a dynamic manner in the in the way that octane behaves so we had to come up with our own solutions for those and if we look into the wwe root folder for this particular theme you can store your static assets there as well so again there's a package thing or sorry a package project with a debug command file and release command file we're just going to build this in in debug mode so it built the dll deployed it and it deployed also my theme css file as well so if i go back to octane now and i run it it'll recognize that there's a new theme simply by the existence of those dlls being in the bin so on startup it you know of course it's able to find those um and if we go back to that private page i can activate the theme so in this case this is just going to remove the module but to actually apply the theme to the page i can go into my page management and i can go into my appearance area and i can say that i want to use this new theme demo theme that i just created and i'm going to use the container that's part of that as well and i'm going to save it and bam it uh completely changed the it swapped in a completely different set of of bootstrap css files for this particular page and if i go to the home page dynamically swapped in the previous the other set of css files so it's basically dynamically switching out the javascript and css files at runtime as you switch from page to page it's really cool too like i saw there's a demo um cerulean theme but because this is based on bootstrap you can very quickly get a bootstrap like theme or a paid bootstrap theme if you wanted to and like implement that right correct yeah yeah and of course you do you don't necessarily well you need bootstrap at least for the administrative functionality um if you wanted to use other css frameworks maybe for the front end you could do that there's no reason why you couldn't and those were just all referenced in that area where you defined the bundles you could just reference whatever css you wanted to there correct yeah yeah next yes i guess switching back there's a few things in the slides here still um so i mean a sample application so one application that uh i created for the.net foundation was keeping track of all of the.net foundation projects um and basically it's running octane and it goes out to github for each project and it pulls back the metrics for those repos every day so that it has trend analysis of which projects are part of the foundation basically have the most pull requests in a given date range or other stats as well and we can actually look at that here so just refresh this so this is uh this is running it actually not the latest version of octane but it is running a version of octane and we can see that you know it this is this this component at the top here is actually loading in chart.js so javascript library to produce this this graph um the back end is this is all running on azure of course um and then you know all of the different.net foundation projects are here and i mean it's super responsive right and that's one of the benefits of a single page application model like like that blazer provides it's very very powerful and so yeah all this data exists here i think going back to like last june of 2020 so a lot of a lot of data here um but this is this is running this is an example of you know an application built on top of octane for a specific purpose so is this like a lot of custom modules then built in there or is it like that's just really just one custom module wow that does that does um yeah that does the graph and then the the actual detail below and of course it also has a scheduled job which runs and goes to like github and retrieves the data on a daily basis yeah and then the community of course is available mostly on on github we're taking a lot of advantage of the discussions feature in github which was recently um exposed in experimental ways we have a lot of great discussions going on there we talked about localization support and and hisham and the great efforts he's made and then the the different translations that we have so far the next big feature which is coming this month is support for multiple databases so in the current version of octane it only runs on sql server and local db um we are moving away from well we're going to continue to support of course michael's sql server but we're going to also offer sqlite mysql and postgres support in this next release which is the 2.1 release and charles nurse who is you know a long time colleague of mine who worked on dnn he actually did all of the work to make octane run on these databases he just actually submitted the pull request yesterday and it's a massive one so i've got to sort through that to get it merged but that will be in the next version and that'll be out this month so that was one of the the highest amounts of feedback that we got from the session that i did at dotnetconf in november was that people asked if it could run on other databases um so that of course they could run it natively on on mac or linux right without the sql server is not universally available um and so we're going to have that capability in this next release and really special thanks to charles for all the work he did on on getting this to work also it sort of it modernizes one aspect of the framework which i wasn't particularly pleased with from the start which is we were relying a lot on like sql scripts um and this will actually embrace the ef core migrations approach um both for the core and for module developers as well which is uh i think is important because that's that is the way that most developers would like to interact with databases nowadays yeah um i have a it's sort of a laundry list here of some of the challenges i guess that we encountered in building a fully dynamic framework like octane um most of these come down to things like static linking so there's a whole lot of magic that.net core does behind the scenes either in ms build or visual studio or you know nuget there's there's a lot of stuff that happens behind the scenes that developers are not particularly aware of things that i call magic that just make functionality work and that functionality doesn't work well in an environment where everything is dynamic right where you don't have everything statically linked together um so a lot of the features that um that you're used to using when you're building more static applications don't necessarily work when you're building a dynamic application like like octane and so you have to take responsibility for a lot of things yourself right things like assembly loading by default.net core only loads assemblies that are statically linked well that's not going to work in a in a dynamic application so you have to manually load the assemblies yourself you have to manually register things during startup you have to manually deal with dependency injection we have to build a custom router we're using dynamic components everywhere as opposed to you know static components of course support for both hosting models is a bit tricky you have to do everything in a client server manner and then deployment and of course we wanted to have runtime deployment capability meaning uh the ability to actually into deploy a nuget package into an actual running application uh to light up new functionality so this is not something that is really even easily offered by by.net core it's like a use case i think that is it hasn't been prioritized for sure but it's something that was available in dot net nuke it's something that's available in a lot of dynamic application frameworks and so um enabling a lot of this functionality had a lot of challenges but that's why developers rather than building their own modular framework would probably be better off using a framework like octane because it's done a lot of that heavy lifting for you yeah wow yeah all those sorts of things including even just like as i was looking at your um you know the dnf project viewer like being able to just run that with the scheduled task behind the background that you know that's integrated into this and of course i could go and do that but it's like it's just one more thing so it's great to have this all kind of put together for you yeah and that's the whole idea is like a framework that gives you a lot of the basic functionality that you would need in any web application i think we've got a few more questions and then we can round it off sure cool so um one of um the viewers was curious to know um what's the story for passing values between modules on a page is that a recommended practice um looks like that's something they were trying to do but are looking for advice on and i guess generally where do people go to for help um for using octane do you recommend the github discussions page yeah probably yeah for that type of a question it would be best to go to the discussions area um like most open source projects the documentation isn't robust at this point in time i would love to have you know more contributors in the documentation area there is a documentation repo that exists and there is a lot of well there's basically server side like api documentation that's being generated using doc fx but that doesn't answer the type of questions that a lot of users have yeah on sort of development techniques so passing passing information between modules on the same page or across pages i guess so i i would typically you would use the routing for that um so you would typically just add parameters there's you can use query string parameters or you can actually embed parameters into the the route itself um so both of those are supported but it so if you wanted to pass information between them that is one way of doing it um you can also like register a service if you wanted to to pass state between components i mean all this all the standard blazer state management capabilities would be available in octane as well so between modules on a page this a service would probably be the best or you you could do that or you could it depends on what the nature of the data is right if it's something simple like just passing maybe like an id between from one module to another you could certainly use um routing for that right just a query stream parameter and that's where that's how a lot of the the existing functionality in the application works currently i was curious to know um we've talked about documentation we've talked about some of the localizations that you have for folks who are interested in contributing to octane or becoming a part of the community what are the best ways to do that that's a good question but and i think that the best way to get involved in any open source project is you know to get involved in probably the github community initially you know look at some of the questions that are being asked there determine if you can perhaps participate by providing helpful answers that that's like sort of like the first step in getting involved if you have an inclination for writing docs there's usually always a need for writing documentation in any open source project and then the one thing i would avoid doing is making a whole bunch of core modifications and submitting a pull request and hoping that those will be accepted because i mean usually there is you know some there's usually a road map and there's usually certain philosophical goals that the open source project is trying to align to and until those are well understood then you know it might not be worth the time and effort to put in a whole bunch of effort to make a lot of changes only to find out that they're they're not accepted right and so typically what i've found is that um developers who want to contribute in a more meaningful way they'll actually ask questions in the discussions area they'll say you know this is the problem i'm having this is maybe the suggested solution what do you think right is this is this in line with the direction that you would like to go and then get that feedback you know create that sort of that feedback loop and then you know if um and other people will probably chime in and say whether or not that's an interesting feature that to them as well and and really just be part of that community discussion to move things forward yeah i totally agree with that and it resonates um for blazer as well it always starts off with the conversation the dialogue about what you want then um immediately the code and sometimes it's a misunderstanding on my part like i'll think instead i'll say hey this should have this feature and i'll ask about it and they'll say oh actually it does like you're not looking in the right place or whatever yeah and i would say like the other thing is in octane in the blogs on the website in the blogs area um there's a quite a lengthy blog i wrote at one point with sort of the philosophy and so what the mission is you know what the sort of principles are and a lot of the different philosophies right on things that we're trying to achieve um and and i find that like it's good to have this because i can often refer back to it and say well that sounds like an interesting idea but it doesn't really align with with the overall principles of the project um and of course the great thing about open source is even if someone's not satisfied with that answer they can of course fork and they can create their own version and create that functionality which works perfectly well for them um there's always that flexibility as well all right cool wow yep well thank you so much for joining us on the show john to talk about octane um i thought demos were super interesting we had a lot of great um questions in the chat hopefully everyone um has learned what they needed to know about octane um and as sean mentioned try it out um start participating in the discussions if that's something that's interesting to you um become a part of the octane community definitely check out that blog post on the octane.org site which is flashing below me right now um because i read it and i thought it was really great it's um definitely fantastic to have open source projects write out their philosophies like that for anyone to kind of come in and see so that's pretty great work with that sean thank you and with that thanks for joining us on this live stream and if you're watching after the fact on youtube thanks for joining us and watching it um join us next time um which is our may edition of the community stand up where all of the blazer team members are going to be coming back on the show we're going to be talking about some of the new features that we've been working on building so if the demo that you saw for hot reload and aot earlier today excited you there's going to be plenty more of that next month so bookmark it on your calendars and i will see you folks next time thanks everyone thank you thank you bye bye [Music] [Music] you

Channel: dotNET

Views: 6,014

Rating: 4.968504 out of 5

Keywords:

Id: livNmRqDnMI

Length: 79min 52sec (4792 seconds)

Published: Tue Apr 13 2021