Learning Path: Efficient JavaScript Application Development
0.0 (0 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.
19 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learning Path: Efficient JavaScript Application Development to your Wishlist.

Add to Wishlist

Learning Path: Efficient JavaScript Application Development

Upgrade your skills to create quick and dynamic applications with Node.js
0.0 (0 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.
19 students enrolled
Created by Packt Publishing
Last updated 2/2017
English
Current price: $10 Original price: $200 Discount: 95% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 4.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Set up Grunt in a project
  • Use Grunt for long-running tasks such as live compilation and hot reloading
  • Explore design patterns in Node.js
  • Look beyond web applications and create your own desktop app with Node.js
  • Develop single page applications using Node.js with AngularJS, Ember.js, and Backbone.js
  • Create a real-time and fully functional online chat application with Socket.IO
  • Utilize the enormous range of Gulp plugins
View Curriculum
Requirements
  • An in-depth understanding of JavaScript is required
Description

Do you want to make efficient use of your time by quickly performing tasks? How will you do it? Your answer is Grunt!

Grunt will help you automate repetitive tasks such as minification, compilation, unit testing, linting, and more.

Grunt is everywhere. From JavaScript projects in jQuery to Twitter Bootstrap, everyone's using Grunt to convert code, run tests, and produce distributions for production.  

We will begin this Learning Path with an advanced configuration and customization of the Grunt environment, focusing on practical examples of creating a customized Grunt environment that will support large-scale web development.

Packt’s Video Learning Paths are a series of individual video products put together in a logical and stepwise manner such that each video builds on the skills learned in the video before it.

Half way through this course, you will gain a deep understanding to create server-side applications with the most popular Node.js framework.

Finally, we will focus on creating a data-intensive application with MongoDB, use AngularJS to create a frontend application, and learn to utilize Bootstrap to create a truly responsive web app.  

The goal of this course is to make your application development process smoother and efficient

About The Author

Bertrand Chevrier

Bertrand Chevrier is a professional JavaScript developer with 10 years of experience in large-scale software development and architecture. He uses Grunt every day for his professional and personal projects. As a Grunt plugin author, he’s part of the Grunt community and his work is widely used. He also used to teach Grunt to his team mates and speaks about Grunt in conferences and user groups.

Bertrand is also a strong believer and advocate of free and open source software. By day he works for OAT SA, the company behind TAO, the open source e-testing platform, where he’s in charge of frontend development and architecture, and by night he contributes to open source software.

Fernando Monteiro

Fernando Monteiro is a full-stack engineer, speaker, and open source contributor. He has built and made some of his personal projects open source, such as Responsive Boilerplate, Frontend Boilerplate, Angm-Generator, and TrelloMetrics, written in AngularJS, Node.js, Less, and SASS.

With around 16 years of experience in information technology, his current focus is on web and mobile JavaScript applications. He has a strong understanding and experience with all phases of the software engineering life cycle, including source control, design, build/release, and automated testing.

He has worked as a manager of e-commerce and a UX designer for various companies and products, including mobile applications.

When not programming, Fernando enjoys riding Harley Davidson bikes, making his own

beer and watching movies with his family.


Who is the target audience?
  • If you are an expert in JavaScript and want to build automated and robust applications, then this course is for you.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
69 Lectures
04:20:20
+
Mastering Grunt
28 Lectures 02:07:46
This video will provide you an overview of entire course.
Preview 04:36

To work efficiently on our sample application with Grunt, we need to ensure that the environment is set up correctly.
Setting Up and Installing the Project
03:44

In this video, we will get introduced to our sample application and its structure.
Running Foodprint.io
04:04

What's Grunt? We will try to answer this question by introducing the underlying concepts and abstractions.
Grunt Core Concepts
04:20

Let’s answer the question of the hour: how will Grunt help us in developing our application?

Grunt in Foodprint.io
03:16

We are using ESLint to verify that our application source code complies with our coding guidelines and doesn’t contain problematic pieces of code. These checks are either manual, using a command line to run, or atomic, by checking only the current file within an IDE. Wouldn't it be excellent if we could just integrate the ESLint checks in our build process using Grunt?
Preview 05:42

Nowadays, unit and integration tests are a part of the development process. There are multiple ways to launch them and integrate them. We will use Grunt in order to run our application's unit tests in this video.
Running the Tests
05:45

Generating a coverage report is never a simple task. We need to ensure first that the tests are running, and then run a complicated command and open the generated report in the browser. We will see how to automate that process using multiple Grunt tasks. We will compose them to build a “coverage” task.

Generating a Test Coverage Report
03:51

The JavaScript code of our application that runs on the browser is written in ES2015, and it needs to be compiled to ES5 in order to run on most web browsers. We will use Grunt to not only compile the code but also create compressed bundles with an external source map for debugging.
Bundling Client-side Modules
04:26

Web development usually involves a lot of manual steps between the writing of a line in the source code and the visualization of the change, especially if the source is compiled. Let’s see how Grunt can also be used during the development to increase our productivity.
Productivity with a Toolchain
06:24

In continuation of the previous video, we would like to continue to improve the development productivity. We would like to run multiple tasks from different triggers and still have the result of our modification loaded in the browser. We will now see the tests that run while we develop.
Real-time Testing
05:07

Compressing, optimizing assets is a good practice, but it’s often a slow and heavy computation process. We are going to set up asset optimization based on the application context, for example, letting the optimization run only in production.
Context-based Optimization
03:22

An organization of tasks can become messy quickly: which tasks do what? In which order do we need to run them? We need to think about our automation tasks from the perspective of another developer and create a workflow that will seem obvious.
Combining Tasks to Create a Workflow
04:54

This video will show you how to create a table schema and how to use the MySQL command line to perform the database operation (INSERT, SELECT, ...)

Plugin Scaffolding
04:24

A Grunt plugin is an npm module, but how do we define a task inside this plugin? Grunt proposes us two methods in its API to define a task: registerTask and registerMultiTask. We will see when to use each one.
registerTask Versus registerMultiTask
05:21

Our plugin’s purpose is to download data, place it in a folder, and transform it. We will now see how to use the Grunt APIs available in the tasks to achieve the second part of the task—the data transformation.
Plugin Communication
04:34

Grunt executes tasks in a linear and synchronous way, but most of the time—and especially on the Node.js platform—the task content will rely on asynchronous actions. Hopefully, Grunt’s API comes with all the needed tools. We will start to integrate the logic in our task.
Handling Asynchronous Tasks
04:51

The developer, the system administrator the plugin consumer interacts with a Grunt plugin using the command line and the feedback he/she receives is made through the output. Grunt has a rich API to log content out. We will see how to implement the logging best practices in the grunt-foodfact plugin.
Verbose, Debug, Error – Best Practice Output
05:24

Grunt plugins are black boxes, where consumers parameterize using options from the configuration. But Grunt offers the possibility to emit events from the plugins in order to interact with them.
Even More Pluggable with Events
03:40

How to test our Grunt plugin in order to guarantee its results? We will use the integration test way to verify our plugin behavior.
Testing the Plugin with Mocha and Chai
04:14

When we solve a problem by creating a Grunt task, we might want to share the plugin to the Grunt community. How can we publish the Grunt plugin? Let’s check it out!
Become Famous – Publish Your Plugin to the World
04:51

Grunt is really easy to use, thanks to its code-based plugin configuration, but one of the trade-offs is when the Gruntfile starts to become bigger. We will give some hints for writing Gruntfiles that are easiest to maintain.
A Cleaner Gruntfile
04:19

Using JS variables to configure the Gruntfile is definitely fine, but there are some cases where it’s inconvenient, for example, in a property name. Grunt includes a simple search-and-replace template mechanism that helps us in such scenarios.
Parameterizing the Configuration
03:19

Even if Grunt can run tasks for any kind of platform and language, it runs itself on Node.js and uses npm for dependency management. We will see how we can take advantage of that.
Taking Advantage of Your Environment – Grunt with npm
04:13

Even with the previous hints, a Gruntfile.js becomes too large quickly. We will split the configuration in order to separate the concerns.

Divide and Rule – Split Your Grunt Tasks
04:13

Grunt is an awesome tool but has a strongly oriented architecture to run tasks. If we don’t understand or comply with the requirements, there are bound to be some problems. We will highlight some of the usual and common mistakes, and try to explain what to do instead.
Common Pitfalls with Grunt
04:45

In the landscape of task runners, Grunt has some peculiarities. For a successful implementation of Grunt, the best approach is to embrace the Grunt philosophy. We will explain these peculiarities in this video.
Adopting the Grunt Way
04:42

To conclude the course, we will compare Grunt against other tools and discuss the future of Grunt.
Task Runners
05:25
+
Node.js Projects
41 Lectures 02:12:34
This video shows us how to install node.js, Yeoman and Express generator.
Preview 03:02

In this video we will start a project which will be a fully server-side application.
Building the Baseline
04:47

With this video, let's make some changes to the structure of directories in our application and prepare it to follow the Model-View-Controller design pattern.
Changing the Application's Structure
04:01

In this video, we will take a look at Embedded JavaScript resource for the creation of reusable files in our templates.

Restructuring the Views Folder Using Partials
03:10

In this video we will add some template files for login, sign-up, and profile screens.
Adding Templates for Login, Sign-Up, and Profile
02:12

This video will show us how to install the additional middleware and use it to refactor the application file.
Refactoring the app.js File with the New Middleware
02:11

This video will show us how to add a config and passport file.
Adding Config and Passport Files
00:48

This video will show us how to create a models folder and add use schema to it. We need to add a few more lines to the login and sign-up forms to make them work properly. This video shows us how to achieve that.
Creating Models Folder, Adding a User Schema, and Protecting Routes
01:50

Instead of using the routes folder to create the route and functions of the comments file, we will use another format and create the controllers folder in this video.
Creating the Controllers Folder
01:55

This video will help us to test whether everything is working properly.
Running the Application and Adding Comments
01:57

This video will show us how to create the baseline application and install the Swig template engine.
Baseline Application and Swig Template Engine
03:21

In this video we will use the MVC pattern in its full meaning, Model, View, Controller.

Refactoring the Views Folder and Creating a Controllers Folder
03:06

This video will show us how to add partials files for head and footer. We will also see how install and configure Sequelize-CLI, which is a very useful command-line interface for creating models, configurations and migration files to databases.
Adding Partials Files and Dealing with Sequelize-CLI
03:03

The sequelize command creates many files, including a database configuration file. In this video we will see how to edit this file.
Editing the config.js File with Database Credentials
00:56

With the help of Sequelize-CLIwe will create a simple scheme for application users. After this, we will create the schema that will store in the database the data of each band that the user creates in the system.
Creating User Scheme and Band Schema
02:22

In this video we will create the database on MySQL and perform the migration of the schemes to the database. We would then use our own MySQL console to see if the tables were created successfully.
Creating the Database on MySQL and Checking Database Tables
03:29

In this video we will create the controls for the models User and Band. We will also see how to create the application templates/views.
Creating Application Controllers, Templates, and Views
01:50

With the help of this video, we will style our example application. We will also edit our application file to add routes and controller to it.
Adding Style, Routes, and a Controller to the Application
02:04

This video helps us to add some content to database and create the form for the creation of bands using the modal feature bootstrap.

Adding Database Content and Creating Bands Form
03:00

In this video, we will use the command line to create the models of our application and then we will edit the models.
Creating and Editing Models with Command Line
04:23

With the help of this video We will use a database to store the feedback of our customers. Then we will make a relationship between models and datasources.
Creating a Data Source and Connecting Models to It
02:21

LoopBack API Explorer helps to generate a local host API endpoint that allows us to view and test all endpoints generated by our API. We will see this in our video.

Using the API Explorer
03:12

We will create the relationship between the application models in this video
Adding Database Relations
01:25

In this video let's see how to create a boot file and use another feature from the LoopBack framework to migrate our models to the database.
Dealing with LoopBack Boot Files
01:42

In this video we will explore how to consume the API.
Consuming the API
02:25

React.js, is very useful library for creating interface component. In this video we will see how to create react components.
Creating React Components
03:40

In this video, we will create new feedback using the application we built in earlier videos.

Creating New Feedbacks
02:48

Creating the Baseline Application
07:58

In this video, for refactoring we will carry out two steps. We would create a directory for application source files and then to receive our scripts.
Refactoring the Application Folder
05:50

The client folder will have a pretty basic structure for any web application with folders. In this video we will see how to refactor it.
Refactoring the Client Folder
02:23

In this video, we will create the AngularJS application.
Creating the AngularJS Application
02:45

We can add content to the application in two ways. This video will only focus on the one where we use migration file.

Adding Content to the Application
01:11

In this video, we will create the building tasks using NPM only.

Creating the Building Tasks and Using It with Individual Commands
05:44

This video will show how to deploy an application with Heroku cloud.

Deploying to Heroku Cloud
04:29

This video demonstrates how to build a baseline application.
Baseline Application
06:17

This is the continuation to the previous video where we will create the other required folders and run the application
Baseline Application (Continued)
09:14

This video will show us how to create a GitHub account to host public and private repositories of code for collaborative software development. It will also show us how to create a Heroku free account.
Creating a GitHub and Heroku Free Account
02:22

MongoLab offers a free limited account as a sandbox, so we can use it to deploy our project. This video will show us how to create this account.

Creating a MongoLab Free Sandbox Account
02:12

In this video,we will create our local git repository and upload it to the account.
Initializing a Git Repository and Pushing to GitHub
01:50

This video shows us another way to create a project using the Heroku cloud service.
Creating a Heroku Application Using Heroku Dashboard
02:23

Codeship is a cloud service for Continuous Integration (CI) tools. This video shows us how to create a Codeship account.
Creating a Codeship Free Account
06:56
About the Instructor
Packt Publishing
3.9 Average rating
7,241 Reviews
51,732 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.