I have been learning about using GraphQL and Apollo in my React applications. This blog post is going to assume you have a basic understanding of both technologies and will specifically address using GraphQL fragments in queries defined using Apollo. If you want to learn more about using Apollo and GraphQL with React, I have links to documentation at the end of the article.

My problem

For my app, I was want to allow users to find recipes in two ways. 1) Supplying a search term and showing a limit of 50 results that were related to the term, and also allow for paging through results if necessary. 2) Allow users to search for a specific recipe by a unique ID and only return the single result. I no longer needed to account for limiting, paging, etc.

In both cases I wanted to receive the same type of result per recipe. A recipe object returned from both queries should have the same attributes, such as id, title, image, bylines, etc.

Check out the code below and see the two queries I was using to accomplish this:

Use case 1:

Use case 2:

As I am sure you noticed, there are several repeated lines here. All of the attributes on a Recipe have been repeated between the two queries. If only there were a way to clean this up and reduce the amount of code I needed to write………..

My Solution

In order to write the query attributes once, we can use an Apollo/GraphQL Fragment which can be reused in multiple queries.

At its most simple definition:

“A GraphQL fragment is a shared piece of query logic.” — Apollo documentation (referencing the base GraphQL concept. )

Also according to the Apollo documentation, there are two principal uses for fragments in Apollo:

• Sharing fields between multiple queries, mutations, or subscriptions.
• Breaking your queries up to allow you to co-locate field access with the places they are used.

In my case, I am more concerned with the first point, and that’s what I will address here to clean up these two recipe queries.

First, lets define our fragment.

You can see on line 1 that I am importing the gql tag from apollo-boost so that I can write my query in React more easily. Then I define a constant in which I am defining the fragment. The name RECIPE_ATTRIBUTES is referring to this segment of gql code so that we can bring it into our other queries later. This is not the fragment itself, just the container for some gql code.

The snippet of code within our tag is using the fragment key word to define the actual section of code we want to reuse. In this case I have named my fragment recipeAttributes. I put on Recipe after this declaration because that is the type to which these attributes belong.

Now that I have my fragment defined, I need to add it to my queries and replace the duplicate code:

That just got so much shorter! I brought in my RECIPE_ATTRIBUTES constant which I had previously defined and interpolated it after the query but still within the gql tag. I then was able to reference the fragment that I had defined as recipeAttributes within my existing query.

This leaves me with my final code:

To recap, we just wrote a GraphQL fragment in our Apollo gql tag in order to encapsulate and reuse the definition of how we want our recipes to be returned to us. This helps us to enforce the Single Responsibility Principe(SRP). Quick recap on SRP:

“The Single Responsibility Principle (SRP) is one of the five so-called SOLID principles, developed and promoted by Robert C. Martin to help developers produce flexible and maintainable code. In short, the SRP says that a given module or class should have responsible for a single element of a program’s functionality, and thus have just a single reason to change.” — Severin Perez

This also helped us to have a single source of truth for recipes returned to our front end through GraphQL. We have defined the expected recipe attributes in one place.

Not only do we have a separate variable to hold our query vs our recipe definition and have the structure of recipe result defined in a single place, but also we have reduced the quantity and complexity of our code! Win win!

Hope this helps you as much as it did me!

Introduction to GraphQL | GraphQL

https://www.apollographql.com/docs/react/

https://www.apollographql.com/docs/react/advanced/fragments

Learn GraphQL - Best GraphQL Tutorials (2019) | gitconnected

DRY Up Your Code with GraphQL Fragments was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

In the past I have generally reached for libraries like MobX or Redux in order to manage the state in my app and to expose values that I want to access globally, throughout my app. It prevents me from having to pass things around via props and also segregates reused data and actions from simple component-level logic. React’s new Context API has introduced a simple solution for these smaller use cases. There are still instances when Redux and MobX are the right answer, but many times using React’s Context API can get the job done.

In this post, I am going to do a basic introduction to Context and a quick demo of how to initialize a context with values and then access those values elsewhere in my app.

