RenderDraw enables admin users to setup the interaction and visualization of 3D models anywhere within Salesforce

RenderDraw

renderdraw

This will be a look under the hood of , an life/evolution simulator/god simulator I’m building. As a player you take the role of an old-school deity, who gets to create his/her own world, put some creatures (“Pixlings”) into it and then breathe life into them. You can’t control the behavior of the creatures directly, as it’s evolved through real darwinian evolution over time, but as a god you can give them abilities to interact with each other and their environment. The goal is to create worlds that fascinate yourself and others. Pixling World artificial When I’ve been posting about it online ( and ) people have asked me “how does it work”, so I figured I’d give an overview in this blog post. First I’ll give a brief overview of the game, then I’ll talk about how neural evolution works and finally I’ll get into the technical implementation of all this. post on /r/javascript post on /r/proceduralgeneration network The game For anyone not familiar with the game, here’s what it looks like: The entire state consists of three textures: Environments, Pixling state and Pixling neural network parameters. Environments are defined by the user; one slice per environment. The Pixling state is a combination of predefined properties such as Alive, Species and LastAbility, and whatever properties the user define for the Pixlings such as Energy, DaysSinceBirthday, NumberOfFishInPocket etc. The Pixling neural network parameters are, as discussed above, evolved. Each texture is stored as a R32F 2d array textures in WebGL, i.e. textures with a width, height and depth and a single floating point value per texel. So for instance, the Magma environment at cell (x: 15, y: 23) has a value of 19.3. Or the Pixling state texture at (x: 4, y: 19) of the alive slice (index 0) has a value of 1, which means the Pixling of cell (x: 4, y: 19) is considered alive. Simulation The overall simulation loop looks something like this: Each step: Run all user defined environment computations Build inputs to neural networks Run forward pass on neural networks Run all user defined rules and abilities Handle movement and reproduction All of those steps involve what I call Computations. A Computation takes a number of texture and variables as inputs, runs a function over that and writes the result to one or more textures. Then another Computation uses that output as its inputs, and so on; the simulation is basically just a big graph of Computations into Computations. The functions are implemented as GLSL fragment shaders (a function that runs per pixel on the GPU), so the whole Computation runs asynchronously on the GPU. Many of the Computations use the game state as input and output, but there are also a number of secondary buffers used, for instance to keep the result while performing the forward pass of the neural network or to keep track of how to move Pixlings in the next update. I put an example Computation at the end of this blog post for anyone interested. One of the core reasons the simulation can be very fast is because at no point does the simulation need to synchronize with the CPU. The Computations are sent to the GPU for processing but we don’t need to wait for the result, we can just keep sending Computations to the GPU. Since it’s very cheap to schedule the computations, the game is GPU bound most of the time. Computations are generated for each environment, rule and ability that the user defines (i.e. it’s generating GLSL code from what you define in the UI). At the beginning of the game loop the computations of the environments are run. These are often things like combining the values of two environments, running a blur filter or adding noise to an environment. Next the neural networks are run. First inputs are gathered into one big vector. Then each layer of the network is run and finally an argmax is run on the output of the network to decide what the next action of the Pixling will be. I put the code for the dense layer in the appendix for people who are interested. After this I run all of the rules and abilities, where of course for each Pixling only the ability chosen by the network is invoked. Finally I move and clone Pixlings that indicated they wanted to during the ability and rule computations. Since it’s all done in parallel in shaders, there’s a bunch of code to handle movement and reproduction. At a high level it works by first computing what I call “deltas”, which are a vector for each cell that indicates a unique neighboring cell that it “points” at. I also calculate the inverse of this. This can then be used to “move” or “copy” a Pixling from one cell to another, all in parallel. Currently the deltas are all random, but in the future it may be interesting to explore letting the neural network decide its delta (right now it can decide where to go only by switching between “don’t walk” and “walk randomly”, which works since it gets information about where it’s about to walk, as seen in the , but could be even faster). Apple hunters example Rendering Once the simulation has run a step (or a number of steps if you’re on the Extreme speed setting), I render the results to the screen. Rendering looks something like this: render:draw each environment that is under the Pixlings;draw the current selection rectangles;draw Pixlings;draw each environment that is over the Pixlings; The rendering is more or less just single quads that cover the entire screen (one quad per environment, one for the Pixlings) and most of the work happens in shaders. This means that each pixel on the screen is calculated fairly similarly independent of zoom level or position, so you get a really smooth zoom experience: Zooming in and out on a fairly large map, on my MacBook Air. Sampling & Metrics Another big area of the game is sampling and metrics. Sampling is what I use to keep track of species in the world; basically I now and then record the entire game state and figure out who is a descendant of whom in a web worker. Metrics is calculated by running a “reduce” Computation which takes a texture and halves it in size, each pixel being the sum of its parent four pixels. That’s repeated until the texture is small enough to be moved fairly quickly to the CPU (this is expensive so only happens every 100 steps). This is how I can count the population for instance. That’s all! There’s a lot more I could write about Pixling World but perhaps this will be enough for a rough overview. There are also a lot of things I’m excited to try adding to Pixling World: (Pixlings with memory would be so cool), a way for Pixlings to “see” more of the world and have better control of their movement, some more game like things like items and traits, manual training of their neural networks (perhaps take control of one and use that for ) and much much more. If anyone is interested in either hearing more about any specific area of Pixling World, or have suggestions for ways to take it forward I’m all ears; drop a comment here or on the reddit thread. LSTMs backprop And finally, if you’re interested in trying the game you can do so at (alpha stage so expect some bugs weirdness). https://pixling.world Thanks for reading!/Fredrik (To get news and updates about Pixling World you can follow the project on and ) Twitter Reddit Appendix A challenge: Pixling Battlegrounds In preparation of this article I was working on a world which I was hoping would exhibit some interesting behaviors, but rather than finishing it I realized it may be more fun to put it out as a “challenge”. So for anyone inclined; here’s a world you can try to see if you can complete: (fair warning: I have no idea if it’s possible to complete or not) https://pixling.world/4YUmyd5eZUgzPVHW73Uvk6 Example of a Computation This takes the output of the neural network (brainRes), computes the argmax of it and stores it in cellProperties (the Pixling state). Since it both reads and writes from cellProperties it’s double buffered and the result is automatically copied back to the back buffer. // GLSL code for this computation: in vec2 texcoord;out vec4 out_value; uniform sampler2DArray brainOutputs;uniform sampler2DArray cellProperties; void main() {float maxv = texture(brainOutputs, vec3(texcoord, 0)).r;int maxi = 0;for (int i=1; i < ${abilitySlotsSize}; i++) {float val = texture(brainOutputs, vec3(texcoord, i)).r;if (val > maxv) {maxv = val;maxi = i;}}float ability = texture(cellProperties, vec3(texcoord, ${abilititySlotsStart} + maxi)).r;out_value = vec4(ability, 0.0, 0.0, 1.0);} // Using this computation in the app: computeCopyBack(this.copyMultiLayer,this.computations.abilitiesArgmax,this.config.worldSize,outputs2darray(this.state.textures.cellProperties[0],FixedCellProperties.InvokingAbility, 1),this.state.textures.cellProperties[1],{texture2darrays: {brainOutputs:  this.state.textures.brainRes[this.state.brainResRW.read],cellProperties: this.state.textures.cellProperties[1]}}); Dense layer code This code generates a shader that can compute outputs for multiple nodes in the network at the same time (up to maxColorAttachments). return multilayerShaderSource(maxColorAttachements,`uniform sampler2DArray inputs;uniform sampler2DArray weights;uniform int layerWeightsOffset;uniform bool activation;uniform int outputSize;#define inputSize ${inputSize}`,`float inputVals[inputSize];for (int i=0; i < inputSize; i++) {inputVals[i] = texture(inputs, vec3(texcoord, i)).r;}`,i => `float res = 0.0;// inputLayer is actually the layer in the outputint weightsOffset = layerWeightsOffset + inputLayer * inputSize;for (int i=0; i < inputSize; i++) {float weightVal = texture(weights, vec3(texcoord, weightsOffset + i)).r;res += inputVals[i] * weightVal;}float biasVal = texture(weights, vec3(texcoord, layerWeightsOffset + outputSize * inputSize + inputLayer)).r;res += biasVal;if (activation) {res = max(res, 0.0);}out_values[${i}] = vec4(res, 0.0, 0.0, 1.0);`);

Under the hood of Pixling World

