DEV Community: Acmion

Julia Object Oriented Programming

Acmion — Sat, 29 May 2021 19:36:26 +0000

Julia is a nice and promising scientific language for high performance computing, with the central paradigm of multiple dispatch. However, Julia does only partially support object oriented programming (OOP) with dot notation. For example, "objects" can not have their own methods. Unfortunately, this happens to be the style of programming that I prefer.

This StackOverflow question
discusses the matter, however, the fields (if exposed) in the solution get wrapped in Core.Box, which kind of defeats the purpose of fields, as they can no longer be accessed in the manner that one would expect.

I figured out an undocumented way in which object oriented programming with dot notation, including methods and without boxing, can be implemented and decided to write this post so that the knowledge can be passed on and the relative common question of dot notational OOP in Julia could be answered with more than "No, it does not work". Additionally, I hope that this way of programming would become more widely supported in Julia.

Python Vs Julia Classes

Consider the following class in Python and how it's methods are called:

# Python
class ExampleClass:
    def __init__(self, field_0, field_1):
        self.field_0 = field_0
        self.field_1 = field_1

    def method_0(self):
        return self.field_0 * self.field_1

    def method_1(self, n):
        return (self.field_0 + self.field_1) * n

    def method_2(self, val_0, val_1):
        self.field_0 = val_0
        self.field_1 = val_1

ex = ExampleClass(10, 11)
ex.method_0()
ex.method_1(1)
ex.method_2(20, 22)

The common way to implemented this in Julia would look like this:

# Julia
mutable struct ExampleClass
    field_0
    field_1
end

function method_0(example_class)
    return example_class.field_0 * example_class.field_1
end

function method_1(example_class, n)
    return (example_class.field_0 + example_class.field_1) * n
end

function method_2(example_class, val_0, val_1)
    example_class.field_0 = val_0
    example_class.field_1 = val_1
end

ex = ExampleClass(10, 11)
method_0(ex)
method_1(ex, 1)
method_2(ex, 20, 22)

The key difference between these two examples is that the methods in Python belong to the object and the functions in Julia belong to the global scope. I do not like the concept of global scope and would like to avoid it as much as possible.

Julia OOP Methods With Dot Notation

By implementing the class in a different way we can replicate the Pythonic dot notation. Consider the following:

# Julia
mutable struct ExampleClass
    field_0
    field_1
    method_0
    method_1
    method_2

    function ExampleClass(field_0, field_1)
        this = new()

        this.field_0 = field_0
        this.field_1 = field_1

        this.method_0 = function()
            return this.field_0 * this.field_1
        end

        this.method_1 = function(n)
            return (this.field_0 + this.field_1) * n
        end

        this.method_2 = function(val_0, val_1)
            this.field_0 = val_0
            this.field_1 = val_1
        end

        return this
    end
end

ex = ExampleClass(10, 11)
ex.method_0()
ex.method_1(1)
ex.method_2(20, 22)

Now it works like in Python, just as I like it!

Private Variables

What about private variables? I see that there are two ways in which private variables can be implemented. One is to add new fields to the
struct, but prefix them with an underscore like this:

# Julia
mutable struct ExampleClass
    field_0
    field_1
    method_0
    method_1
    method_2
    _private_var

    function ExampleClass(field_0, field_1)
        this = new()
        this._private_var = 0
        ...
    end
end

Unfortunately, the variables are not really private and can still be accessed from the outside. Another way, with truly private variables
is to include them in the constructor like this:

# Julia
mutable struct ExampleClass
    field_0
    field_1
    method_0
    method_1
    method_2

    function ExampleClass(field_0, field_1)
        this = new()
        private_var = 0

        ...
    end
end

Now the private variables are really private, however, they can not be accessed with dot notation from this, which is unfortunate.
I prefer the underscore method.

How Does it Work?

The revised Julia code relies primarily on three things: closures, variable capturing and anonymous functions.

Caveats

Unfortunately this way of programming has some caveats, at least when compared to the "idiomatic" Julia way.

The size of the classes grow, with each method increasing the size by 8 bytes (at least on 64 bit systems) and thus allocation becomes slightly slower.
Calling the anonymous functions is slightly slower than calling the global functions.
Capturing variables in Julia has some performance implications. See the Julia docs. Using let this = this may have some performance benefit when applied to the anonymous functions, but I am uncertain of its effects in this case.
The classes (or structs) must be mutable, since they are modified in the constructor. This can perhaps be circumvented in some fashion.

Performance Evaluation

