Example using TroopJS #120

mikaelkaron · 2012-03-22T06:56:22Z

A TodoMVC example using TroopJS

sindresorhus · 2012-03-22T09:13:26Z

Thanks for the contribution :D

Can you explain what TroopJS is? Couldn't find any info on it.

mikaelkaron · 2012-03-22T09:40:18Z

Just another front-end framework. Aims to package current javascript technologies and 'bind' them together with minimal effort for the developer.

jQuery for DOM operations
RequireJS for modularity
ComposeJS for object composition
Has.js for feature detection

On top of this we've added a pubsub system, templating, weaving (connect widget to dom) and auto wiring.

The TroopJS moto goes something like

Provide as little as possible to do as much as possible

The name is taken from what you'd call a group of monkeys (troop) as originally it was targeted at an 'embedded' environment using spidermonkey.

We're using todomvc as the onboarding project for new developers, so there's a step-by-step guide (in progress) that explains how we created this app.

mikaelkaron · 2012-03-23T10:54:42Z

simplified the file structure quite a bit and provided an example using troopjs-bundle instead of individual modules.

mikaelkaron · 2012-04-12T04:06:52Z

Not really sure what else I can do to get this merged. Perhaps use the new template from #126 when its ready?

sindresorhus · 2012-04-12T08:18:44Z

Sorry for the delay. I've been on holiday.

It looks pretty good :)

There are some things I'd appreciate if you could fix:

Use the latest template.
As you've seen, I just landed a new UI. The HTML changes are minimal: You can see the changes in the diff here.
Make sure you follow the newly released App Specification.
Please let me know if anything is unclear or could be improved. It's not field tested yet. The spine.js example, not yet landed, can be used as a reference.
This project uses tab indention and follows the Idiomatic guide to writing JavaScript. Please ensure your code follows this closely. If something is unclear, follow the existing style. Use double-quotes in HTML and single-quotes in JS and CSS.

I'll review it more thoroughly when the above changes are implemented :D

Some comments to your excellent TroopJS Todo app intro:

Ours is located in js/lib. As none of the other folders (css, js and img) were pluralized, we thought that it was silly to do it here.

I agree, changed in master.

We do this, but we felt it was natural to do the same when the user removes focus from the input box.

This is specified in the new App Specification.

Since the specification does not define what this checkbox should do when only some of the tasks are marked as completed, we've added an indeterminate state that covers this usecase.

Also in the App Specification.

Do let us know if you have any more feedback or if something is unclear :D

sindresorhus · 2012-04-30T00:46:21Z

@mikaelkaron Any updates?

mikaelkaron · 2012-05-02T06:30:34Z

hacking along on 0.0.2 ;) I'll make an updated todomvc as soon as I have that (using the new UI)

addyosmani · 2012-05-04T22:54:23Z

@mikaelkaron Thanks for the update! Do you think 0.0.2 might be ready sometime over the next few weeks? Im trying to establish whether you'll have time to bring the TroopJS app in line with specs for our next major version (probably aiming to go out in a month). If you do, I'll mark the target release for this as 1.0 otherwise we can do it in 1.1 (probably 1..a few months after).

We appreciate your contributions!

mikaelkaron · 2012-05-07T02:43:49Z

I'll try to land 0.0.2 ASAP, so please target this for 1.0

addyosmani · 2012-05-07T10:26:51Z

Marked accordingly. Let us know if you need any help :)

sindresorhus · 2012-05-27T15:42:12Z

@mikaelkaron Any updates? The 1.0 release is close, and we need to get those apps that are going into the release merged.

mikaelkaron · 2012-05-29T02:59:05Z

I've been a bit slow over here. I'll take a stab at it today!

mikaelkaron · 2012-05-29T10:53:47Z

landed a bunch of stuff in my troopjs-todos repo (what I eventually 'copy' to todomvc). basically implemented all the requirements except routing. will take a stab at that tomorrow.

mikaelkaron · 2012-05-30T06:40:21Z

a bit of reset and a commit later. done.

sindresorhus · 2012-05-30T08:58:07Z

Sign in to view