I am building this in my Storybook Playground so that I am not launching a whole new app. You can read how I built this environment in one of my previous blog posts:

How to build a React development playground using Storybook

What is React’s Context API?

Context provides a way to pass data through the component tree without having to pass props down manually at every level. — React JS documentation

This is most beneficial when you have global data that many components will want to use such as theme attributes, user data, etc.

There are three main steps in using context:

1. Creating your context
2. Providing it to your app
3. Consuming it in a nested component

Now, lets build a simple app that renders a message in a nested component.

This will make more sense as we go through in detail, but as an overview: In this example, I am going to render Component1 which will render Component2 which will render Component3 . Component1 will be where the app is Provided the context and Component3 is where the context will be consumed.

Step 1: Create your Context

First you must define the default value for your context. This is only used in the case where you try to consumer your context outside of your provider. To simplify this, my default value is also going to be my initial value which will make more sense in the next step. But for now, in the code below you can see a defined initialValue object. This object is responsible for holding the key value pairs of your context. In this case just a message which is a string.

const initialValue = {  message: "This is my message from context"}

export const MyContext = React.createContext(initialValue)

Step 2: Provide this value to your app

Next we need to let our app know what this value is and in this case, we are going to provide it with the above defined initialValue . You can do this by wrapping the component which holds the part of your app you want to have access to this information. For example, if you had some user data that only your navBar needed to know about, you could wrap just the navBar in a context specific to user data.

In the example, we want to wrap a top-level component (Component1) with a Provider containing my initial value. I did this by implementing the following:

export const Component1 = () => (  
  <MyContext.Provider value={initialValue}>
    <HomeWrapper>      
      <h1>This is Component 1</h1>
      <Component2 />    
    </HomeWrapper>  
  </MyContext.Provider>
)

Step 3: Consume the value of your context

The final step is to consume the value of your app in a child component of your Provider. This is accomplished by wrapping the consuming child component with your context’s consumer which can be accessed by importing your context and rendering its consumer like <MyContext.Consumer></MyContext.Consumer> .

Once you are within the Consumer I am using the render props pattern in order to access the value of my context. I can also destructure the value and only bring in the keys of my value object that I need.

See the code below for the actual implementation.

import { MyContext } from './Component1'
 
const Component3 = () => (
  <MyContext.Consumer>
    {({message}) => <>
      <h3>Component 3</h3>
      message: <h3>{message}</h3>
    </>}
  </MyContext.Consumer>
)

If you want to learn more about Render Props, check out my blog post on the topic. The link is at the end of the article.

Amazing! Now let’s see this in action and if we are getting our message value down into Component3 . We can test this by using Storybook to create a story for Component1 and see if it renders the context value in the nested Component3 . My story is written like:

import React from 'react'
import { storiesOf } from '@storybook/react'
import { Component1 } from './Component1'

storiesOf('Context API Project', module)
  .add('Component1', () => <Component1 />)

and should then output something like the screenshot below:

Yay! We now see the message that was defined in the initialValue of MyContext being rendered within Component3 . Success!

Now, imagine all of the use cases for this and why its helpful… Following the Single Responsibility Principle, we have extracted out the storage of this information and letting the context be in charge of it, while the component just needs to worry about consuming it and displaying it. This is allowing for greater reusability of our component as I can change the context and it can then display a different message.

In the case of creating a theme context, you can have multiple themes as a set of values for fonts, colors, etc. for various brands or looks. Then, in order to change the display of a component, you would need to change the value in your provider to a different theme. Since the nested components all depend on only the context value and nothing is hardcoded or needs redefining.

For further clarification, I included the code for this project in full below:

Resources:

• Context - React
• How to build a React development playground using Storybook
• Improve Code Reusability With React’s Render Prop Pattern

React Context API as an Alternative to State Management Libraries was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Lately, I have been wanting to try new things and test out new technologies or patterns in my React components. I needed a place where I could test these things out without launching a new app every time.

