Variant with Semantic UI

[ghost]

I have been playing around lately with using CSS Frameworks and the SAFE stack and I was confused in the beginning about how to integrate them best into the existing webpack workflow (#269 #268).

However I kind of made some progress and I decided to use Semantic UI for my own project and I got it to work nicely with SAFE. I'm not sure if this is desired (what do you think @forki @alfonsogarciacaro ?) and gets merged.

I prepared a patch file from ad152947ce6cdaaa45567090ecbf36319c3f0ef3 with the whole, rather tedious setup for those of you who want to go with Semantic. I personally love it for the theming! Have a look:

[alfonsogarciacaro]

Recently I'm recommending everybody (and use myself) Fulma. I forgot this repo still doesn't use it, I should send a PR 😅 The good thing about Bulma is it's pure CSS so it fits very well with any JS framework (Elmish in this case). About SASS compilation with Webpack, there's an example here with some explanation here but it's a bit complicated so it'd be nice to abstract it somehow. Another possibility is to use node-sass directly in a parallel process.

However, if you're happy with Semantic UI, it'd be nice to see a PR. It's always good to have choice :smile:

[isaacabraham]

There's also an example of using another one, bootstrap, in the house price sample (although there's no helper library there - everything is done inline).

[ghost]

@alfonsogarciacaro my intent was mainly to provoke a discussion about this topic 😄 .

And you are absolutely right that it is all about choice!

I also tried F(B)ulma and I really liked it too for its extreme simplicity in every aspect, however I think Semantic has better communication of design and superior theming. And another one might be familiar with Bootstrap and wants to re-use that knowledge.

The integration of CSS/JS UI Framework should not be a show-stopper and there is no need to be opinionated on that subject, especially since everything has been made so mature already by all you great, talented people !

However, the fragmentation within SAFE is still too high, I think. The dotnet template has an option for Fulma and even extended options to start with one of Bulma's standard landing pages. The BookStore sample has extended release process with automatic UI-Tests and deployment to docker. The sample from @alfonsogarciacaro posted shows SASS/LESS integration with webpack.

I think it is really important at this point to put some effort into integration of documentation and templates of SAFE. Let's embrace the beginner who just wants to play around and the expert that has extended use cases and might want to set up a commercial project alike.

I also issued those points on the template repo already.

BTW, I would love to contribute. Lets discuss it and lets go!

In principle it all boils down to this article and talk from the Elm guy. Will re-watch and re-read for thsi purpose

[alfonsogarciacaro]

About Bulma, it's true the core can be a bit limited, but it's highly customisable and there's already theming available. Also Fulma makes it easy to create React components and we're planning to add a section in the docs where people can share their snippets. I like that for this it's not necessary to have any specific Bulma knowledge, just CSS/SASS and React.

About the current fragmentation and the need for a more straightforward experience for beginners, I agree with you 💯 %. Actually, we started some efforts to abstract the tooling but there are two forces always interrupting this: the constant changes in JS tooling and my self :wink:

Regarding JS tools (and dotnet SDK too, though this is stabilizing) we were about to settle on Webpack, but Webpack 4 is coming with new features and breaking changes, and now there is Parcel too, which could be a better fit as it doesn't require configuration and has a cleaner output. Regarding myself, every time I promise I'll focus on the tooling I start working on the next version of the compiler (now 2.0) 😅

Thanks a lot for your offer to contribute to the tooling! @MangelMaxime is already doing an awesome job improving the ecosystem and @whitetigle is also interested in having standard tooling easy to update for existing projects. It'd be great if you could team up to improve the SAFE/Fable experience for beginners so I could focus on the compiler core. Of course I would support you with anything you'd need :smile: What do you think?

[ghost]

So first of all: yes, I'm in! I would be happy to support you 😃. The best I can give you at the moment is my beginner's perspective and enthusiasm. And I could also set up a documentation base for contributors (as in #268) 😄.

I was actually on Bulma/Fulma in the first place and I googled for some documentation on integration of LESS/SASS with webpack for Bulma and the BookStore sample. Then I landed on the blog post for doing it with Semantic UI. Then I started playing around with Semantic UI and started to like it more than Bulma 😄.

The idea for a central place to share stable high-level components is great! This does not have to stay Fulma-exclusive, but could span over multiple frameworks

You mentioned that Bulma is easy to use with Elmish, because it is CSS only. Would it be a problem to integrate a component that needs some very simple JS, like a cookie nag from Semantic UI? There should be guiding documentation how to do that best in a scenario like that, be it by personal taste or customer demand:

<div class="ui inline cookie nag">
  <span class="title">
    We use cookies to ensure you get the best experience on our website
  </span>
  <i class="close icon"></i>
</div>

// Wont re-appear unless cleared
$('.cookie.nag')
  .nag('show')
;

$('.cookie.nag')
  .nag('clear')
;

I'm coming from the .NET ecosystem and did mobile with Xamarin and F# / C# over the last year and a half, but I need to get into web technologies in 2018. But I am a JavaScript noob in every aspect : coding, tooling, libraries ... so I'm going into this as a F# enthusiast with Fable and picking up JavaScript pieces as I go. And Fable is great and made it very easy for me to use JavaScript without actually leaving my happy place too much 😆. So thank you for creating it and keep your focus on 2.0!

From my perspective, certain things are intuitive to me like using FAKE, Paket, and Docker because I already know how to use them them quite well. But then I see some stuff like yarn and webpack and have no glue what to make out of them. I think this is still the most prevalent side for people who use SAFE.

But we also need feedback, and this is even more important for mainstreaming efforts, from people who never used F# but know their way around in the JavaScript universe and have experience in building web applications.

They must be dazzled right from the start, so they can recognize the value of learning another bunch of technology is actually worth it in terms of development speed and software quality (never forget: they are not enthusiasts YET, like the rest of us), so that F# can finally break the gravitational bond of its own niche 😄.

[ghost]

@alfonsogarciacaro @isaacabraham @MangelMaxime

I prepared a documentation home for SAFE. It will look and feel like this once build and deployed and there is a docker image with commands for serving live preview and straight deploy to gh-pages. It is super-easy and I really like it.

Any comments?

[MangelMaxime]

Problem from using Semantic UI, is the same as with bootstrap. If you include their JavaScript code in your application then you lose a bit of control over your application state.

To answer your question about supporting something like Sementic UI for elmish, etc. I would probably go to write react components either in JS or F# to handle the Sementic UI state. There is probably a react lib doing that already (I didn't search).

If you only want to support one type of the component and use minimal JS you can always use the Ref property.

Example The code from the example will be this one

This allow me to manage the menu state without storing the state in the Elmish application. Again, it's to do carefully IMO :)

I hope, I answered your question.

[ghost]

@MangelMaxime thank you very much! Yes it does indeed answer my question.

I also took a proper React tutorial yesterday to alleviate my incompetence on the subject matter 😅 and also dug deeper into Elm / Elmish.

I think I understand now that DOM manipulation outside React.render is a very bad thing to do :) and also stumbled across that ref approach, but did not know to best use with SAFE in the first place.

And then there are React components, like for Semantic UI there indeed is a semantic-ui-react package. I also found some documentation how to wrap them with Fable. I think this will be a very common and important use case and I will try to write an article with that experience.

[ghost]

@MangelMaxime I started the narrative for an article on that subject will try to do this today. Would be nice for someone to double check for correctness :D