Skip to main content

Posts

React JS Patterns

React JS is always evolving, and evolving quickly. These evolutions can be very significant ones, for example, the addition of hooks. React has a lot of code patterns, often these patterns are motivated by the DRY and/or the open-close principle. These patterns sometimes come in to replace a previous one, yet the previous ones still stays in use, as a consequence, the list of patterns keep growing. The goal of the next few posts will be to list the patterns commonly used in React JS developpement. Some patterns are more specific to JSX and I will start with these, and maybe add patterns specific to Redux.
Recent posts

Rxjs Forkjoin vs Zip

These Rxjs combination operators are handy to make Rest calls in parallel and combine their results. Both take n observables and will return the results, with the difference that forkJoin will complete even if one of the nested observables errors of completes.

Object.create vs. Object.Assign

The two functions return a new Object but with a difference. Object.assign will go through an enumerable and copy it's properties. Object.create will create a new empty object but link it's proto chain to the old object. One way to view this is with JSON.stringify(newCreatedObject) this would return an empty object, since all the properties are not part of the object's own properties, but inherited through prototype inheritance. In both case, the advantage is it allows to extended existing objects without modifying the original. This is particularly important when receiving arguments from a caller, in this case it's better to use these methods instead of modifying the caller's object since he might have planned to use it again later, expecting it to be in it's original state.

RxJS: Reactive Extensions for Javascript

What is reactive extensions? It's the Javascript version of a library that has been commonly used for a few years in many other languages including C#. It's main construct is the Observable and the operators that can be applied to it. Why? Because Reactive Extensions is now common practice in Angular and React development, and in combination with a store, is now adding and altering the MVC that has been also very popular in web development in the last decade or so. In the next few posts, I will be writing about RxJS constructs, whit a focus on summarizing some common observable operators.

ES6: Generators

Generator functions definitions are prefixed with an asterisk and the function body contains one or more yield statement. Each time the generator is invoked, it will continue until the next yield statement, where it can return with or without a return value.

ES6: tag functions

tag functions act as pre processors for a template literal. They receive a strings param, and each value is an paramter, which is usually gathered using the rest operator. They have been used for various implementation, including the JSX parser used by React to parse html.

ES6: object literal property shorthands

New shorthands for properties having the same name as the variable assigned to them, concise properties. Shorthand for functions, concise functions, although the underlying function is anonymous therefore cannot be reference, for example in the case of recursion. Also computed property names allows the use of variables as property names, inside object literals, using square brackets. And template literals were added, the backtick operator used designate an interpolatable string where variables are surrounded by curly braces and preceded by a dollar sign.