I recently started using React storybook at work in order to establish a new design system for future projects. I also used it to prototype several versions of a new content authoring tool our team is working on. Putting this tool together with my desire to create components and play around with new things in a low stakes way seemed perfect. A few examples of these new “things” are React Context, SlateJs, and React Hooks.

This could also be used as a portfolio and a great way to showcase your work. Since Storybook can be deployed as its own app, you can host a webpage where you have a variety of projects and components you can display to potential employers or clients. Once deployed, it’s as easy as sending them a link to your storybook!

This post will focus on creating the Storybook for React environment and I will aim to post in the future about what I create inside of it!

Sooo… What is Storybook?

Taken straight from the Storybook website because I couldn’t say it better myself:

“Storybook is a user interface development environment and playground for UI components. The tool enables developers to create components independently and showcase components interactively in an isolated development environment.

Storybook runs outside of the main app so users can develop UI components in isolation without worrying about app specific dependencies and requirements.”

That means… I can create and display/interact with components independently of actually running the React app! And since this project won’t be focused on a single app’s performance or DRYness, I can have multiple prototypes and versions of components so that I can perfect them, allow stakeholders to approve, etc. before bringing them into the app for which they were intended for. I can also use it to just practice making components and testing how to use the new tech I mentioned before.

Let’s get building now!

Create a base React app

npx create-react-app my-playground

You can ensure that your app was created successfully by running yarn start . A new window should appear on your browser to localhost:3000 that looks like the picture above. Once confirmed you can stop it by pressing ⌘ + C.

Add Storybook

First, from the command line within your project, you will need to add storybook with the following command:

npx -p @storybook/cli sb init

Then, you can run storybook by using:

yarn storybook

Now you should be up and running, seeing a screen in your browser like the one below:

If you look within your project folder, you will notice that some files have been added and others updated:

The ./storybook folder is home to where you will configure a lot of the settings for your storybook. There are all sorts of add-ons you can apply to your project to add more features. The config.js file is generally where you will apply add-ons and also tell storybook where to find your stories. The config defaults to the following:

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

This is telling storybook to look in the ../src/stories folder for the stories you have written. Right now, storybook has gone ahead and added a few default stories for you. You can take a look at those to get an idea of how to write the stories. You are ultimately just rendering your components within their own functions and you can pass them whatever props you like.

As you can see in the example it gives you below, you can create multiple versions of the same component by just rendering it with different props.

You can imagine though, once you start creating more components, this file could get very large and you don’t want to have to spell out in your config every file with stories in it that you want rendered… Instead, a handy way to to do this is to name any file in your src folder with stories.js and to let storybook dynamically find all files named with stories.js at the end, within your src folder you would put the following in your config file:

import { configure } from '@storybook/react'