This section provides a quick performance comparison between the both styles in Julia. Note that the results are highly dependent on the fields and
methods of the classes and as such this test should not be considered to be representative of every situation. This test focuses on allocation
and method call performance. You should benchmark your own code for your self, which probably has other underlying assumptions. The benchmarks are executed
with these two types:

# Julia
mutable struct DotNotationType
    field_0::Int
    field_1::Int
    field_2::Int
    field_3::Int
    do_work::Function

    function DotNotationType(field_0::Int, field_1::Int, field_2::Int, field_3::Int)
        this = new()
        this.field_0 = field_0
        this.field_1 = field_1        
        this.field_2 = field_3
        this.field_2 = field_3


        this.do_work = function(n::Int)
            sum = 0

            for i in 1:n
                sum += this.field_0 * this.field_1 + this.field_2 * this.field_3 ^ n 
            end

            return sum
        end

        return this
    end
end

mutable struct GlobalScopeType
    field_0::Int
    field_1::Int
    field_2::Int
    field_3::Int
end

function do_work(gst::GlobalScopeType, n::Int)
    sum = 0

    for i in 1:n
        sum += gst.field_0 * gst.field_1 + gst.field_2 * gst.field_3 ^ n 
    end

    return sum
end

Boxing & Class Sizes

println(DotNotationType(1, 2, 3, 4).field_0)
println(DotNotationType(1, 2, 3, 4).method_0)

println(sizeof(DotNotationType))
println(sizeof(GlobalScopeType))

The fields of DotNotationType are not boxed within Core.Box, as in this question on StackOverflow.
Additionally, the size of DotNotationType is 8 bytes, or 1.25x, larger than the size of GlobalScopeType. Note that in "real" OOP languages, methods on a class do not generally make its memory imprint larger. This is due to the fact that the methods are conceptually placed in the global scope at compile time (not accounting for anonymous functions in other languages).

Allocation Performance

using Pkg
Pkg.add("BenchmarkTools")
using BenchmarkTools

function allocate_DotNotationType()
    types = DotNotationType[]

    for i in 1:100000
        push!(types, DotNotationType(i, i * i - i))
    end

    return types
end

function allocate_GlobalScopeType()
    types = GlobalScopeType[]

    for i in 1:100000
        push!(types, GlobalScopeType(i, i * i - i))
    end

    return types
end

# Assuming execution from a Jupyter Notebook
display(@benchmark allocate_DotNotationType())
display(@benchmark allocate_GlobalScopeType())

BenchmarkTools.Trial: 
  memory estimate:  78.89 KiB
  allocs estimate:  2010
  --------------
  minimum time:     23.629 μs (0.00% GC)
  median time:      26.958 μs (0.00% GC)
  mean time:        34.836 μs (17.34% GC)
  maximum time:     3.753 ms (96.40% GC)
  --------------
  samples:          10000
  evals/sample:     1
BenchmarkTools.Trial: 
  memory estimate:  63.27 KiB
  allocs estimate:  1010
  --------------
  minimum time:     17.818 μs (0.00% GC)
  median time:      20.827 μs (0.00% GC)
  mean time:        26.720 μs (15.82% GC)
  maximum time:     3.183 ms (95.79% GC)
  --------------
  samples:          10000
  evals/sample:     1

Allocating DotNotationType is about 1.29x (comparing medians) slower than allocating GlobalScopeType. This seems to be directly dependent on the
fact that the size of DotNotationType is 1.25x larger than the size of GlobalScopeType.

Method Performance

using Pkg
Pkg.add("BenchmarkTools")
using BenchmarkTools
dnts = allocate_DotNotationType()
gsts = allocate_GlobalScopeType()

function call_DotNotationType(dnts)
    sum = 0.0

    for d in dnts
        sum += d.do_work(4)
    end

    return sum
end

function call_GlobalScopeType(gsts)
    sum = 0.0

    for g in gsts
        sum += do_work(g, 4)
    end

    return sum
end

# Assuming execution from a Jupyter Notebook
display(call_DotNotationType(dnts))
display(call_GlobalScopeType(gsts))

display(@benchmark call_DotNotationType(dnts))
display(@benchmark call_GlobalScopeType(gsts))

-6.042282548123895e20
-6.042282548123895e20
BenchmarkTools.Trial: 
  memory estimate:  31.25 KiB
  allocs estimate:  2000
  --------------
  minimum time:     72.623 μs (0.00% GC)
  median time:      74.246 μs (0.00% GC)
  mean time:        79.119 μs (1.95% GC)
  maximum time:     2.326 ms (96.27% GC)
  --------------
  samples:          10000
  evals/sample:     1
