Blazor Flashcards

1
Q

Is blazor client side scripting or server side scripting ?

A

Blazor supports both client side and server side scripting

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

How can browser execute c# code

A

Blazor can run c# code in web using webassembly

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What are blazor hosting models

A

Blazor web assembly and Blazor Server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

How blazor web assembly works

A

Application runs in browser on web assembly . Compiled application code , its dependencies and .net run time are downloaded to the browser

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What is blazor server?

A

Application is executed on the server. Between client and server a signalR connection is established . When event occurs , it is sent to server through signalR connection . Only the difference div is passed to the browser not the entire div. In this way it is optimized

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What are pros of blazor web assembly model

A

Active server connection is not required , client resources and capabilities are used , full blown asp.net core web server is not required , can be hosted on own server , cloud , azure or CDN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Cons of web asembly model

A

Very first request takes long time

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What are pros of blazor server

A

App loads much faster
Runs on server resources
More secure since app code is not sent

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What are cons of blazor

A

ASP.Net core Server is required
Active connection to server is required
Higher latency
Scalability can be a challenge

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What is the entry point of blazor app

A

Main method inside program.cs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Is startup.cs specific to Blazor server app?

A

Yes , it is specific only to server app and has configure () , configureservices () methods

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does mapblazorhub() do?

A

It sets up signal R connection between browser and server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What are buliding blocks of blazor application

A

Components are building blocks of razor application

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What is the root component ?

A

App.razor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does blazor.server.js reference do in _Host.cshtml

A

It sets up realtime signalR connection between browser and server

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

How to specify which files to be loaded based on relative path in url

A

Using @page directive in the razor file
Eg:- @page “/“ , @page “/about”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

How component rendering works ?

A

App.Razor handles the routing , if for a given route a component is present it renders using <found></found> property else uses <notfound></> property</notfound>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

To what layout file are the components rendered?

A

Components are rendered to @Body directive specified in MainLayout.razor

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

What file is similar to view.cshtml?

A

_Imports.razor file is similar to view.cshtml it contains all the assembly references needed by razor components instead of specifying them individually in each file

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

What does appsettings.json contain?

A

Just like .net mvc core application , It contains configuration settings

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

What is the root file in blazor web assembly ?

A

Index.html is the root file. This file is responsible for downloading all the dependencies and starting run time

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Can we modify the blazor web assembly to blazor server and vice versa ?

A

Yes , since blazor componets form the basis of the application . If properly written we can interchange both the versions

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

What is blazor ?

A

Blazor is a component driven framework . Components can be nested , reused and shared across multiple projects . Components have .razor extension . Component names must start with uppercase charcter

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

How to access variables from code to html

A

By prefixing @ for variable names defined in code we can access the variables in html

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

What is razor component ?

A

It is a combination of html and c# code

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

How to split component html and c# code ?

A

We can use either partial files approach or base class approach to split html and c# code into individual files . Doing this can help to unit test easily

27
Q

How does partial class approach work?

A

Start by creating a class file like filename.razor.cs and add the partial modifier to the class to make sure it compiles before the page is rendered

28
Q

How baseclass approach works?

A

Start by creating a class file and extend the ComponentBase class . Next add @inherits directive with the created class file name in the razor page . You should be able to access the code inside class file

29
Q

What is client-side rendering?

A

Final HTML markup is generated by the blazor web assembly runtime on the client.

30
Q

What is server side rendering?

A

Final HTML markup is generated by the ASP.NER core runtime on the server. The HTML is sent to the client over a network for display by the client’s browser.

31
Q

What is static ssr?

A

Server produces static HTML that doesn’t provide for user interactivity between user and c# code or maintaining razor component state, no user events on the client can be processed with .net running on server

32
Q

What is interactive rendering?

A

Interactive rendering means that the component has the capacity to process .net events via c# code. The .net events are either processed on the server by asp.net core runtime or in the browser on the client by the webassembly based blazor runtime

33
Q

What are razor components?

A

Razor is a syntax for combining html markup with c# code designed for developer productivity. Components written in razor (in blazor) are usually referred to as razor components or components

34
Q

What is rendor mode?

A

Every component in a blazor web app adopts a rendor mode to determine the hosting model that it uses, where it’s rendered and whether or not its interactive

35
Q

What is prerendering?

A