function loadStories() {
  const req = require.context('../src', true, /\.stories\.js$/)
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

This allows for a much cleaner file structure and you can organize your stories by project or even by component within your src folder.

Build Your Mini Projects

Let’s build a small component as an example to show how you could spin up a quick example project to start learning React’s Context API. Within my src folder I am going to create a ContextProject folder where I am going to add a file where I will define my component, and then another where I will define the story:

Now when I check my Storybook, I will see that I have a menu option for my Context API Project and below that, I can click to see my Home component I created:

And now I can start building out my context and other components within this folder in src. I will be able to play around and render the components I build, allowing me to quickly see my changes and not have to worry about launching a new React app every time I want to just test out a specific feature or new idea.

This also allows for a lot of flexibility when trying to quickly prototype a new idea. You already have an environment up and running and can have your favorite libraries like styled components already installed or have pre-defined themes that can just be easily imported into new projects. You can also pre-define some baseline components such as styled headings, divs, buttons etc that you can share across projects to make development go even faster.

Hope this helps and stay tuned for future posts about my favorite add-ons and details on the test projects I build in my Storybook.

Happy Coding!

References:

Storybook: Frontend workshop for UI development

My github Repo:

sarahsweat/my-playground

How to build a React development playground using Storybook was originally published in We’ve moved to freeCodeCamp.org/news on Medium, where people are continuing the conversation by highlighting and responding to this story.

If you are a React developer and working with new and/or previously built components every day, you have likely started to notice patterns of repeated logic in your code. This could be as simple as creating multiple functions in a single component to change different keys of state, or it could be on the scale of creating several components which are slightly different versions of the same thing. This post will focus on solving the latter and refactoring a toggle component to be reusable by following the render prop pattern with functions as child components.

The Original Component

This component is just a regular React component which holds state and toggles a boolean held in state when a button is clicked.

Violation of Single Responsibility Principle

So the component above does what we want it to do, but it isn’t flexible or reusable because it doesn’t follow the Single Responsibility Principle. What is that you ask?

“The Single Responsibility Principle (SRP) is one of the five so-called SOLID principles, developed and promoted by Robert C. Martin to help developers produce flexible and maintainable code. In short, the SRP says that a given module or class should have responsible for a single element of a program’s functionality, and thus have just a single reason to change.” — Severin Perez

If you want to learn more about Single Responsibility Principle, check out the Severin Perez’s article (linked at the quote above and in references at the end of this article.)

When looking at our original component, we can see that it is responsible for several different bits of logic:

1. Rendering a wrapping element with a heading.
2. Managing state of a toggle.
3. Rendering a div with a button and conditional text.

This will begin to create problems when we try to reuse this component with alterations or we might notice a pattern of copying the same logic in other places, both signs that I need to re-examine my code and separate its concerns.

Refactor #1

Let's make a first pass at refactoring and try to split our original component up so it has a parent component which will be responsible for managing state and then renders a functional component which will be responsible for the button and conditional text, thus separating concern 3 from 1 & 2.

Our functional component ToggleWindow addresses concern 3 and takes props of a function toggle and a value isToggled, and renders the elements it needs with the information given. Toggler is now only responsible for concerns 1 & 2.

While that’s somewhat cleaner, what happens when we want to reuse the Toggler logic but render a different button and conditional text or better yet, a different parent container too…

We can break this out by using the render prop pattern and passing the children of the Toggler the additional parameters it needs through a function call.

First though…

What are render props?

According to React’s documentation:

The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function.

A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.

So this means we can define the children of a Toggler component to be a function that we can give additional parameters to, in order to implement our toggling logic.

Refactor #2

If we keep the toggling logic in its own component, I can then define just two functional components when I want to use it in subsequent use cases. This will also fully differentiate and separate the concerns we talked about before.

If you’re a bit confused, don’t worry, the code does a better job of explaining it. I have created an example below where I have two separate components which have different styling and content specifications for both the parent and child element. Both of them get the Toggler logic component “added” to it, but don’t need to redefine it. Take a look:

We have now adhered to the Single Responsibility Principle, which makes our code more loosely coupled, reusable and maintainable. We have separated our 3 main concerns into different definitions allowing them to exist on their own and when they need to be edited, changed or reused in the future, the relevant code is one spot, easily found and adaptable.

The toggling logic was reused in the same way for each of the two different implementations. I created 2 use cases of functional/presentational components that utilize the Toggler, but reusing the Toggler in both cases, not redefining or altering it.

While this is a rather small and basic example, imagine how you can expand this pattern to larger and more complex logic patterns, such as data fetching or larger state management tasks. This could become much more useful if applied across your code base.

Stay tuned for my next blog post on the React Context API which utilizes this pattern to add predefined logic and values into specific components.

Resources:

• Render Props - React
• Writing Flexible Code with the Single Responsibility Principle
• Learn React - Best React Tutorials (2019) | gitconnected

Improve Code Reusability With React’s Render Prop Pattern was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Ok, so my task at hand is to create a scroll-to-top feature which allows the user experience to be as follows:

• as soon as the filters have scrolled out of sight, a greyed “Back to Top” button would appear.
• Upon hovering over the button, it should wiggle and turn black.
• Upon clicking the button, the page should go back to the top and the button would disappear.

Above and below you will see the visual implementation of this feature.

One of the main considerations in creating this component was that I needed it to be reusable on multiple pages of the site, so my goal was to create something that could be imported and utilized in other react components in order to add to a div which had content that would need to be scrolled through.

In thinking about the logic of this it would probably be best to have an element which would render a scrollable div which rendered the components children and have a sibling element to the scrollable div which was the “Scroll to Top” button. The component itself would know about the scroll height of the scrolling div and the the button could control it.

Pseudo Code Example of the structure:

<ScrollToTopContainer> 
  <ScrollToTopButton />
  <ScrollableDiv>
    {this.props.children}
  </ScrollableDiv>
</ScrollToTopContainer>

Now that we have an idea of the basic structure, lets look at how some of the technical bits would work.

I found that if I referenced the scrollable div, I could get access to the scrollTop property of the element. In order to reference the div I needed to add a ref. I did so by creating a reference function:

reference = id => ref => { this[id] = ref  }

Which would be used on the scrolling wrapper like:

<ScrollingWrapperContainer ref={this.reference('scrollingWrapper')}>

This would then allow me to check or set the scrollTop value of the scrolling div by calling this.scrollingWrapper.scrollTop anywhere in the class of my component.

Given that functionality, I could now have an event listener which could check for the changes in scroll height and if it exceeded 100 (the distance relevant to our use case — passing the filters) then it would update the state of the component which would be the boolean which determined the display of the button. I implemented that as follows:

state = { hasScrolled: false }   

componentDidMount() {  
  this.scrollingWrapper.addEventListener('scroll', this.onScroll)
}

onScroll = () => {
  if (this.scrollingWrapper.scrollTop > 100 &&     
                             !this.state.hasScrolled) {      
    this.setState({ hasScrolled: true })    
  } else if (this.scrollingWrapper.scrollTop < 100 && 
                             this.state.hasScrolled) {      
    this.setState({ hasScrolled: false })    
  }  
}

So now, once I have scrolled passed a value of 100, then my button should show up. Now I need to handle the click of that button to actually scroll back to the top! Technically, I want to set the scrollTop back to zero. To do this, I set the onClick event handler to be the function below:

scrollToTop = () => this.scrollingWrapper.scrollTop = 0

Now the important part, which is now so easy to do… the implementation of our component!

1. Import it into the component file where you want to use it.

import ScrollingWrapper from './scrollingWrapper.jsx

2. Wrap the content you want to scroll in the render function of your component.

render() {
  return(
    <ScrollingWrapper>
      <MyContentThatNeedsToScroll>
    </ScrollingWrapper>
  )
}

That’s it!

Below you can find the entire component put together. I also used styled-components to write some css directly in my jsx file which further keeps this component independent from other components and styles throughout my project.

Hope this helps you on your coding journey today!

Learn React - Best React Tutorials (2019) | gitconnected

Building a Componentized and Reusable “Scroll to Top” Feature in React was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Lately I have been writing a lot of code and trying to rapidly produce different React components, creating stories for them in Storybook and writing tests for them. Generally thats 3 files, per component, with basic and predictable code that I was typically copying and pasting with every new component. I recently created some code snippets to help me produce the code in these files and found it saved me a ton of time. Read on to learn how I did it!

What are Code Snippets?

“Code snippets are small blocks of reusable code that can be inserted in a code file using a right-click menu (context menu) command or a combination of hotkeys.” — Microsoft

Woah! Code Snippets can give you a shortcut to turn just a few characters into predefined lines of code. AKA I can turn tcomp into:

import React from 'react'
import styled, { withTheme } from 'styled-components'

const ComponentName = props => {
    return (
    
    )
}

export default withTheme(ComponentName)

ComponentName.displayName = "ComponentName"

That just saved me a bunch of typing and time! Now all I have to do is replace ComponentName with my desired name. Lets dig into how this all works…

How to Create a Code Snippet

Step 1: Go to User Snippets in the menu like so….

Step 2: Select that you want to create a New Global Snippets file if you think you will want to use this snippet across multiple projects…

Step 3: Give it a name more creative than untitled…

Step 4: Write your code snippet!

There are some comments already in the file to help you get started and remind you of the formatting, but you can leave it or delete it. In my case, I deleted it and wrote my snippet as follows:

{
  "Themed Component": {
    "scope": "javascriptreact",
    "prefix": "tcomp",
    "body": [
      "import React from 'react'",
      "import styled, { withTheme } from 'styled-components'",
      " ",
      "const ${1:ComponentName} = props => {",
      "  return (",
      "    $0",
      "  )",
      "}",
      " ",
      "export default withTheme(${1:ComponentName})",
      " ",
      "${1:ComponentName}.displayName = \"${1:ComponentName}\"",
    ],
    "description": "Create Themed Component"
  }
}

Now lets step through it… The first key of this object is the name of the snippet itself, in this case “Themed Component”. The scope is indicating the language it is written for which can be used for filtering purposes when looking through your snippets. The prefix is what you will type in the editor to use the shortcut to return your code. In my case I chose tcomp as my prefix because, to me, it represents that I want to create a Themed Component which is also stated in my description. This is all subjective and up to you to choose what you will remember and find convenient.

The body is obviously the most important part and as you probably guessed, is where you want to put in the code you want your snippet to return. The format of the body is an array of strings, where each string is a new line of code. You may also have noticed some strange notation: ${1:ComponentName} and $0 . These are examples of placeholders and tabstops respectively. Tabstops allow you to move throughout your snippet once you have it in your file and you can edit in the different places at the same time just by duplicating your tabstop in your code snippet. placeholders are simply tabstops with values. As you edit your code and press tab you will jump through your tabstops numerically, starting at $1 . The $0 tabstop is reserved for where you want your final tab to leave your cursor.

Below is a clip of this code snippet in action:

Further Examples

So that was my themed component code snippet and used a single tabstop for the final cursor position and a single placeholder for the component name. I also created code snippets for my test files and my storybook files:

{
  "React Component Test": {
    "scope":"javascript,javascriptreact",
    "prefix": "tst",
    "body": [
      "import React from 'react'",
      "import { render } from 'react-testing-library'",
      "import { ThemedComponent } from '../../../utils/test-utils'",
      "import $1 from './$2'",
      " ",
      "describe('$1', () => {",
      "  it('$3', () => {",
      "    $4",
      "  }) ",
      "})",
      " ",
    ],
    "description": "Create Test"
  }
}

{  
  "Create Storybook Story": {
    "scope": "javascript,javascriptreact",
    "prefix": "story",
    "body": [
      "import React from 'react'",
      "import { storiesOf } from '@storybook/react'",
      "import $1 from './$2'",
      " ",
      "storiesOf('$3|$1', module)",
      ".addWithJSX('$1', () => <$1 />)",
      " ",
    ],
    "description": "Create Story"
  }
}

Check out this link to learn more:

Snippets in Visual Studio Code

Learn React - Best React Tutorials (2019) | gitconnected

Use Code Snippets in VSCode to Create React Components Faster! was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Step 1)

