4

Angular can work with ui-router to define states in order to move in the application. E.g. when still be on the one page, you can have list view on the left hand side of the page while having detail view on the right side. Then whenever you change record from left list, the detail also change, but, you are still in the same page. Is it possible to that also in WebSharper, or are there any other options how to deal with the scenario?

Also, angular has concept of templates (and directives). This enables, among others, to wrap the native html code into template and use it as part of the directives in some other html pages. For instance, javascript libraries like select2 can be used. Is that possible also in WebSharper, e.g. use select2 library?

user2039784
  • 199
  • 9

1 Answers1

7

I am not very familiar with Angular but most of the features you listed are available in WebSharper as an extension: WebSharper.UI.Next. You can define client-side routing much like you described. It also has templating but it's still work-in-progress so there's no documentation for it yet (but we are already actively using it in our projects). The whole library is meant to be used to create reactive single-page applications so it can be tought of as an alternative to angular (not quite as extensive though, of course).

As for templates: since you are writing your code in F#, there is a convenient DSL implemented in UI.Next for dealing with HTML combinators so you can define your views in F# and reuse them all over your project until we make templating more approachable.

You can use external libraries (like select2) but it requires some extra work, namely defining types for the library (or at least the part of it you want to use). Since you are writing F# code you need to know the explicit types of things so you have to write a "binding" for the JavaScript lib that deals with the types. On one hand it's great because you now have types, on the other hand it can get quite tedious for larger projects. Take a look at the WIG documentation for details on how to do this.

qwe2
  • 495
  • 3
  • 11
  • Do I understand correctly that WebSharper.UI.Next is how the two-way binding (between UI and underlying model and vice versa) is done in WebShaper, i.e. WebSharper itself (apart from UI.Next) incorporates just one-way binding (from model to UI)? As to external libraries and to select2 specifically, what is the preferred way how to do the same what can be done with select2? It seems to be just reasonable that user can filter dropdown values by her/his keyboard typing. I wonder if this would not have been implemented yet. – user2039784 Aug 26 '15 at 18:18
  • 2
    That is right, WebSharper itself only gives you an imperative way of dealing with the DOM, much like JQuery does. WebSharper.UI.Next puts a very convenient abstraction for dealing with data-flow in general. It is somewhat similar to React js as UI.Next uses a virtual DOM rendering elements only when needed. We do not have an implementation for select boxes like select2 but you could implement something similar with UI.Next or write a binding for select2 in WIG. We already jave JQuery in the core lib so it shouldn't be too hard. The main problem here is that html's `select` cannot be styled. – qwe2 Aug 27 '15 at 07:55
  • 1
    Is the styling issue you mentioned limitation specific to UI.Next compared to WebSharper? By the way, on github of UI.Next, there is a sentence: "the library will also likely to become the recommended way to construct UI in WebSharper". I am bit confused. Does it mean that all other ways (sitelets, formlets, piglets etc.) will be let's say deprecated in the future? – user2039784 Aug 27 '15 at 14:33
  • 1
    The issue comes from the fact that we have builtin helpers to deal with select boxes but they use the `select` HTML tag. If you wanted styling like `select2` does you would have to build it all the way from the ground up with UI.Next which would be quite some time I imagine. Sitelets are staying as they fill a different role on the server-side. Pagelets are going to be deprecated, which means things like `Div [ Text "Hello" ]`. Formlets and Piglets will be rewritten to use UI.Next so they are chaning a bit but they aren't going anywhere. – qwe2 Aug 28 '15 at 15:18
  • Interesting. Thank you for the explanation. – user2039784 Sep 07 '15 at 19:56