update (Atma.js) rewrite the app #1337

Merged
merged 1 commit into from Sep 12, 2015

Conversation

Projects
None yet
4 participants
@tenbits
Contributor

tenbits commented Jun 11, 2015

Hello Team,

updating here the Atma.js example with latest dependencies and features.

Thank you,
Alex

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 11, 2015

Member

Thanks for doing this!

Member

arthurvr commented Jun 11, 2015

Thanks for doing this!

examples/atmajs/index.html
- 2. Hint: Viewing *.mask files enable javascript or less syntax highlighting in your IDE
+ 1. Read the readme.md - you will get basic information about the libraries
+ 2. Hint: Use Sublime/Atom plugins to highlight the *.mask syntax
+ , view them on github or enable Javascript/Less syntax for the extensions

This comment has been minimized.

@arthurvr

arthurvr Jun 11, 2015

Member

The positioning of this comma looks a little weird. Let's just keep comments as we'd write all-day sentences.

@arthurvr

arthurvr Jun 11, 2015

Member

The positioning of this comma looks a little weird. Let's just keep comments as we'd write all-day sentences.

examples/atmajs/js/Controls/Filter.mask
+ '~[val]'
+ }
+ }
+}

This comment has been minimized.

@arthurvr

arthurvr Jun 11, 2015

Member

this and many other files miss a newline

@arthurvr

arthurvr Jun 11, 2015

Member

this and many other files miss a newline

examples/atmajs/js/Controls/Filter.mask
+ var filters = {
+ '' : 'All',
+ 'active': 'Active',
+ 'completed': 'Completed'

This comment has been minimized.

@arthurvr

arthurvr Jun 11, 2015

Member

Never wrote any mask but are quoted keys a must here?

@arthurvr

arthurvr Jun 11, 2015

Member

Never wrote any mask but are quoted keys a must here?

examples/atmajs/js/Todos/TodoTask.js
'use strict';
-
+

This comment has been minimized.

@arthurvr

arthurvr Jun 11, 2015

Member

Remove this trailing whitespace :)

@arthurvr

arthurvr Jun 11, 2015

Member

Remove this trailing whitespace :)

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 11, 2015

Contributor

Hey Arthur, thanks for the feedback, and sorry, my bad - unit tests have run upon the PR, but the jscs have forgotten. Hopefully, haven't missed anything now.

Cheers,
Alex

ps. The quotes in mask syntax, like in js object literals, are not required.

Contributor

tenbits commented Jun 11, 2015

Hey Arthur, thanks for the feedback, and sorry, my bad - unit tests have run upon the PR, but the jscs have forgotten. Hopefully, haven't missed anything now.

Cheers,
Alex

ps. The quotes in mask syntax, like in js object literals, are not required.

examples/atmajs/index.html
-->
+
+ <script type="text/mask" data-run="auto" >

This comment has been minimized.

@arthurvr

arthurvr Jun 11, 2015

Member

Seems like there's a space too much before >.

@arthurvr

arthurvr Jun 11, 2015

Member

Seems like there's a space too much before >.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 11, 2015

Contributor

@arthurvr, thank you for your comments. The style errors are gone, but it seems, export CHROME_BIN=chromium-browser is missed in .travis.yml

Contributor

tenbits commented Jun 11, 2015

@arthurvr, thank you for your comments. The style errors are gone, but it seems, export CHROME_BIN=chromium-browser is missed in .travis.yml

examples/atmajs/index.html
- 1. Read readme.md - you will get basic information about the libraries
- 2. Hint: Viewing *.mask files enable javascript or less syntax highlighting in your IDE
+ 1. Read the readme.md - you will get basic information about the libraries
+ 2. Hint: Use Sublime/Atom plugins to highlight the *.mask syntax,

This comment has been minimized.

@arthurvr

arthurvr Jun 13, 2015

Member

Use Sublime/Atom plugins to highlight the *.mask syntax,

Seems like more somthing for the readme than for comments here. In fact I think this whole comment block would fit better in the readme.

@arthurvr