Process of intially rendering page content on the server without enabling event handlers for rendered controls. The server outputs the html UI of the page as soon as possible in response to the initial request. Prerendering is always followed by final rendering either on the server or the client

36
Q

Is prerendering enabled for interavtive components?

A

Prerendering is enabled by default for interactive components

37
Q

What is the first component loaded by default?

A

App.razor component

38
Q

What is default rendor mode in blazor server app?

A

Static

39
Q

How should be the components designed ?

A

A component implementation should not be tied to a specific rendor mode or hosting model. A component implementation should avoid assumptions on where it’s running and should degrade gracefully when rendered statically .

40
Q

What is the default rendor mode for routable pages?

A

Routable pages use the same rendor mode as the router component tagt rendered the page

41
Q

Where does the rendor mode assigned to app is specified?

A

It is typically specified where the Routes component is used in the App component

42
Q

What is Rendor mode inheritance?

A

Child component( component placed inside another component) inherits the rendor mode of parent component

43
Q

What can be passed as parameters to a child component?

A

Parameters must be serializable. Non-serializable component parameters such as child content or render fragment are not supported.To make this possible, wrap the child component along with non serializable content in another component and use this newly created component as needed

44
Q

How to maintain static SSR components along with interactive components?

A

Area of static ssr components: a folder is dedicated to static components and render mode is set in routes component based on path to folder
Ssr components spread out: rendor mode is set in component instances using @rendormode directive

45
Q

What are cascading parameters?

A

Cascading values and parameters provide a convienient way to flow data down a component hierarchy from an ancestor component to any number of descendant components

46
Q

What is root level cascading values

A

Root-level cascading values can be registered for the entire component hierarchy. Named cascading values and subscriptions for update notifications are supported

47
Q

What is cascadingvalue component?

A

A cascading value component wraps a subtree of a component hierarchy and supplies a single value to all of the components within its subtree

48
Q

How to provide cascading values that apply more broadly to the app ?

A

By specifying in layout file , wrapping the markup of the routes component in a cascading values.

49
Q

Will components are rerendered when the cascading value is changed?

A

Similar to component parameters , components accepting a cascading parameter are rerendered when the cascading value is changed

50
Q

When are razor components rendered?

A

Components must render when they’re first added to the component hierarchy by a parent component. Components also render when an updated set of parameters are applied from a parent component , updated cascading parameter value is applied , after notification of an event and invoking one of its own event handler , a call to its own statehaschanged() method

51
Q

What does @code do?

A

It identifies a block of c# code in razor component. There can be multiple @code directives in a single razor mark up file. Blazor will collate into a single block

52
Q

What does @page do?

A

This directive generates a [RouteAttribute] on the transpiled class , enabling blazor routing to identify which component to render given a specific address in the url

53
Q

What does @layout do?

A

Generates a [layoutattribute] on the transpiled class. Blazor uses this to determine which layout to use to wrap the contents of a page

54
Q

What happens when you set prerender to true

A

OnInitialized async method is called twice . So if you put data load logic there , data is loaded twice . To prevent this use OnAftertender async method

55
Q

What are cascading parameters?

A

These provide a way to pass paramaeters from parent to all its descendants down the tree .Based on parameter type or name these can be collected in child component

56
Q

If cascading value is changed , will it be passed automatically and refresh the child component ?

A

Yes , similar to component parameter , components using casacding value will be updated and automatically stateHasChanged is called

57
Q

Should the cascading value parameter use the same name in parent and its child component?

A

Yes , same name should be used . Properties are automatically set unlike component parameters where we need to explicitly assign them

58
Q

Will cascading values cause performance issue?

A

Since, framework needs to constantly monitor to pass the values to child components , there can be performnace issue . By setting isFixed = true , monitoring is stopped which can be used when cascading value doesn’t change

59
Q

Can a cascading parameter updated ?

A

Yes , they can only be updated in head parent component but not in any of the descendants

60
Q

Can we use event triggers to update the cascading value in parent from descendant?

A

Yes , by using event triggers . We invoke parent function that sets cascading value from child events like button click function etc

61
Q

Can we invoke parent methods or modify properties in descandant components?

A

Yes , by passing down the complex type like component instance to descandant we can call parent methods that act on parent properties

62
Q

How to set casacding value in parent from any of the descendant other than direct child?

A

Create a series of events from parent component to descendant along the path in the tree

63
Q

Can we pass cascading parameter across render boubdaries ?

A

No we cannot