App Services – Page 30 – My Point of View

Dapper Transaction

Dapper provides different ways to work with transactions. The most common way is to use the BeginTransaction method available on the IDbConnection interface. That will return an instance of IDbTransaction, which you can use with Execute and Query methods to add, remove and modify data in your database tables.

// Open the connection and start a transaction: 
using (var connection = new SqlConnection(connectionString))
{ 
    connection.Open();
	
    using (var tran = connection.BeginTransaction()) 
    { 
        // Execute your queries here
		
        tran.Commit(); //Or rollback 
    }
}

You can also use the TransactionScope class, which provides a much simpler way to deal with transactions:

// Open the connection and start a transaction: 
using (var scope = new TransactionScope()) 
{ 
    // Execute your queries here
	
    scope.Complete(); //Or it will automatically rollback 
}

While using Dapper transaction, i have started getting this error;

"A TransactionScope must be disposed on the same thread that it was created."

Looking around, I figured this out;

In .NET Framework 4.5.1, there is a set of new constructors for TransactionScope that take a TransactionScopeAsyncFlowOption parameter.

According to the MSDN, it enables transaction flow across thread continuations. Here is an example;

using (var tx = new TransactionScope(TransactionScopeAsyncFlowOption.Enabled))
{
    await SomeMethodInTheCallStackAsync()
        .ConfigureAwait(false);

    tx.Complete();
}

For complete detail, read this article.

Reference

https://www.learndapper.com/misc/transaction

ES6: How to access a static getter from an instance

How can i access a static getter from an instance of the class that implements that getter?

for example, i have this class:

class Component {
  static get isComponent() { return true; }

  constructor() {}
}

const c = new Component();

how can i call from “c” “isComponent” of “Component” class? I read around and all I found is something like that:

Object.getPrototypeOf(c).isComponent

but this is not working on my case because there is no “isComponent” method in Component prototype object. The above code works if I write the class like this:

Component.prototype.isComponent = () => { return true; }

but this is not the way i would like to write classes. What am I missing?

statics become properties of the constructor function, which you can access on an instance via the constructor property:

console.log(c.constructor.isComponent);

class Component {
  static get isComponent() { return true; }

  constructor() {}
}

const c = new Component();
console.log(c.constructor.isComponent); // true

Of course, that relies on constructor not having been mucked with. 🙂 Before the class syntax, you’d see people forgetting to set constructor properly in inheritance hierarchies all the time. Thankfully, with class syntax, it’s handled automatically so people forgetting is no longer an issue.

In theory, the instance may have an “own” constructor property, shadowing the one on the prototype. So if that’s a concern, you could go to the prototype:

console.log(Object.getPrototypeOf(c).constructor.isComponent);

class Component {
  static get isComponent() { return true; }

  constructor() {}
}

const c = new Component();
console.log(Object.getPrototypeOf(c).constructor.isComponent); // true

Alternatively, if you know what constructor it is, you can go direct to the source:

console.log(Component.isComponent);

class Component {
  static get isComponent() { return true; }

  constructor() {}
}

// const c = new Component(); <== Don't need it
console.log(Component.isComponent); // true

..but only if you know in advance that Component is the constructor you want.

For complete discussion, follow this link.

Knockoutjs context debugger

If you want to make your life easier with Knockout library, Us Kockoutjs context debugger. You can download it from here;

https://chrome.google.com/webstore/detail/knockoutjs-context-debugg/oddcpmchholgcjgjdnfjmildmlielhof?hl=en

The only issue, this doesn’t work in development mode. Press CTRL + F5.

Best JavaScript Framework

JavaScript has been widely used for front end development for almost 2 decades. Popular frameworks such as React, AngularJS, and Vue.js are gaining and losing a legion of followers but still manage to rank top in best JavaScript frameworks, while few new competitors have been gaining ground recently to challenge the big 3. As per the State of JS 2022 survey, here are the 8 best JavaScript frameworks for front end development in 2023.

ICONS fonts Vs SVG ICONS

Before the discourse of icon fonts vs SVGs, when browsers had non-existent CSS support, images were the only way for developers to showcase icons using the classic tag. Here is an example of an image icon.

<a href="contact-us.html">
       <img loading="lazy" src="mail.jpg" alt="email" />
</a>

Icon fonts are vectors making them scalable to any resolution, still they are not free from snags. Using icon fonts can lead to the generation of multiple server requests and can also lead to invisible text flashing during the period when font libraries are still loading. If the browser for some reason does not comprehend the icon font, a blank space is displayed. This is the reason why a lot of developers prefer the latter in icon fonts vs SVG icons.

Verdict on Icon Fonts vs SVG Icons – File Size : As far as file size is concerned Icon font has a slight advantage over SVG. However the difference in file sizes is not that prominent and can be ignored.

Verdict on Icon Fonts vs SVG Icons – Accessibility: When it comes to accessibility, SVG is the clear winner.

Verdict on Icon Fonts vs SVG Icons – Performance: SVGs have a slight edge as Icon fonts are susceptible to occasional failures.

Verdict on Icon Fonts vs SVG Icons – Scalability : In terms of scalability, SVGs have a big advantage over Icon fonts.

Verdict on Icon Fonts vs SVG Icons – Animation : SVGs over a much higher degree of versatility as compared to Icon Fonts in terms of modifications and styling control.