arthurvr Jun 13, 2015

Member

Use Sublime/Atom plugins to highlight the *.mask syntax,

Seems like more somthing for the readme than for comments here. In fact I think this whole comment block would fit better in the readme.

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 13, 2015

Member

@tenbits you shouldn't care about the CI for now. Just run the tests locally for the time being. I just ran them locally and seems like everything passes 🍰

The style errors are gone,

Seems like there are still some missing newlines.

Member

arthurvr commented Jun 13, 2015

@tenbits you shouldn't care about the CI for now. Just run the tests locally for the time being. I just ran them locally and seems like everything passes 🍰

The style errors are gone,

Seems like there are still some missing newlines.

examples/atmajs/package.json
- "todomvc-app-css": "^1.0.0"
+ "maskjs": "^0.51.26",
+ "ruta": "^0.1.16",
+ "todomvc-app-css": "^1.0.0",

This comment has been minimized.

@arthurvr

arthurvr Jun 13, 2015

Member

Now that we're rewriting anyways, mind switching to 2.0? You'll need to update from ids to classes. It will make all tests fail but don't worry, we're on it. Thanks!

@arthurvr

arthurvr Jun 13, 2015

Member

Now that we're rewriting anyways, mind switching to 2.0? You'll need to update from ids to classes. It will make all tests fail but don't worry, we're on it. Thanks!

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 13, 2015

Member

Any community member(s) that want to review this? We want to make sure it follows best practices but I'm not the right one to review the code myself.

Member

arthurvr commented Jun 13, 2015

Any community member(s) that want to review this? We want to make sure it follows best practices but I'm not the right one to review the code myself.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 14, 2015

Contributor

Arthur, now the application uses todomvc-app-css@2.0.1. Also I have moved some of the index.html comments to the readme. The application was developed with the frameworks authors, so it should represent best practicies for the last versions.

Contributor

tenbits commented Jun 14, 2015

Arthur, now the application uses todomvc-app-css@2.0.1. Also I have moved some of the index.html comments to the readme. The application was developed with the frameworks authors, so it should represent best practicies for the last versions.

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 14, 2015

Member

Should this example now move to the compile-to-js section?

Member

arthurvr commented Jun 14, 2015

Should this example now move to the compile-to-js section?

examples/atmajs/readme.md
@@ -109,10 +116,9 @@ navigate to ``` http://localhost:5777/ ```
### Build
-To build the application for release, run ``` $ atma build --file index.html --output release/```. We provide also a compiled version in 'build/' directory, so you
-can see how the application looks like for production.
+To build the application for release, run ``` $ atma build --file index.html --output release/```.

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

Use a single backtick for inline code.

@arthurvr

arthurvr Jun 14, 2015

Member

Use a single backtick for inline code.