+
+.filter-active .completed,
+.filter-completed .active {
+	display: none;


CSS shouldn't be tied to the filters functionality.

Instead you should just hide/show the items directly.

just trying to save myself some coding for when you have a filter applied and add/remove items. I'll take a look at if it can be done without CSS.

sindresorhus · 2012-05-30T09:02:00Z

Sign in to view

@@ -0,0 +1,24 @@
+define( [ "troopjs-core/component/widget" ], function CreateModule(Widget) {
+	var RE = /^\s+|\s+$/;
+	var ENTER = 13;


sindresorhus · 2012-05-30T09:02:41Z

Sign in to view

+
+			switch($event.keyCode) {
+			case ENTER:
+				value = $element.val().replace(RE, EMPTY);


Don't need regex for this: val().trim() instead

does that trim of tabs etc?

Yes. https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/Trim

right. I was looking at $.trim. I'll update

sindresorhus · 2012-05-30T10:01:51Z

Sign in to view

+define( [ "troopjs-core/component/widget" ], function CreateModule(Widget) {
+	var RE = /^\s+|\s+$/;
+	var ENTER = 13;
+	var EMPTY = "";


Unnecessary constant, just compare against an empty string directly.

sindresorhus · 2012-05-30T10:04:11Z

Sign in to view

@@ -0,0 +1,20 @@
+define( [ "troopjs-core/component/widget", "jquery" ], function FiltersModule(Widget, $) {
+
+	var SELECTED = "selected";


Don't need a constant here either.

sindresorhus · 2012-05-30T10:06:12Z

Sign in to view

+var item = data.item;
+var completed = item.completed;
+%>
+<li class="<%= (completed ? 'completed' : 'active') %>">


-> <li class="<%= (completed ? 'completed' : '') %>">

sindresorhus · 2012-05-30T10:06:51Z

Sign in to view

+define( [ "troopjs-core/component/widget", "troopjs-core/store/local", "jquery", "template!./item.html" ], function ListModule(Widget, store, $, template) {
+	var RE = /^\s+|\s+$/;
+	var ENTER = 13;
+	var EMPTY = "";


Same as earlier comments

sindresorhus · 2012-05-30T10:08:05Z

Sign in to view

+		var self = this;
+
+		// Defer initialization
+		$.Deferred(function deferredInit(dfdInit) {


Use something like deferInit, instead of the ambiguous dfdInit, same with the below.

sindresorhus · 2012-05-30T10:09:58Z

Sign in to view

+			case "/completed":
+				$element
+					.removeClass(FILTER_ACTIVE)
+					.addClass(FILTER_COMPLETED);


.toggeClass( FILTER_COMPLETED );

sindresorhus · 2012-05-30T10:11:33Z

Sign in to view

+			// Update UI
+			$($event.target)
+				.closest("li")
+				.slideUp("slow", function hidden() {


Don't animate

sindresorhus · 2012-05-30T10:12:30Z

Sign in to view

+			// Get INPUT and disable
+			var $input = $li
+				.find("input")
+				.prop(DISABLED, true);


Why do you disable the input? it's only visible when in editing mode anyway.

right now we know that localstorage is fast, so there's no need to disable the UI during write. But I'd like to have it there simply if one would try to implement a remote storage module, in which case it would disable the input box during write callback.

Ok, sure, I agree ;)

sindresorhus · 2012-05-30T10:13:04Z

Sign in to view

+			var $target = $($event.target);
+			var title = $target
+				.val()
+				.replace(RE, EMPTY);


Same as before val().trim()

sindresorhus · 2012-05-30T10:16:19Z

Thanks for finishing this. I have to say, I like to good use of $.Deferred ;)

I've done a review of your app and have some comments in addition to the inline ones:

Move it to the labs/architecture-examples folder. Remember to update all the references in the HTML.

Develop in a topic branch (not master) and submit against the labs folder in the master branch

Counter should say e.g: 2 items left
When in editing mode and remove the todo contents and hit enter, i get this error msg:

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8

Drop the animation stuff
Use the jQuery in the assets folder
Minified:

Use minified version of third-party code and put it in the lib folder.

Too much use of unnessecary constants

mikaelkaron · 2012-05-30T14:49:23Z

I'll get on the CSS update tomorrow. Do you want me to make a topic branch for all of this as per:

Develop in a topic branch (not master) and submit against the labs folder in the master branch

or are you ok with this pull request as it is (besides the outstanding CSS fix)?

I was also unable to reproduce your error, do you still have it?

sindresorhus · 2012-05-30T15:07:29Z

I'll get on the CSS update tomorrow. Do you want me to make a topic branch for all of this as per:

No not necessary, but keep it in mind for your next pull request. It makes your life a lot easier if you've ever need to submit multiple pull requests to the same project.

I've just added require.js to our assets folder. Can you use that instead? (Note that it's Require 2.0)

I was also unable to reproduce your error, do you still have it?

Yes, I still have that issue, Chrome 19 Mac Lion:

Steps: Double-click the item, remove all the text, hit enter

Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 jquery.min.js:4
f.fn.extend.remove jquery.min.js:4
onDelete list.js:139
b troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
q troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
r troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
f.each.f.fn.(anonymous function) jquery.min.js:3
onCommitFocusOut list.js:208
b troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
q troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
r troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
f.each.f.fn.(anonymous function) jquery.min.js:3
onCommitKeyUp list.js:194
b troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
q troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3
f.event.trigger jquery.min.js:3
f.fn.extend.trigger jquery.min.js:3
e.extend.each jquery.min.js:2
e.fn.e.each jquery.min.js:2
f.fn.extend.trigger jquery.min.js:3
r troopjs-bundle.js:11
f.event.dispatch jquery.min.js:3
f.event.add.h.handle.i jquery.min.js:3

Other than that, it looks good :)

mikaelkaron · 2012-05-31T01:52:34Z

Ok, I'm able to reproduce in chrome. I'll take a look at that now.

sindresorhus · 2012-05-31T09:53:30Z

@addyosmani Actually 2.0 has been released.

addyosmani · 2012-05-31T09:54:43Z

@sindresorhus Oh wow! That I did not know. He must have had a few late nights to wrap it all up so quickly :)

use `.trim()` instead of regexp remove unused RE

Remover included RequireJS (load from assets).

mikaelkaron · 2012-06-01T08:08:17Z

There. Fixed what needed to be fixed to be RequireJS 2.0 'compatible'.

sindresorhus · 2012-06-01T08:13:58Z

Cool, just need that error fixed and we're golden ;)

mikaelkaron · 2012-06-01T09:36:00Z

Fixed.

Funny problem there actually, it's jQuery that triggers a simulated focusout event on the containing input as I .remove() the li, thereby re-triggering the whole chain (I click() a corresponding .destroy when the input is empty and we lose focus)

sindresorhus · 2012-06-01T09:53:28Z

Right, when I think about it I think we had another app with the same problem, turned out to actually be a Chrome bug.

Landed. Thanks for this addition to our collection ;)

mikaelkaron · 2012-06-01T10:28:37Z

Well, I was only able to reproduce in chrome, and the underlying error is that jQuery will try to remove a node that does not exist anymore. I guess it's possible that this is the same problem (were you removing an element that had input descendants?).

sindresorhus · 2012-06-01T10:43:53Z

Can't remember, but here is the Chromium bug: http://code.google.com/p/chromium/issues/detail?id=104397

And here's the jQuery bug: http://bugs.jquery.com/ticket/11663

mikaelkaron · 2012-06-01T10:59:29Z

looks like the same to me. nice to know ppl are aware about it.

sindresorhus · 2012-06-01T11:51:06Z

But unfortunately not a lot of activity on the Chrome ticket...

sindresorhus reviewed May 30, 2012
View changes

architecture-examples/troopjs/js/widget/create.js Outdated

@@ -0,0 +1,24 @@

define( [ "troopjs-core/component/widget" ], function CreateModule(Widget) {

var RE = /^\s+|\s+$/;

var ENTER = 13;

This comment has been minimized.

Sign in to view

sindresorhus May 30, 2012
Member

ENTER_KEY

sindresorhus reviewed May 30, 2012
View changes

architecture-examples/troopjs/js/widget/list.js Outdated

case "/completed":

$element

.removeClass(FILTER_ACTIVE)

.addClass(FILTER_COMPLETED);

This comment has been minimized.

Sign in to view

sindresorhus May 30, 2012
Member

.toggeClass( FILTER_COMPLETED );

sindresorhus reviewed May 30, 2012
View changes

architecture-examples/troopjs/js/widget/list.js Outdated

// Update UI

$($event.target)

.closest("li")

.slideUp("slow", function hidden() {

This comment has been minimized.

Sign in to view

sindresorhus May 30, 2012
Member

Don't animate

sindresorhus reviewed May 30, 2012
View changes

architecture-examples/troopjs/js/widget/list.js Outdated

var $target = $($event.target);

var title = $target

.val()

.replace(RE, EMPTY);

This comment has been minimized.

Sign in to view

sindresorhus May 30, 2012
Member

Same as before val().trim()

mikaelkaron added 11 commits May 30, 2012

TodoMVC demo application using TroopJS

245da36

`ENTER` -> `ENTER_KEY`

d1bad10

remove `EMPTY` constant

c9d5a8f

use `.trim()` instead of regexp remove unused RE

`dfd` -> `defer`

6cbf9fc

removed constants

2df979e

don't animate

974ae80

add 'left' to end of counter

56e25fe

use jquery from assets

c22826a

use minified version of troopjs-bundle

15aa048

move to labs

44ed919

Bit the bullet. RequireJS 2.0 compatible application.

37a4b5e

Remover included RequireJS (load from assets).

prevent simulated events to trigger

dca5107

sindresorhus closed this in 47c8ab0 Jun 1, 2012

mikaelkaron mentioned this pull request May 29, 2013

Updated project to TroopJS 2.x #575

Merged

gustaff-weldon pushed a commit to gustaff-weldon/todomvc that referenced this pull request Dec 23, 2013

Close tastejsGH-120: Example using TroopJS.

e9c365d

dichen001 mentioned this pull request Jun 28, 2016

Summary of the 20 issues in Herbsleb's 2014 FSE paper. dichen001/Paper-Reading#6

Open

This was referenced Jul 9, 2020

[Snyk] Fix for 1 vulnerabilities jonathan-fielding/todomvc#103

Open

[Snyk] Fix for 1 vulnerabilities jonathan-fielding/todomvc#106

Open

This was referenced Aug 16, 2020

[Snyk] Fix for 1 vulnerabilities jonathan-fielding/todomvc#112

Open

[Snyk] Fix for 1 vulnerabilities jonathan-fielding/todomvc#115

Open

		@@ -0,0 +1,20 @@
		define( [ "troopjs-core/component/widget", "jquery" ], function FiltersModule(Widget, $) {

		var SELECTED = "selected";

tastejs / todomvc

Example using TroopJS #120

Example using TroopJS #120

Conversation

mikaelkaron commented Mar 22, 2012

sindresorhus commented Mar 22, 2012

mikaelkaron commented Mar 22, 2012

mikaelkaron commented Mar 23, 2012

mikaelkaron commented Apr 12, 2012

sindresorhus commented Apr 12, 2012

sindresorhus commented Apr 30, 2012

mikaelkaron commented May 2, 2012

addyosmani commented May 4, 2012

mikaelkaron commented May 7, 2012

addyosmani commented May 7, 2012

sindresorhus commented May 27, 2012

mikaelkaron commented May 29, 2012

mikaelkaron commented May 29, 2012

mikaelkaron commented May 30, 2012

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

mikaelkaron May 30, 2012 Author Contributor

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

mikaelkaron May 30, 2012 Author Contributor

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

mikaelkaron May 30, 2012 Author Contributor

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

mikaelkaron May 30, 2012 Author Contributor

This comment has been minimized.

sindresorhus May 30, 2012 Member

This comment has been minimized.

sindresorhus May 30, 2012 Member

sindresorhus commented May 30, 2012

mikaelkaron commented May 30, 2012

sindresorhus commented May 30, 2012

mikaelkaron commented May 31, 2012

sindresorhus commented May 31, 2012

addyosmani commented May 31, 2012

mikaelkaron commented Jun 1, 2012

sindresorhus commented Jun 1, 2012

mikaelkaron commented Jun 1, 2012

sindresorhus commented Jun 1, 2012

mikaelkaron commented Jun 1, 2012

sindresorhus commented Jun 1, 2012

mikaelkaron commented Jun 1, 2012

sindresorhus commented Jun 1, 2012

sindresorhus May 30, 2012
Member

mikaelkaron May 30, 2012
Author Contributor

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

mikaelkaron May 30, 2012
Author Contributor

sindresorhus May 30, 2012
Member

mikaelkaron May 30, 2012
Author Contributor

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member

mikaelkaron May 30, 2012
Author Contributor

sindresorhus May 30, 2012
Member

sindresorhus May 30, 2012
Member