My obsession with creating applications based on plugin architectures probably stems from my history playing role-playing games. These games generally required systems that could have mechanics extended via plugins or new content that could be added to the game via plugins. Since much of my experience early on when learning C# as a kid was making games, a plugin architecture in easily became something I learned about regularly. C# applications In this article, I’ll introduce you to the concept of plugin architectures and specifically look at plugin architecture in C# as well as how we can explore loading plugin information. We’ll also look at some high-level examples of situations where plugins would be valuable — but implementing these in greater detail is an exercise you can do for homework! Let’s dive into it! Understanding Plugin Architecture So what exactly is a plugin architecture with respect to how software is built? A plugin architecture is a design pattern that allows you to extend the functionality of an existing application by dynamically loading and executing external modules or plugins. These plugins can be developed separately and added to the application without modifying the core codebase. That means we can add new functionality and never even need to rebuild the code of the original core application! Using a plugin architecture in C# applications provides several benefits and some of them include: Modularity: With a plugin architecture, different components of an application can be developed separately as plugins. This modularity allows you to focus on specific functionalities without impacting the overall structure of the application. It also enables easier maintenance and updates, as plugins can be added or replaced independently. Flexibility: By using a plugin architecture, you can easily introduce new features or functionalities to an application without modifying the core code. This flexibility allows for rapid development and iteration, as new plugins can be created and integrated with less effort than modifying core shared code. Code Reusability: Plugins can be developed as reusable components that can be used across multiple projects or applications. This reusability not only saves development time but also promotes code consistency and reduces the chances of introducing bugs. Customization: Plugin architectures allow users or clients to customize and extend the functionality of an application based on their specific needs. This customization can be achieved by simply adding or removing plugins without requiring changes to the core codebase. Overall, plugin architectures in C# are something that I use heavily in my development to provide a modular and flexible approach to building software. Check out this video for how I use plugin systems in my application based on vertical slices: https://youtu.be/5OKLiQM2y30?embedable=true Loading Plugins in C# In C#, there are various approaches and techniques for loading plugins into your software solution. Loading plugins can provide enhanced functionality and flexibility to your application. Let’s explore some of these approaches and techniques with code examples. For the following examples, assume we have an IPlugin interface that simply maps to the following code: public IPlugin
{
    void Execute();
} Dynamic Assembly Loading with Reflection in CSharp One approach for loading assemblies. This allows you to load external DLL files at runtime, which can contain the necessary code for your plugins. loading plugins in C# is by dynamically Here’s an example of how you can achieve this: // Get the path to the plugin DLL
string pluginPath = "path/to/plugin.dll";

// Load the plugin assembly
Assembly assembly = Assembly.LoadFrom(pluginPath);

// Instantiate the plugin types
IEnumerable<Type> pluginTypes = assembly
    .GetTypes()
    .Where(t => typeof(IPlugin).IsAssignableFrom(t) && !t.IsAbstract);

// Create instances of the plugins
List<IPlugin> plugins = new();
foreach (Type pluginType in pluginTypes)
{
    IPlugin plugin = (IPlugin)Activator.CreateInstance(pluginType);
    plugins.Add(plugin);
}

// Use the plugins
foreach (IPlugin plugin in plugins)
{
    plugin.Execute();
} In the above code, we first load the plugin assembly using . We then use reflection to find all types that implement the interface and are not abstract. We — — and store them in a list. Finally, we can use the plugins by calling their method. Assembly.LoadFrom IPlugin create instances of these plugin types using reflection specifically, using Activator.CreateInstance Execute Autofac for Dynamically Loading C# Plugins One of my favorite . We can use Autofac to scan a directory for assemblies that contain types implementing the interface and register them. Here’s an example of how to set up Autofac in C# for this purpose: dependency injection frameworks in C# is Autofac IPlugin using Autofac;
using System.Reflection;

public class PluginLoader
{
    public IContainer LoadPlugins(string pluginsPath)
    {
        var builder = new ContainerBuilder();

        // Scan the plugins directory for assemblies
        // and register types that implement IPlugin
        var types = Directory
            .GetFiles(pluginsPath, "*.dll")
            .Select(Assembly.LoadFrom)
            .ToArray();
        builder
            .RegisterAssemblyTypes(types)
            .AssignableTo<IPlugin>()
            .As<IPlugin>();

        return builder.Build();
    }
} The above code will ask use reflection to get the types from the assemblies in the plugins directory. In this case, it will be trying to load any file with a DLL extension from that folder location. From there, we’re able to ask Autofac to register those types, but we use the method to filter the types to only be of IPlugin. Finally, we indicate that they can be resolved as IPlugin instances using the method. AssignableTo<T>() As<T>() The following code example builds the container, registers all of the plugins, and then mimics the behavior in the previous code example where we call on each plugin: Execute() // Assuming the plugins are located in a 'plugins' folder in the application directory
var pluginFolder = Path.Combine(
    Directory.GetCurrentDirectory(),
    "plugins");
var pluginLoader = new PluginLoader();
var container = pluginLoader.LoadPlugins(pluginFolder);

// Resolve all implementations of IPlugin and execute them
foreach (var plugin in container.Resolve<IEnumerable<IPlugin>>())
{
    plugin.Execute();
} I’ve made video tutorials as well on how you can leverage Autofac for loading plugins. Check it out below: https://youtu.be/-pxwL_VD4Uo?embedable=true Examples of Practical Plugin Architectures in C# Now that we’ve seen how we could go about implementing how to load plugins, it’s time to look at some examples of possible plugin architectures in C# applications. In these examples, we won’t be going through building out a full-on application, but we can go into some high-level details of the use case, what a sample plugin API might look like, and why plugins could be useful. Dynamic Data Visualization Plugins . This can be particularly useful when working with large datasets or real-time data streams. By creating a plugin system, you can develop separate visualization modules that can be dynamically loaded and unloaded at runtime, depending on the type and format of the data. Instead of building the core of an application around a visualization or two, we could instead treat them as plugins to allow more rich visualizations to be added in later as the application evolves. One interesting use case of plugin architecture in C# is for dynamic data visualization Here’s some example code that we could consider: // Interface for the visualization plugin
public interface IVisualizationPlugin : IDisposable
{
    void Initialize();

    void RenderData(
        DataSet data,
        IVisualizationContext context);
}

// Example plugin implementation
public class BarChartPlugin : IVisualizationPlugin
{
    public void Initialize()
    {
        // Initialize the bar chart visualization
    }

    public void RenderData(
        DataSet data,
        IVisualizationContext context)
    {
        // Render the bar chart with the provided data
    }

    public void Dispose()
    {
        // Cleanup resources used by the bar chart
    }
} In this example, we might want to have some optional entry points for plugins to get things set up. This would be our method. We mark each as IDisposable so that we can ensure that each plugin has a proper opportunity to clean up resources when we’re ready to unload them. Initialize() The method is where the magic happens, and each plugin would be able to take the incoming data set and a context object for visualization. This context object is contrived, and of course, would be heavily application dependent, but it could be something that allows the plugin to add a UI control into it or a surface that the plugin can paint the visualization onto directly. RenderData Extension-Based Plugins for File Processing Another example of a possible plugin architecture in C# is for extending file processing capabilities. Imagine you have a file-processing application that supports various file formats, such as images, documents, and videos. By implementing a plugin system, you can allow users to develop and load custom file format handlers dynamically. In the code below, we’ll see a plugin format that allows us to check if the plugin can support the file extension. You could imagine that we have something like a facade class that would iterate through each plugin to see which supports it, and call the relevant plugin to handle it: // Interface for the file format plugin
public interface IFileFormatPlugin
{
    bool CanHandleFile(string filePath);

    void ProcessFile(string filePath);
}

// Example plugin implementation
public class PDFPlugin : IFileFormatPlugin
{
    public bool CanHandleFile(string filePath)
    {
        return filePath.EndsWith("pdf", StringComparison.OrdinalIgnoreCase);
    }

    public void ProcessFile(string filePath)
    {
        // Perform PDF-specific file processing
    }
} Custom Rule Engine Plugins A plugin architecture can also be beneficial when implementing a custom rule engine for applications that require complex validation or business rules. By using plugins, you can break down the rule engine into separate modules and dynamically load and execute them based on specific conditions or triggers. In the code example below, we use a TryX pattern that commonly has a boolean return type and an out parameter to get a result. In this case, we can output an Exception instance when the rule evaluation is not met. An alternative way to do this could be , or using the OneOf NuGet package. Let’s check it out: using a custom multi-type to have your own return type that could be the result or an error // Interface for the rule plugin
public interface IRulePlugin
{
    string RuleName { get; }

    bool TryEvaluateRule(
        object target,
        out Exception error);
}

// Example plugin implementation
public class AgeValidationPlugin : IRulePlugin
{
    public string RuleName { get; } = "AgeValidation";

    public bool TryEvaluateRule(
        object target,
        out Exception error)
    {
        // Check if the target object meets the age validation criteria
    }
} Plugin-based Authentication Systems A plugin architecture can also be applied to authentication systems, allowing the integration of various authentication providers such as OAuth, Active Directory, or custom authentication mechanisms. By creating authentication plugins, you can enable flexibility and easily switch between different authentication methods without tightly coupling your application to a specific implementation. Here’s a highly simplified plugin API that demonstrates the goal, but anyone who’s worked with real authentication systems likely realizes this is very trivialized: // Interface for the authentication plugin
public interface IAuthenticationPlugin
{
    bool AuthenticateUser(string username, string password);
}

// Example plugin implementation
public class OAuthPlugin : IAuthenticationPlugin
{
    public bool AuthenticateUser(string username, string password)
    {
        // Authenticate the user using OAuth protocol
    }
} While this example might be a little bit light, the point is calling out the use case — authentication in applications can be a great thing to move into plugins. If you are developing something that may require different authentication integrations, leveraging plugins to interface with each and still provide authentication for your app would be a great opportunity. Social Media Metrics Platform A very relevant example of a plugin architecture in C# is for tracking social media metrics. In my newsletter, I had been sharing behind-the-scenes details on how this was being built and ended up creating a video series that you can watch on YouTube.  It details the entire step-by-step process for making the app. You can see the , which focuses on a plugin architecture in C#: start of the Blazor build series in this video https://youtu.be/qndnxPzjrow?embedable=true Wrapping Up Plugin Architecture in C# Using a plugin architecture in C# development is one of my go-to ways to design systems. I admit that I have a strong bias for them! For me, when I am building applications on my own, they align with how I like to think about being able to extend software. Because I am used to structuring code to be loaded dynamically via plugin systems, this shapes a lot of my design. However, like all things, there are pros and cons and often it doesn’t make sense to complicate trivial applications with plugins — especially if there are features that are not planned to be extended. If you found this useful and you’re looking for more learning opportunities, consider . subscribing to my free weekly software engineering newsletter Also published . here

