• 0 Posts
  • 25 Comments
Joined 2 years ago
cake
Cake day: July 2nd, 2023

help-circle

  • Honestly, if you’re having trouble finding stuff for vanilla JS, I’d recommend looking at jQuery. Not that you should USE jQuery, necessarily, but the library is basically a giant wrapper around all the native JS APIs, so the approach to building stuff is essentially the same: it all focuses on tracking and manipulation of DOM elements.

    I do vanilla JS (actually TypeScript) dev at work, daily, and that was my big takeaway from spearheding our team’s migration from jQuery to vanilla TypeScript: I honestly don’t know what benefit jQuery provides, over vanilla, because all the most-common jQuery APIs that we were using have a 1:1 native equivalent.

    We do also use 2 third-party libraries alongside vanilla, so I’l mention those: require.js and rx.js. Require you probably don’t need, with modern JS having bundling and module support built-in but we still use it for legacy reasons. But rx.js is a huge recommend, for me. Reactive programming is the IDEAL way to build GUIs, in my opinion.


  • My big reason would be “it hurts readability”. That is, when writing code, readibility for others who aren’t familiar with it (including future me) is my top-priority, and that means indentation and alignment are HIGHLY important, and if I spend the time to write code with specific indentation and alignment, to make it readable at a glance, I want to be certain that it’s always going to display exactly that way. Tabs specifically break that guarantee, because they’re subject to editor settings, which means shit like the below example can occur:

    I write the following code with an editor that uses a tab size of 4.

    myObject.DoSomething(
        someParameter:      "A",
        someOtherParameter: "B",
        value:              "C");
    

    If someone pulls this up in an editor that uses a tab size of 8, they get…

    myObject.DoSomething(
        someParameter:          "A",
        someOtherParameter:     "B",
        value:                          "C");
    

    Not really a big deal, in this simple case, but it illustrates the point.

    My second reason would be that it makes code more difficult to WRITE, I.E. it’s not that hard to insert spaces when you mean to insert tabs, considering that you’re not LITERALLY using only tabs just only tabs for indentation and alignment. And if you do accidentally have spaces mixed in, you’re not going to be able to tell. The guy on another machine with different editor settings will, though.

    I’m aware there are fonts that can make spaces and tabs visible and distinct, but that sounds like a NIGHTMARE to write and read code with. I mentioned above, my top priority is easy readability, and introducing more visual noise to make tabs and spaces distinct can only hurt readability.













  • I’m gonna hazard a guess, just cause I’m curious, that you’re coming from JavaScript.

    Regardless, the answer’s basically the same across all similar languages where this question makes sense. That is, languages that are largely, if not completely, object-oriented, where memory is managed for you.

    Bottom line, object allocation is VERY expensive. Generally, objects are allocated on a heap, so the allocation process itself, in its most basic form, involves walking some portion of a linked list to find an available heap block, updating a header or other info block to track that the block is now in use, maybe sub-dividing the block to avoid wasting space, any making any updates that might be necessary to nodes of the linked list that we traversed.

    THEN, we have to run similar operations later for de-allocation. And if we’re talking about a memory-managed language, well, that means running a garbage collector algorithm, periodically, that needs to somehow inspect blocks that are in use to see if they’re still in use, or can be automatically de-allocated. The most common garbage-collector I know of involves tagging all references within other objects, so that the GC can start at the “root” objects and walk the entire tree of references within references, in order to find any that are orphaned, and identify them as collectable.

    My bread and butter is C#, so let’s look at an actual example.

    public class MyMutableObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    }
    
    public record MyImmutableObject
    {
        public required ulong Id { get; init; }
    
        public required string Name { get; init; }
    }
    
    _immutableInstance = new()
    {
        Id      = 1,
        Name    = "First"
    };
    
    _mutableInstance = new()
    {
        Id      = 1,
        Name    = "First"
    };
    
    [Benchmark(Baseline = true)]
    public MyMutableObject MutableEdit()
    {
        _mutableInstance.Name = "Second";
    
        return _mutableInstance;
    }
    
    [Benchmark]
    public MyImmutableObject ImmutableEdit()
        => _immutableInstance with
        {
            Name = "Second"
        };
    
    Method Mean Error StdDev Ratio RatioSD Gen0 Allocated Alloc Ratio
    MutableEdit 1.080 ns 0.0876 ns 0.1439 ns 1.02 0.19 - - NA
    ImmutableEdit 8.282 ns 0.2287 ns 0.3353 ns 7.79 1.03 0.0076 32 B NA

    Even for the most basic edit operation, immutable copying is slower by more than 7 times, and (obviously) allocates more memory, which translates to more cost to be spent on garbage collection later.

    Let’s scale it up to a slightly-more realistic immutable data structure.

    public class MyMutableParentObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    
        public required MyMutableChildObject Child { get; set; }
    }
    
    public class MyMutableChildObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    
        public required MyMutableGrandchildObject FirstGrandchild { get; set; }
                
        public required MyMutableGrandchildObject SecondGrandchild { get; set; }
                
        public required MyMutableGrandchildObject ThirdGrandchild { get; set; }
    }
    
    public class MyMutableGrandchildObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    }
    
    public record MyImmutableParentObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    
        public required MyImmutableChildObject Child { get; set; }
    }
    
    public record MyImmutableChildObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    
        public required MyImmutableGrandchildObject FirstGrandchild { get; set; }
                
        public required MyImmutableGrandchildObject SecondGrandchild { get; set; }
                
        public required MyImmutableGrandchildObject ThirdGrandchild { get; set; }
    }
    
    public record MyImmutableGrandchildObject
    {
        public required ulong Id { get; set; }
    
        public required string Name { get; set; }
    }
    
    _immutableTree = new()
    {
        Id      = 1,
        Name    = "Parent",
        Child   = new()
        {
            Id                  = 2,
            Name                = "Child",
            FirstGrandchild     = new()
            {
                Id      = 3,
                Name    = "First Grandchild"
            },
            SecondGrandchild    = new()
            {
                Id      = 4,
                Name    = "Second Grandchild"
            },
            ThirdGrandchild     = new()
            {
                Id      = 5,
                Name    = "Third Grandchild"
            },
        }
    };
    
    _mutableTree = new()
    {
        Id      = 1,
        Name    = "Parent",
        Child   = new()
        {
            Id                  = 2,
            Name                = "Child",
            FirstGrandchild     = new()
            {
                Id      = 3,
                Name    = "First Grandchild"
            },
            SecondGrandchild    = new()
            {
                Id      = 4,
                Name    = "Second Grandchild"
            },
            ThirdGrandchild     = new()
            {
                Id      = 5,
                Name    = "Third Grandchild"
            },
        }
    };
    
    [Benchmark(Baseline = true)]
    public MyMutableParentObject MutableEdit()
    {
        _mutableTree.Child.SecondGrandchild.Name = "Second Grandchild Edited";
    
        return _mutableTree;
    }
    
    [Benchmark]
    public MyImmutableParentObject ImmutableEdit()
        => _immutableTree with
        {
            Child = _immutableTree.Child with
            {
                SecondGrandchild = _immutableTree.Child.SecondGrandchild with
                {
                    Name = "Second Grandchild Edited"
                }
            }
        };
    
    Method Mean Error StdDev Ratio RatioSD Gen0 Allocated Alloc Ratio
    MutableEdit 1.129 ns 0.0840 ns 0.0825 ns 1.00 0.10 - - NA
    ImmutableEdit 32.685 ns 0.8503 ns 2.4534 ns 29.09 2.95 0.0306 128 B NA

    Not only is performance worse, but it drops off exponentially, as you scale out the size of your immutable structures.


    Now, all this being said, I myself use the immutable object pattern FREQUENTLY, in both C# and JavaScript. There’s a lot of problems you encounter in business logic that it solves really well, and it’s basically the ideal type of data structure for use in reactive programming, which is extremely effective for building GUIs. In other words, I use immutable objects a ton when I’m building out the business layer of a UI, where data is king. If I were writing code within any of the frameworks I use to BUILD those UIs (.NET, WPF, ReactiveExtensions) you can bet I’d be using immutable objects way more sparingly.