WebSharper vs. Angular

Question

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?

Answer 1

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.