Improving C# Software Design Using Plugin Architectures

Hey there, have you ever needed to programmatically add a class to an element in an application? Like, maybe when a button is disabled, we need a class, but then once it’s enabled, we don’t. Or how about when a form goes from an invalid state to a valid one? Well, good news, this is actually pretty easy to do in angular. In this post, I’m going to show you four different ways. Angular First, we’ll use a method called class binding. Next, we’ll use the ngClass directive. After that, we’ll use the @HostBinding decorator. And finally, we’ll use the Renderer2 addClass() and removeClass() methods. Let’s get to it! https://youtu.be/sAa8QyFkVkI?embedable=true Using Angular Class Binding So class binding is something that you'd want to use in more simplistic cases where we just either want a class on an element or not. For example, we may want to add a disabled class to a button in a form when the form is invalid. To do this we simply add the word class in square brackets, followed by a dot and then our disabled class name. Then, we will bind this when our control is invalid. <form>
  ...
  <input [formControl]="emailControl" type="email" />
  ...
  <button [class.disabled]="emailControl.invalid">Subscribe</button>
</form> Using the Angular ngClass Directive When we encounter more complex scenarios, we may find ourselves needing to use the directive instead of Angular class binding. The directive gives us more flexibility and allows us to use more advanced logic for adding and removing class names. In this example, we want to switch between two different classes on our wrapping depending on whether the form is valid or not. ngClass fieldset To use the directive, we still use the square brackets, but this time we're going to use a ternary operator and when our control is invalid we'll add a class of 'invalid' and when it's not we'll add a class of 'valid'. ngClass <form>
  <fieldset [ngClass]="emailControl.invalid ? 'invalid' : 'valid'">
    ...
    <input [formControl]="emailControl" type="email" />
    ...
  </fieldset>
</form> Using Angular @HostBinding What if we need to conditionally bind a class on the host of our Angular Component or Directive? Well, this is where the Angular decorator comes into play. To do this we add the decorator within our component class and this will look much like our class binding example. We'll add the class name followed by a dot and then the class. Then we use a field, we'll call this one 'isValid' and we'll initialize it to false. @HostBinding @HostBinding To update this field, we'll need to subscribe to our email control status changes event and then simply update the value based on the status. ...
export class FormComponent implements OnInit {
  @HostBinding('class.valid') isValid = false;
  ...
  constructor(private destroyRef: DestroyRef) {}
    
  ngOnInit() {
    this.emailControl.statusChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((status) => this.isValid = status === 'VALID');
  }
} Using Angular Renderer2 addClass and removeClass Methods When we need to get really crazy and do something like add a class to the body element from within our component, this may seem near impossible in Angular. But, fortunately, it's not. We can reach for the Angular Renderer2 class which allows us to do several different things. For our purposes for conditionally adding classes to elements, we are only concerned with the add and remove class methods. First, we need to make sure that we inject the Renderer2 into our component via the constructor. Then, we will add a ternary operator within our status changes observable subscription for our control. If its status is valid, we will want to add the class to our element, and if it's invalid, we will want to be sure to remove the valid class. document.body ...
export class FormComponent implements OnInit {
  ...
  constructor(private destroyRef: DestroyRef, private renderer: Renderer2) {}
    
  ngOnInit() {
    this.emailControl.statusChanges
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe((status) => {
        ...
        status === 'VALID'
          ? this.renderer.addClass(document.body, 'valid')
          : this.renderer.removeClass(document.body, 'valid');
      });
  }
} In Conclusion Okay, so we now have four different ways to conditionally add and remove classes in Angular. First, we used class binding for more simple, straightforward cases. Then we used the directive where more advanced logic was needed. After that, we used the @HostBinding decorator to conditionally bind classes to our component host element. And finally, when all else failed and we needed something else, we used the Renderer2 add and remove class methods to bridge the gap. ngClass So hopefully that helps you out along your way and gives you some options when you need to programmatically add or remove classes. Want to See It in Action? Check out the demo code and examples of these techniques in the stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-gn5o3d?ctl=1&embed=1&file=src%2Fform%2Fform.component.ts&embedable=true Also published here.

4 Ways to Dynamically Add Classes in Angular

