Showing posts with label web development. Show all posts
Showing posts with label web development. Show all posts

Getting a WebSharper project up and running on Mac OS X

A few weeks ago, this post about Intellifactory's WebSharper showed up on Hacker News.  The top comment was enthusiastic enough for me to check it out.

Since F# and Mono came out of the Microsoft ecosystem and I use Mac for development (and Linux for deployment), I had to do some digging to get things working.  These are the steps I used to get a basic WebSharper app up and running on Mac OS X (10.9.x).   Note that these steps are very high level and don't go into much detail.

1. Install Xamarin Studio


I've used Xamarin Studio at work to create several cross-platform mobile apps.  Being comfortable with that environment, I elected to go with Xamarin Studio for F#/WebSharper development.   You can find the download here.  Note that you will have to supply some personal info to proceed.

Once the install begins, you will eventually get to this screen:




In order for the install to work, you'll have to select at least one of the products in the list.  For the purposes of doing WebSharper development, I don't think it matters which one(s) you choose.

Once you get to the "Install Succeeded" screen, click the "Launch Xamarin Studio" button:



If you had already quit the install process, you can find Xamarin Studio in your Applications folder.  When Xamarin Studio launches, it may have updates waiting.  If so, click the "Restart and Install Updates" button.

2. Install Intellifactory's WebSharper Add-in


To make working with WebSharper in Xamarin Studio easier, Intellifactory provides the WebSharper add-in.  Installing the add-in will add project templates that make creating WebSharper applications easier.  Click the "Xamarin Studio" menu, then choose "Add-in Manager...":



With the Add-in Manager window open, click the "Gallery" tab, then click the "Repository" drop-down and choose "Manage Repositories...":



From the "Add-in Repository Management" window,  click the "Add" button.



Then paste the following URL into the "Register an on-line repository" URL field:

https://raw.githubusercontent.com/intellifactory/monodevelop.websharper/master/repository/


...and click the "OK" button.  Eventually, the add-in will finish installing.  At this point,  Xamarin Studio is ready for creating WebSharper applications.

3. Create your first WebSharper Sitelet.


There are several different kinds of WebSharper projects.  We're going to create an app that has both a client and server piece, known as a "Sitelet".  

