Use this project for onboarding of SAFE stack beginners

[ghost]

I just had the idea that this project could be a perfect onboarding opportunity for app development with Fable and Elmish / SAFE stack.

Ideally, you could give a talk somewhere in front of beginners / adopters, just give people a link to this repo and they can start exploring with zero friction and make meaningful contributions to the ecosystem. We'd get to import of full Ant Design (including mobile components) really quick and all beginners build a connection with the ecosystem and feel rewarded right from the beginning.

I document my insights about developing and building with SAFE in a gist, I could integrate some of those insights with this project:

• [ ] VS Code Chrome Debugging
• [ ] modularized build process with FAKE 5
• [ ] usage of VS Code multi-root workspace feature

Additionally, I think the following stuff would be great to have:

• [ ] batteries-included Vagrant box
• [ ] dockerized build process

Whatever turns out to work well, should then be incorporated into

• Fable templates
• SAFE template
• Fable library template

Although I would like if we could unify all the good stuff into the SAFE template in a sensible way, since than we can focus on documenting and perfecting one template instead of having to maintain several projects.

Also, we should establish a prominent reference to the SAFE docs and invite beginners to contribute there with their project experiences ASAP.

@evilz @alfonsogarciacaro what do you think of this?

[evilz]

Hi, could be nice !

I'm not sure why this project and not another one like Fulma ? This one is "just binding" on existing react component.

Also it is not related to SAFE directly.

Thank

[ghost]

You are probably right that this should be discussed with the SAFE people (@forki @isaacabraham)

I included your project as git submodule, so I can just work out my agenda independently but results would still land here in form of PRs (I'm sure you don't mind 😄 )

But why I had this project in mind is based on the following reasons:

1. @mangelmaxime has already done a great job with Fulma and I think it is already pretty complete. It is also about showing to people, that SAFE does not lock them into a front-end technology and that they can just use their favorite front-end technology out of the box.

2. Fulma does not include external React components like Ant Design does, and this will be the very first thing people needs to know in order to make production-grade stuff with SAFE

3. Ant Design has a consistent set of components across web and mobile, which makes it the perfect choice for demonstarting some code sharing scenarios of a widget abstraction I designed on top of Elmish.

4. The AntD bindings are not yet complete, so some sort of dojo combined with a valuable contribution to F# OSS space could be a nice thing.

The feedback from the SAFE stack beginners can also be valuable for quality of docs, because it is valuable real data from the main target group of the docs

[MangelMaxime]

I think it [fulma] is already pretty complete.

Fulma is indeed complete now, I am just waiting for Fable 2 before releasing version 1.0.0

Ant Design has a consistent set of components across web and mobile

Bulma, is mobile first oriented too :)

Fulma does not include external React components like Ant Design does, and this will be the very first thing people needs to know in order to make production-grade stuff with SAFE

I do understand your point here, but you don't need React components to make production-grade stuff. And it's better to explain people how to write their bindings than mix everything. This is what I did for NDC Oslo, where I show how each brick is working together in a consistent way.

1. Html + Class becomes "Elmish view"
2. Strongly typed CSS ==> Fulma or Ant design
3. Create bindings for React.Leaflet
4. Include React.Leaflet and demonstrate how in 100 lines of code you get a complete app
   • Get user position
   • Show on the map
   • Handle nicely the errors
   • Add a filter to extends the app features

A lot of people choose at first a stack because the hello world/getting started guide works. But what make them stay is how you can follow them from 0 to production stage. This is what are missing a lot of the existing stacks :)

For this reason, IMO providing user documentation on how to use docker, UI tests, etc. and also how to set them up is more important that a template doing all the stuff by default. For example, in my work project if I want to add UI tests, I need to dig into SAFE templates or another JS framework and try to isolate the corresponding stuff :) For beginners, it's hard to do.

All that to say being modular is the key IMHO.

[isaacabraham]

I'd be interested in discussing incorporating the ant-design stuff into the SAFE template - please go ahead and open an issue on this there.

[evilz]

Hi everyone !

I think ant design is not ready to go in SAFE template at this time. A lot of components are missing (cause there are a lot of them).

1/ I still think it can be very usefull for a real website but not really to learn Fable.

2/ AntD it not always very clean JS. Some of my binding are still using obj or unit cause Typescript def is not clear.
So to learn, it should be better to find some components more simple and with clean type definition.

Hoping to have a full binding when Fable 2 will come out.