examples/atmajs/readme.md
```bash
-$ npm install -g atma # install atma.toolkit
+# install atma.toolkit
+$ npm install -g atma

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

mind expanding this to --global?

@arthurvr

arthurvr Jun 14, 2015

Member

mind expanding this to --global?

Here are some links you may find helpful:
- [Get Started](http://atmajs.com/get/github)
- [Mask Markup Live Test](http://atmajs.com/mask-try)
+- Mask Syntax Plugins
+ - [Sublime](https://github.com/tenbits/sublime-mask)
+ - [Atom](https://github.com/tenbits/package-atom)

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

Only Sublime and Atom? Let's add plugins for other editors here too.

@arthurvr

arthurvr Jun 14, 2015

Member

Only Sublime and Atom? Let's add plugins for other editors here too.

This comment has been minimized.

@tenbits

tenbits Jun 14, 2015

Contributor

As for now, no more other plugins exist. For WebStorm and VisualStudio are on the way.

@tenbits

tenbits Jun 14, 2015

Contributor

As for now, no more other plugins exist. For WebStorm and VisualStudio are on the way.

examples/atmajs/readme.md
+— Simplifies unit-test creation and runs them in node.js or in browser-slave(s) environments. All the Atma.js libraries are tested using the µTest.
+
+##### DomTest
+[github](https://github.com/atmajs/domtest)

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

GitHub

@arthurvr

arthurvr Jun 14, 2015

Member

GitHub

examples/atmajs/js/app.mask
+import * as AppController from 'App.js';
+import TodoList from 'Todos/TodoList';
+import Filter from 'Controls/Filter';
+import TodoInput from 'Controls/TodoInput';

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

this alignment is inconsistent

@arthurvr

arthurvr Jun 14, 2015

Member

this alignment is inconsistent

examples/atmajs/package.json
+ "maskjs": "^0.51.26",
+ "ruta": "^0.1.16",
+ "todomvc-app-css": "^2.0.1",
+ "todomvc-common": "^1.0.2"

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

There's no deal with bumping these for a patch release. Semver handles that for us so I'd argue that it's unnecessary noise. Anyways, no big deals.

@arthurvr

arthurvr Jun 14, 2015

Member

There's no deal with bumping these for a patch release. Semver handles that for us so I'd argue that it's unnecessary noise. Anyways, no big deals.

This comment has been minimized.

@tenbits

tenbits Jun 14, 2015

Contributor

If this is not a big deal, then I would leave it as is. As I've just installed latest modules from npm, and npm saved the latest versions.

@tenbits

tenbits Jun 14, 2015

Contributor

If this is not a big deal, then I would leave it as is. As I've just installed latest modules from npm, and npm saved the latest versions.

This comment has been minimized.

@arthurvr

arthurvr Jun 15, 2015

Member

@tenbits happy to leave as is; though please don't do that for patch versions anymore as it's only unnecessary noise.

As I've just installed latest modules from npm, and npm saved the latest versions.

If you just run npm install it doesn't modify this file :)

@arthurvr

arthurvr Jun 15, 2015

Member

@tenbits happy to leave as is; though please don't do that for patch versions anymore as it's only unnecessary noise.

As I've just installed latest modules from npm, and npm saved the latest versions.

If you just run npm install it doesn't modify this file :)

This comment has been minimized.

@tenbits

tenbits Jun 15, 2015

Contributor

For instance, assume my intent is to update the todomvc-app-css to the last version. In this case, I usually run npm install todomvc-app-css@latest --save: and it modifies the file. And am I understanding you right, your suggestion is: to set the versions in package.json manually to {major}.{minor}.0 and afterwards just to run npm install?

@tenbits

tenbits Jun 15, 2015

Contributor

For instance, assume my intent is to update the todomvc-app-css to the last version. In this case, I usually run npm install todomvc-app-css@latest --save: and it modifies the file. And am I understanding you right, your suggestion is: to set the versions in package.json manually to {major}.{minor}.0 and afterwards just to run npm install?

examples/atmajs/js/app.mask
}
}
}
+ footer .info {
+ p { 'Double-click to edit a todo' }
+ p { 'Created by ' a href='http://github.com/tenbits' > 'tenbits' }

This comment has been minimized.

@arthurvr

arthurvr Jun 14, 2015

Member

tenbits

please use your full name

@arthurvr

arthurvr Jun 14, 2015

Member

tenbits

please use your full name

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 14, 2015

Member

Thanks for your hard work on this!

Member

arthurvr commented Jun 14, 2015

Thanks for your hard work on this!

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 14, 2015

Contributor

Should this example now move to the compile-to-js section?

I wouldn't do this, as mask is still the template engine, which is parsed at runtime to the MaskDOM. One can use also html syntax to declare the template. The build process only combines the templates to one resource.

Use a single backtick for inline code.
mind expanding this to --global?
GitHub
this alignment is inconsistent
please use your full name

Done

Thanks for your hard work on this!

And I take off my hat to you.

Contributor

tenbits commented Jun 14, 2015

Should this example now move to the compile-to-js section?

I wouldn't do this, as mask is still the template engine, which is parsed at runtime to the MaskDOM. One can use also html syntax to declare the template. The build process only combines the templates to one resource.

Use a single backtick for inline code.
mind expanding this to --global?
GitHub
this alignment is inconsistent
please use your full name

Done

Thanks for your hard work on this!

And I take off my hat to you.

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jun 14, 2015

Member

@tastejs/todomvc Anyone of us who wants to take an extra look? If not I'm going to merge this one shortly.

Member

arthurvr commented Jun 14, 2015

@tastejs/todomvc Anyone of us who wants to take an extra look? If not I'm going to merge this one shortly.

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jun 17, 2015

Member

This has a memory leak that is creating detached DOM nodes that we should try and fix before we merge

Steps to reproduce
  • start timeline profiler
    • add three todos
    • delete three todos
    • (repeat above 2 more times)
  • force GC
  • stop timeline profiler

screen shot 2015-06-17 at 10 19 30 am
screen shot 2015-06-17 at 10 18 57 am

Member

samccone commented Jun 17, 2015

This has a memory leak that is creating detached DOM nodes that we should try and fix before we merge

Steps to reproduce
  • start timeline profiler
    • add three todos
    • delete three todos
    • (repeat above 2 more times)
  • force GC
  • stop timeline profiler

screen shot 2015-06-17 at 10 19 30 am
screen shot 2015-06-17 at 10 18 57 am

@passy

This comment has been minimized.

Show comment
Hide comment
@passy

passy Jun 17, 2015

Member

Nice, @samccone!

Member

passy commented Jun 17, 2015

Nice, @samccone!

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 17, 2015

Contributor

Sam, nice catch! I'll fix it asap.

Contributor

tenbits commented Jun 17, 2015

Sam, nice catch! I'll fix it asap.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 18, 2015

Contributor

@samccone, here some of my investigations:

  1. Detached Nodes

    These nodes are seems to be just the cache of the last removed Todo. After you create a new Todo, the detached nodes will gone.

  2. Memory Timeline

    This one is much more interesting. Will try to explain: after some manuall checks, I've created the repo to reproduce and to test the behaviour: todomvc-memcheck. The test asynchronously creates a todo, removes it and repeats the steps 50 times. And as a result nodes counter shows always 100 nodes more after the run, so 2 nodes for a loop. This was actually strange for me, as the heap comparison before the run and after the run showed nothing strange regarding nodes. Then I tried angularjs demo, and it also has this "100 nodes" difference. Actually I have found the reason, but I cann't beleave myself: if you change the type of the .toggle input of a task to the "text", or just removes the checkbox from the template, then GC properly cleans nodes after the run. It works same for atmajs and angularjs; haven't tried other demos.
    I have already tried to remove all the styles, nothing helps. If you add one more <input type=checkbox> to the tasks template, you receive 200 nodes diff after the run. I am totally out of ideas. Will try tomorrow something else. Any suggestions are highly appreciated.

Contributor

tenbits commented Jun 18, 2015

@samccone, here some of my investigations:

  1. Detached Nodes

    These nodes are seems to be just the cache of the last removed Todo. After you create a new Todo, the detached nodes will gone.

  2. Memory Timeline

    This one is much more interesting. Will try to explain: after some manuall checks, I've created the repo to reproduce and to test the behaviour: todomvc-memcheck. The test asynchronously creates a todo, removes it and repeats the steps 50 times. And as a result nodes counter shows always 100 nodes more after the run, so 2 nodes for a loop. This was actually strange for me, as the heap comparison before the run and after the run showed nothing strange regarding nodes. Then I tried angularjs demo, and it also has this "100 nodes" difference. Actually I have found the reason, but I cann't beleave myself: if you change the type of the .toggle input of a task to the "text", or just removes the checkbox from the template, then GC properly cleans nodes after the run. It works same for atmajs and angularjs; haven't tried other demos.
    I have already tried to remove all the styles, nothing helps. If you add one more <input type=checkbox> to the tasks template, you receive 200 nodes diff after the run. I am totally out of ideas. Will try tomorrow something else. Any suggestions are highly appreciated.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 19, 2015

Contributor

@samccone ,

  1. It is really the chromes (43.0) issue. The input[type=checkbox], input[type=radio] elements are not correctly cleaned from the counter. I was about to report a bug, but the problem is fixed in chrome canary 45.0
    The screens of the same test runs:

Chrome 43
chrome_43 0
Chrome Canary 45
canary_45 0

You can even test this simple page.

<!doctype html>
<html>
<body>
    <input type='checkbox' />
    <button>Remove</button>
    <script type="text/javascript">
        document.body.querySelector('button').addEventListener('click', function(){
            var input = document.body.querySelector('input');
            input.parentNode.removeChild(input);
        }, false);
    </script>
</body>
</html>

After the button click the nodes counter should be decreased, but in Chrome 43 it is not the case.

Contributor

tenbits commented Jun 19, 2015

@samccone ,

  1. It is really the chromes (43.0) issue. The input[type=checkbox], input[type=radio] elements are not correctly cleaned from the counter. I was about to report a bug, but the problem is fixed in chrome canary 45.0
    The screens of the same test runs:

Chrome 43
chrome_43 0
Chrome Canary 45
canary_45 0

You can even test this simple page.

<!doctype html>
<html>
<body>
    <input type='checkbox' />
    <button>Remove</button>
    <script type="text/javascript">
        document.body.querySelector('button').addEventListener('click', function(){
            var input = document.body.querySelector('input');
            input.parentNode.removeChild(input);
        }, false);
    </script>
</body>
</html>

After the button click the nodes counter should be decreased, but in Chrome 43 it is not the case.

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jun 19, 2015

Member

Hey @tenbits thanks for the amazing research, well that is pretty much the pits about the input type checkbox and radio

So I redid my tests in chrome 45, plus did some new ones.

It seems like the listeners that looked like they were leaking are now cleaned out:

screen shot 2015-06-19 at 9 19 02 am

However there are still nodes sticking around 🐵 ! Well lets go ahead and dig in to see if we can figure out why.

Your statement got me thinking

These nodes are seems to be just the cache of the last removed Todo. After you create a new Todo, the detached nodes will gone.

I ended up taking a snapshot (after forcing a GC), running my "test" and then forcing another GC and taking another snapshot. From there I compared the newest snapshot to the previous. This allowed me to see find new nodes that were leaking during the test process.

screen shot 2015-06-19 at 9 24 12 am

Based on these results it looks like jmask is holding on to some DOM node refs. (causing the growth)

screen shot 2015-06-19 at 9 45 55 am
screen shot 2015-06-19 at 9 46 04 am


What do you think? I am not familier with how jmask is supposed to work, or what its purpose is, but on the surface it does seem slightly questionable as to its behavior.

Member

samccone commented Jun 19, 2015

Hey @tenbits thanks for the amazing research, well that is pretty much the pits about the input type checkbox and radio

So I redid my tests in chrome 45, plus did some new ones.

It seems like the listeners that looked like they were leaking are now cleaned out:

screen shot 2015-06-19 at 9 19 02 am

However there are still nodes sticking around 🐵 ! Well lets go ahead and dig in to see if we can figure out why.

Your statement got me thinking

These nodes are seems to be just the cache of the last removed Todo. After you create a new Todo, the detached nodes will gone.

I ended up taking a snapshot (after forcing a GC), running my "test" and then forcing another GC and taking another snapshot. From there I compared the newest snapshot to the previous. This allowed me to see find new nodes that were leaking during the test process.

screen shot 2015-06-19 at 9 24 12 am

Based on these results it looks like jmask is holding on to some DOM node refs. (causing the growth)

screen shot 2015-06-19 at 9 45 55 am
screen shot 2015-06-19 at 9 46 04 am


What do you think? I am not familier with how jmask is supposed to work, or what its purpose is, but on the surface it does seem slightly questionable as to its behavior.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 19, 2015

Contributor

Hi Sam, thanks a lot for helping me with this)

  1. Timeline

    However there are still nodes sticking around

    This can happen if you start the profiler on empty list (and without adding/removing any entries). As mask doesn't render the footer.footer until there is no todos (lazy render). But after you remove the last todo, the footer will be not removed, but will be hidden with display:none instead. Was this the case by you?

  2. Heap snapshots

    Thanks one more time for a such detailed research. And my point was, that if you see extra 7 detached nodes in a snapshot, just try to create a new todo, and make the new snapshot. You shouldnot see any detached nodes then. But I'll look on it one more time asap.

    And one interesting thing: in this application jMask is absolutely not used.

Contributor

tenbits commented Jun 19, 2015

Hi Sam, thanks a lot for helping me with this)

  1. Timeline

    However there are still nodes sticking around

    This can happen if you start the profiler on empty list (and without adding/removing any entries). As mask doesn't render the footer.footer until there is no todos (lazy render). But after you remove the last todo, the footer will be not removed, but will be hidden with display:none instead. Was this the case by you?

  2. Heap snapshots

    Thanks one more time for a such detailed research. And my point was, that if you see extra 7 detached nodes in a snapshot, just try to create a new todo, and make the new snapshot. You shouldnot see any detached nodes then. But I'll look on it one more time asap.

    And one interesting thing: in this application jMask is absolutely not used.

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jun 19, 2015

Member

But after you remove the last todo, the footer will be not removed

Fair point, shall update my process.

If you see extra 7 detached nodes in a snapshot, just try to create a new todo, and make the new snapshot. You shouldnot see any detached nodes then. But I'll look on it one more time asap.

Yeah... I was wondering about this, the thing however is I was forcing a GC before my snapshot which should have cleared them, I followed up with @addyosmani and @paulirish https://twitter.com/addyosmani/status/611899669594177537 just to verify this.

But again, this all might be getting pedantic, I really appreciate your work in investigating this 👏

Member

samccone commented Jun 19, 2015

But after you remove the last todo, the footer will be not removed

Fair point, shall update my process.

If you see extra 7 detached nodes in a snapshot, just try to create a new todo, and make the new snapshot. You shouldnot see any detached nodes then. But I'll look on it one more time asap.

Yeah... I was wondering about this, the thing however is I was forcing a GC before my snapshot which should have cleared them, I followed up with @addyosmani and @paulirish https://twitter.com/addyosmani/status/611899669594177537 just to verify this.

But again, this all might be getting pedantic, I really appreciate your work in investigating this 👏

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 19, 2015

Contributor

The one thing regarding the detached nodes, which dont let me sleep :) :
I run the test script, add/remove a todo 50 times. And see 7 detached nodes (other detached nodes are for the internal use). But these, 7, are produced by a todo item.

snapshot1

Then I manually create one more todo and see the 7 detached nodes to disappear.

snapshot2

Something strange happens somewhere ) I'll look later in details.
Cheers, and thank you once again.

Contributor

tenbits commented Jun 19, 2015

The one thing regarding the detached nodes, which dont let me sleep :) :
I run the test script, add/remove a todo 50 times. And see 7 detached nodes (other detached nodes are for the internal use). But these, 7, are produced by a todo item.

snapshot1

Then I manually create one more todo and see the 7 detached nodes to disappear.

snapshot2

Something strange happens somewhere ) I'll look later in details.
Cheers, and thank you once again.

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jun 19, 2015

Contributor

got

Caught them) Shortly sad: a BinderFactory (Singleton) holds the last binded TextNode. And this TextNode was the part of the detached tree, so after removal of the last Todo, BinderFactory still holds the reference, but after we create a new Todo, the reference is replaced with the new one, and GC now collects the detached DOM tree. There is a little bit complicated binding process, as the rendering should work also in Node.js with further bootstrapping on the client.

Anyway, a patch was applied to the binder library, and now you shouldn't see those detached nodes.

Sam, once again, a HUGE thanks to you for pointing me at this!!

Contributor

tenbits commented Jun 19, 2015

got

Caught them) Shortly sad: a BinderFactory (Singleton) holds the last binded TextNode. And this TextNode was the part of the detached tree, so after removal of the last Todo, BinderFactory still holds the reference, but after we create a new Todo, the reference is replaced with the new one, and GC now collects the detached DOM tree. There is a little bit complicated binding process, as the rendering should work also in Node.js with further bootstrapping on the client.

Anyway, a patch was applied to the binder library, and now you shouldn't see those detached nodes.

Sam, once again, a HUGE thanks to you for pointing me at this!!

examples/atmajs/readme.md
— is not only an url routing via History API or ```hashchange```, but it implements a Route-Value Collection for adding/retrieving any object by the route.
#### Atma.Toolkit
-[github](https://github.com/atmajs/Atma.Toolkit)
+[GitHub](https://github.com/atmajs/Atma.Toolkit)
— command-line tool, which runs unit tests, builds applications, runs node.js ```bash``` scripts, creates static file server with live reload feature, etc.

This comment has been minimized.

@arthurvr

arthurvr Jul 2, 2015

Member

Node.js (capital N). Also only use one backtick for bash.

@arthurvr

arthurvr Jul 2, 2015

Member

Node.js (capital N). Also only use one backtick for bash.

examples/atmajs/readme.md
##### Ruta
-[github](https://github.com/atmajs/Ruta)
+[GitHub](https://github.com/atmajs/Ruta)
— is not only an url routing via History API or ```hashchange```, but it implements a Route-Value Collection for adding/retrieving any object by the route.

This comment has been minimized.

@arthurvr

arthurvr Jul 2, 2015

Member

one backtick for inline code

@arthurvr

arthurvr Jul 2, 2015

Member

one backtick for inline code

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 2, 2015

Contributor

Node.js (capital N). Also only use one backtick for bash
one backtick for inline code

Thanks, Arthur, for helping me with this!

Contributor

tenbits commented Jul 2, 2015

Node.js (capital N). Also only use one backtick for bash
one backtick for inline code

Thanks, Arthur, for helping me with this!

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jul 2, 2015

Member

Thank you!

Member

arthurvr commented Jul 2, 2015

Thank you!

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jul 11, 2015

Member

Can you rebase this branch upon master and run the tests? We recently updated our test suite to work with todomvc-app-css 2.0 😸

Member

arthurvr commented Jul 11, 2015

Can you rebase this branch upon master and run the tests? We recently updated our test suite to work with todomvc-app-css 2.0 😸

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 12, 2015

Contributor

✔️ rebased

Contributor

tenbits commented Jul 12, 2015

✔️ rebased

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jul 13, 2015

Member

Thanks! Looks like tests pass 🎉

Member

arthurvr commented Jul 13, 2015

Thanks! Looks like tests pass 🎉

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jul 13, 2015

Member

going to do one pass of leaky on this then ⛵️

Member

samccone commented Jul 13, 2015

going to do one pass of leaky on this then ⛵️

examples/atmajs/js/Todos/TodoTask.js
-});
+ };
+
+}());

This comment has been minimized.

@arthurvr

arthurvr Jul 13, 2015

Member

})(); for consistency with the app template.

@arthurvr

arthurvr Jul 13, 2015

Member

})(); for consistency with the app template.

examples/atmajs/readme.md
- model agnostic
- components hierarchy
- - better referencing via ```find/closest``` search _in a jquery way)_
+ - better referencing via `find/closest` search _in a jquery way)_

This comment has been minimized.

@arthurvr

arthurvr Jul 13, 2015

Member

jQuery

@arthurvr

arthurvr Jul 13, 2015

Member

jQuery

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jul 13, 2015

Member

oh :(

Looks like we still have a pretty significant leak of listeners

initial snapshot: {"documents":3,"jsEventListeners":13,"jsHeapSizeUsed":6700408,"nodes":203}
end snapshot:     {"documents":3,"jsEventListeners":43,"jsHeapSizeUsed":9005448,"nodes":353}
Member

samccone commented Jul 13, 2015

oh :(

Looks like we still have a pretty significant leak of listeners

initial snapshot: {"documents":3,"jsEventListeners":13,"jsHeapSizeUsed":6700408,"nodes":203}
end snapshot:     {"documents":3,"jsEventListeners":43,"jsHeapSizeUsed":9005448,"nodes":353}
@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 13, 2015

Contributor

Yeap, Sam, after the leaky test run I can confirm the same behaviour 😞 Before last rebase I have removed the jquery dependency, seems something went wrong here. I'll dig into this.

Contributor

tenbits commented Jul 13, 2015

Yeap, Sam, after the leaky test run I can confirm the same behaviour 😞 Before last rebase I have removed the jquery dependency, seems something went wrong here. I'll dig into this.

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jul 13, 2015

Member

ok, thanks so much for your persistence on this front 👏

Member

samccone commented Jul 13, 2015

ok, thanks so much for your persistence on this front 👏

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 13, 2015

Contributor

Sam, may I ask, what Chrome version are you testing upon?
My default Chrome version is 43, and I get the same result as yours, but when I add Chrome Canary Path in https://github.com/samccone/todomvc/blob/sjs/leak/tests/leaks.js#L7 there is no listener leaking:

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36
initial snapshot: {"documents":3,"jsEventListeners":13,"jsHeapSizeUsed":4079668,"nodes":203} 
end snapshot:     {"documents":3,"jsEventListeners":43,"jsHeapSizeUsed":5271932,"nodes":353}

Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.5 Safari/537.36
initial snapshot: {"documents":3,"jsEventListeners":12,"jsHeapSizeUsed":6920560,"nodes":196} 
end snapshot:     {"documents":3,"jsEventListeners":12,"jsHeapSizeUsed":8275360,"nodes":226}

Contributor

tenbits commented Jul 13, 2015

Sam, may I ask, what Chrome version are you testing upon?
My default Chrome version is 43, and I get the same result as yours, but when I add Chrome Canary Path in https://github.com/samccone/todomvc/blob/sjs/leak/tests/leaks.js#L7 there is no listener leaking:

Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.132 Safari/537.36
initial snapshot: {"documents":3,"jsEventListeners":13,"jsHeapSizeUsed":4079668,"nodes":203} 
end snapshot:     {"documents":3,"jsEventListeners":43,"jsHeapSizeUsed":5271932,"nodes":353}

Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.5 Safari/537.36
initial snapshot: {"documents":3,"jsEventListeners":12,"jsHeapSizeUsed":6920560,"nodes":196} 
end snapshot:     {"documents":3,"jsEventListeners":12,"jsHeapSizeUsed":8275360,"nodes":226}

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Jul 13, 2015

Member

i was testing this on 43, but let me run it against canary

Member

samccone commented Jul 13, 2015

i was testing this on 43, but let me run it against canary

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 13, 2015

Contributor

It seems, this is the same issue as before with input[checkbox]. And as the snapshots don't show any leaks, I assume this is only the counter issue, and not the real leaks. I was also wondering, why React shows always constant listeners count, but it turned out, React doesn't bind listeners directly to elements, but uses global document listeners (delegations).

Contributor

tenbits commented Jul 13, 2015

It seems, this is the same issue as before with input[checkbox]. And as the snapshots don't show any leaks, I assume this is only the counter issue, and not the real leaks. I was also wondering, why React shows always constant listeners count, but it turned out, React doesn't bind listeners directly to elements, but uses global document listeners (delegations).

@tenbits

This comment has been minimized.

Show comment
Hide comment
@tenbits

tenbits Jul 14, 2015

Contributor

Thanks Arthur, I have applied the changes.

Contributor

tenbits commented Jul 14, 2015

Thanks Arthur, I have applied the changes.

@samccone

This comment has been minimized.

Show comment
Hide comment
@samccone

samccone Sep 12, 2015

Member

Just ran my latest memory profile iteration over this change set and it looks like we are good to go!

Member

samccone commented Sep 12, 2015

Just ran my latest memory profile iteration over this change set and it looks like we are good to go!

samccone added a commit that referenced this pull request Sep 12, 2015

Merge pull request #1337 from tenbits/atmajs-update
update (Atma.js) rewrite the app

@samccone samccone merged commit 987bc94 into tastejs:master Sep 12, 2015

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment