Learn how to build a grid with CSS Grid and manage complex state with useReducer while building a Tic Tac Toe Game.

Kyle Shevlin

Manage Complex Tic Tac Toe Game State in React

Learn how to implement data structures, sorting algorithms, and the trade-offs between what algorithms to choose.

Data Structures and Algorithms in JavaScript

Managing state is one of the primary reasons our applications become so complex. See how to simplify state with state machines.

Introduction to State Machines Using XState

Functional Programming can be overwhelming to learn with all the new jargon and concepts. Learn this style without all the headaches.

Just Enough Functional Programming in JavaScript

Kyle Shevlin Landing Page

 Courses from Kyle Shevlin

The difficulty of managing state is one of the primary reasons our applications become so complex. We try and manage this complexity with a lot of booleans, somewhat semantic variables like `isLoading`, `wasFetched`, and `hasError`, and over-engineered systems that are _still_ full of bugs. Surely, there's a better way.

That better way is *state machines*.

State machines formalize how we define and transition through the states of our application and give us ultimate control of the most complex parts of our apps.

In this course, we will explore the problems state machines purport to solve, like boolean explosion. We'll try to solve it our own way first, get so far, and then demonstrate how state machines get us all the way. After that, we'll dive into the XState library, JavaScript's premiere state machine library, to learn its API and how to use it to solve our problems.

By the time you're done taking this course, you should have a solid education about state machines and be able to start applying them.

Statecharts are a formalism for modeling stateful, reactive systems. This is useful for declaratively describing the behavior of your application, from the individual components to the overall application logic.

xstate

In the last few years, the software development industry has seen a resurgence of functional programming. But what is it? And how do you get started? 

“Just Enough” is an introduction to functional programming, written in JavaScript, that doesn’t get bogged down in the jargon and mathematical theory that can be so intimidating. Instead, it provides an approachable introduction to the paradigm that will give you the education and confidence you need to start using the programming style right away.

With “Just Enough” as our guide, this course will focus on the foundational knowledge needed to approach any functional language. By the end of the course, you will understand:

- higher order functions
- pure functions
- immutability
- currying
- partial application
- pointfree programming
- functional composition

In just 30 minutes, you’ll learn more than just enough. 

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

This course teaches you how to implement your first data structures and algorithms. In the process, you’ll learn some fundamental computer science concepts as well. We’ll build these from scratch using JavaScript, but what we learn can be taken and used in any other language, too.

You will learn how to build: queues, stacks, linked lists, graphs, and trees. You’ll learn to implement several different sorting algorithms: bubble, insert, merge, and quick. Each of these lessons will not only teach you their implementation, but the tradeoffs made in choosing one over another. By proxy, you’ll learn about concepts like Big O notation and recursion.

Lessons based on posts from my blog - https://kyleshevlin.com

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Kyle Shevlin's Blog Lessons

VSCode is a free and powerful text editor for writing code. I use it daily and continue to find useful and interesting tips and tricks regularly. I want to share those tips and tricks with you.

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Kyle's VSCode Tips and Tricks

Tic Tac Toe is a classic game that has a relatively simple win condition. Get three of your pieces to line up in a row on a 3x3 grid-style board and you win, and also prevent your opponent from doing so.

This makes the game a great challenge to represent as code. 

In this course, you will start with a blank create-react-app application, learn how to build a 3x3 grid (with CSS Grid), and power that grid so that you can take turns with another person and play tic tac toe. 

You'll model the game state as a multidimensional array where you will manage and update that state with `useReducer`


Composing functions is fundamental to functional programming. Luckily, you probably have already done some functional composition in high school or college math class. Understanding the compose() function will enable you to easily build complex functionality in your applications and programs.

Build Complex Functions with Function Composition in JavaScript

Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies. In this lesson, we build a simple "Hello World" app. We include the Hyperapp library using the Unpkg link: https://unpkg.com/hyperapp and then attach it to our page on the `window.main` global.

Render Text from State with Hyperapp

Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies. In this lesson, we build a simple counter app. We include the Hyperapp library using the Unpkg link: https://unpkg.com/hyperapp and then attach it to our page on the window.main global.

To build a counter, we only need to add a bit of state and a couple actions to our application to get it to work.

Interact with the State Object through Hyperapp Action functions

Hyperapp is an ultra lightweight (1kb), minimal, functional, JavaScript library for building UIs. It comes with a VDOM engine and state management without any dependencies.

In this lesson, we learn how to use JSX with Hyperapp. By installing a Babel plugin, we can instruct it to transpile JSX to Hyperapp's `h` method for a better developer experience.

Render Text with JSX in Hyperapp

This lesson teaches you the difference between pure and impure functions through examples of both. Pure functions are any functions whose output is solely derived from its inputs and causes no side effects in the application or outside world. Mathematical functions are examples of pure functions.

Impure functions come in a variety of shapes and sizes. Some typical examples would be:

* Functions whose output depends on outside/global state
* Functions that return different outputs for the same inputs
* Functions that modify application state
* Functions that modify the "outside world"

Functional programming is built upon the use of pure functions and the strict control of side effects. Being able to recognize either type of function is a key fundamental for functional programming.

Identify Side Effects by Comparing Pure and Impure JavaScript Functions

This lesson teaches the concept of higher order functions (HOF) in JavaScript, a necessary building block of functional programming in any language. 

A higher order function does at least one of the following things, often both:

1. Accepts a function as an argument
2. Returns a new function

