Posts

Showing posts from February, 2016

Improving developer feedback loop in WebSharper.UI.Next with FAKE

Image
Improving developer feedback loop in WebSharper.UI.Next with FAKEIn my previous posts I explained how to use WebSharper in different ways with Sitelet to build complete backend + frontend web app and with UI.Next to build reactive frontend. If you built the samples, you would have realised that for every changes, a compilation is required to build the JS files. Last week @Tobias_Burgerasked me whether I knew a way to improve developer feedback loop when developing web app with WebSharper and that is the subject of this post - Improving developer feedback loop in WebSharper.UI.Next with F#.What is a feedback loop?In this post case, a feedback loop is referred as a way to propagate changes from the code to the UI and get a visual feedback from it. Having fewer steps, between writing and visualising, results in faster feedbacks which indirectly improves developer experience. A great example is - building a web app in JS. For JS, saving the files is enough to propagate changes and only a …

Method chaining for Bootstrap components with WebSharper in F#

Image
Method chaining for Bootstrap components with WebSharper in F#Lately I have been playing extensively with WebSharper and have been working on improving the structure and reusability of Bootstrap components built with WebSharper. I like writing HTML from F# as it allows me to reuse code by using namespaces and modules to group reusable functions and elements.Over the last couple of month, I have tried many ways to make functions which facilitate the creation of Bootstrap components and tried many ways to group them into meaningful modules so that it is easily findable for the next time I want to use them. Out of all the solutions I’ve tried, only one really stood out and it is what I want to share today - Method chaining to build Bootstrap components.If you want to follow this tutorial, here are the steps that I took before starting to write any code:Get WebSharper templatesCreate a new WebSharper.UI.Next single page applicationAdd bootstrap CSS and JS in index.htmlMethod chainingMetho…