2014
Fronted Masters
Brian Lonsdorf
6 hours 10 minutes
English
Learn to apply techniques from the forefront of computer science research to solve practical problems in Javascript. Discover functional programming and see it demonstrated step-by-step with how to build an example web app using abstract interfaces like Monads, Functors, Monoids and Applicatives.
Introduction
Joe Nelson outlines the scope of the course. The soul of functional programing is separating the concerns of what you are doing and recognizing those separations are happening. Creating clean code requires discipline. Custom names, looping patterns, glue code, etc. are side effects of a lack of discipline and invitations for messy code.
0:05:15 - 0:13:30
Omit Needless Names
The first part of creating silence in your code is omitting needless names. This process can help separate inputs from the environment. Joe provides an exercise to help demonstrate this. He shows how testing a "daysThisMonth" function is much more difficult that testing a "daysInMonth" function.
0:13:31 - 0:17:31
Separating Mutation from Calculation
A function that reads DOM elements and manipulates them can be difficult to test. This is because a test case must create mock elements to feed to the function. Instead, the function could be simplified to only manipulate a piece of text. This is easier to test and leaves the mutation of the DOM to another routine.
0:17:32 - 0:22:56
Recognize Pure Function
A function that does not change anything outside of itself is considered a pure function. Pure functions react the same way to the same inputs. They are more testable, portable, memoizable, and parallelizable. Joe plays a game called Pure or Impure to help the audience recognize pure functions.
0:22:57 - 0:33:49
Separate Functions from Rules
Functions are nouns. A goal of functional programing is to write functions that take in a lot of arguments, but only give them one argument at a time. This process is called "currying".
0:33:50 - 0:40:23
Currying Exercise
In this exercise, create a few different functions that utilize various curried function built into the Ramda library. Joe gives a little background information about the exercise files and fields questions from the audience as they are working on the exercise.
0:40:24 - 0:54:00
Currying Exercise Hints
Joe gives a little guidance to how to get started with this exercise. He demonstrates a partial answer to the first challenge and fields a few more questions from the audience.
0:54:01 - 1:05:47
Currying Exercise Solutions 1 & 2
Joe walks through the solution for the currying exercise. He starts with challenges 1 & 2. Joe then gives the audience more time to finish the 3rd challenge in this exercise.
1:05:48 - 1:30:42
Currying Exercise, Challenge 3 Solution
Challenge 3 in this exercise requires you to create a function that finds the largest number in a list. Joe begins walking through this complex solution. He then takes a few minutes to further explain the "reduce" function.
1:18:04 - 1:30:42
Currying Exercise, Challenge 3 Solution, continued
Joe continues his demonstration of the solutions for challenge three. At the end, he summarized all three challenges to further enforce the separation that currying enables.
1:30:43 - 1:36:46
Compose
Functions can "meld" with other functions. This process is referred to as composing. When composing functions, the resulting composition should be separated from the arguments. Joe demonstrates a simplified compose function.
1:36:47 - 1:40:59
Composition Exercise
This exercise focuses on combining methods through composition to create a better separation of concerns. Joe spends a few minutes describing the challenges and getting the audience started on the exercise.
1:41:00 - 1:51:32
Composition Exercise: Challenge 1 Solution
Joe demonstrates the solution for the first challenge in this exercise. After that, he gives a few hints for the second challenge. Joe also engages in some audience discussions around scalability and maintainability of functional programming code.
1:51:33 - 1:58:10
Composition Exercise: Challenge 2 Solution
Joe walks through the solution for challenge 2. He also gives the audience a little time to work on the third challenge.
1:58:11 - 2:04:34
Composition Exercise: Challenge 3 Solution
Joe concludes the composition exercise with the solution to challenge 3.
2:04:35 - 2:09:22
Point-Free
In functional programing "points" refer to arguments. So point-free programming is the removal of arguments through composition. Joe shows a few examples of functions that have been created point-free.
2:09:23 - 2:19:35
The Silence: Review
Joe reviews what he covered in The Silence phase. This includes making function inputs explicit, providing arguments over time, not modifying external objects, and composition without glue variables. Joe also spends some time answering questions about the content in this first part.
2:19:36 - 2:25:33
Questions, continued
Joe answers some additional audience questions and shows some tips and tricks when using JS Bin.
The Voyage
2:25:34 - 2:31:59
Reviewing Composition
Brian Lonsdorf now takes over to discuss "The Voyage". Before moving forward, Brian addresses a few more questions that popped up over lunch about Part 1 of this course. He stresses that functional programming is very declarative and all you are really doing is composing smaller bits to make a larger system.
2:32:00 - 2:37:00
Category Theory
In category theory, you need a composition and an identity to form a category. Brian introduces category theory and defines various category laws like left identity, right identity, and associativity.
2:37:01 - 2:42:34
Objects
Brian reintroduces objects in a different light. In his definition of objects, they are containers/wrappers for values. The have no methods and are not nouns. The first object he demonstrates in a Container object.
2:42:35 - 2:52:47
Object Map
Brian discusses the advantages of having a map function added to the prototype of an object. By adding a map function, the container object can be opened up and the value pulled out.
2:52:48 - 3:01:59
Maybe Functor
Any object or data structure that implements the map function is considered a functor. The first functor Brian demonstrates is the "Maybe" functor which will capture a null check. That value inside may or may not be there. When you add a Maybe into a compose, it will always check to make sure the value is there. If not, it will stop the composition.
3:02:00 - 3:14:31
Functors Exercise 1
In this exercise, you will use _.add and _.map to make a function that increments a value inside a functor. Brian does this exercise with the audience to help get them started writing functors.
3:14:32 - 3:24:29
Functors Exercise 2
Brian moves on to exercise two. In this exercise, you need to use _.head to get the first element of the list. After a few hints, Brian gives the group some time to work through the solution. He also answers a few questions while they work and explains maps a little more in-depth.
3:24:30 - 3:33:44
Functors Exercise 2 Solution
Brian walks through the solution to exercise 2 and answer a number of follow-up questions from the audience. He also further emphasizes how implementing a map on a container abstracts a function's application.
3:33:45 - 3:39:44
Functors Exercise 3 Solution
Exercise 3 asked you to use the safeGet and _.head functions to extract the first initial of the user. Brian walks through the solution. In a later video, he comes back and further explains this exercise.
3:39:45 - 3:45:11
Functors Exercise 4 Solution
Brian steps through the solution for exercise 4 which requires you to use Maybe in place of an if statement. While solving exercise 4 he jumps into an attendee's JSBin to help them solve the exercise.
3:45:12 - 3:54:52
Functors Exercise Wrap-up
Brian wraps up the exercises by answering a few more questions. He jumps back to exercise 3 to step through the solution more thoroughly. He stresses that functional code doesn't have to be completely point-free. Maybe object can be mixed with imperative code.
3:54:53 - 4:00:49
Either
The Either functor is typically used for pure error handling. It functions just like Maybe, but with an error message embedded. Either includes subclasses Left and Right. Right will always run. Left would not run and return the error message.
4:00:50 - 4:08:18
IO
IO is a functor that is considered a lazy computation "builder". It's typically used to contain side effects. So rather than contain a String or Array, it will contain a function. A map appends the function to a list of items to run.
4:08:19 - 4:13:29
Either/IO Exercise 1
In this exercise, write a function that uses checkActive() and showWelcome() to grant access or return an error. Brian gives the audience a few minutes to start working on this exercise before giving the solution.
4:13:30 - 4:18:03
Either/IO Exercises 2, 3 & 4
Brian picks up the pace a bit and demonstrates a few more exercises. Exercise 2 expands on exercise 1 by adding validation. You'll validate the for a length greater than 3 and return a Right or a Left based on that validation. In exercise 3, the Either used in exercise two should be rewritten to be a functor. Exercise 4 pulls text from a user input field and strips out the spaces.
4:18:04 - 4:24:37
Either/IO Exercise 5 and 6
Brian wraps up the exercises covering Either and IO by showing the audience the solution to exercises 5 and 6.
4:24:38 - 4:34:39
Other Functors
Brian breezes through a few more functors. EventStream provides an infinite list of results. Future has an eventual value similar to a Promise, except it's "lazy".
4:34:40 - 4:44:14
Other Functors: Exercise 1-5
Brian works through the solutions for the 5 exercises in this section. That latter exercises transition into his discussion about monads.
4:44:15 - 4:51:28
Functor Laws & Properties
It's also important to recognize the laws and properties that functors must follow. These laws and properties make functors flexible and pluggable into any application. Brian discusses these laws and properties and shows a few illustrations. He also presents a number of scenarios to the audience and asks them to describe what functors would be required to build each scenario.
4:51:29 - 5:06:42
Monads
Monads allow you to nest computations. They are a pointed functor that adds mjoin and chain functions to combine other functors. Brian shows a number of code examples of different monads in action.
5:06:43 - 5:14:59
Monads Exercises
Brian quickly runs through all 3 exercises for the Monad section. He also concludes "The Voyage" section with a little more information on monads and shows they have their own set of laws similar to functors.
The Demo
5:15:00 - 5:20:59
Project Setup
Joe takes over to start Part 3: The Demo. Before diving into the demonstration, he talks a little about functional programming's evolution in to JavaScript and the libraries that are emerging to make it easier. He also shows a project where he combines YouTube with functors. This is the project he'll be using for the demo.
5:21:00 - 5:31:42
Demo Part 1
Joe first sets up an event stream that will connect to the DOM element and listen for an event when a key is pressed.
5:31:43 - 5:40:40
Demo Part 2
Now that we have a key pressed stream, Joe sets up a stream that will read the value from the input field. Once he has the value, he can tie that in with the YouTube API.
5:40:41 - 5:51:15
Demo Part 3
Joe creates a Future that will pull video data from the YouTube API. The Future result is JSON data that will be used to update the DOM.
5:51:16 - 6:03:54
Demo Part 4
With the JSON data loaded, Joe creates and "entryToLI" function that will take the entry data and output HTML code. This code is placed on the page as the list of video.
6:03:55 - 6:10:11
Final Thoughts
After having a few debugging issues, Joe walks through a few commits of the project to help summarize the final code in the YouTube demo application. Brian adds a couple last remarks as they conclude the course.
frontendmasters.com/courses/functional-javascript/#toc
Download File Size:2.9 GB
|
