How to start a simple JS application using modules + webpack

It’s been awhile since my last post lots of thing happening in technology it’s amazing how fast technology and particularly the frontEnd development world is changing, well this post will be helpful for those who know a little bit about a javascript and are interested in how to start a modular javascript application at the end of this short tutorial we will developed this to-do list.

Screenshot from 2017-05-17 09:19:46

Complete code will be downloaded here but first of all let’s take a moment to clarify terminology.

Javascript Module is a pattern that allow frontEnd developers to encapsulate functionalities like classes to be reused in different places.

Webpack is a module bundler and basically helps to create a deployable file with all the modules in it, think this is like a compiler that takes all your js modules and create a unique file to be used in your html page.

Needed Software

In order to start with our sample application we will need to install

  • node (https://nodejs.org/en/download/)
  • npm  (once node was installed open a console and run ‘npm install npm -g’)
  • Choose an IDE, personally I’m using visual studio code since a year it works very good.

Let’s play !

First of all you will need to create a folder in your file system next open your IDE and install Webpack using the command npm install webpack -g

Screenshot from 2017-05-11 12:40:47

Now we have all we need to create our sample application, let’s create something simple lets build a todo list with simple actions (task creation, complete task, delete task)

Project Structure

Let’s create the project structure below which will contain our code.

Screenshot from 2017-05-11 12:59:52

Now we need a package.json file which will help us to control the modules we are going to use in our application, lets create it in an automated web using npm, using npm init command  follow the instructions below, you just can leave the default values for each property the command will ask.

Screenshot from 2017-05-11 13:19:43

After that you will notice there is a new file package.json in your project

Screenshot from 2017-05-11 13:21:31

That guy will contain data about our modules, now we can start coding our todo-list application.

Let’s create the view for our application sample, download the code in this link add this code to the index.html file.

Now we are going to create the modules we are going to use, we will have two modules our main module called app.js and other will manage the logic behind the creation of the tasks.

Screenshot from 2017-05-17 09:52:08

App.js

Take a look to the module pattern, basically this pattern allowed us to create elements with an scope detached from the global scope, before start coding we will need to install a jquery as a module in our application.

Screenshot from 2017-05-15 14:43:51

The line above install jquery as a module to be used in our application.

App.js code.

Well finally this is our main module or the entry point of our application, the code is separated in two parts the first one at the top are how we include the modules we are going to use in our module for example with the second line we are include the jquery module and will be able to make a jquery reference through the $ simbol in our module.

The second section in app.js file is the declaration of our module, there you can see a couple of interesting things in it …

  • Maybe if you will think what are those () at the end of the file ? … well those parenthesis  are there in order to  execute the function immediately this is called IIFE pattern (Immediately-Invocked Function expression)  help us to make our code more private and detached of the global scope.
  • What about that return { … } inside the function ? …well that is called a closure and basically allow us to keep couple of variables private like list and tasks array which we don’t want to be accessible out of the scope of our module.

Screenshot from 2017-05-17 10:26:59

task.js

Here you can see basically is the same pattern why applied to the main module and we are using a closure with the return statement as well, we have a render method will be executed each time the user will add a new task and then there is the a method which will attend the remove task button and the complete task button in the view.

Screenshot from 2017-05-17 10:32:48

Finally Webpack  ….

After we did create all our modules and we have all our code in place we are going to use webpack in order to concatenate our modules in to one js file, basically what webpack does to read first the entry point (app.js) read recursively the required lines and start to take each required module and concatenate all them in just one file to be included in our html file, there are two ways to use webpack one with a webpack config file where we define rules to be follow during the concatenation process, but for the sake of the example we are going to use just a command console in order to generate our concatenated file. If you install webpack as I show you at the beginning of the post you will be able to use webpack ./src/app.js bundle.js  command.

Screenshot from 2017-05-17 10:55:26

After run the webpack command you will see an output like in the image above and then a new file called bundle.js in your project file tree.

Screenshot from 2017-05-17 10:59:24

Now with this files in place you will be able to see the to-do list if you call your index.html file, this could be lot of information feel free to download the project here and leave any comment or questions.

Advertisements