Learning Lodash 4.0
3.4 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Lodash 4.0 to your Wishlist.

Add to Wishlist

Learning Lodash 4.0

A comprehensive guide to fast and efficient functional JavaScript Web Development with Lo-Dash 4.0
3.4 (10 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
96 students enrolled
Created by Packt Publishing
Last updated 5/2016
Curiosity Sale
Current price: $10 Original price: $75 Discount: 87% off
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Develop modular client-side applications using Lodash and build tools such as npm and Browserify
  • Use Lodash on the server, building an API using Node.JS and Express
  • Incorporate chaining to optimize your code with Lazy Evaluation
  • Master the key methods from each of Lodash’s APIs
  • Create a reusable base view using Lodash to power future applications
  • Build templates for your application using Lodash’s powerful template engine
View Curriculum
  • You should already have some knowledge of vanilla JavaScript, as some native features such as the DOM and Promises are utilized without in-depth explanation. Knowledge of another JavaScript framework or library is useful, but is not required to follow along with the course.

Lodash was built to simplify JavaScript application development. It contains hundreds of methods built for the purpose of providing developers with a fast, reliable, cross-browser toolkit to write applications. With Lodash, you can eliminate rewriting boilerplate code and focus on developing the features your users want.

This course takes you through the process of setting up, building, and scripting the deployment of a JavaScript application built using Lodash. Each section explores a new Lodash API, and employs methods within to build new application features.

First, we cover the origins of Lodash and how it has become an indispensable tool for JavaScript developers. We will also install our application and its dependencies. Then we’ll build out the features of an application to explore, create, and tag recipes. This includes building both an API in Node.JS and a client-side application using Lodash.

At the end, we’ll write a script to minify our application for deployment, and look at alternate deployment methods using Lodash CLI. This course will provide you with practical uses of Lodash in JavaScript development that you can apply in future applications. By the end of the book, you'll know the principles of building structured and modular applications using Lodash.

About The Author

Eric Adams is currently a Senior Full Stack Engineer working in the vibrant start-up community of Buffalo, NY. Working on the web for over 15 years, Eric has established client-side application development standards in the workplace, and continues to look for new and innovative ways to utilize JavaScript on the job.

Eric is an organizer of the Buffalo JavaScript meetup group, BuffaloJS. When not busy at work, or at home chasing around his kids, Eric can usually be found strumming his guitar or trying his hand at cooking.

Who is the target audience?
  • If you are a JavaScript developer who is looking to speed up application development in a cross-browser compatible way, this video is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
28 Lectures
Hello Lodash!
5 Lectures 21:20

This video provides an overview of the entire course.

Preview 03:18

This video will introduce the viewer to Lodash. It will review some of the problems that Lodash was built to solve, and provide the reasoning behind Lodash’s rise in popularity. 

Introduction to Lodash

To follow the examples in the video series course, the viewer will need to install a local copy of the sample application. This video will direct the viewer to the appropriate repos, and will give an overview of some of the requirements for running the application. 

Installing the Sample Application

There are a number of ways you can add Lodash to an application. This video will use npm (Node Package Manager) to install Lodash as a dependency for the sample application. 

Installing Lodash

Now that the sample application is installed and we have Lodash installed as a dependency, we are going to integrate it into our application using Browserify. 

Adding Lodash to the Application
Working with a List of Recipes
4 Lectures 32:16

The first thing we want to display to the user is a list of recipes. In this video, we’ll create a component that uses Lodash to iterate a list of recipes returned from the API and display each recipe title and description in a card format. 

Preview 10:50

Now that we have the ability to display a list of recipes, we want to start giving the user some additional controls to work with the list. In this video, the viewer will create an input that will be used to filter the recipes by their associated username. 

Filtering Recipes by User

We want the ability to display tags that are in our data store, along with the total number of times each tag is referenced in a recipe. The viewer will learn how to display tag totals using two new methods in the Lodash Collections API. 

Displaying Recipe Tag Totals

We have added filtering to the recipe list, but we will also want some search capabilities in the API. In this video, the viewer will add a search parameter to the recipe list API to filter responses by text in the recipe description. 

Finding a Recipe in the Collection
Creating and Tagging a Recipe
4 Lectures 30:01

When we enter a new set of tags for a recipe, we want to make sure we’re not duplicating data. This video will introduce a Lodash method to verify that all tags entered are unique in the data store. 

Preview 07:31

When we enter a new set of tags for a recipe, we want to make sure we’re not duplicating data. This video will introduce a Lodash method to verify that all tags entered are unique in the data store. 

Adding New Tags to the Data Store

Now that we have our recipe tags saved as relations to our recipe, we can display the tags for each recipe on the recipe card. We will use Lodash array methods to add tags to the recipe list API response and to the recipe card component. 

Displaying Tags for a Recipe

We added recipe tags to our recipe input form in the first video of this section, but left the interface without the ability to enter multi-word tags. Let’s now add pillbox-style functionality to the input form when entering new tags, and include the ability to enter multi-word tags. 

Adding and Removing Recipe Tags
Writing Components for the Recipe App
4 Lectures 34:19

Lodash gives us the ability to extend objects using _.assign, and this video will utilize that to create a BaseComponent method for adding delegated events to the frontend components. This will help you write cleaner code as they add more functionality into the application. 

Preview 08:03

In the last video, we created a set of methods in BaseComponent that bind events defined in each component’s declaration. In this video, we’ll expand upon the methods created in the previous video to allow binding of multiple handlers for each eventType within a component. 

Sharing Events with Other Components

In an earlier video, we created a component for filtering cards based on text in an input component. We also want to create a search input component, but first we must abstract the functionality that is shared between these two components. 

Creating a Shared Input Component

Up until now, we have created a BaseInput component that was used to provide a template and properties to the FilterInput. component. In this video, a SearchInput component will be created to extend BaseInput and query the API for recipes based on search terms. 

Creating a Search Input Component
Displaying Recipe and User Details
4 Lectures 33:34

In our API and client, we have implemented search and filter inputs, but without any escaping of input. We’ve also used native trim functions that are not supported in all browsers. The viewer will add code to escape regular expression characters and to import Lodash methods into a template. 

Preview 08:07

Our recipe cards include a basic description, title, and tags, but we also want to display images. To keep our cards from becoming too large, and as an enticement for users to click for more details, we are going to truncate recipe descriptions. 

Truncating a Description for Display

Our recipe cards are meant to be a preview of the recipe, so we need to create a view that will show the user more recipe information. In this video, the viewer will write a template to display recipe details, and integrate that into the application when a recipe card’s “View More” button is clicked on. 

Writing a Template to Display Recipe Details

Now that the recipe card and details templates have been completed, we still need a way for the user to view more information about the person who created the recipe. In this video, the viewer will add to the details template a section that will display the recipe creator’s avatar, name, and email address. 

Formatting User Details
Other Lodash Utilities Used in the Application
4 Lectures 42:16

Now that the recipes application has recipe and user details on display, we need to provide user authentication and recipe editing functionality. This video will focus on the API endpoint to log a user in to the application. It will highlight the Lodash functions used to generate a timestamp, and find and update a user in the system. 

Preview 10:13

In the last video, the viewer created an API endpoint to log a user into the recipe application. In this video, they will create a login form component for display on the frontend, and conditionally show/hide the recipe and login forms based on the user’s login status. 

Creating a Login Form

One thing that the recipe application is still missing is the ability to add ingredients for a recipe when it is created. In this video, the viewer will make updates to the API to allow ingredients to be submitted with a recipe, and will update the recipe details response to include ingredients with their amounts. 

Saving and Retrieving Recipe Ingredients

In the previous video, the viewer added the ability to save ingredients through the API. In this video, we will make the necessary changes to the frontend to include form inputs for adding ingredients to a recipe. We will also update our RecipeForm component to save those ingredients with the new recipe. 

Adding Ingredients to the Recipe Form
Preparing Our Application for Deployment
3 Lectures 24:37

We already have a build process for our frontend that bundles our application’s modules into a single JavaScript file for deployment. For a production scenario though, we will want to provide a minified version of our application to reduce the final size of the code base. In this video, the viewer will install a minification tool and add it to the npm build script. 

Preview 07:23

Our recipes application was built using CommonJS modules and Browserify, but there are many other ways to build an application that includes Lodash. In this video, the viewer will learn about lodash-cli, an npm module that creates custom builds of Lodash that are able to work with other module loaders, with support for custom lists of modules. 

Using lodash-cli

Now that the viewer has completed the application, this video will review the APIs covered throughout the course. It will also provide some guidance for ways to enhance the application and resources for additional learning beyond the course. 

Benefits of Building an Application with Lodash
About the Instructor
Packt Publishing
3.9 Average rating
7,336 Reviews
52,505 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.