Request a google maps API ket at:

Google Maps JavaScript API | Google Developers

Here, you can click to get an API key, as well as read up on some of their documentation. They even have a few tutorials on how to implement it in a plain javascript application.

Step 2)

Install google-map-react into your project.

npm install --save google-map-react

You can find the documentation for it here:

google-map-react

This supplies you with the react component to generate the map on your webpage.

Step 3)

Specify an initial Latitude and Longitude as well as an initial zoom scale.

You can then render any React object at any specified Longitude and Latitude. In my case I created a basic react object which is just an image src of a cmn balloon.

import React, { Component } from 'react';
import { Container, Image } from 'semantic-ui-react'
import GoogleMapReact from 'google-map-react';

const Balloon = () => <img width="25" src='http://speedwaymiracletournament.com/Images/cmnh-logo-no-text.png'/>;

export default class DonationMap extends Component {
  constructor(props){
    super()
  }

render() {
    return (
      <Container style={{width: '100%', height: '400px'}}>
      <GoogleMapReact
        center={{lat: 37, lng: -91}}
        defaultZoom={4}
      >
        {this.props.latLongs.map(place => (
          <Balloon lat={place.lat} lng={place.lng} />
        ))}

</GoogleMapReact>
    </Container>
    );
  }
}

Note on Getting the Lat and Long from the Zip:

