Weekly Links #82

Top 80 Links For 15/9-12/10

Advertisements

How to overcome “spread hell” in reducers, on minimum time

TL;DR:  When you have a nested object on state, and for some reason you cannot normalize it, you can use one of the existing immutable update  utility libraries. I recommend on timm library .

I am writing this post after getting inspiration from Dalmais’s article

The Problem

  • We have a nested object in our Redux store. For example,
    testObject = { a: { b : { c: { d: 1 } } } }
  • We want to update the value of d from 1 to 2, but we should not mutate the existing object.

The Naive Solution

  • The regular solution will be to use multiple spreads. The example from Dalmais’s article is:
  • The problem with this approach is that the code is unreadable and pretty ugly.

Other Solutions

  • Don’t use nested objects on store, so you need to do a refactor/normalize it. This is the best solution. In most cases, it will be the best choice for the long run, but you might not choose it if, for example, you fix a bug in a legacy code, and refactoring is not a top priority.
  • Use Immutable.JS library: Also an excellent idea, but again, it is not a quick fix.
  • Use Lodash’s cloneDeep method. But it is really unnecessary, as a wise man said.
  • Use one of the immutable update utility libraries which enables to set an attribute on a nested object. I will focus on this solution from now on.

The Requirements:

  • The function should support both objects and arrays in the nested path.
  • The function should support autovivification, i.e. it will create objects/arrays along the path when they don’t exist.
  • The syntax of the “immutable set” function will be convenient and readable.
  • We should write one sentence only – just invoking the set method and get the desirable result.
  • The function should have a good performance, especially if we use it frequently.
  • The library should have some sort of popularity (4 stars on GitHub is not enough…).
  • The library should be as tiny as possible.

The Research:

  • The original article pointed on lodash/fp as a possible solution, but as Mark Erikson commented on that article, there are a lot of other possibilities of immutable update utility libraries. A  big libraries list appears on his amazing repository.
  • Eventually, I reduced the number of contestants to 8:
  • I wanted to have fun, so I wrote on CodeSandbox  a React application which compares the performance of all the checked libraries.
  • There are two main components:
    • ResultsTable: The main component which renders a table with all of the wanted results.
    • ResultDisplayer: Component which gets a function and arguments to a function, invoke it constant number of times and renders the average amount of time that the execution of the function took.
  • Every library was tested against three tests with the same test object:                                                                           { aObject: { bArray: [{ cObject: { dAttribute: 1 } }] } }
    • Test 1: Update aObject.bArray[0].cObject.dAttribute from 1 to 2
    • Test 2: Change aObject.bArray[1].cObject.dAttribute(path that doesn’t really exist) to 2
    • Test 3: Change aObject.bArray[0].cObject.eAttribute(path that doesn’t really exist) to 2
  • Yes, I know… This is not scientific research, and the results are not accurate. But it did gave me a sense of security when I ran the tests over and over, and the first place was always on top.

Comments Before Results:

  • I wanted to test also functions from Ramda, but I didn’t find functions that exactly fit. set and evolve functions are closed but close is not enough.
  • immutability-helper library is the recommended library by React team, but surprisingly it doesn’t support autovivification, so I could execute only the first test on this library.
  • I don’t expect anyone to install Lodash only for this need, but if you already use Lodash, it can be a good choice for you.

The Results:

Timm/setIn won in most departments:

  • Like all other contestants, it supports both objects and arrays in the nested path.
  • Like most of the other contestants, it supports autovivification.
  • Its syntax is nice:  For example:  setIn(TEST_OBJECT, ["aObject", "bArray", 0, "cObject", "dAttribute"], 2)
  • The operation is done during one sentence, as all other libraries.
  • Its performance is the best by far than most of the other libraries.
  • The library is not so popular – only 163 stars on GitHub when writing this sentence.
  • The library is tiny: about 1.5 kB minified & compressed.

Last Words

I enjoyed a lot during making this post. It was my first usage of CodeSandbox and it was really cool to write there. Special thanks Maxence Dalmais, which his post encouraged me to do my own research.  I believe that Timm/SetIn is a great option when you need to update a nested object and you cannot refactor your code for some reason.

Weekly Links #81

Top 20 Links For 8-14/9

  1. How JavaScript works: memory management + how to handle 4 common memory leaks
  2. A React And Preact Progressive Web App Performance Case Study: Treebo
  3. CSS in JS is like replacing a broken screwdriver with your favorite hammer.
  4. How to Organize a Large React Application and Make It Scale
  5. The Ultimate Guide to Flexbox — Learning Through Examples
  6. How to make onboarding engineers a competitive advantage
  7. How to Learn React: Everything You Need to Get Started
  8. Simple React Snippets For Visual Studio Code
  9. 12 cool things you can do with GitHub
  10. Seeing Through Redux with Lenses
  11. Learning Ruby: From Zero to Hero
  12. How JavaScript linters cause bugs
  13. JavaScript Monads Made Simple
  14. DOM Attributes in React 16
  15. The Bad News Advantage
  16. What’s New in React 16?
  17. “Elements kinds” in V8
  18. Introducing Atom-IDE
  19. Sublime Text 3.0
  20. V8 Release 6.2