Close all windows until you get back to the main Xamarin Studio screen.  Then click the "New Solution..." button.  In the "New Solution" window, find the WebSharper entry in the list in the left-hand pane (it's probably the last entry), then choose "WebSharper Sitelets Website".



Fill in a Name (I chose HelloWorld), make sure the project will be created in a directory you agree to,  then click the "OK" button.

4. Build the Project


At this point, you now have a basic example starter project ready to explore.  Let's see it in action.  Before we can run it, we need to build it.  Choose the "Build" menu item, then "Build HelloWorld".  If everything went well, you should see a "Build successful." message.



5. Run


From what I can tell, there's no way to run the application from inside Xamarin Studio yet.  Open Terminal, then navigate to your project's directory.  You need to be in the directory below the top-level similarly-named directory, in my case HelloWorld/HelloWorld:




Once there, type the following on the command line:

xsp4

This will start the xsp4 web server.  You should see a "Listening on port: 8080..." message.  Open a web browser to http://localhost:8080 and your app should display:




Congratulations!  If you got this far, you now have a development environment all set up to create the next amazing WebSharper application.

Where to go from here


This post just explained how to get a dev environment up and running.   There is a BUNCH to learn.  Try exploring the different pieces of the project, particularly the Main.fs, Client.fs, and Remoting.fs files.  Keep in mind that if you make any changes, you will have to rebuild the project, and re-run the server.

I am new to F# and WebSharper, but here's what I've been looking at:


Resources Used:


Most of the information I used for this post was gleaned from the following:

  • The F# Software Foundation's Use F# on Mac OSX page.
  • This Intellifactory blog post.

If you liked this post, would like to see more posts on F#/WebSharper, or have corrections or criticisms, please leave a comment or let me know on twitter.  Good luck exploring!


Eon: A Clojure Basics Quiz

As part of an effort to avoid creating yet another blog engine, I started working on something completely different:  a quiz/game called Eon.


Eon is a simple quiz designed to test basic Clojure evaluation comprehension.  At the moment, it consists of 7 levels of 10 questions.  Each question presents you with a Clojure form.  You are given an answer box to submit your answer.  An answer is initially worth 100 points.  Entering an incorrect answer drops the possible point value by 10, so a perfect score at this point is 7000 (7 levels x 10 questions per level x 100 points).

I started writing Eon for a few reasons:

  • I wanted to get out of a rut where every personal project started to look like a blog engine.
  • I wanted to learn ClojureScript.  There are lots of interesting things happening in ClojureScript lately, and I wanted to get my feet wet.  Eon is written in ClojureScript with Reagent handling the UI.
  • Working on this helped solidify my understanding of simple Clojure evaluation.
Eon is very basic, but I hope that other Clojure beginners out there find it useful.  There are levels/questions that I'd like to add, but due to some limitations in the way I'm handling answers, I'm not sure I'll get to them.  Plus, I'm already itching to create something more substantial using ClojureScript--it's a lot of fun to work with.

If you have questions, comments, or find bugs/see something wrong, please let me know via email or on Twitter.

Breaking Out of the Blog Engine Cycle

Looking back at 2013, I can't help but notice that every web app I made is basically a blog engine.  Each app has some type of Post model, possibly a Comment model, a view for a list of Posts, a view for the details of a Post, and a way to filter them based on users, tags, etc.

I hereby declare 2014 as the Year of Breaking Out of the Blog Engine Cycle.

2013 Clojure Cup Postmortem

Gearing up for getting down.

I was exhausted after submitting Clojurians as my entry for the 2013 Clojure Cup.  I figured that people who say "I could write that in a weekend" were full of crap, but now I know it for sure.  Keeping up the energy level and sustained focus over a weekend of hard-core coding is tough stuff, even for a simple site like mine.  There are so many little things that go into building even the simplest functional web app.   Despite some sore eyes, it was a fantastic experience.

Here are my thoughts on doing a 48 hour programming competition:

Breaks

The importance of breaks cannot be overstated.  Taking periodic breaks, moving around, and drinking fluids is a must.  When I say break, I mean away from the computer.  It is very easy to check the clock and realize you've spent the last 2 hours staring at the monitor typing away.   It happened to me a couple of times.  A timer might not have been a bad idea.  Not taking breaks away from the computer made seemingly simple problems that cropped up harder to deal with, especially as it got later into the evenings.

Support

If you have a family, having a supportive one is a must.  I was an MIA husband and father for much of this weekend, although we went out on Saturday afternoon to eat some St. Louis pizza (I don't care what Jimmy Kimmel thinks).  I'm lucky to have a family that allowed me to hole-up in the kitchen and let me work peacefully.  They were great and I owe them something fun.

Comraderie 

Engaging with the folks in the #clojurecup irc channel was worth it, especially for a team of one.  I liked seeing how helpful everyone was towards one another.  It was also fun watching the live feed on the Clojure Cup page.  Seeing other Clojurian's setups was cool--people from all over the world were tweeting pics.

48 hours is not a lot of time

Although I prepared on paper quite a bit for the competition, I had to cut features as time started running out.   Time went from adequate to scarce very quickly.  In this competition you had to set up a VPS from scratch in addition to writing your web app.  I'm lucky that my setup and install went smoothly.

Knowing the tools

I put off learning some tools (particularly ClojureScript and Pedestal) because I didn't think there would be enough time to learn them beforehand and be useful in them when it mattered.   Not being 100% comfortable with Clojure and some of the libraries I used cost me some time, so this was a good choice.  I struggled with a few things that would not have been a problem for experienced Clojure programmers.   Having said that, I learned a lot in a very compressed amount of time.

Tero Parviainen

I want to give a huge thanks to Tero Parviainen and the Clojure Cup organizers.  Tero put a great face on the competition and was quick to help out anyone with questions or problems.  The amount of work required to pull something like this off must be huge.  He handled it admirably.

All in all, I had a blast and I'm proud to have been a part of Clojure Cup 2013.  What a rewarding experience.  Good luck to everyone who finished!   See you next year?

If you're a Clojure developer, go check out my app Clojurians and register yourself!  If you find it useful, vote for me when voting opens on Tuesday!

Update: Clojurians now has a permanent home at http://clojurians.org.  The source is available at GitHub.

Adventures in Luminus

A few weeks ago, I started to take a tour of some of the Clojure web frameworks. To get to know them  better, I'm going to pick a few frameworks and build a simple database-backed "Choose Your Own Adventure"-like story engine .   I like this idea because the project is easy to understand and has a simple architecture but is complex enough that I'll need to understand how each framework works.  I also thought the end product might be fun.

The first web framework on the tour is Luminus, a framework spearheaded by Dmitri Sotnikov (aka Yogthos).   My initial project, called Adventure, can be found here, with the source hosted on GitHub.   I also seeded the site with its first story titled "Cube Dweller".

Luminus refers to itself as a "micro framework".   It is a Leiningen template that ties several open-source Clojure libraries together and provides the  starting scaffolding for a project's initial code base.   Luminus sits on top of lib-noir, but other libraries can be removed or swapped out with whatever you prefer.  Luminus embraces flexibility, suggesting ways of doing things, but allowing you to change just about anything.

I found the scaffolding Luminus creates to be similar to what I had done in previous projects.   The code layout is easy to understand, using common organization idioms.   A starter project contains Bootstrap for the initial look and feel, as well as example routes and templates for a Home and About page so you can see how it all works together.  Luminius also has support for generating scaffolding for specific databases, Clojurescript support and a few other features using profile hints.

Luminus also includes the recently-released Selmer templating library (also by Sotnikov).  If you are familiar with Django, you will be right at home with Selmer since it is modeled after Django's template syntax.   Selmer includes many of Django's tags and filters and makes adding new ones easy.   It also includes some of the more advanced features like template inheritance and dev-time reloading.    Selmer was great for me--someone familiar with Django who wanted to ease into Clojure web development.   It's also fast and decently documented.

Although my project needs were modest, I found Luminus to be a big help.   It let me quickly get in and move forward with my project rather than deal with starting-project ceremony.   I feel like I have control of my project and can change whatever I want.  I'm also interested in the support for introducing Clojurescript to Adventure.   At the level I'm at with Clojure web development,  I think starting with Luminus was a great decision.

So, go forth and Adventure with Luminus!

Adding Markdown support to Clabango templates

If you're coming to Clojure web development from Django, you might be interested in Clabango by Dan Larkin.  Clabango is a Clojure templating library modeled after Django's.  It supports several of the Django filters and tags (including the can't-live-without include, block, if, for and extends), but also allows you to extend them by writing your own.

On my current side project, I wanted to add support for writing text entries in markdown and have the templates output the text in html.  Thanks to markdown-clj by Dmitri Sotnikov, this was very simple.

In a namespace for my project's filters, I required markdown-clj, then passed Clabango's body argument to md-to-html-string:

(ns logbook.filters
  (:require [clabango.filters :as filter]
            [markdown.core :as md]))

(filter/deftemplatefilter "markdown" [node body args]
  (when body (md/md-to-html-string body)))

Note that the return value of the deftemplatefilter is a string, rather than the map that Clabango's current examples demonstrate. There is a difference between the source on Github and the binary on Clojars.

Now wherever I need to convert text from markdown to html in a Clabango template, I pass the text to the new markdown filter:
    {% for entry in entries %}
  • {{ entry.title|markdown }}
  • {% endfor %}
I was really impressed by how simple and easy this was.  Thanks guys!

Update:  Dmitri has released Selmer.

Bookmarks migration


I migrated Bookmarks off of Heroku.  Heroku generously offers one free dyno that you can use to try out their services.  I found the Heroku environment, tooling, and documentation excellent.  Unfortunately, when you are only using a single web dyno and it hasn't seen any traffic in one hour,  the dyno is idled out.   The next request requires restarting the dyno process, which takes seconds.   I understand why they do it, and there's no way I'm going to complain about something that is free, but it is unworkable for Bookmarks.  Since I'm the only one using my web app, it would idle frequently throughout the day.  Trying to save a bookmark required a frustrating wait.  Since I already have a VPS with Linode, I migrated Bookmarks over there.

I have several web apps already running on Linode, and a few of them are now years old.  Moving Bookmarks made me revisit the dated setup.  I was running apache + mod_wsgi and nginx with all web apps using the global Python install.    Many Django folks recommend using nginx + gunicorn or uwsgi these days.  I chose gunicorn since it is popular and easy to set up.  Each web app now runs in its own virtualenv and is managed using Supervisor.   This setup makes it much easier to maintain and grow, and now Bookmarks is more responsive. 

Bookmarks

It's been a long time since I've written anything here.  It's also been a while since I had any personal projects to write about.  Things in the web and mobile worlds have changed quite a bit since my last entries.

In order to get up to speed with modern Django and javascript web development, I decided to create a personal project and blog about it.    The project is eponymously named "Bookmarks".  It's an old idea (social bookmarking) built using modern web development tools/frameworks.  I like Django, so that's my starting point.  At first the app will be a simple CRUD html website using Django templates, then I'll add a REST API and pick some javascript framework for the front end.   If I make it this far, I may add some goodies that make it more usable on a mobile device.

The code for this project will always be available on GitHub.  I haven't decided on how to host it yet (self-hosted, Heroku, Amazon, etc), so there's no working site yet.