Using the zip code of a user, you are able to send a fetch request to the google maps api to retrieve the latitude and longitude points. Then I just passed that into the component to then render.

First I created a zip code array which collected the respective zipcodes from all the users. What was tricky about this is that given the way I passed my users into this component, it hadn’t necessarily completed the fetch to my backend and would return an empty array. This is why instead of using componentWillMount, I need to use componentWillReceiveProps. This function will only execute once it receives new props (AKA the fetched users) and I could then use these “new props” to collect the necessary zipcodes.

Once I had the array of zipcodes, I was able to map through them and send a fetch request for each one and store the corresponding Lat and Long values which I stored into the components state. This state is then passed into the map component to render the individual balloons.

First, JP led me to Memoization, which then led me to recursion, which led to Fibonacci Sequences, which obviously and inevitably led me to rabbits…

I am warning you….

Fibonacci Sequence

What is the Fibonacci Sequence? It is a series of numbers in which each number is the sum of the two preceding numbers.

This is a very famous set of numbers and was found in the 12th century by a mathematician named Leonardo Fibonacci. This sequence was first thought of when Fibonacci was pondering the question of rabbit reproduction? Weird/Random, I know. Stick with me.

Basically, the problem assumes the following conditions:

• Begin with one male rabbit and female rabbit that have just been born.
• Rabbits reach sexual maturity after one month.
• The gestation period of a rabbit is one month.
• After reaching sexual maturity, female rabbits give birth every month.
• A female rabbit gives birth to one male rabbit and one female rabbit.
• Rabbits do not die.

Side Note — Fibonacci Spiral

A Fibonacci spiral is a series of connected quarter-circles drawn inside an array of squares with Fibonacci numbers for dimensions. The squares fit perfectly together because of the nature of the sequence, where the next number is equal to the sum of the two before it. Any two successive Fibonacci numbers have a ratio very close to the Golden Ratio, which is roughly 1.618034. The larger the pair of Fibonacci numbers, the closer the approximation. The spiral and resulting rectangle are known as the Golden Rectangle. The sequence is also closely related to a famous number called the golden ratio. You can find this series of numbers in the turns of natural spirals, in plants, and in the family tree of bees.

Recursion

Ok, back to how all this related to the code. So we have all heard people talk about recursion, and that it is when a function calls itself and that it makes programs more efficient. But why? And how? And when would you use this? Lets take a dive using the Fibonacci Sequence as our example!

Below is an example of how a given index of the Fibonacci Sequence would be calculated. Notice that it is calling the fibonacci sequence on itself until it gets down to the base case of the series, as each proceeding number depends on the ones before it, then calculates back up to the index desired.

function fibonacci(n) {
  if (n === 0 || n === 1)
    return n;
  else
    return fibonacci(n - 1) + fibonacci(n - 2);
}

This function performs well for small values of “n”. However, performance quickly degrades exponentially as “n” increases. This is because the two recursive calls repeat the same work. You can see these repetitive calls in the recursion tree below.

You can see that F(1) gets calculated three times, F(2) 5 times, F(3) 3 times, F(4) twice….…

In comes Memoization….

Memoization

The idea of Memoization is that it is a programming technique which attempts to increase a function’s performance by caching its previously computed results. Basically, every time that a Fibonacci index gets calculated, the result can be stored in an outside object so that the recursive function can access it and use an already calculated result in its future calculations since they are all dependent upon each other.

Side Note: The definition of cache is “a temporary storage space or memory that allows fastaccess to data”. One misconception, albeit mostly on my end, is that caches are only through the browser and in the form of things like cookies, tokens, etc. However, the term refers to anything in computing where things are saved for later use to speed up processing.

“Memoized functions store a cache which is indexed by their input arguments. If the arguments exist in the cache, then the cached value is returned. Otherwise, the function is executed and the newly computed value is added to the cache.”

