London ClojureBridge Event as Teaching Assistant

Clojurebridge experience as teaching assistant

I have been learning Clojure/ClojureScript over the last three months in my spare time. I felt lucky to be asked to volunteer to be a teaching assistant for the ClojureBridge event held at USwitch on the 19th and 20th Feb 2016.
I was feeling apprehensive initially due to my limited exposure to a functional programming language and most of the teachers and teaching assistants were either working full time with Clojure or had several years of playing with Clojure and were using a Mac while I have used Windows laptop to play with Clojure. The environment was friendly and everyone was ready to help each other making everyone feel welcome.

Clojurebridge is an event aimed for people identifying themselves as female or nonbinary with the purpose of introducing Clojure and  widening the Clojure community. The event was sponsored by USwitch and Shutl mainly and made possible with the 6 teachers and several teaching assistants giving their Friday evening and Saturday to the community happily. Some of the attendees with some experience in Clojure decided to be a teaching assistant instead of being a student on the day. Our roles were versatile.

I am still settling in my new job I started this month working longer hours to get comfortable with the different technologies used. which didn’t leave much time to prepare additional material for the event. I did a talk sharing my experience about learning Clojure at London Clojurians Group beginning of this month
https://skillsmatter.com/skillscasts/7531-experience-learning-clojurescript.

I was thinking of building something fun may be a game to inspire the audience to start playing for Clojure but did not have enough time to build anything. I spent the time familiarising and working through the exercises of the ClojureBridge curriculum to get ready for the event
http://clojurebridge.github.io/curriculum/#/

Since I have experience using Clojure on a Windows laptop, I was helping mostly students having windows to install the tools needed for the ClojureBridge event, i.e. leininghen, lightable, github (to pull clojure projects from github) and java jdk during the install fest on Friday evening to get the CLojure setup for Saturday. There were around 25 attendees trying to download the software around the same time causing the internet connection to drop several times slowing the download for the student I was trying to help.

We were pampered with pizzas, salad and beers which were welcome especially after a long day at work on Friday evening. The organisers, Denise Yu, Chris Howe-Jones, John Stevenson and others made sure we have tasty healthy food and drinks to keep going. For breakfast, bagels with different fillings, pastries, coffee and juice were provided. Much to our delight, we had chinese food for lunch followed by ClojureBridge cookies which I was reluctant to eat because they look perfect.

IMG_20160220_131502