P.S. I will be on vacation on the next four weeks, and the blog too. Next post will be on 14/10. It will be a special technical post.

Weekly Links #80

Top 20 Links For 1-7/9

  1. Using recompose to achieve better separation of concerns in React applications
  2. A GraphQL deep dive: When fragments and React components join forces
  3. Dwelling On The Past: The Importance Of Project Retrospectives (Part 1)
  4. Working Through Roadblocks – A Guide for New Programmers
  5. How does blockchain really work? I built an app to show you.
  6. Make Your Software Better with Better Processes
  7. The art of over-engineering your side projects
  8. Javascript : The Curious Case of Null >= 0
  9. Five Must-Watch Software Engineering Talks
  10. So You Want To Be a Senior Developer?
  11. Android 8.0 Oreo, thoroughly reviewed
  12. Validating a React form upon submit
  13. Conducting the Technical Interview
  14. Git: To Squash or Not to Squash?
  15. Remove Unused CSS Rules
  16. Using the React Children API
  17. It’s OK to not use Yarn
  18. Announcing Yarn 1.0
  19. Knock out a quick win
  20. Type of Mocks

Weekly Links #79

Top 20 Links For 25-31/8

  1. Learning JavaScript: 9 Common Mistakes That Are Holding You Back
  2. Writing Scalable React Apps with the Component Folder Pattern
  3. Embracing real-time feature toggling in your React application
  4. So you completed the official React tutorial. What’s next?
  5. Harness the full power of email with these simple hacks
  6. How you can translate any random D3 example to React
  7. 20 Best Practices for Improving JavaScript Performance
  8. Progression, Curiosity, and Burnout with Dan Abramov
  9. How to Evaluate Software Quality from Source Code
  10. Real world Higher-Order Components (HOCs)
  11. Why I Hated (and Now Love) Arrow Functions
  12. 7 Habits of Highly Effective Programmers
  13. Facade design pattern in Ruby on Rails
  14. The software engineering rule of 3
  15. Concurrent JavaScript: It can work!
  16. JavaScript Iterators and More
  17. Announcing TypeScript 2.5
  18. The State of the Web
  19. Broken Promises
  20. Jest In Case

Weekly Links #78

Top 20 Links For 18-24/8

  1. How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code
  2. All the fundamental React.js concepts, jammed into this single Medium article
  3. Why Arrow Functions and bind in React’s Render are Problematic
  4. How To Become A Machine Learning Engineer: Learning Path
  5. Inside a super fast CSS engine: Quantum CSS (aka Stylo)
  6. 10 JavaScript concepts you need to know for interviews
  7. Understanding ReactJS — data hydration / initialization
  8. Be Slightly Careful with Sub Elements of Clickable Things
  9. Javascript ES6 — Arrow Functions and Lexical `this`
  10. Debounce Deep Dive — JavaScript ES6
  11. Formatting dates and numbers in React
  12. Typing import statements more quickly
  13. How do you separate components?
  14. Comparison of form libraries in react
  15. The impact of growing a Tech Team
  16. Introducing downshift for React
  17. Six confusing features in Ruby
  18. Build a Metronome in React
  19. The 90% agreement rule
  20. Refactoring React

Weekly Links #77

Top 20 Links For 11-17/8

  1. React Performance Anti-Pattern: Creating Functions in render()
  2. Create React App: Customize Webpack Config Without Ejecting
  3. Beyond typeof and instanceof: simplifying dynamic type checks
  4. Multiple Perspectives On Technical Problems and Solutions
  5. Investigating Performance of Object#toString in ES2015
  6. Javascript ES6 — Exploring the New Built-In Methods
  7. Things Everyone Forgets Before Committing Code
  8. Designing The Perfect Feature Comparison Table
  9. Sass Functions to Kick-Start Your Style Sheets
  10. 3 creative techniques for writing modular code
  11. Async/Await Will Make Your Code Simpler
  12. How to integrate React into an existing app?
  13. Understanding the JavaScript For…of Loop
  14. When should I use Arrow Functions?
  15. Small Functions considered Harmful
  16. Should I use a boilerplate for React?
  17. Introducing Javascript ES6 Proxies
  18. Why We’re Betting on GraphQL
  19. Folding Promises in JavaScript
  20. Mastering console.log()