Generic35's Blog

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.

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.

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.

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.

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.

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.

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.

Destructuring can be used to extract data with arrays or objects, in a declarative way, and is self documenting, allowing the next developer to read, to understand a lot about the intent of this line of code. It is particularly useful to extract data from an array, because the destructing pattern reveals the shape of the data, and the name of the variables used in the pattern show what is the important data we want to extract from this array, or multidimensional array. Note that it is possible to chain multiple destructring patterns, since each of them returns the original array. When destructuring objects, the destructuring pattern uses curly braces, with the source property name on the left, and target variable on the right. In the case the two are the same, in ES6, they don't need to be repeated. It is also possible to destructure nested objects, in this case a nested destructuring pattern would be provided.

These new operators, both represented by dot dot dot, has two purpose, to gather arguments, or spread them. One quick note about the gather operator, it is sometimes referred to as the 'rest' operator, not the verb resting, but rest as a noun. In the context of a function declaration, a ... before a variable with gather all the arguments in one variable. In the context of a function invocation, a ... operator would spread them out, as arguments passed in.

The purpose of const is to prevent reassignment of a variable. But it won't make it immutable, this can be done using Object.freeze.

The 'let' keyword was introduced in ES6 to help clarify intent. The 'var' keyword should keep a variable visible within it's block, only. But in fact, it was attached to the function it is declared in, via hoisting. Which means it could be accessed outside of it's block. The 'let' keyword was then introduced to make clear that a variable declared within a block, is only visible within this block. As opposed to 'var' who could be visible outside of that block.

MCSD: Microsoft Certified Solution Developer obtained March 2017

The prototype pattern is composed of two parts, the constructor function, and the prototype. The constructor function has the responsibility of holding the data while the prototype will the define the functions. The advantage of this approach is that all state variables held in the constructor part will be unique to the instance, while all methods defined in the prototype will be shared across all instances. Implementing the constructor part: of the pattern consists in adding any arguments to the function definition and setting in variable using the 'this' keyword. Implementing the prototype part: consists of setting the constructor's prototype to a new literal object containing a property for each function. Finally, it should be noted that by convention, the constructor function should be cased in Pascal case. Typically anytime a function is cased as such in Javascript hints it is a constructor function and should be used with the new keyword.

The module pattern is defined by two things. 1-An outter wrapping function 2-An returned object containing at least one function It was initially introduced a decade ago by Douglas Crockford in order to provide encapsulation, therefore exposing only what is needed, reducing the risk users would access, undocumented features.  

The two are separate topics, I just happen to put them in the same post for now. Closure Closure is the capability to remember it's lexical scope, even when executed outside it's lexical scope. If two inner functions, are within the same scope, they share the same closure.     Lexical scope The lexical scope is the scope in which a variable is declared during the first pass of the javascript compilation, which has two passes, compilation and execution. During the compilation pass, the compiler goes through the code looking for formal declaration, that is, var, function and parameters of function. For each of these formal declarations, the compiler will check the current lexical scope, and add this identifier if it isn't already there. Then at the second pass, execution, the compiler will run the code as we are intuitively use to and once it reaches the the identifiers found earlier, will ask if they are left hand side(RHS), or right hand side (LHS). If th...

Here is a summary of the 4 rules defining the value of 'this': 1-Was the function called with the new keyword? If so, use that object. 2-Was the function called explicitly with call or apply? Use the passed in object. 3-Was the function called implicitly with the dot operator? Use the owning object, also called base object or context object, which means the object to the left of the dot of the function invocation. 4-If none of the above, the default rule applies, 'this' is the global object, except if in strict mode, 'this' is set to undefined.    

Javascript gained in popularity in the last decade following Google`s V8 engine then client side frameworks like AngularJs and server side development in NodeJs. According to StackOverflow`s 2015 survey, Javascript is the most used programming language. Yet many still compare using this language to dancing in the minefield. Javascript does have many concepts that are often misunderstood. For example the `this` keyword, doesn't behave the same as in C, C++, or Java. Coming from these language means almost forgetting anything we know about 'this' when learning how 'this' behaves in Javascript. Other misunderstood concepts of Javascript are: Scope, proto chains, hoisting and closures. I will summarize some of these key concepts in the following blog posts.

Object Relational Mappers,  for example Linq and Entity Framework are well integrated in VS 2008, and have project template available; Dynamic Data Web Site. Creating a dynamic data web site project is a good way to explore the server controls and datasources offered via the toolbox menu. This template starts out witha basic website shell, but the connection string isnt configured. The Linq to SQL and Entity to SQL are the ORM offered and by default use the default databse located in App_Data folder of this template project. The designer.cs file defines the data model and wraps the objects around it in order to access the data model via code. In the global.asax contains the RegisterRoutes method that comes with a default model.RegisterContext method of the type YourDataConectType, you will replace this one with your data context which, after having created the model pointing to your database should be avaialble in intellisence under the name yourDatabaseNameDataContext. Sc...

Security Triming is achieved by putting a web.config in each folder... each aspx file has its own folder denies * all users, and  db tables in the app_data folder can be maintained with the website administration tool wwebadmin tool can be started from website->configuration then you click on the security link, then manage users so there's two layers of security, the ones in the app_data folder and the ones in web.config that overide app_data. Web adminstration tool can use both both form and windows authentication, windows is handled by iis there is a control for the login button, and one to display the login user user in the sitemap section of the web.config needs to say securityTrimming enabled if a node doesnt have a page associated with it, the node needs to have roles attribute to allow to access to any pages in it's subfolder, or is this just to show the menu item in the sitepath control? Giving roles to a sitemap node just show the node do...

You can add custom attributes for each node in the xml file, like the sound and image of an animal to set to label and img you can check if there is a previous sibling to add a previous button(set the button to visible, do all this in page_load in general when testing new features, you can add a checkbox to display info to make sure you can read it, even it's if its irrevelant for the user to see, you just add labels at the bottom of the page, and you can even add this in the master page as a footer, you could put all this in the server div control and use innerHTML property you can use it for rewriting(rerouting) urls so they dont include query string, in the web.config in urlMappings element. Might want to put these mappings in an external .config (set the configSource attrtibute of the urlMappings elementconfiguration file, external config change doesnt cause an application restart. Setting the url in the sitemap file also allows to remap urls sitemap files to ...