We started Saturday morning with lightning talks by John Stevenson, Philip Potter and Chris Ford (live music code compiling @ http://ctford.github.io/klangmeister/).

CbpjSWKW0AAxL2y
The attendees were divided into three categories: new to programming, developers with no experience with Clojure and adventurous developers with some knowledge of Clojure. Teachers and teaching assistants picked the level of groups they were willing to teach. I picked the group with no programming experience. I was the teaching assistant and Waldemar Schwan was the teacher. He has done a brillant job teaching by using examples and the girls in our group were soon enthused to ask questions.

Cbpv4M8W0AAinX6

The newer version of LighTable 0.8.1 does not have the instarepl and the curriculum still has reference to instarepl. Waldemar was ingenious to suggest using a new file (.clj) to write code and evaluate line by line. The advantage was the student could save their work and evaluate only lines they wanted to run. Unfortunately LightTable seem to crash randomly on the attendees’ laptop and my classic solution was to close and reopen LightTable. Almost all attendees have a Mac with a few exceptions who had Windows. The UI of lightTable is similar with different keys to perform different actions.

The girls were amazing and were adventurous enough to go beyond the exercise. They tried to do a S shape and K shape with the Walk the Turtle exercise. (S and K are initials of two of the attendees) and one went on to create her extended family tree using map of maps. The inherent use of parentheses seem a hard to get used to but they would instantly correct it if their line of code does not run. The terminology was confusing one of the attendee thought vector was a list while list is a different data collection which was not mentioned in the curriculum. We got asked questions regarding immutability of data and tried our best to explain the power of immutable data collections. However it was harder to explain mutability of the atom and how it works well with immutable data collections to maintain states of an application.

The morning went smoothly and the afternoon I felt the attendees needed some time to process whatever was covered in the morning to continue with more concepts.
We finished the day with a retrospective so as we can get the feedback of the attendees to help improve the event in the future. Everyone seem to have enjoyed the event. Some wanted it to last longer while others wanted it to be shorter.IMG_20160220_165701

Input of type date to generate a date picker using Reagent in ClojureScript

I needed a date picker to use in ClojureScript application to enter date of birth.

I came across the pikaday  which I tried to use but the date range was limited and could not find a solution to not limit the date range.

The native HTML input control of type date can be generated in Reagent as follows

[:p "Enter Date Of Birth"]
;;using input control of type date to allow a date to be picked
[:input {:type "date"
:on-change (fn [e] (swap! pension-age assoc :dob (js/Date. (.-target.value e))))
}]

On the UI, the date picker

datePicker

ClojureScript – Power of Clojure to the web

ClojureScript is a compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

Why ClojureScript?

  • Allows to use functional programming.
  • Uses Immutable data structures. (Immutable.js library is available to enable use of immutable data structures with JavaScript. Watch Christian Johansen’s talk on Immutable JavaScript)
  • Uses Google Closure Compiler : advanced code compiling with dead code elimination
  • core.async: makes ajax asynchronous call look like synchronous without the use of callbacks
  • Om/React : React provides a functional approach for rendering DOM. Using ClojureScript and React makes some tasks , for example undo quite simple

A great tutorial to follow to learn ClojureScript is http://clojure.org/clojurescript which covers the basics of ClojureScript, environment set up with the use of Leiningen project, DOM interaction, routing,AJAX call, core.async, Om/React, browser enabled REPL and more.

The difference between JavaScript and ClojureScript is described in Compare ClojureScript with JavaScript.

Below is an example how to create an object in JavaScript and ClojureScript.

Create object in JavaScript
var foo = {foo: "bar"};
Create objects in ClojureScript
;; Create JavaScript objects with `js-obj`.
(def foo (js-obj "foo" "bar"))

;; ClojureScript supports  JavaScript data literals via the `#js` reader literal.
(def foo #js {"foo" "bar"})

;; It’s important to note that `#js` is shallow, the contents of
;;`#js` will be ClojureScript data unless preceded by `#js`.
;; This is a mutable JavaScript object with an immutable
;; ClojureScript object inside.
(def foo #js {"foo" "bar"})

Since I am using LightTable as the IDE,  an introduction to clojureScript to LightTable users is useful. If you are using a Windows machine, use ctrl + enter instead of command +ENTER to evaluate each form.

I got hooked up with the use of React with ClojureScript. The following interfaces are available to integrate React

The advantages and disadvantages of each of the above interface are described in “How to use React in ClojureScript, and why”

Furthermore external JavaScript libraries can be integrated with ClojureScript with the use of :foreign-libs option.

Building Single Page App “SimpleCalculator” with Reagent, Secretary and Accountant 

I followed the figwheel tutorial to create a project based on figwheel leiningen template.

lein new figwheel SimpleCalculator

It automatically creates a directory “SimpleCalculator”.   Open the folder using Light Table. It has the following structure.

figwheelFolderStruc

Open project.clj and add the following dependencies

[reagent "0.5.1"
:exclusions [org.clojure/tools.reader]]
[reagent-forms "0.5.13"]
[reagent-utils "0.1.7"]
[secretary "1.2.3"]
[venantius/accountant "0.1.6"
:exclusions [org.clojure/tools.reader]]

The dependencies tag look like

dependencies

Reagent is the interface for React in ClojureScript. Secretary is client side router for ClojureScript. Accountant makes navigation simple by triggering dispatches to Secretary defined routers and update browser’s path without a page reload.

Open Index.html file. Add the h3 tag above the “app” div.

<h3> Welcome to calculators</h3>

The Index.html will look like

Index

Open core.cljs  and copy and paste the code.

To run the application type
lein figwheel

lein_Figwheel

From the browser navigate to http://localhost:3449

The Maths Calculator is displayed by default

Maths_Calc

Click on BMI link to load the BMI calculator

BMI_Calc

The BMI calculation code has been taken from “Reagent: Minimalistic React for ClojureScript”

Click on Pension Age link to load Pension Age calculator

StateAgeCalc