Fast styling of NS apps

[vedranstanic82]

I will try to be brief:

• it is very slow to style apps when doing NativeScript. As the app grows, the load time to view a CSS change can take a long time. This makes the cycle of pixel pushing X times longer than in a web browser
• i would not raise this feedback here unless i noticed a potential path that could be powerful for the NS styling cycle which would be a big win for NS development overall imo
• the path revolves around your Playground app. If i make a css change there in your Playground cloud, it is instant on my device, no reloading, etc. But when i download the project from Playground and run it via the emulator, it is slow because each pixel push change tears everything down and builds it back up
• could you expose a similar mechanism of redrawing/refreshing the screen in the Playground app to the regular NS development cycle? right now i am forced to make a small isolated sub-app in your Playground cloud of my real app in order to speed up pixel pushing, because i know there is going to be a lot of it and each second will matter

Let me know if I was not clear enough.

Thanks!

[radeva]

Thanks for your feedback @vedranstanic82! We plan to integrate the Playground experience with the in the CLI probably in 4.3 which is I think exactly what you're describing. Have in mind that it will have the same limitations the Playground has now regarding the plugins that can be used.

Could you share more info about:

• do you use CSS or SASS
• do you use tns debug ios/android or tns run ios/android
• do you use VSCode or the CLI from Terminal/Command Line
• Win or Mac

[vedranstanic82]

@radeva that is great news! Now that i have set up a small mockup screen in playground it is much easier to play with the CSS etc. Super fast. I would recommend to anyone except if there is an easier way.

I use CSS.
tns debug ios
VSCode to edit and save css files, but the tns debug ios is running from the Mac terminal (not VSCode terminal)
Mac

[radeva]

@vedranstanic82 currently there is an issue with tns debug always restarting the app. Till it's fixed you can try using tns run.
Let me know if it works for you.

[RoyiNamir]

@radeva Sorry to interfere , but why does a restart when changing the XML is a problem ?
isn't it suppose to be like this ?
Consider a situation where i changed XML , must I go to the TS file and add a space and save it , just to trigger a change ?

[vedranstanic82]

Hi @radeva,

I tried using tns run ios from the Mac terminal and changing a CSS file (color of text from one color to another) and the app reloaded as well. Although it was quick - 10 seconds, it's still not fast enough for pixel pushing as i had to click though the app again to get to the right screen. The Playground way of reloading I believe handles XML changes in milliseconds as well which is awesome. It just takes too long to recreate a dumbed down/simplified isolated page in Playground, but once you do it it's totally worth it - for me at least. Looking forward to a local version of this functionality!