Flowser Playground

[monikaxh]

Flowser Playground

Grant category

• Developer tools / services
• Educational material

Description

Flowser is the ultimate desktop tool for building on Flow. In the previous months, we’ve invested time to take it a step further and build a web version that brings most of the features of the original desktop app to the web to make it even more accessible / easier to use. But this made us realize we are unleashing something powerful related Discord discussion.

Our web tool already works with all existing networks (mainnet, testnet, previewnet, emulator), but it still requires users to install the emulator (or Flow CLI) and run it on their local machine before using the web app. This can be pretty frustrating for new Flow developers (imagine if you had to install JVM before you could play around with Java in a tool like replit.com + it makes it harder to create consistent dev environments (the classic “works on my machine” problem), potentially restricting shareability and collaboration.

We imagine the next version will embed the emulator within the browser itself, making Flowser truly a battery-included tool you can just open in the browser and start hacking. This made us see an overlap with the existing Flow Playground.

We’ve observed in the community that Playground still seems to be a very useful tool for any new or existing Flow developer. We believe the reason is, that it doesn’t require anything to set up. You open a website and you can start hacking.

But we see limitations to it. It doesn’t support different networks and it isolates you to just that Playground bubble. When you want to shift to local development the process is not clear and the tools are all different, and you need to relearn how to use them. If you want to just test something against the testnet it’s not possible to do so. It also doesn’t provide you with an insight as to what is happening on the network (what blocks are made, what transactions are executed, accounts created), something that is a core value of Flowser.

We want to propose making Flowser the new playground. We have good reasons to believe that this would be beneficial to the whole Flow ecosystem:

1. The whole developer experience will be consistent from the first day, from learning in the playground all the way to the production launch. Moving from playground to local development would be as seamless as possible all done inside the Flowser tool. All the actions would be consistent and there’s no friction to do so or there’s nothing new you have to learn.
2. Eliminating the need for any kind of backend would lower the maintenance and running costs of the existing Flow playground.
3. The experience of developing Flowser, particularly its potential as an educational tool, has provided us with significant insights. We intend to leverage this knowledge to further refine and improve the Flow playground, enriching its capabilities and user experience.
4. Embedding Flowser into existing educational websites will enable interactive Cadence/Flow documentation. Imagine having a section that explains how you can add a key to an account and just below you have a Cadence snippet that does exactly that which you can execute. We've noticed a new website for Cadence, https://cadence-lang.org/, which features a Cadence snippet on its homepage. We could make this snippet executable on the website, among other places.
5. We will refresh existing learning resources and give them a sprinkle of our special touch. Make them feel modern, remove screenshots of the playground, and instead embed the new playground itself where applicable. Add new graphics that will show concepts explained in a more relatable way.
6. The new playground would get all the existing Flowser features like blockchain explorer, FLIX integration, etc.. for free

We see Flowser become the one tool that you start with to learn Cadence and the one tool you use to go through all the phases from learning to production deployment. This would bring big advantages of navigating the user through this process in a very seamless experience. We believe this will achieve a higher conversion of new developers, staying and loving Flow.
Total funding proposed:

Milestones

Milestone 1 - Port Flow emulator to browser-based environment

To stop relying on a backend service for running the emulator blockchain, we’d need to port the emulator code to run in a browser-based environment and compile it to WebAssembly.

Some of the work that’s required:

• Implement necessary adapters for the flow-emulator.
  • Some previous (but not outdated) work was already done in: https://github.com/bluesign/emulatorWasm
• Compile flow-emulator to WebAssembly target.
  • Some previous work was already done in: https://github.com/bluesign/emulatorWasm
• Implement the necessary wrappers, so that flow-emulator can communicate with JavaScript application code.
  • Using a similar approach as in https://github.com/onflow/cadence-tools/tree/master/npm-packages/cadence-language-server
• Bypass signatures for executing transactions on the embedded emulator
  • This would make it easier for people to use the playground since they won’t need to manually approve each transaction (e.g. with fcl-dev-wallet). See the discussion in Discord for more context: https://discord.com/channels/613813861610684416/1219254908923023360/1220401668659740743
• Additionally, we are planning to port Flow CLI as well and offer a browser-based terminal where users can execute Flow CLI commands
  • This would allow developers to use all the tools they’d use when doing local development
  • Discussed in Discord: https://discord.com/channels/613813861610684416/1219254908923023360/1219257105916100618
  • We are not sure about the feasibility yet, but we believe it’s doable with the help of the Flow team and community members like @bluesign

Milestone 2 - Feature parity with existing playground + extensions

Features to be implemented to achieve parity:

• project management
• contract management (displaying, editing, and deploying contracts)
• improved IDE / Cadence editor (using Monaco editor with Cadence language server)

Extensions:

• Add blockchain explorer features from the Flowser desktop app
  • Add support for indexing blockchain data and all the pages and features (inspection of accounts, contracts, events, blocks, transactions) we already have in our desktop app
• Viewing and forking projects from GitHub
  • Discussed in Discord: https://discord.com/channels/613813861610684416/1219254908923023360/1219257105916100618
  • This is similarly supported by Solana playground: https://beta.solpg.io/https://github.com/drift-labs/protocol-v2/tree/master/programs/drift
• Tree-like file directory viewer (or some other UI that would make it easy to view scripts, transactions, and contracts)
  • This would help developers get familiar with the recommended structure of Flow projects

Milestone 3 - Education

Lots of Flow educational resources use the current playground to let the user follow through and try Flow development without leaving the browser. But the user experience is still limited - tutorials usually provide an external link to the playground project and then attach screenshots to explain which steps to take.

We imagine this experience could be improved by letting the educational resource creators embed the Playground in their content. This would let the user tinker with the playground without leaving the page.

Additionally, we could expose an API to allow controlling the playground within the embedding page (e.g. navigating between UI views, updating code in the editor,..). This would allow creators to bypass some steps (e.g. screenshots of the playground, code to copy to the playground editor, playground usage instructions…), and focus on their educational content while improving the experience for the user.

Goals of this milestone:

• talk to educational content creators and discuss what would help them improve the learning experience for developers on Flow
• build a prototype and test it on the existing educational websites (e.g. Emerald Academy)
• if applicable, add API to allow websites to embed and control the playground (e.g. execute a Flow CLI command, navigate to a different UI view, paste Cadence code to the editor,…)
  • This would allow content creators and documentation writers to use Playground in completely new ways to deliver an interactive learning experience
• add Playground learning center (new page in navbar with links to various educational resources)

Milestone 4 - Adoption

Various Flow resources, documentation, and tools depend on the current Flow playground (or other similar tool). Those would need to be updated to use the new playground and consume the newly added features.

We plan to work with the Flow community to update the following resources/tools:

• https://developers.flow.com/
• https://cadence-lang.org/
• https://academy.ecdao.org/
• https://contractbrowser.com/ (interact tab)
• Possibly others from: [https://github.com/search?q="play.flow.com"&type=code](https://github.com/search?q=%22play.flow.com%22&type=code)

On top of that, we also believe the new playground could be a great entry point to Flow for new developers, so we’ll work on onboarding new developers and encourage them to build on Flow using Cadence.

Maintenance & marketing

There are lots of changes coming to other Flow tooling that Flowser depends on like Flix, Flow CLI, Cadence,...

Particularly, we are planning to:

• add support for the latest FLIX version v1.1 (once fully implemented and released): https://github.com/onflow/flips/blob/main/application/20230330-interaction-templates-1.1.0.md
• This could include building additional features to help accelerate FLIX adoption and ease of use such as web UIs for managing your FLIX audits and templates or APIs to improve ease of use
• follow progress on the new dependency manager and see how that affects Flowser and other tooling: [Epic] New Contract Dependency Manager flow-cli#929
• follow the migration to Cadence v1.0 / Crescendo network update
• provide technical support for our existing tools (Flowser desktop, Flowser web, and Flowser playground)
• Marketing:
  • Proceed with Twitter initiatives, aiming to achieve a milestone of 1,000 followers.
  • Initiate communication channels on Flowser Discord.
  • Establish a blog section on the Flowser website and produce a series of 20 articles.

Milestone	Deliverables	Timeline	Risks	Flow Tokens Suggested
Port Flow emulator to browser-based environment	• Implement necessary adapters for the flow emulator. • Compile flow-emulator to WebAssembly target.• Implement the necessary wrappers• Bypass signatures for executing transactions on the embedded emulator• Port Flow CLI	1 month		12,000
Feature parity with existing playground + extensions	• Features to be implemented to achieve parity:- project management- contract management - improved IDE / Cadence editor • Extensions:- add blockchain explorer features from the Flowser desktop app- add support for indexing blockchain data and all the pages and features - viewing and forking projects from GitHub- tree-like file directory viewer	2 months		15,000
Education	• Research, prototype & test how websites could embed the Playground to enhance the learning experience Add APIs to allow websites to embed and control the playground• Add a “learning center” to our app with links to various learning resources	2 months		10,000
Adoption	• Adoption across Flow resources, documentation, and tools dependent on the current Flow playground	1 month		7,000
Maintenance & marketing	• Add support for the latest FLIX version v1.1• Follow progress on the new dependency manager and see how that affects Flowser and other tooling• Follow the migration to Cadence v1.0 / Crescendo network update• Provide technical support for our existing tools• Marketing:- proceed with Twitter initiatives, aiming to achieve a milestone of 1,000 followers.- initiate communication channels on Flowser Discord.- establish a blog section on the Flowser website and produce a series of 20 articles.	4 months		36,000 (9,000 monthly)

Total suggested FLOW amount: 80,000

Proposition Summary

The web version of Flowser will be extended to support the emulator network within the browser out of the box. Furthermore, Flowser will be extended to support all the existing Flow Playground features and, in the end, be able to replace the playground itself. Although our goal is not just replacing the Flow playground, but also enhancing it with new features, lowering the costs of running a backend, etc… We believe all that will help onboard new developers and help improve existing learning resources.

We believe Flowser's mission is to make developers fall in love with Cadence and Flow. But like with any true love, it needs to start with romance and we know how to make your interaction with the blockchain feel great and easy.

Team

Core team

Github	Name	Role	Bio	Email
@bartolomej	Bartolomej Kozorog	Full stack developer	Passionate developer and CS student. Building flowser.dev and part-time working at kazm.xyz.	[email protected]
@monikaxh	Monika Hriberšek	UX/UI Design & Marketing	Proprietor @ Monikart; UX/UI Designer @ Flowser since Sep 2021; Designing: mobile apps, websites, social media content, NFTs. Additional experience: Product Marketing Manager @ Renault&Nissan Financing	[email protected]

We are delighted to announce we will be collaborating with @bluesign to port some of the Go tooling to a browser-based environment.

[joshuahannan]

This looks like it would be super useful! It has always been annoying to have to go back and forth between the docs and playground to test stuff out so I love that everything would be integrated. Definitely would bring us up to speed with where other blockchains are in regards to web tools. I'm happy to collaborate on educational tools and tutorials if this gets approved!

[monikaxh]

Thank you for your support @joshuahannan It's great to hear that you find it useful and that it addresses the inconvenience of switching between docs and the playground. Your offer to collaborate on educational tools and tutorials is much appreciated and would be incredibly valuable. Hope to talk to you soon 🚀

[monikaxh]

We haven't received any feedback yet on our grant proposal. We would appreciate an update to understand whether it is being considered or if there are any next steps we should take. Thank you

[joshuahannan]

@Aliserag has been on vacation I believe, so it has been a little slow getting grants through. Sorry about the delay! I'm still supportive of it! We'll try to get a more concrete response back to you once Ali gets back.

[monikaxh]

Thank you for quick response! Looking forward to hear from @Aliserag

[monikaxh]

We’re happy to share, that our development of a playground prototype is already in progress. Our current focus is on porting the emulator to a web environment. 👀 https://github.com/onflowser/flow-wasm

[Aliserag]

Heyyo, wanted to check in to see where you guys were at on this?

[monikaxh]

Hey @Aliserag 👋 Thanks for checking in! We’re currently waiting for your review on our proposal so we can proceed from there. Let us know if there’s anything else you need from our side!