To demonstrate this, we will build a higher order function, `withCount()`, that modifies any function passed to it so that it logs out how many times it has been called.

Modify Functions with Higher Order Functions in JavaScript

This lesson teaches you the concepts of immutability, the difference between mutable and immutable data structures, and how to change data through mutable and immutable patterns. Immutable data is necessary in functional programming because mutations are a side effect. Our transformation of data should not affect the original data source, but instead should return a new data source with our updates applied.

To demonstrate the difference between mutability and immutability, imagine taking a drink from a glass of water. If our glass is mutable, when we take a drink, we retain the same glass and change the amount of water in that glass. However, if our glass is immutable, when we take a drink, we get back a brand new, identical glass containing the correctly drank amount. Perhaps a strange way to conceive of the action, but creating new data structures makes our methods pure and thread-safe, a benefit of functional programming.

Avoiding Mutations in JavaScript with Immutable Data Structures

This lesson teaches you what currying is: the act of refactoring a function so that it receives its arguments one at a time.  We will use the canonical example of an add function to demonstrate this. This lesson also teaches the concept of “arity”, the number of arguments a function receives, as it is useful knowledge for functional programming.

Refactor a Function to Use Currying in JavaScript

This lesson teaches you how arguments passed to a curried function allow us to store data in closure to be reused in our programs and applications. Since each argument, except for the final one, returns a new function, we can easily create reusable functions by supplying some of these arguments beforehand, and sharing these partially applied functions with other parts of our codebase. In this lesson, we'll create a curried function to fetch requests from an API that uses partial application to create reusable functionality.


Create Reusable Functions with Partial Application in JavaScript 

This lesson teaches you to order the arguments of your functions following functional programming principles. By ordering our arguments in a specific way, we allow our functions to benefit from partial application, improve reusability, and enable composition of functions. Specifically, we will focus on always providing the data as the last argument to our functions so that the result of one function can be piped as the argument into another function.

Improve JavaScript Function Usability with Proper Argument Order in Functional Programming

This lesson teaches you what pointfree programming is, passing a named function as an argument to avoid writing an anonymous function with interim variables instead. Pointfree programming increases code legibility, decreases the surface area for bugs, and makes our code more composable and unit testable. We will demonstrate this by removing the anonymous arrow function passed as a callback to a `map` method with a named function.

Eliminate Anonymous JavaScript Functions with Pointfree Programming

This lesson teaches you the concept of composition, the building up of complex functionality through the combining of simpler functions. In a sense, composition is the nesting of functions, passing the result of one in as the input into the next. But rather than create an indecipherable amount of nesting, we'll create a higher order function, `compose()`, that takes all of the functions we want to combine, and returns us a new function to use in our app.

Build Up Complex Functionality by Composing Simple Functions in JavaScript

This lesson teaches you what the associative property is, the mathematical principle that proves the grouping of values in when adding or multiplying does not affect the result and applies it to functional composition. This lesson will demonstrate how we can achieve the same composition with different groupings of smaller compositions. This gives us confidence in our code and the ability to create even greater complexity with compositions.

Using the Associative Property in JavaScript Functional Compositions

Functional compositions are purposely opaque, with no obvious way to "visualize" the data as it transforms. This is great when our function works, as it's hard to _add_ bugs, but challenging when our compositions aren't correct. This lesson teaches you how to debug functional compositions by writing and using a `trace()` function to log out our values as they transform. This allows us to continue using pointfree programming while also providing a view into our compositions.


Debug Functional Compositions with a Logging Side Effect in JavaScript

In this introductory course on functional programming, we will learn "just enough" of the concepts you need to start using the programming paradigm.

One of the goals of this course is to introduce as little jargon as necessary. Functional programming vernacular can be very intimidating and a barrier to entry, so we'll avoid those whenever possible.

Another goal of this course is to teach the concepts in a language agnostic fashion. While this course is written in JavaScript, the concepts can be applied to any functional programming language, such as Haskell, Scala, Clojure, etc.

Together we will learn about higher order functions, pure and impure functions, immutable data structures, currying, partial application, the importance of argument order, pointfree programming, composition, a tiny bit of math with the associative property, and how to debug functional compositions.

My personal hope with this course is to inspire you to take what you learn here and go explore functional programming more.

Kyle Shevlin

Manage Complex Tic Tac Toe Game State in React

Get Good at JavaScript

Search Results

Introduction to State Machines Using XState

Just Enough Functional Programming in JavaScript

Data Structures and Algorithms in JavaScript

Kyle Shevlin's Blog Lessons

Kyle's VSCode Tips and Tricks

Manage Complex Tic Tac Toe Game State in React

Build Complex Functions with Function Composition in JavaScript

Render Text from State with Hyperapp

Interact with the State Object through Hyperapp Action functions

Render Text with JSX in Hyperapp

Identify Side Effects by Comparing Pure and Impure JavaScript Functions

Modify Functions with Higher Order Functions in JavaScript

Avoiding Mutations in JavaScript with Immutable Data Structures

Refactor a Function to Use Currying in JavaScript

Create Reusable Functions with Partial Application in JavaScript

Improve JavaScript Function Usability with Proper Argument Order in Functional Programming

Eliminate Anonymous JavaScript Functions with Pointfree Programming

Build Up Complex Functionality by Composing Simple Functions in JavaScript

Using the Associative Property in JavaScript Functional Compositions

Debug Functional Compositions with a Logging Side Effect in JavaScript

Course Introduction to Just Enough Functional Programming In JavaScript