henrikjoreteg/feather-app

as light as a...

feather-app's Issues

Performance gets worse fast when there is more nodes in DOM

Firstly, I want to thank you for your talk(Pocket-sized JS) and inspiration for less code.

I wanted to check out how this POC performs when there are more nodes in the DOM. The result I came up with is that every ~1500 DOM nodes add ~100ms of lag between clicking the button and seeing DOM updated. That's on my old laptop(1.60GHz, 4GB RAM). On my Samsung galaxy S3 neo it's ~300 extra DOM nodes = +100ms lag.

You can check it out yourself https://github.com/tomaskikutis/feather-app | http://heavy-feather.surge.sh

I agree that we should try to keep the count of DOM nodes to minimum, but at least 2000 nodes shouldn't hurt. Keep in mind the example is just plain hello world, there is not much going on.

What optimizations can you see ?

Path must be a string. Received undefined

I receive this error on npm start.

ERROR in ./~/css-loader!./~/postcss-loader!./~/stylus-loader!./src/styles/main.styl
Module build failed: TypeError: /Users/termosa/Source/feather-app/src/styles/main.styl:3:1
   1| @import './globals/_variables'
   2| @import './globals/document'
   3|
------^

Path must be a string. Received undefined

    at assertPath (path.js:7:11)
    at extname (path.js:1433:5)
    at new SourceMapper (/Users/termosa/Source/feather-app/node_modules/stylus/lib/visitor/sourcemapper.js:41:7)
    at Renderer.render (/Users/termosa/Source/feather-app/node_modules/stylus/lib/renderer.js:94:9)
    at /Users/termosa/Source/feather-app/node_modules/stylus-loader/index.js:149:12
    at tryCatchReject (/Users/termosa/Source/feather-app/node_modules/when/lib/makePromise.js:840:30)
    at runContinuation1 (/Users/termosa/Source/feather-app/node_modules/when/lib/makePromise.js:799:4)
    at Fulfilled.when (/Users/termosa/Source/feather-app/node_modules/when/lib/makePromise.js:590:4)
    at Pending.run (/Users/termosa/Source/feather-app/node_modules/when/lib/makePromise.js:481:13)
    at Scheduler._drain (/Users/termosa/Source/feather-app/node_modules/when/lib/Scheduler.js:62:19)
 @ ./src/styles/main.styl 4:14-168 13:2-17:4 14:20-174

I've found some issues similar to this and they were related to the versions compability.
But I don't have enough time to fix now so I'll keep this issue here.

Use devDependencies

Not really an issue but I wanted to see which modules feather uses by checking the package file but there is no way to know which modules are used for building and which are used in live code.

Nested views/components

I would like to try to use this toolkit with a real-life app but I am missing embedded views/components. Any plans or recommendation for that?

How to debug

Hi @HenrikJoreteg,

Thanks a lot for that really nice feather app. I saw it in your talk at DotJS and I agree with you 100% about minimalism. Big fan!

I quickly ran into troubles when trying to debug this app.
Do you have any recommendation?
I am not an advanced user of webpack, do you recommend starting there or is it better to start with a more 'browser approach' like devtools ?

Cheers