Catching Cute Monsters

With Immutable Patterns

From Functional Programming

Catching Cute Monsters

With Immutable Patterns

From Functional Programming

 ME & LINUS

WORKING HARD

About Me

• I'm a coder
• I'm a musician
• I'm a volunteer
• I work at MX
• I'm available for freelance

About This PResentation

• Demonstrate mutability in object oriented programming
• Demonstrate immutability in a more functional paradigm
• Do it all in the context of managing cute collections of monsters
• Use vanilla javascript
• We're NOT going to get too serious or dogmatic

Requirements

We want some code that will help us manage collections of cute monsters and allow us to test our abilities as trainers in the field of battle!

Let's Sketch

Let's BUild!

Let's Start BeeF

With Drake

HOW DO I FEEL WHEN I FIND THIS KIND OF BUG IN A LARGE APPLICATION?

There are Definitely Ways To Deal with THIS in OO LAND

But that's not this Talk.

Embracing

Functional

Immutable

Patterns

What Do I mean By Functional?

• Stop thinking about code in terms of class and object relationships
• Start thinking about code in terms of function input and function output
• Start thinking about determinism

What Do I mean By Determinsm?

• Functions return the same output when given identical input EVERY TIME
• Without this concept code is UNPREDICTABLE
• Unpredictable code requires wizards and spells to maintain
• Predictable code can be maintained by ordinary humans

What Do I mean By Immutable?

• Stop thinking about modifying existing objects and data structures
• Start thinking about creating new objects and data structures

Tools Of The Trade

Primatives

Primatives are already immutable!

Tools Of The Trade

const worse = { status: 'not so awesome' };

const upgradeStatus = current => Object.assign({}, current, { status: 'awesome' });

const better = upgradeStatus(worse);

worse.status
// => 'not so awesome'

better.status
// => 'awesome'

Object.assign({}, better, { identity: 'UtahJS Attendee' });
// { status: 'awesome', identity: 'UtahJS attendee' }

Object: Object.assign

Tools Of The Trade

const worse = { status: 'not so awesome' };


const upgradeStatus = current => ({ ...current, status: 'awesome' });


const better = upgradeStatus(worse);

worse.status
// => 'not so awesome'

better.status
// => 'awesome

{ ...better, identity: 'UtahJS Attendee' };
// { status: 'awesome', identity: 'UtahJS attendee' }

Object: Spread

Tools Of The Trade

const worseStatuses = [{ status: 'not so awesome' }];

const upgradeStatus = current => ({ ...current, status: 'awesome' });

const upgradeStatuses = currentStatuses => currentStatuses.map(upgradeStatus);

const betterStatuses = upgradeStatus(worse);

worseStatuses[0].status
// => 'no so awesome'

betterStatuses[0].status
// => 'awesome

Arrays: Map

Tools Of The Trade

const worseStatuses = [{ status: 'not so awesome' }, { status: 'awesome' }];

const isAwesome = current => current.status === 'awesome';

const awesomeStatuses = statuses.filter(isAwesome);

worseStatuses.map(current => current.status)
// => ['not so awesome', 'awesome']

awesomeStatuses.map(current => current.status)
// => ['awesome']

Arrays: Filter

Tools Of The Trade

const statuses = [{ status: 'not so awesome' }, { status: 'awesome' }];

const statusStringReducer = (accumulator, current) => accumulator + ' "' + current.status +'"';

statuses.reduce(statusStringReducer, 'All statuses:');
//All statuses: "not so awesome" "awesome"

Arrays: ReDuce

Tools Of The Trade

const statuses = [{ status: 'not so awesome' }, { status: 'awesome' }];

const newStatuses = [...statuses, { status: 'super duper' }];

statuses;
// [{ status: 'not so awesome' }, { status: 'awesome' }]

newStatuses;
// [{ status: 'not so awesome' }, { status: 'awesome' }, { status: 'super duper' }]

const addTo = arr => new => [...arr, new]

const addToStatuses = addTo(statuses);

const newerStatuses = addToStatuses({ status: 'a little tired' });

statuses;
// [{ status: 'not so awesome' }, { status: 'awesome' }]

newStatuses;
// [{ status: 'not so awesome' }, { status: 'awesome' }, { status: 'super duper' }]

newerStatuses;
// [{ status: 'not so awesome' },
    { status: 'awesome' },
    { status: 'super duper' },
    { status: 'a little tired' }]

Arrays: Spread

Requirements

Refactor code!

• focus on input and output
• leverage immutability
• achieve determinism!

Let's Sketch

Let's BUild!

HOW DO I FEEL WHEN Working with Immutable, Deterministic, Functional Code?

Next STeps / Gratitude

• ImmutableJS
  
• Immutable Extensions by Brian Lonsdorf
  
• Professor Frisby Introduces Composable Functional JavaScript by Brian Lonsdorf
  
• Learn PureScript By Example
  
• Pux
  
• Elm
  
• ClojureScript
  
• Clojure for the Brave and True
  
• PolyJS Meetup
  

• Monster Art Designed by Freepik

• Provo Pride
  

• Utah Refugee Education Training Center

  
  

  
  

 ME & Bebop

Playing HARD