How to run https://github.com/tastejs/todomvc locally

#1

Dear All,

I’m learning JavaScript with help of “JavaScript algorithms And DataStructures Certification” curriculum.

Now would like to implement learnings in live project like https://github.com/tastejs/todomvc.

If someone has already tried this, please let me know how to run this locally to check changes ?

I’m planning to fork this project and do changes for http://todomvc.com/examples/vanillajs/ ( Vanilla JS web app )

Thanks & Regards,
Vikram

#2

If you clone the repo I think you can just copy out the vanillajs folder from inside the examples folder. Then run npm i from inside that folder to get the dependencies and just work on it.

You might also want to use some live server. If you are using VS Code you can install the Live Server extension and run the html file by right-clicking it and selecting “Open with Live Server”.

1 Like
#3

Thanks for reply, let me try and get back with updates.

Regards,
Vikram

1 Like
#4

TAZ for this useful tip, it worked like a charm

#5

@lasjorg can you please clarify below wrt same project

  1. When user enters a text and hits enter key, new entry gets created
  2. How can I debug this to understand which part of program does this magic ?
  3. wrt real world scenario; let’s say this is the project given to me for future enhancement, where shall I start ? Do I need to look into each file and understand what is written ?
#6

This is a big subject. I doubt I can give you all the answers you seek just in a forum thread.

You just have to start reading the code and take it in bit by bit. Don’t try to understand everything all at once. Pick out what looks like some simple functionality and see if you can follow the logic and trace it.

Change the code, break it, fix it, alter the code so it does something new, play with it until you think you understand how it works. Now move on to the next functionality and repeat the process.

For the vanillajs project, it will help if you learn about the MVC Design Pattern.

I’d also highly suggest learning about the debugger so you can set breakpoints and step through the code inspecting the flow and variables.


https://www.youtube.com/results?search_query=debug+JavaScript

Try this:

  1. Right-click the input element and select Inspect.

  2. In the panel with the “Styles” tab go to the “Event Listeners” tab.

  3. You should be able to see the “change” event listener on the input element. Clicking the link to the file view.js will take you to the relevant code.

You can also do this:

  1. Add a todo.

  2. Right-click the todo and select Inspect.

  3. In the DOM view find the .todo-list ul and select it.

  4. Right-click the ul element and use the Break on menu and select “Subtree modifications”.

  5. Add a new todo, the code should break and take you to the View file. If you look at the Call Stack you can see the methods/functions calls that came before and try to backtrack your way.

2 Likes
#7

Thanks for valuable guidance

#8

Please refer to attached screenshot
I’m trying to enter new to-do and want break point when user does Enter key press action.

But even after choosing input action under keyboard, program execution didn’t stop. What is the mistake I’m doing here ?

24%20PM
24%20PM2880×1504 713 KB

#9

I’m not gonna lie the code is pretty advanced in the vanillajs app and I haven’t looked at MVC code in a long time. The event is actually the change event on the input. If you keep the Keyboard breakpoints and try to edit one of the todos it will fire the breakpoint.

Here is my (poor attempt) at tracing part of the code:

controller.js

function Controller(model, view) {
	var self = this;
	self.model = model;
	self.view = view;
    /* 'newTodo' is the event, function is the handler */
	self.view.bind('newTodo', function (title) {
		self.addItem(title);
	});
	
	...rest of code
}

view.js

/* the event and handler */
View.prototype.bind = function (event, handler) {
	var self = this;
	/* the event */
	if (event === 'newTodo') {
	    /* second argument to $on() is the type, here the 'change' type, i.e. the 'change' event */
		$on(self.$newTodo, 'change', function () {
			handler(self.$newTodo.value);
		});

	}
	
	...rest of code
}

helpers.js

/* the $on() signature
 * remember the type that was pass is the 'change' type, i.e. the 'change' event
*/
window.$on = function (target, type, callback, useCapture) {
	target.addEventListener(type, callback, !!useCapture);
};

To see when the change event fires you can right-click the input element and select it in the DOM view, now go to the console tab and put in some code:

/* $0 is the element selected in the DOM view */
$0.onchange = () => {
    console.log('changed')
}

Now try entering a todo and press enter, you will see the change event fire.

#10

Thanks for detailed clarifications, I’ve few more follow up queries :slightly_smiling_face: kindly help with those as well

Do you think is it good idea to understand this project and try to do small changes, for newcomer who has recently finished JS Algorithems & DataStructures course on freecodecamp ?

I haven’t looked at MVC code in a long time

I googled for design patterns in JS and there are 20+, which is more popular one ? Which one does React, node.js community uses ?

/* $0 is the element selected in the DOM view */
$0.onchange = () => {
    console.log('changed')
}

Initially I didn’t understand this part but later googled to check about onchange event, found reference under https://www.w3schools.com/jsref/event_onchange.asp
Hope I’m not wrong here

Thanks again for your valuable guidance from last few days.

#11

I think it might be a bit complex if you are just starting out. I’m sure you can learn a bunch by reading and playing around with the code. I wouldn’t say trying to learn from it is a bad idea. But there is a lot of code coupling going on and the code will be hard to follow without a pretty good understanding of the MVC design pattern. If you want to learn MVC it’s likely a good project to dig into.

I wouldn’t abandon the idea of learning by reading the code just know it’s using a specific style and I think you might get a bit bogged down in some very specific details of the design pattern.

From MVC to Modern Web Frameworks
https://hackernoon.com/from-mvc-to-modern-web-frameworks-8067ec9dee65

1 Like
#12

Thanks for your valuable inputs

#13

I’m using VSCode 1.36.1 along with Live Server Extension 5.6.1 as below

  1. choose index.html and right click Open with live server
  2. Later copy-pasting the local url in chrome incognito mode
  3. With chrome dev tool, have put break point and doing debugging
  4. With this setup, I’m not at all using VSCode for debugging at all

Coming from Java ( IntelliJ IDEA ) background; I’m finding weird doing debugging in chrome dev tool itself.

Am I using VSCode in wrong way ? Is there way to use VSCode debugging and see live changes or other good practices ?

Thanks in advance.

#14

You can do debugging inside VS Code. You may have to install the Debugger for Chrome extension (I can’t remember if it is installed by default now or not).

  1. Open the Debug panel (Ctrl + Shift + D).

  2. At the top of the panel click the cog icon. Select “Chrome” from the “Select Environment” drop-down that pops up.

  3. In the launch.json config change the url to "url": "localhost:5500"

  4. Start the Live Server, go back to the Debug panel and click the green arrow to start the debugger (Or just press F5).

For some reason I don’t really do debugging inside VS Code, not really sure why but I just like using the browser (probably just a habit).

1 Like
#15

For some reason I don’t really do debugging inside VS Code, not really sure why but I just like using the browser (probably just a habit).

:sunglasses:

I wonder what were FE dev doing without Chrome :slight_smile:

TAZ for inputs

Regards,
Vikram

#16

No problem, happy to help.

Well, old habits die hard as they say. I’m sure there is nothing wrong with using Firefox, for some things like CSS it’s actually better but I just keep going back to Chrome. Firefox Developer Tools has some really cool features which I should be using more. Like Track changes, Shape Path Editor, the CSS Grid Inspector and Flexbox Inspector are both great.

In the last Potluck of the syntax.fm podcast Scott and Wes were talking about this as well.

1 Like