Hey Everyone, Hope you all doing great. In this post we're building pagination component from scratch in ReactJS. We're not going to use any library here. If you prefer to watch video then you can go through below video else keep reading...😄 Let's start by creating our react-app, npx create-react-app react-pagination-component Create a separate file, like PaginationComponent.js. Here, I'm using to get data and use pagination on that data. jsonplaceholder API This API will return us a list of todos. Now to store this data create one state and initialize it with an empty array. const [data, setData] = useState([]); Now let's use useEffect to set this state with our data which comes from API. }, []); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); if you want to see what type of data this api is providing then just go to url. this Also if you don't know how to fetch api in ReactJS you can watch my video on . How to fetch API let's create a small renderData component outside of our main component to render the "to-do" list. );
}; }, []); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} </> export default PaginationComponent; In here I have mapped title of to-dos from data 
state. const renderData and Render with data state, inside the return. {renderData(data)} Now, let's create pagination from here. To do that we need two states, const [currentPage, setcurrentPage] = useState( 1 ); const [itemsPerPage, setitemsPerPage] = useState( 5 ); :- stores current page number, initially 0. currentPage :- stores no of items we want to display in 
 single page. Initially it is 5. itemsPerPage pages.push(i);
  } const pages = []; for ( let i = 1 ; i <= Math .ceil(data.length / itemsPerPage); i++) { In above code, pages array contains total number of pages like 1,2,3..upto (total data / itemsPerPage). If you have 20 items and you want to display 5 items per page then you will need 20/5 = 4 pages. Let's create render page number component which will display page numbers. );
}; }, []); }; );
    
  }); );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > {renderPageNumbers} </ ul > </> export default PaginationComponent; As you can see after the handleClick method at , renderPageNumber I have mapped this pages array which will return an tag which display page numbers. This tag contains key, id, onClick method and className. li li Here className becomes active when you are on the same page as currentPage state. This method runs when we click on any page number and set currentPage state to selected page number. handleClick Now inside the return render component by wrapping it with tag and className as pageNumbers. renderPageNumbers ul For styling, you can refer css file. NOTE: this As you have observed, This page numbers are all over whole page and now we need to set limit to display this page numbers. To do that we need to define 3 more react states. const [pageNumberLimit, setpageNumberLimit] = useState( 5 ); const [maxPageNumberLimit, setmaxPageNumberLimit] = useState( 5 ); const [minPageNumberLimit, setminPageNumberLimit] = useState( 0 ); is to store how many page numbers you want to display. Here I want to display only 5. pageNumberLimit is to store max page bound limit. maxPageNumberLimit is to store min page bound limit. minPageNumberLimit Now modify component by putting if condition like given below, renderPageNumbers ); }
  }); const renderPageNumbers = pages.map( ( number ) => { if (number < maxPageNumberLimit + 1 && number > minPageNumberLimit) { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > } else { return null ; This if condition means that if current number is greater then maxPageNumberLimit+1 and less then then render it else render nothing. minPageNumberLimit As you run your code, you will see that there are only 5 page numbers displayed. Next we need next and previous buttons. Create those buttons around the component. {renderPageNumbers} Just like below, );
}; }, []); }; );
    
  }); setmaxPageNumberLimit(maxPageNumberLimit + pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit + pageNumberLimit);
    }
  }; setmaxPageNumberLimit(maxPageNumberLimit - pageNumberLimit);
      setminPageNumberLimit(minPageNumberLimit - pageNumberLimit);
    }
  }; );
} import React, { useEffect, useState } from "react" ; import "./style.css" ; const renderData = ( data ) => { return ( < ul > {data.map((todo, index) => { return < li key = {index} > {todo.title} </ li > ; })} </ ul > function PaginationComponent ( ) { const [data, setData] = useState([]); useEffect( () => { fetch( "https://jsonplaceholder.typicode.com/todos" ) .then( ( response ) => response.json()) .then( ( json ) => setData(json)); const handleClick = ( event ) => { setcurrentPage( Number (event.target.id)); const renderPageNumbers = pages.map( ( number ) => { return ( < li key = {number} id = {number} onClick = {handleClick} className = {currentPage == number ? " active " : null } > {number} </ li > const handleNextbtn = () => { setcurrentPage(currentPage + 1 ); if (currentPage + 1 > maxPageNumberLimit) { const handlePrevbtn = () => { setcurrentPage(currentPage - 1 ); if ((currentPage - 1 ) % pageNumberLimit == 0 ) { return ( <> < h1 > Todo List </ h1 > < br /> {renderData(data)} < ul className = "pageNumbers" > < li > < button onClick = {handlePrevbtn} disabled = {currentPage == pages[0] ? true : false } > Prev </ button > </ li > {renderPageNumbers} < li > < button onClick = {handleNextbtn} disabled = {currentPage == pages[pages.length - 1 ] ? true : false } > Next </ button > </ li > </ ul > </> export default PaginationComponent; There are two buttons and before and above the . prev next, {renderPageNumbers} In method for next button. In this method whenever user clicks on next button, it will set the current page state to plus 1. and check the condition if current page has not crossed maximum page number limit or not. If yes then it will reset this max and min page number limit with new limit. handleNextbtn In method for previous button. Only change is in the sign and in if condition. Suppose you are at page 6 and you want to go back to 5 then this condition will check that 6-1=5%5==0 so it will become true and it will reset max and min page number limits. handlePrevbtn Below code is to disable next button,we will disable next button when user is at last page. disabled={currentPage == pages[pages.length - 1 ] ? true : false } Below code is to disable Prev button, we will disable prev button when user is at 1st page. disabled={currentPage == pages[ 0 ] ? true : false } Now our Pagination component is Almost completed one thing left is to add those three dots which indicates that there are more pages then displayed. Let's create them. Above is the full code for this Tutorial. Just before the return I have created two buttons with hellip; which is unicode for ... There are two buttons pageIncrementBtn will render when page length is > maxPageNumberLimit.
 while pageDecrementBtn will render when minPageNumberLimit >= 1. Don't forget to render both of this ... buttons below and after the component. {renderPageNumbers} Now your whole Pagination component is completed. Watch above given video to know about one more pagination component which loads items vertically. Thanks For Reading.😄

ReactJS Pagination Tutorial: Building from Scratch

In this blog post, I am going to share how I created a Blazor component without life-cycle methods and razor file syntax. We could also say this as class only component approach but without life-cycle methods. Many of them might knew this way of component rendering, but I felt like sharing this would help other folks who doesn’t know. I found this approach after going through various components used in Blazor source code. To demonstrate this approach, we are going to create a simple Rating component. I am creating a class named Rating.cs. As mentioned previously this is a class only component so I am not creating a Razor component item. {
} public class Rating First step in this approach is to implement Rating class with IComponent interface. : {
} public class Rating IComponent Now the Rating class must implement below two methods of IComponent interface. Attach — Attach the RenderHandle instance to the rating component. SetParametersAsync — Set the component parameters. Yes I lied before, we need this life cycle method. But I promise, this is the only one needed I will not add any more. In the Attach method, we need to get and store the RenderHandle instance for later usage. Now the code will look like below. : { RenderHandle _renderHandle; IComponent.Attach(RenderHandle renderHandle)
     {
        _renderHandle = renderHandle;
     }
} public class Rating IComponent private void Now we need to handle the SetParametersAsync method, this method should take care of below two important responsibilities. Get component parameters from ParameterView and set in the corresponding component property. Here Rating component uses Value property. Invoke Render method of the RenderHandle with the RenderFragment delegate. Now the final rating component will look like below. : { RenderHandle _renderHandle;        

        [ ] Value { ; ; } IComponent.Attach(RenderHandle renderHandle)
        {
            _renderHandle = renderHandle;
        }

        Task IComponent.SetParametersAsync(ParameterView parameters)
        { ( entry parameters)
            { (entry.Name)
                { = ( )entry.Value; ;
                }
            }
            _renderHandle.Render(RenderDelegate); Task.CompletedTask;
        } { max = Math.Min(Value, ); seq = ; ( i = ; i < max; i++)
            {
                builder.OpenElement(seq++, );
                builder.AddAttribute(seq++, , );
                builder.AddContent(seq++, );
                builder.CloseElement();
            }
        }
    } public class Rating IComponent private Parameter public int get set void foreach var in switch ( ):
                        Value case nameof Value int break return ( ) private void RenderDelegate RenderTreeBuilder builder int 5 int 1 for var 0 "span" "style" "color:#f49813;font-size:30px" "★" Now the Rating component can be used in our application simply like below. The output looks like below. Closing I hope you have learned one of many ways of creating Blazor components. In this post, I am neither recommending this as the best approach nor insisting to use this approach for performance benefits. I found this approach as a simple and clean way of creating simple Blazor components. Leave comments or share this post if you found this helpful. Happy coding!! Also published at https://dev.to/madhust/blazor-in-depth-create-blazor-component-without-lifecycle-methods-2786

How to Create a Blazor Component Without Lifecycle Methods

This blog post will help you build powerful search UI experiences similar to Airbnb's. I will do this using ReactiveSearch - the most popular React UI components library for building search interfaces. I will do this by breaking down the UI into components so this will be helpful to build any search UI. In the process, you will also learn about about how to work with ElasticSearch. . You can read all about it . If you have already worked with an earlier version ReactiveSearch, this post will also guide you wrt the breaking changes for v3 and how you can upgrade your components. ReactiveSearch v3 is just out now here You should try out the to see what we will be building. I will wait for you! Live Demo of our final app here What is ElasticSearch and why should you care about it? Now, let’s understand the role of ElasticSearch in helping us build the above UI. ElasticSearch is a . It allows you to , , and big volumes of data quickly (we are talking milliseconds here). It is generally used as the underlying engine/technology that powers applications that have complex search features and requirements. You can read more about it . super-fast, open-source, full-text search engine store search analyse here With ElasticSearch, you can build a fast search utilising its powerful Query DSL. However, setting up ElasticSearch correctly requires a lot of work. For instance, the data mapping, analysers and tokenisers need to be set correctly or you may not receive accurate search results back. Besides, the more filters that get applied along with the search query, the more complex the resulting search query becomes. We, at Appbase, have built some open-source tools to help you do all these things with the matter of some clicks. A tool to into ElasticSearch — add data Importer A tool to like an excel sheet — view ElasticSearch data Data Browser A tool to easily — generate relevant ElasticSearch queries Query Builder In this blog post, with the help of some of these tooling, we will utilise the strengths of ElasticSearch with React to build powerful apps. How to use ElasticSearch with React? We will be using and open-source libraries to build the Airbeds app in this post. These libraries offer a range of highly customisable rich UI components that can connect with any ElasticSearch server and provide you with an appropriate default search query for all generic use-cases (like E-commerce, Yelp, Meetups, etc) bundled into these components. ReactiveSearch will help us to build UI widgets for filters and search-related UI elements. ReactiveMaps will provide us with the UI widgets for Map related UI elements. ReactiveSearch ReactiveMaps is currently featured on Product Hunt. 🎉 🎉 ReactiveMaps A sneak peeks into the UI components offered by ReactiveSearch and ReactiveMaps. Image: Things we will need In order to build Airbeds application, we will need a set of things before we get started with writing actual code: Dataset for Airbeds App: To make a great UI we should have a good dataset. We found an awesome dataset for our App. Here is the link to a dataset: . https://www.kaggle.com/airbnb/seattle ElasticSearch hosting: You can set up and install an ElasticSearch server by following the , or you can create a free account at which provides ElasticSearch hosting as a service and is easy to use. For simplicity, we will be using appbase.io service to get started. official installation guide appbase.io I’ve already created an appbase app with Airbeds dataset. You can check out the cleaned-up dataset from above , which is built by Appbase.io: over here in the data browser tool Dejavu Hosted ElasticSearch dataset for our app. View Image: here The credentials for accessing the above app programmatically are: app= credentials= "airbeds-test-app" "X8RsOu0Lp:9b4fe1a4-58c6-4089-a042-505d86d9da30" // read-only Now, we will go step by step to build our application. We’ll use . So, you can be with me during the whole journey and see the step by step progress of our application as we build it. Click on the above link and click on Open React button. Codesandbox.io Step 1: Base setup for CRA with ReactiveSearch and ReactiveMaps If you have tried out the before, you will feel right at home as we build this app. Create React App Create React App Initialise the CRA setup. We will use npm as the package manager, you can also use yarn instead. npx create-react-app airbeds
cd airbeds
npm start Note: npx comes with npm 5.2+ and higher, see instructions for an older release here Go grab a coffee and be back in a couple of minutes … The setup will be ready for you! One of the great benefits of using CRA is that it works without requiring to set up a build configuration. At this point, you should have a directory structure similar to this: airbeds
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── package-lock.json
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js Next, we will install the and npm packages. ReactiveSearch ReactiveMaps Install ReactiveSearch npm install @appbaseio/reactivesearch Install ReactiveMaps npm install @appbaseio/reactivemaps Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 1 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step1 Step 2: Adding components from ReactiveSearch library Adding the first ReactiveSearch component: ReactiveBase All the ReactiveSearch components are wrapped inside a container component — ReactiveBase which glues the ElasticSearch index and the ReactiveSearch components together. We’ll use this in /src/App.js: The app and credentials are taken from my appbase.io app. You can create your own app and add those from your . dashboard We can set our app’s theme by providing the theme attribute prop to our ReactiveBase component. Here is the theme for our app: Now let’s start the server with npm start. Breaking Down The Airbeds App Now that we have a dataset to play around with and we are also done with our setup, it’s time for adding components in our app. Before you add the below snippets to the render() method, you should also remember to import them using the following format: { Component# , Component# } @appbaseio/reactivesearch import 1 2 from 1. DataSearch Component component creates a search bar UI which allows us to search for available rooms. DataSearch In this component, we are passing the dataField parameter with the name value. Here, name is the column in the database on which we want to apply our search. You can learn more about this component . here 2: RangeSlider Component will be used to create the price filter which allows a user to filter accommodations based on their budgets. RangeSlider In this component, we are passing the range attribute, which will define the start and end value of our filter. We can set the labels with rangeLabels parameter. We have set default values of start and end price as 10$ and 20$ respectively. range parameter shows the list of components, with RangeSlider component has to change reactively. You can learn more about this component . here 3: NumberBox Component will help us to make UI widget for Guests filter, which allows a user to filter properties by the number of guests that can be accommodated. NumberBox Here, data parameter defines the maximum and minimum value for the NumberBox component. You can learn more about this component . here 4. DateRange Component will provide UI widget for Date filter, which allows a user to select a range of dates for accommodation. DateRange Here, the numberOfMonths attribute shows the number of months to be shown in the calendar view. initialMonth sets the initial visible month when the calendar UI is opened. You can learn more about this component . here Codesandbox link: 2 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub project — . https://github.com/appbaseio-apps/Airbeds-app/tree/step2 Step 3: Styling the components we have so far Alright, Alright, Alright !!! I got it! You must be thinking that why these components look so simple. Let’s add some styles to them. We are using the majority of styling for setting layout. We have used flex to design our layout. We have used buttons for each filter. We will show particular filters when the user hovers on particular buttons. Add styles in App.css file and add this statement in App.js file: ; import "./App.css" Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 3 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step3 Step 4: Adding components from ReactiveMaps and styling them We will import components from ReactiveMaps library using this statement: { ReactiveGoogleMap } ; import from '@appbaseio/reactivemaps' 5. ReactiveGoogleMap Component component provides a map as a data-driven layer. One can add marker pins, show popovers, draw polygons, build navigation routes based on the results from the ReactiveSearch components. In our current app, we will display the available accommodations based on the search and filters onto the map view. Interesting! Isn’t it? ReactiveGoogleMap In this component, defaultZoom attribute defines the map’s zoom level and accepts integer values between [0, 20]. We can also provide style to ReactiveMap component with the style prop. The innerClass attribute helps us to provide className for inner components of ReactiveMap. renderAllData attribute is used for showing result cards for user’s search. We have designed our result-cards using flex. We will show markers on the map with using renderData parameter. You can know more about this component . here Wohoo!!! We have made working Airbeds app! But still, we will add more styles to make it look cooler and professional! Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 4 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step4 Adding the popover effect on markers Now in the final step #5, we will add a popover effect on markers so that when a user clicks on the marker, we can show them more details. Let’s do it! We will use onPopoverClick attribute of ReactiveGoogleMap component to achieve this. The return value here is a valid JSX markup, giving you full control over what can be displayed within it. This is how my onPopoverClick function looks: Congrats! If you have followed along so far, you should see a fully working Airbeds app, just as you saw at the start of the post! 🎉 Use the button switch and hamburger icon to browse the code we have written so far. Snippet: Codesandbox link: 5 https://codesandbox.io/s/github/appbaseio-apps/Airbeds-app/tree/step In addition to the code sandbox above, you can also try the code so far directly from our GitHub — . https://github.com/appbaseio-apps/Airbeds-app/tree/step5 In case you are missing a step, you can get the code so far by following these: git clone https: cd airbeds
npm install
npm run dev
# open http: //github.com/appbaseio-apps/Airbeds-app.git //localhost:3000 Summary Here comes the end of our journey, and we have got our awesome Airbeds app built with ReactiveSearch and ReactiveMaps. To summarise everything so far: This post introduces and — UI components libraries for ElasticSearch that provide the scaffolding for building great search experiences. Next, we went step-by-step to add different UI components and style our app. ReactiveSearch ReactiveMaps : Base setup for CRA with ReactiveSearch and ReactiveMaps ( ) Step 1 Codesandbox link : Adding components from ReactiveSearch library ( ) Step 2 Codesandbox link : Styling the components we have so far ( ) Step 3 Codesandbox link : Adding components from ReactiveMaps and styling them ( ) Step 4 Codesandbox link : Adding a popover effect on markers ( ) Step 5 Codesandbox link Useful References: While this post only shows how to build an Airbnb like search, we offer a 5+ hours course teaching on how to build an end-to-end Airbnb clone using React, Redux, TypeScript, Express.JS, ElasticSearch, Firebase and Postgres SQL: . https://reactiveapps.io/products/AWtRe_43OSQtLugWf1Fk All ReactiveSearch and ReactiveMaps components can be interactively tried using the playground . https://opensource.appbase.io/playground/ The documentation for all the above plus 20 other components is available at . https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/ You can look at the code for this app at . https://github.com/appbaseio-apps/Airbeds-app Finally, go ★ the project on so you can find it when you need to build that awesome search! Github

How to Build an Airbnb clone with React and ElasticSearch

This tutorial is the sixth part of our React Native Travel Article App UI clone series. In the , we successfully implemented the Delimiter dots animation while scrolling the Destination cards in the Destinations section. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous parts in order to get the knowledge and insight into the overall project. previous part In case of wanting to learn from the beginning, all the parts for this tutorial series are available below: React Native Travel Article App UI Clone #1: Getting Started React Native Travel Article App UI Clone #2: Destinations Section React Native Travel Article App UI Clone #3: Destinations Info Section React Native Travel Article App UI Clone #4: Recommendation Section React Native Travel Article App UI Clone #5: Animated Delimiter Dots As mentioned in the previous tutorial part, the inspiration for this tutorial series came from the React Native Theme that delivers a wide variety of beautiful templates written in React Native and powered by universal features and design. The templates enable us to implement our own apps and even help us get started with our own startups. And, this sixth part is also the continuation of the same coding implementations and designs from the Youtube video tutorial by for the Travel Article App UI clone. The video tutorial seems to deliver the overall tutorial using fast coding which may be difficult to grasp for any developer especially the beginners. Hence, this article tutorial provides a step by step implementation which will be easier to understand and implement. So, the learners can relax and take their time to implement the UI. React UI Kit Overview In this sixth part of this tutorial series, we are going to add the icons in the required UI sections and also add star ratings to the . In this tutorial part, we are going to complete the implementation of the List screen as a whole. The idea is to add the vector icons to the required UI section of the list screen.  Then, we are going to add the star ratings to the Recommendation section. Finally, we will also configure the star ratings to show the active and inactive stars on the basis of rating value. Recommendation cards So, let us begin!! Installing Vector Icons Package Here, we are going to install the package into our project. This package provides customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source, and full styling. Now, in order to install the package, we need to use the following command: react-native-vector-icons expo install react-native-vector-icons Now, we need to import the required icons into our List screen. For that, we need to use the code from the following code snippet: FontAwesome ; Octicons ; import from 'react-native-vector-icons/FontAwesome' import from 'react-native-vector-icons/Octicons' Here, we have imported the Font Awesome icon package in the form of component. And, we have also imported the icon package as Octicons component. FontAwesome Octicons Adding Icon to UI sections Now, we are going to add the icons that we imported to various sections of the List screen. Adding Icon to Recommendation Section Here, we are going to add the bookmark icon to the Recommendation cards. The bookmark icon will be set on the basis of the saved value from the destinations array data. If the saved value is true then the bookmark active icon will be set otherwise the bookmark inactive icon will be set. Now in order to implement this, we need to use the code from the following code snippet in the renderRecommendation() function: <View style={[styles.flex, styles.recommendationHeader]}> <View style={[ styles.flex, styles.row, styles.recommendationOptions ]}>
                <Text style={styles.recommendationTemp}>
                  {item.temperature}℃
                </Text>
                <FontAwesome
                  name={item.saved ? 'bookmark' : 'bookmark-o'}
                  color={theme.colors.white}
                  size={theme.sizes.font * 1.25}
                />
              </View>
            </View> < = = }} /> Image style {[styles.recommendationImage]} source {{ uri: item.preview Here, we have added the component which enables us to set the FontAwesome icons. We have also provided the color and size props to the component. FontAwesome FontAwesome Hence, we will get the following result in our emulator screen: As we can see, we have got the bookmark icons in the Recommendation cards section. Adding Icon to Destinations section In the Destinations section, we need to add two icons. One is the location icon in the component and the other is the greater than an arrow-like icon in the Info section. First, we are going to add the location marker icon to the component of the section. For that, we need to use the code from the following code snippet in the function: ImageBackground Destination ImageBackground Destinations renderDestination() <View style={[styles.column, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.white }}> <Text> {item.location}</Text> < flex 2 paddingHorizontal 2 {item.user.name} < = , ' '}}> Text style {{color : theme.colors.white fontWeight : bold </ > Text color < = = * } = /> Octicons name "location" size {theme.sizes.font 0.8 color {theme.colors.white} </ > Text /View> Here, we have added the component to add the icon from the Octicons package. We have selected the location icon of the Octicons icon package. The size and color props are also configured in the component. Octicons Octicons Hence, we will get the following result in our emulator screen: As we can see, we have got the location icon in the background image of the Destinations section. Now, we need to add an icon to the section. For that, we need to use the code from the code snippet below: Destinations Info <View style={[styles.column, styles.destinationInfo, styles.shadow]}> <View style={[ styles.row, { : , : }]}> <FontAwesome
                name= size={theme.sizes.font * }
                color={theme.colors.caption}
              /> < {item.title} < = , ' ', , }}> Text style {{ fontSize: theme.sizes.title fontWeight: 500 paddingBottom: 8 </ > Text justifyContent 'space-between' alignItems 'flex-end' {item.description.split('').slice(0, 50)}... < = }}> Text style {{ color : theme.colors.caption </ > Text "chevron-right" 0.75 </ > View /View> Here, we have added the component which provides us with access to Font Awesome icons. The size and color props are also configured. FontAwesome Hence, we will get the following result in the emulator screen: As we can see, we have got the 'greater than' icon in the Destination Info section as well. Hence, this completes our task of adding icons in the List screen. Now, we are going to add the star ratings to the section. Recommendation Card Adding Star Ratings to the Recommendation Card Section In this step, we are going to add the star ratings in the Recommendation Card Section. These star ratings will represent the overall rating given to the recommended travel destination. We might have remembered that we have added the rating value before. Now, we are going to add the star icons including the rating value. For that, we are going to define a new function called which will return the template for the ratings. The overall implementation of this function is provided in the code snippet below: renderRatings() renderRatings(rating) { stars = ( ).fill( ); (
        stars.map( { activeStar = index < rating; ( const new Array 5 0 return ( ) => value, index const return )
        })
      )
    } < = = ` ${ }`} = ? ' ' ' ']}
            /> FontAwesome name "star" key { star- index color {theme.colors[activeStar active : gray Here, in the function we have initialized a new Array variable called stars which can take up to 5 values. This function takes ratings as a parameter. Then, we have used the array function which enables us to iterate through each item of stars array. renderRatings() map() Inside the function, we have defined a new constant that stores the in order to give style accordingly. Then, we have returned the component with star icons. map() activeStars FontAwesome The component is configured with key and color props. The key prop to identify each item in array uniquely. And, the color is based on the constant. FontAwesome activeStar Now, we need to call this function in the function as shown in the code snippet below: renderRatings() renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-between', marginTop: theme.sizes.margin }
              ]}>
                <Text style={{ color: theme.colors.active }}>
                  {this.renderRatings(item.rating)}
                  {item.rating}
                </ </ > View /View> Here, we have called the function inside the component wrapping the rating value. We have passed the rating value of the item from the destinations data array. renderRatings() Text Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings with star icons and rating value in our Recommendation card section. But, all the ratings seem to be active and it does not seem appealing as well. Now, we are going to configure the active and inactive stars based on rating value as well as style the rating stars properly. Configuring the active rating star icons Here, we are going to configure the active ratings based on the rating value. For that, we need to make some configurations to the constant in the method as shown in the code snippet below: activeStar renderRatings() stars.map( { activeStar = .floor(rating) >= (index + ); ( ( ) => value, index const Math 1 return )
        }) < = = ` ${ }`} = = ? ' ' ' ']}
            /> FontAwesome name "star" key { star- index size {theme.sizes.font} color {theme.colors[activeStar active : gray Here, we have taken the floor value of rating using Math function and index property. Then, we have also added the size prop to the component. FontAwesome Now, we need to make some changes to the function as well which is provided in the code snippet below: renderRecommendation() <View style={[styles.flex, styles.column, styles.shadow, { : , : theme.sizes.padding / }]}> <Text style={{ : theme.colors.caption}}>{item.location}< Text> < justifyContent 'space-evenly' padding 2 {item.title} < = * , ' ', / , }}> Text style {{ fontSize: theme.sizes.font 1.25 fontWeight: 500 paddingBottom: theme.sizes.padding 4.5 </ > Text color /Text>
              <View style={[
                styles.row,
                { alignItems: 'center', justifyContent: 'space-evenly', marginTop: theme.sizes.margin }
              ]}>
                {this.renderRatings(item.rating)}
                <Text style={{ color: theme.colors.active }}>
                  {item.rating}
                </ </ > View /View> Here, we have removed the function from the Text component and placed outside it. We have also added some style to the component wrapping the function. renderRatings() View renderRatings() Hence, we will get the following result in our emulator screen: As we can see, we have got the star ratings in accordance with the rating value. The rating section also looks appealing now as in the actual app. Now, we are going to add navigation to the Article screen while clicking on the Destination section cards. Adding Navigation to Article screen Here, we are going to add the navigation to screen. We are going to configure this navigation property into the Destination Section cards For that, we need to use the code from the following code snippet in the function: Article renderDestination() renderDestination(item){ ( <ImageBackground
            style={[styles.flex, styles.destination, styles.shadow]}
            imageStyle = {{borderRadius : theme.sizes.radius}}
            source= {{uri : item.preview}}
          >
        …………………………………..
          </ImageBackground> )
    } return this.props.navigation.navigate('Article', { article: item })}> < = = => TouchableOpacity activeOpacity {0.8} onPress {() </ > TouchableOpacity Here, we have wrapped the entire Destination card template by the component. Then, we have added the prop to the component to give the opaque effect while clicking. In the event of the component, we have configured the navigation using the navigate function provided by prop. The prop is automatically available to all the screens which are configured to our . TouchableOpacity activeOpacity TouchableOpacity onPress TouchableOpacity navigation navigation Navigator Now, we can navigate to Article screen by clicking on the Destination cards as shown in the emulator simulation below: As we can see, when clicking on each Destination cards, we can navigate to the Article screen. With this, we have come to the end of this part of the tutorial. Finally, we have successfully implemented each and every UI section in the List screen of our React Native Travel Article App UI clone. Conclusion This tutorial is the sixth part of the React Native Travel Article App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to add the vector icons to the required UI section in our List screen. Then, we got the stepwise guidance on how to add the star ratings as well as configure the active ratings based on rating value. We also learned to add the navigation from the navigation prop in order to navigate to the Article screen. Finally, we have successfully completed the implementation of every UI section in the List screen of our Travel Article App UI clone.

React Native Travel Article App UI Clone #6 : Finish 

Share Code between React and React Native Apps

As you know, in the , section , it is said that Pragmatic Programmer Your Knowledge Portfolio Learn at least one new language every year. Different languages solve the same problems in different ways. By learning several different approaches, you can help broaden your thinking and avoid getting stuck in a rut. Additionally, learning many languages is far easier now, thanks to the wealth of freely available software on the Internet I see learning programming languages as a chance to open up my horizon and learn some new concepts. It also encourage good habit like immutability, composition, modulation, … I’d like to review some of the features of all the languages I have played with. Some are useful, some just make me interested or say “wow” Curly braces Each language can have its own style of grouping block of code, but I myself like the curly braces the most, which are cute :] Some like C, Java, Swift, … use curly braces **Swift** init(total: Double, taxPct: Double) {  self.total = total  self.taxPct = taxPct  subtotal = total / (taxPct + 1)} Some like Haskell, Python, … use indentation **Haskell** bmiTell :: (RealFloat a) => a -> String  bmiTell bmi      | bmi <= 18.5 = "You're underweight, you emo, you!"      | bmi <= 25.0 = "You're supposedly normal. Pffft, I bet you're ugly!"      | bmi <= 30.0 = "You're fat! Lose some weight, fatty!"      | otherwise   = "You're a whale, congratulations!" Some like Elixir use keyword list **ELixir** if false, do: :this, else: :that Named parameter Language like Objective C, Swift offer named parameter, which make it easier to reason about a function call func sayHello(to person: String, and anotherPerson: String) -> String {    return "Hello \(person) and \(anotherPerson)!"} Explicit type Language like C, Swift, Java, … have type information in parameter and in return, which make it easier to reason about a function call **Swift** func sayHello(personName: String, alreadyGreeted: Bool) -> String {    if alreadyGreeted {        return sayHelloAgain(personName)    } else {        return sayHello(personName)    }} List comprehension Languages like Haskell, Python, Elixir, support list comprehension **Elixir** iex> for n <- [1, 2, 3, 4], do: n * n[1, 4, 9, 16] First class function I enjoy functional programming, so first class function support in Javascript, Swift, Haskell, Elixir, … really make me happy **Haskell** zipWith' (*) (replicate 5 2) [1..] Curry Currying is the technique of translating the evaluation of a function that takes multiple arguments (or a tuple of arguments) into evaluating a sequence of functions, each with a single argument (partial application) Language like Swift 2, Haskell, … have curry by default. Some like Javascript can use libraries (Lodash, …) to achieve this. In Haskell, every function officially only takes one parameter. In Swift 3, curry was :( removed Haskell multThree :: (Num a) => a -> a -> a -> a  multThree x y z = x * y * z By calling functions with too few parameters, we’re creating new functions on the fly. **Javascript** var curry = require('lodash.curry');var map = curry(function(f, ary) {  return ary.map(f);});var getChildren = function(x) {  return x.childNodes;};

var allTheChildren = map(getChildren); Pattern matching I find pattern matching as a better way around statement if else Swift supports pattern matching in statement switch **Swift** enum Trades {    case Buy(stock: String, amount: Int, stockPrice: Float)    case Sell(stock: String, amount: Int, stockPrice: Float)}

let aTrade = Trades.Buy(stock: "APPL", amount: 200, stockPrice: 115.5)

switch aTrade {case .Buy(let stock, let amount, _):    process(stock, amount)case .Sell(let stock, let amount, _):    process(stock, amount * -1)} Some like Haskell, Elixir, … also pattern matches on function name, which makes it work great for recursion **Haskell** sayMe :: (Integral a) => a -> String  sayMe 1 = "One!"  sayMe 2 = "Two!"  sayMe 3 = "Three!"  sayMe 4 = "Four!"  sayMe 5 = "Five!"  sayMe x = "Not between 1 and 5"  

map _ []     = []map f (x:xs) = f x : map f xs In Elixir, the operator is actually a match operator = **Elixir** iex> x = 11iex> x1iex> 1 = x1iex> 2 = x** (MatchError) no match of right hand side value: 1 Recursion Some language like Haskell, Elixir, … don’t use loop, they use recursion with performance in mind, no overflow. Haskell length' :: (Num b) => [a] -> b  length' [] = 0  length' (_:xs) = 1 + length' xs Laziness Some languages support infinite collection, thanks to their laziness. Haskell is lazy, if you map something over a list several times and filter it several times, it will only pass over the list once **Haskell** largestDivisible :: (Integral a) => a  largestDivisible = head (filter p [100000,99999..])      where p x = x `mod` 3829 == 0 Elixir defines the concept of with and with Eager Enum Lazy Stream **Elixir** 1..100_000 |> Enum.map(&(&1 * 3)) |> Enum.filter(odd?) |> Enum.sum Custom operator Elixir is famous for its operator pipe |> The |> symbol used in the snippet above is the pipe operator: it simply takes the output from the expression on its left side and passes it as the first argument to the function call on its right side Elixir 1..100_000 |> Enum.map(&(&1 * 3)) |> Enum.filter(odd?) |> Enum.sum Haskell often takes advantage of this custom operator -: Haskell x -: f = f x  

(0,0) -: landLeft 1 -: landRight 1 -: landLeft 2 Functor, Applicative Functor, Monoid, Monad I really like enjoy Haskell because of these typeclasses. It realizes common pattern (map, apply, join, bind, …) with comptutational context. It really enlightens me when I find that is a Monad as well (you should read the ) function Reader monad **Haskell** instance Monad Maybe where      return x = Just x      Nothing >>= f = Nothing      Just x >>= f  = f x      fail _ = Nothing  

landLeft :: Birds -> Pole -> Maybe Pole  landLeft n (left,right)      | abs ((left + n) - right) < 4 = Just (left + n, right)      | otherwise                    = Nothing  

landRight :: Birds -> Pole -> Maybe Pole  landRight n (left,right)      | abs (left - (right + n)) < 4 = Just (left, right + n)      | otherwise                    = Nothing

ghci> return (0,0) >>= landLeft 1 >>= banana >>= landRight 1  Nothing List comprehension in Haskell is just syntactic sugar for using lis as Monad **Haskell** ghci> [ (n,ch) | n <- [1,2], ch <- ['a','b'] ]  [(1,'a'),(1,'b'),(2,'a'),(2,'b')] **Swift** enum Result<T> {    case Value(T)    case Error(NSError)}

extension Result {    func map<U>(f: T -> U) -> Result<U> {        switch self {            case let .Value(value):                return Result<U>.Value(f(value))            case let .Error(error):                return Result<U>.Error(error)        }    }}

extension Result {    static func flatten<T>(result: Result<Result<T>>) -> Result<T> {        switch result {            case let .Value(innerResult):                return innerResult            case let .Error(error):                return Result<T>.Error(error)        }    }}

extension Result {    func flatMap<U>(f: T -> Result<U>) -> Result<U> {        return Result.flatten(map(f))    }} Trait and mixin Languages like Scala, … support trait Similar to interfaces in Java, traits are used to define object types by specifying the signature of the supported methods. Unlike Java, Scala allows traits to be partially implemented; i.e. it is possible to define default implementations for some methods **Scala** trait Similarity {  def isSimilar(x: Any): Boolean  def isNotSimilar(x: Any): Boolean = !isSimilar(x)}

class Point(xc: Int, yc: Int) extends Similarity {  var x: Int = xc  var y: Int = yc  def isSimilar(obj: Any) =    obj.isInstanceOf[Point] &&    obj.asInstanceOf[Point].x == x} Swift can uses to Protocol Extension achieve trait **Swift** protocol GunTrait {    func shoot() -> String {        return "Shoot"    }}

protocol RenderTrait {    func render() -> String {        return "Render"    }}

struct Player: GameObject, AITrait, GunTrait, RenderTrait, HealthTrait {

} Ruby supports via Mixin Module **Ruby** module Greetings  def hello    puts "Hello!"  end

  def bonjour    puts "Bonjour!"  end

  def hola    puts "Hola!"  endend

class User  include Greetingsend Delegate property There are certain common kinds of properties that would be very nice to implement once and for all like lazy, observable and storing. An example is in Kotlin class Delegate {operator fun getValue(thisRef: Any?, property: KProperty<*>): String {return "$thisRef, thank you for delegating '${property.name}' to me!"} operator fun setValue(thisRef: Any?, property: KProperty<\*>, value: String) {  
    println("$value has been assigned to '${property.name}' in $thisRef.")  
} } Where to go from here Hope you find something interesting. Each language has its own pros and is designed for specific purpose. So no list will be enough to cover them all. To take a quick peek into other programming languages, I find by Derek very helpful. Learn in One Video There are things that intrigue us every day like Swift initialization rule make it explicit when using initializer, Go goroutine and channel for concurrent code, Elixir process for easy concurrent and message communication. You’ll be amazed by how process encapsulates state, Haskell data type encourages immutability and thread safe code, Elixir macro for great extension of the language. The best way to to learn is to use and dive into the languages often. May your code continue to compile. While you are here, you may like my other posts Next to first, next to nothing 20 recommended utility apps for macOS in 2018 How to make tag selection view in React Native 8 ways to communicate between Fragment and Activity in Android apps

Getting to know some pragmatic programming language features

Building simple Point of Sale system with Node.js & React.js

Starting with an animated background Introduction I really wanted to write a tutorial about a game technology I like to use, so here it is. In this story, we will start making a little shoot’em up game with PixiJS, a really simple and cool Javascript library. What we are going to do exactly is to make a spaceship able to move and shoot, enemy waves coming through and a beautiful animated background with moving clouds. The first part (this story) will focus on the background. Ready guys? Let’s nail it! Getting started Let’s start by setting up our project: I uploaded a code structure already set so we are all working with the same base. However if you want to make it yourself, I put a picture of my folder just below**:** Click here to download the starter project Project folder structure We will need a local server to run the game: I invite you to download if you’re working with Windows, or for macOS, they are free and easy to use. Let’s ( for MAMP / for WAMP) and type the localhost link in your favorite browser (for me: ) WAMP MAMP put your game folder in the server one htdocs www http://localhost:8888/Spaceship/bin/ In , we are importing the javascript files in the header: index.html … and . Then comes the initialization of Pixi (which is based on the WebGL render engine): we need to do the same for every file we make For this tutorial, we tell the game to cover the whole browser window, so if you try it now you will get an all-black background. The file is the place where all the game starts. It’s like a manager, with the first-executed function of the game, and the loop where we can tell the game what it needs to do on each frame. What we want is a blue background for the sky when the game starts, so let’s main.js update the function: init Pixi is using the color format, so . Let’s save and see the result in your browser! hex you need to write your color code preceded by 0x Clouds everywhere This background is very boring, let’s add some floating clouds. First, let’s class file in the folder (which is going to create and move the clouds): add a new CloudManager src Don’t forget to as we did for : add it in the index.html file main.js The constructor is the entry point of this class where we can add the spawn function for our clouds. What we want is basically a method able to create a cloud every X seconds, and it’s fine because there is a javascript thing for this: This piece of code, placed in the constructor, will (= 1 second). call what’s inside the moustache brackets every 1000 milliseconds Let’s , and because it’s better we have 2 different images: ( ;) add cloud sprites in the assets folder the clouds are white with transparent background so they were invisible on this page, but here are the links on GitHub https://github.com/Karzam/Spaceship_Tutorial_Part_1/blob/master/bin/assets/cloud_1.png https://github.com/Karzam/Spaceship_Tutorial_Part_1/blob/master/bin/assets/cloud_2.png We need to load the sprites before the game starts, so add them in the Pixi.loader.add function: Ok, now we can display the clouds in the method of the : setInterval CloudManager To resume this code: First, we are , and either it’s less than 0.5 so we store the first sprite in a constant or otherwise it’s the second one. computing a random number between 0 and 1 Then, we with the image we got in the previous line. create a new sprite object The origin point of this sprite is going to be its top left corner, so we set its anchor point in the middle. We have to , so it can move to the left through the screen: is the left border position + the width of the screen + 20% of its width. We can be sure that we won’t see it spawning. For the y position, is a number between 0 and the window height. So the cloud vertical position will be located display the cloud beyond the right border of the screen renderer.width * 1.2 renderer.height * Math.random() between the top and the bottom of the screen. Finally, we this cloud to the stage. addChild If you run this code, nothing should appear, and it’s on purpose because they have to pop out of sight. So now we have to make them move. The update function is the place to do it. But we need to store the clouds in an array so we can iterate through and set their positions. Let’s initialize a new array in CloudManager constructor: … and push the clouds inside after the function: stage.addChild Now we can of each cloud: iterate the array in and set the position update Now it’s working! Moving clouds! Oh wait, something should actually annoy us: where are all those clouds going? Yeah, if we don’t remove them after they left the screen, they will continue to exist and it may cause some performance troubles**.** Let’s add a statement in that delete them when their horizontal position is a little bit inferior to the left border of the screen (so we can’t see them popping out): forEach We’re done with the clouds! What about making a random variation on the clouds size? Add this to the cloud creation block: Random clouds size If you something’s missing / not working in your code, you can check the result here . Next part here: the player spaceship Thank you for reading!

Making a game with Javascript: Part 1

Iterate with Object.keys() and drop byId In a previous post (one of my most-read posts ever), I described a pattern to manage data in Redux stores where lists of objects were hashed using their ids as keys, and then an array of those ids was maintained alongside the hash. _I wrote a post the other day about how to implement a Redux-flavored store and reducer in a single React component…_hackernoon.com Redux Patterns: Add/Edit/Remove Objects in an Array The structure looked like this: const reduxStore = {data: {byId: ['a', 'b'],byHash: {a: {someKey: "someValue", id: "a"},b: {someKey: "someOtherValue", id: "b"}}}} Any action that mutated this data structure would get handled twice: once to add/remove any keys in the array, and again to add/remove/update the associated data stored in the hash. However, now that I’ve been using this structure for months, I’m finding that I’m typically dispensing with the array most of the time. So my structure is: byId byHash byId const reduxStore = {data: {a: {someKey: "someValue", id: "a"},b: {someKey: "someOtherValue", id: "b"}}} Why am I dropping ? byId Pros: Handling actions is simpler as I only have to update one data structure in response to most common actions. Redux store objects have less nesting Iterating is easily achieved with , or more typically in a React application: . Object.keys(data).forEach Object.keys(data).map Length is readily available as . Object.keys(data).length Expected Cons: None? (What am I missing?) Edge-case Cons: Should my hash get unexpectedly huge, having to calculate length constantly instead of pulling it directly from the array might be expensive. In practice my hashes typically have less than a few dozen objects stored by key, so the burden of maintaining the property costs more time (and makes me write more tests). byId Pattern I Use All Over The Place as a Result The most typical use case is that I frequently need to iterate over this data structure (forEach) or to do some kind of functional-like operation (map/filter/reduce). This is easily achieved: Rendering React Component Lists {Object.keys(this.props.data).map(key => {// operate on the full value since `key` is just the key const renderData = this.props.data[key]; return <div>{renderData.someValue}</div> })} 2. Filtering Based on Some Value in each Object {Object.keys(this.props.data).filter(key => {// again, operate on the full value, not the keyreturn === condition;}).map( ....)} this.props.data[key].value You can reuse that basic pattern over and over. Want to sort by some value in object? Want to avoid displaying some data if the list is zero-length? All the problems are solved by the same basic bit of code. Object.keys(data).sort((a,b) => {}) Object.keys(data).length === 0 && <Component /> Sure it’s a little redundant, but it’s not really any worse than: {data.byId.map(id => {const renderData = data.byHash[id];return <div>{renderData.someValue}</div>})} Performance Considerations Thanks to for a about some performance implications of moving filtering logic into the render cycle. Mark Erikson great comment While there’s no strict rule about what data manipulation should be done in a function vs inside a component’s method, my general suggestion is that should be responsible for shaping the data that the component actually needs. This ties into the fact that connecting more components generally leads to better performance, and minimizing the amount of data a given connected component needs from the store will mean it will re-render less often. So, my approach would be to usually apply filtering and sorting-type behavior at the level, so that the component is only getting the data it actually needs to render. mapState render mapState mapState In addition, if is returning the exact same values from call to call, then will skip re-rendering the plain component, which is usually a perf improvement. mapState connect and update this at some point in the future, but for now I’ll be making sure to handle as much of this in my Redux selectors as I can. A quick example: I’m going to dig into memoization render() {return (<div>{Object.keys(this.props.data).map(key => {const val = this.props.data[key]return (<span>{val.text}</span>)})</div>)} const mapStateToProps = state => ({ data: state.myData }) // could easily become this to clean up logic: render() {return (<div>{this.props.data.map(val => (<span>{val.text}</span>))}</div>)} const mapStateToProps = state => ({data: Object.keys(state.myData).map(key => state.myData[key])}) You could even recreate the and pattern in your selector to get its benefits without having to maintain a parallel array in your store. byId byHash const mapStateToProps = state => {const myKeys = Object.keys(state.myData) return {byId: myKeys,byHash: myKeys.map(key => state.myData[key])}} As always, please leave a comment if you disagree, or if you see something I overlooked. _I’ve been reading through Reselect’s source code (only 107 lines unminified) and thought it might be worth unpacking…_medium.com Reselect-style Memoization in 3 Functions

Redux Patterns: Rethinking `byId` and `byHash` Structures

functional approaches to everyday JavaScript data tasks To ultimately understand the way of life of your web based apps, you have to master way data flows and changes. There are many ways to do this, and little less, but still multiple, ways to do it properly. Doing it properly is only a matter of overall … I know that it will do the task specified when first released :-) maintainability In recent years, I started a switch to doing every operation with data functionally and immutability principles… This is to, at some point, switch to fully FRP approach, but let us keep on subject here. I will quickly just push you through concept of immutability and then we will dive into some of functional approaches to data manipulation. following Immutability Immutable data obviously means that it can not be changed :-)… So, basically no object is changed after creation (opposing to object oriented way, where we always change the state of object — letting it permanently change what it is). Fully immutable approach means that for every change, a new object is created, and old one can be used as a reference to a previous state. This gives us completely new set of rules and new set of possibilities, like undo, easy other history manipulations, like following changes and optimizing data flows in natural way. If you just want to properly implement these concepts without going into crazy depth with learning bits and pieces, I recommend facebook’s . But then, spend some time understanding it, because I do not want people just doing what they’re told… immutable.js Working with datasets Usually 80–90 percent of data in web apps are data sets, mostly collections or multidimensional tree-like structures with repeating data structures. If you are not working with this type of data in your apps, this article is less useful for you and you can just take a look at first couple examples. Diving into we have to understand that there is another important concept we have to follow, that is tightly connected to immutability as well. This is the concept that requires that every function resolves every task within itself and returns fully finished product of operation it implements as its result. Function must not have any changeable state (it is stateless) and has to avoid having any — meaning, there are no variables/data structures outside method affected from inside a method. functional approaches side effects Talk is cheap - show me the code I’ll show you series of examples utilizing standard js higher order functions for every day tasks. Usual approach to most of these is having or going through list and creating stuff as a new array that gets filled outside of the loop, or, even worse, changing list itself. for, forEach underscore/lodash each >Data we will use in most of examples: /**We got array of results coming our way, here is example of form of results: [{" ": 9131042," ": "360fly - Panoramic 360° HD Video Camera - Black"," ": "This 360fly panoramic 360° blah, blah blah"," ": "360fly"," ": ["Cameras & Camcorders","Camcorders","Action Camcorders","All Action Camcorders"]," ": {"lvl0": "Cameras & Camcorders","lvl1": "Cameras & Camcorders > Camcorders","lvl2": "Cameras & Camcorders > Camcorders > Action Camcorders","lvl3": "Cameras & Camcorders > Camcorders > Action Camcorders > All Action Camcorders"}," ": "Point&shoot camcrder"," ": 399.99," ": "200 - 500"," ": "http://img.bbystatic.com/BestBuy_US/images/products/9131/9131042_rb.jpg"," ": true," ": 10000}, ... lot more stuff in same form]*/ objectID name description brand categories hierarchicalCategories type price price_range image free_shipping popularity >Simple iteration through dataset you received preparing it for UI usage: //Here we consider dataset being array of objects, and we want to keep it an array, just return formatted stuff var renderData = responseData.results. ((item) => {return {name: item.name,price: formatPrice(item.price),image: item.image,badges: getBadges(item), //adding badges links based on popularity, price, free shipping etc......} map }); RenderData is now array of parsed items. Using . gives us ability to do simple new array setup without additional side effect and need to change original dataset, keeping us completely safe from bugs… Only error you can make is in method for parsing the item. map () >Changing data structure (from list by id to array and vice versa) and related more complicated tasks: This task is usual, and highly bug prone if done in the usual way — we setup an array and then go through list of keys putting them all in their places in the array making this process require helper data structure(s) — which have to be side effects… I’ll make this about above example data and create list of items by id. var renderData = responseData.results. ((item) => {return { [item.objectID]: item };}). ((a, b) => {return Object.assign(a,b);}); map reduce Method passed to . receives and as first two params, so you choose how they get squashed together (current value is always result of all previous squashing, so that can be useful for you as well). reduce () previousValue currentValue At this point we should already figure out other big advantage of this approach — we keep working on data through the series of simple “pipelines” which just do their simple and easily controlled tasks. >Finding item in data set by content of one of its values: So, now we know how data is being parsed, how it is being iterated and returned, can we use this to filter and find stuff… Lets first look at filtering - we first want stuff picked by keyword, then prepared for UI: var hdRenderData = responseData.results. ((item)=>{return item.name.includes('HD');}). ((item) => {return {name: item.name,price: formatPrice(item.price),image: item.image,badges: getBadges(item), //adding badges links based on popularity, price, free shipping etc......} filter map }); Here we make use of it returns an array of items for which callback returns the last higher order function I want to use here. .filter() , true. Filter But, here are some other useful tips and examples: >Easy filter by category and get just needed data: var drones = responseData.results. ((i) => {return i.categories. ((a, b) => (a + b)).includes(“Drone”);}). ((item) => item.objectID); filter reduce map Here we filter through items, reducing their categories array to a string (concatenating array of strings into a string) and taking just items who’s categories contain word “Drone” in them (using on newly formed string). Then we map array we are returning to just return IDs of found components. .includes() >Handling byId lists (any kind of lists with repeating structure but not incremental number based keys) You first need to get an array to map through: var keyArr = Object.keys(yourDict); When you have structure that you can iterate through, you can get to action like: //If you want it mapped as new array structure, with key present as an IDvar result = Object.keys(yourDict).map((key) => {var entity = yourDict[key];entity.id = key;return entity;}); If you want to keep it as key: value structure, you can use map -> reduce to one object pattern from above. >Keeping history of your data changes map(), reduce() and filter() do not mutate arrays you trigger them on, but return new data, so depending on what you want to achieve, you can track the history of your data mutations as simple as pushing new version to history array, or track more complex dimensions of changes… With immutability, this comes out of the box. It is all about your experience developing it Ultimately, the solution will be measured by its scalability, resilience and maintainability… Everyone on the outside just cares about if it works. Examples and discussions above should give you another option. In my opinion, this way of approaching data mutation gives you cleaner, simpler and more bug prone code. There are no side effects, you can not create bugs that originate outside the methods you are passing to higher order functions. As addition to simplicity, these are adding verboseness to your data processing, making code more readable and understandable. In projects I am working on, I am implementing this programming paradigm as much as possible, with ultimate goal of extending it towards FRP approaches in the backend and client side. It did wonders on our newest front end (javascript full stack) apps in . Vast.com is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Stories, News & Mentions about RENDERDRAW

Renderdraw’s Stories on HackerNoon