Feat(adev): faster initial loading + iPad availability of the playground

[mauriziocescon]

Describe the problem that you experienced

I’m currently trying to play with angular on my iPad during a short vacation. Unfortunately, I can’t cause "the environment is not supported"… on the other hand, I’m totally capable of doing it with Svelte / Vue / Solid.

I must admit the overall experience of Svelte / Vue / Solid playgrounds on an iPad is quite amazing! 😅

I guess there’s some room for improvements for adev: initial loading performance and iPad (tables) support for occasional usage.

Enter the URL of the topic with the problem

https://angular.dev/playground

Describe what you were looking for in the documentation

No response

Describe the actions that led you to experience the problem

No response

Describe what you want to experience that would fix the problem

No response

Add a screenshot if that helps illustrate the problem

No response

If this problem caused an exception or error, please paste it here

No response

If the problem is browser-specific, please specify the device, OS, browser, and version

No response

Provide any additional information here in as much as detail as you can

No response

[mauriziocescon]

Some other feedback comparing ng-playground with the playground available for other frameworks (solid, vue, svelte). Note: I perfectly understand the current WebContainer limitations, but my feedback is mostly functional.

1. The accessibility of adev-playground from mobile devices (I tested iPhone / iPad) can be very handy in some cases or for some specific categories of users. In particular:

   • teens / education: for teens or in the education sector, it's quite common to find tablets as devices to access internet. In such cases, users can play with the other frameworks, but not with angular.
   • social media sharing: not uncommon to share links to playgrounds... and not uncommon to quickly check them using mobile devices. Again: angular is out.

2. I think the default access to ng-playground (template: Minigame) is overwhelming: IMO it passes the message angular is complicated. There's too much complicated code (imagine: teens, but also react developers curious about the latest changes in angular). I'd personally set the default template to Hello world or something simple. Moreover, I think having the template_id reference in the url might help a lot (target: social media sharing).

My 2 cents!

FYI @twerske - @mgechev