BenchmarkTools.Trial: 
  memory estimate:  16 bytes
  allocs estimate:  1
  --------------
  minimum time:     24.066 μs (0.00% GC)
  median time:      31.175 μs (0.00% GC)
  mean time:        30.374 μs (0.00% GC)
  maximum time:     377.014 μs (0.00% GC)
  --------------
  samples:          10000
  evals/sample:     1

Both methods get the same result, which implies that both methods do the same work. However, calling the method of DotNotationType is about 2.38x (comparing medians) slower than calling the function of GlobalScopeType. I am not entirely sure what is causing the slow down, but it may have something to do with the issues mentioned in the Julia docs about the performance of capturing variables or it may have something to do with the optimization of anonymous functions.

Conclusions

OOP is possible in Julia.
OOP with dot notation methods is possible in Julia.
OOP without boxing of fields is possible.
OOP with dot notation does have caveats and generally worse performance.
OOP dot notation methods in Julia are implemented in a generally inferior approach than that of most mainstream programming languages. Note that this is due to the fact that the way of programming presented in this post declares the functions as anonymous functions. This is not how the most common "real" OOP languages implement class methods.

Great, we got a working solution for object oriented programming with dot notational methods! The issues with the dot notational way of programming may or may not affect the general performance of your application, but I expect that this is highly domain specific. For example, in the "Method Performance" section I specifically focused on measuring the performance of method calls. Measuring the performance of actual work within a method may behave drastically different. Regardless, this may at least be a good way of porting dot notational code from, for example, Python to Julia and hopefully this will encourage Julia to implement true classes with true dot notation!

CshtmlComponent V4.0.0 - .NET 5 and More

Acmion — Sun, 20 Dec 2020 20:39:48 +0000

CshtmlComponent was just updated to V4.0.0, which adds support for .NET 5 and manual component rendering. Check it out here: https://cshtml-component.acmion.com!

CshtmlComponent is a component library for ASP.NET Core and adds many features that contemporary solutions are lacking. The functionality is quite similar to that of PHP's Laravel Blade templates. You may even find it useful for your own projects.

CshtmlComponent - Scoped CSS

Acmion — Sun, 18 Oct 2020 12:14:10 +0000

CshtmlComponent is a component library for ASP.NET Core MVC or Razor Pages applications. The library has an extensive feature set and has served myself well.

Scoped CSS

Almost all of the major web component libraries or frameworks support scoped CSS. Scoped CSS is a feature that once you get used to it, you never want to go back to writing global CSS. CshtmlComponent does not explicitly take a stance on the issue, but still allows one to write scoped CSS, albeit SCSS (or SASS) has to be used. This blog post describes how this can be achieved.

Scoped CSS with CshtmlComponent

Install and configure CshtmlComponent. See instructions from the official documentation.
Install SCSS.
Create the component "ExampleComponent", in other words, create the files /Components/ExampleComponent.cshtml and /Components/ExampleComponent.cshtml.cs. The files paths are relative to the ASP.NET Core application root path. See more instructions in the documentation.
In /Components/ExampleComponent.cshtml create markup that resembles this:

<div class="example-component">
    <div class="example-component-content">
        <!-- Content here. -->
    </div>

    <div class="example-component-slot-content">
        <!-- Content here. -->

        <!-- NOTE: Important class="child-content". -->
        <div class="child-content">
            <!-- Render the slot content here. See documentation. -->
        </div>
    </div>

    <!-- NOTE: Important class="child-content". -->
    <div class="example-component-child-content child-content">
        <!-- Render the child content here. See documentation. -->
    </div>
</div>

Create the file /Components/ExampleComponent.cshtml.scss with content that resembles this:

.example-component
{
    // Style the wrapper here.
    padding: 10px;
    background: rgba(255, 0, 0, 0.1);

    & > .example-component-slot-content
    {
        // Apply styles to the slot content container here.
        padding: 6px;
        border: 4px solid rgba(0, 0, 0, 0.4);
    }

    & > *:not(.child-content)
    {
        // Apply styles to child tags that are used by the component (but not nested under .child-content) here.
        // Note: Requires a wrapper element. In this component, the elements with class="example-component-content" and class="example-component-slot-content" are the wrapper elements. Styles are only applied to children of the wrapper elements.
        h2
        {
            color: red;
        }

        .date
        {
            font-style: italic;
        }
    }
}

The SCSS under & > *:not(.child-content) is now scoped!
Add this to code to ExampleComponent.cshtml

<CshtmlHead>
    <link rel="stylesheet" href="~/dist/Components/ExampleComponent.cshtml.css" />
</CshtmlHead>

Run SCSS from the commandline with this command

sass --watch Components:wwwroot/dist/Components --style compressed

Enjoy scoped CSS in CshtmlComponent!

Notes

The SCSS based scoped CSS in CshtmlComponent is not a 100% substitution for how the scoped CSS works in other frameworks. For example, the class names do not get mangled.

Additionally, this SCSS based scoping demands that wrapper tags are added to the components. In other words, if a tag was added directly under the main class (in this case "example-component"), then styling under & > *:not(.child-content) would not be applied to it.

Regardless, scoped CSS is possible in CshtmlComponent and works just fine.

See this GitHub repository for an example on scoped CSS in CshtmlComponent.

CshtmlComponent V3.0.0 - Head and Body Content Injection

Acmion — Sun, 11 Oct 2020 05:46:04 +0000

CshtmlComponent is a component framework for ASP.NET Core Razor Pages and MVC projects. The feature set is extensive and a significant improvement over alternatives. Not for Blazor.

V3.0.0

The main feature of V3.0.0 is that you can now directly inject content in both the head and body elements once per component. This is especially useful in cases where components require extra functionality provided by CSS or JS files.

The developer may choose whether to prepend or append content to either tag.

Previous Method

Referencing CSS or JS files was previously also possible, via the usage of CshtmlInitial, which renders some content once per page. The definitions of components that rely on this could have looked like this:

@* Reference the associated component as model. *@
@using SampleRazorPagesApplication
@model ExampleComponent

<CshtmlInitial>
    <link rel="stylesheet" href="/style.css" />
</CshtmlInitial>

<!-- The content of the component. -->
<div class="example-component">
    <h1>
        ExampleComponent: @Model.Title
    </h1>

    <div class="example-component-child-content">
        <!-- Render the child content. -->
        @Html.Raw(Model.ChildContent)
    </div>
</div>

However, while CshtmlInitial gets the job done (the content of the tag is only rendered once per page), the problem with this approach is that CshtmlInitial will render the content wherever the component is first instantiated.

New Method

With V3.0.0 we can instead utilize CshtmlHead or CshtmlBody, which both render their respective contents once per page (unless otherwise configured). The component definition would now look like this:

@* Reference the associated component as model. *@
@using SampleRazorPagesApplication
@model ExampleComponent

<CshtmlHead>
    <link rel="stylesheet" href="/style.css" />
</CshtmlHead>

<!-- The content of the component. -->
<div class="example-component">
    <h1>
        ExampleComponent: @Model.Title
    </h1>

    <div class="example-component-child-content">
        <!-- Render the child content. -->
        @Html.Raw(Model.ChildContent)
    </div>
</div>

Now the content within CshtmlHead would be injected in to the head element and the DOM would remain clean.

Additional Benefits of the New Method

The new method brings additional benefits as well. For example, one may configure the ordering and render the content more than once if appropriate. The configurations are relatively complex, please view them at the official documentation.

The Future of CshtmlInitial

CshtmlInitial has not and will not be deprecated (at least in the near future). It was even improved in this update! Previously, an extra Context attribute had to be specified. This attribute has now been removed, without affecting behavior, and has resulted in cleaner code.

Closing Statement

The documentation of CshtmlComponent was also revised to account for these new changes. Hopefully the documentation covers both old and new features better than before.

View the GitHub repository of CshtmlComponent here.

Happy hacking with CshtmlComponent!

CshtmlComponent - Typed Slots

Acmion — Fri, 02 Oct 2020 20:40:41 +0000

CshtmlComponent is a component framework, with an extensive feature set, for ASP.NET Core MVC and Razor Pages projects (not for Blazor). See the GitHub repository of CshtmlComponent here.

CshtmlComponent Named Slots

CshtmlComponent already supports the usage of named slots, but what about typed slots? This post will show how this can be achieved. This is not an extensive tutorial, so you should already be somewhat familiar with CshtmlComponent.

The Razor markup for a CshtmlComponent that supports named slots could look something like this:

@using SampleRazorPagesApplication
@model ExampleComponent

<div class="example-component">
    <h1>
        @Model.Title
    </h1>

    <div class="example-component-action-bar">
        @Html.Raw(Model.NamedSlots["ActionBar"])
    </div>

    <div class="example-component-child-content">
        @Html.Raw(Model.ChildContent)
    </div>
</div>

Initialization of a CshtmlComponent with Named Slots

The component could then be initialized with:

<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <CshtmlSlot Name="ActionBar">
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </CshtmlSlot>
</ExampleComponent>

Note that the slot name must be explicitly stated. This works, but is somewhat annoying and error prone. Luckily, fixing this is quite easy with typed slots.

Typed Slot Definition

To define a typed slot one should create a class that inherits CshtmlComponentSlot and set the Name property in the constructor:

[HtmlTargetElement("ExampleComponentActionBar"]
    public class ExampleComponentActionBar: CshtmlComponentSlot
    {
        public ExampleComponentActionBar(IHtmlHelper htmlHelper) : base(htmlHelper)
        {
            Name = "ActionBar";
        }
    }

That's it. You may wish to, for example, store the value for Name as a static field for better maintainability, but this is not necessary.

Initialization of a CshtmlComponent with Typed Slots

With the typed slot definition, the example component can now be initialized like this:

<ExampleComponent Title="Hello World">
    Some HTML that gets captured in Model.ChildContent.

    <ExampleComponentActionBar>
        Some HTML that gets captured in Model.NamedSlots["ActionBar"].
    </ExampleComponentActionBar>
</ExampleComponent>

Note that the name no longer has to be explicitly specified.

Conclusions

CshtmlComponent supports both named and typed slots. Typed slots bring many advantages, such as making maintenance and refactoring significantly easier. This feature is not yet documented in the actual CshtmlComponent documentation, but will be in the future.

Please try out CshtmlComponent! You just might find it useful for MVC and Razor Pages projects!

CshtmlComponent V2.2.0 - Reference Capturing

Acmion — Sat, 26 Sep 2020 18:43:27 +0000

CshtmlComponent is a component library for ASP.NET Core with an advanced feature set. These features significantly improve developer productivity in MVC or Razor Pages projects. Check out the CshtmlComponent documentation for more information.

Previously with CshtmlComponent, you could write Razor code like this:

<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.
        <Box>
            Supports nested components.
        </Box>
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>

The component themselves can always access their own properties, but what if you want to access the properties outside the component's own context? For example, one might need to get a generated ID value to use it in some JS code. This is now possible with CshtmlComponent V2.2.0, where you now can capture the component reference like this:

<ExampleComponent Title="Some title" font-size="1.2rem" background-color="rgba(0, 0, 255, 0.1)">
    <div>
        Some custom HTML content.

        @{ 
            // Assign a variable to component reference. 
            // The Box component inherits CshtmlComponentReferenceableBase<Box> (a class that inherits CshtmlComponentBase), 
            // which implements this logic. Useful if component properties have to be used outside the component's own context.

            // This is not the default behavior due to the mandatory, but slightly confusing syntax: 
            // public Box : CshtmlComponentReferenceableBase<Box> ....

            var boxReference = new CshtmlComponentReference<Box>();
        }
        <Box Reference="boxReference">
            Supports nested components.
        </Box>

        The fontsize of the referenced box is: @boxReference.Component.FontSize
    </div>
    <CshtmlSlot Name="SlotName0">
        Some custom HTML content within a named slot. The parent component decides where
        this content is placed.
    </CshtmlSlot>
    <CshtmlSlot Name="SlotName1">
        Additional custom HTML content within a second named slot.
        <Box>
            Supports nested components.
        </Box>
    </CshtmlSlot>
</ExampleComponent>

CshtmlComponent documentation: https://cshtml-component.acmion.com

CshtmlComponent GitHub: https://github.com/Acmion/CshtmlComponent

CshtmlComponent Nuget: https://www.nuget.org/packages/Acmion.CshtmlComponent/

CshtmlComponent — A Real ASP.NET Core MVC and Razor Pages Component

Acmion — Sat, 19 Sep 2020 17:47:26 +0000

CshtmlComponent — A Real ASP.NET Core MVC and Razor Pages Component

Have you ever tried working with components in ASP.NET Core MVC or Razor Pages projects? This is a major pain in the ass. The solutions available by default are Tag Helpers, View Components and Razor Components. However, none of these are as customizable and convenient as the components in JavaScript frameworks (Svelte, Vue, etc.). CshtmlComponent aims to fix this.

CshtmlComponent is developed by Acmion.

CshtmlComponent Documentation

CshtmlComponent supports the following:

Razor syntax
Nested child content
Runtime compilation
MVC & Razor Pages
Lenient file structure
Named slots

Tag Helpers support the following:

Nested child content
MVC & Razor Pages
Lenient file structure

View Components support the following:

Razor syntax
Runtime compilation
MVC & Razor Pages

Razor Components support the following:

Razor syntax
Nested child content
Named slots

Note: While Razor Components can be used in standard MVC & Razor Pages projects without Blazor, the development experience is quite lacking.

CshtmlComponent Features

The feature set of CshtmlComponent is more complete than that of the alternatives, which has resulted in clear improvement in my development speed of ASP.NET Core projects. Hopefully, you will also find it useful!

Please check out the documentation and the GitHub repository!

CshtmlComponent Documentation

CshtmlComponent GitHub