Congratulations on taking the first step to learn WebSharper! We have carefully put together this hands-on tutorial with the aim to help you get started with WebSharper and on your way to learn functional, reactive web development, putting you on a fast track to unleash the real web developer in you. The skills you pick up with WebSharper will make you a better web developer, and the concepts you learn will remain valid and useful with other functional, reactive web frameworks and libraries as well. You can find links to further material below and the sources of this tutorial in the bottom of this page, and you can see the resulting app in action live on Try WebSharper.
What You Will Learn and Where You Can Find Out More
Using HTML templates (these work on the client and server alike) instead of inline HTML combinators. Further reading: the “HTML Templates" section of the Reactive HTML page of the main documentation.
Reading and writing the values of input controls (text boxes, text areas, checkboxes, etc.) in your HTML page through your template’s data model. Further reading: the "Accessing the template’s model" subsection of the Reactive HTML page of the main documentation.
Wiring events such as button clicks. Further reading: the bottom of the "Holes" subsection of the Reactive HTML page of the main documentation.
Using reactive variables – and reflecting their state to the UI. In this tutorial, you will see how to apply CSS classes dependent on reactive variables and how to use the V notation. Further reading: the "Reactive layer" and "The V shorthand" sections of the Reactive HTML page in the main documentation. We will cover two-way binding more complex data models in another tutorial.
Our Application: Login Page for an SPA
In this tutorial, you will learn how to work with external HTML files (a.k.a. templates) and how to implement your application logic into them. For this, you will take a login page from dansup’s wonderful free Bulma template collection. Your app will look pretty much the same and also implement basic form validation: