search

onflow / developer-grants

Grants for developers that contribute to the broader developer ecosystem
Apache License 2.0
50 stars 18 forks source link

Flowser Playground #260

Open monikaxh opened 6 months ago

monikaxh commented 6 months ago

Flowser Playground

Grant category

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.

Flowser play mockup

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:

Milestone 2 - Feature parity with existing playground + extensions

Features to be implemented to achieve parity:

Extensions:

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:

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:

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:

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. bart@flowser.dev
@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 monika@flowser.dev

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

joshuahannan commented 5 months ago

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 commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

@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 commented 4 months ago

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

monikaxh commented 4 months ago

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