Let’s take a look at the code below and note that we are storing calculated results in memo.

1. It establishes its caching object, memo.
2. It first checks if the fibonacci index has been calculated before and saved in memo.
3. If it is, then it uses that value in the recursive function.
4. If it is not, it then continues to calculate the next term in the fibonacci sequence as before, while also saving it into the cache object for future use.

var fibonacci = (function() {
  var memo = {};

  function f(n) {
    var value;

    if (n in memo) {
      value = memo[n];
    } else {
      if (n === 0 || n === 1)
        value = n;
      else
        value = f(n - 1) + f(n - 2);

      memo[n] = value;
    }

    return value;
  }

  return f;
})();

This code allows the function to reference the previously calculated values. Let’s take a look back at our recursion tree, but with memoization. You can see we are now able to eliminate many of our calculations.

This is the magic of Memoization!

Unfortunately, most problems are more complex and functions have more than just 1 argument. This means there is not a simple key value pair for each calculation to be stored in. This can be dealt with in two ways. The most common being to create a hierarchy of objects(like a nested hash). The less common being a single cache object which is indexed by a combination of all of the function’s arguments. Under this approach, the arguments are transformed into an array and then used to index the cache. Both of these methods are detailed in the last resource below. Take a look!

In summary, memoization is beneficial when a recursive function is repeating multiple calculations because and it can store those results in an object and pull them when needed, instead of completely recalculating them. If it is a short function that isn’t used often and calculation times are fast, then memoization may not be necessary.

Resources:

• What is the Fibonacci Sequence?
• Recursion in Functional JavaScript - SitePoint
• Implementing Memoization in JavaScript - SitePoint

Remember on Day 1, we were able to list our treehouse account… If you were like me, you probably thought, treehouse? What’s that? Well, let me tell you, it is one of the internet’s best kept secrets when it come to technology education. It is an online learning platform for learning all things code.

The program is built up by courses and tracks on various topics. Recently I completed the AJAX Basics course when I entered the dreaded “panic mode” and didn’t seem to know where to begin. It took roughly 5 hours to complete, but it started with the very beginning and by the end I had learned the basics of Ajax and created a couple of small projects along the way. An individual course is typically made up of short educational videos, quizzes and code alongs. The code alongs are nice because they provide you with an online workspace to complete the labs and you don’t need to worry about getting caught up in environment issues while trying to learn the AJAX concepts.

Below, I will show you some screenshots and features that I was able to use while going through the AJAX course and will give you a good idea of what working on Treehouse is like.

Once you have selected a track and/or a course, you will begin with an introductory video. The main form of education on this platform is through recorded lectures. There are no readings, however the lectures are pretty detailed and they will put up slides with important information. This is demonstrated in the screenshots below. I found it very useful to see some of the big picture concepts written out and then afterwards the videos and examples would be more in depth and concerned with syntax and the logistics of actually creating the AJAX calls.

After a few videos, there are sporadically placed quizzes to test your knowledge. I found this very useful to keep myself engaged and also test my knowledge to make sure I was soaking in what I was watching.

Along with some of the multiple choice quizzes were coding quizzes. The directions would step you through what they wanted conceptually, but then it tested your knowledge of the syntax and details.

Towards the end of each course you build an actual project. they provide you with the files necessary to do it locally, but they also provide you an online “workspace” where the environment and server are already setup for you. I utilized this so that I could focus on learning AJAX and not get caught up in other issues. However, now I want to go back and attempt everything locally.

As you complete different stages in the course, you receive badges and points. I don’t think this really gets you anything, but its kind of a fun incentive to keep going.

So what’s the catch? Treehouse is not free…. Wahhhh. Unfortunate, I know, but understandable. It is great content! There are a few options for how you pay. I started a free trial of 7 days and then am scheduled to begin paying $25/month when the trial ends. I can also select the option to pay for a full year. This option allows you to get 2 months free. There are also different levels of access. For most students at Flatiron, I would simply recommend the Basic package because the only real benefit to the pro package is the ability to download videos offline and a little bit of bonus content.