Play Framework FormMapping in modern front-end frameworks

One of the celebrated features of Play (at least for me) are the built-in form validation and the JSON parsers and combinators. While the team behind Play wants everything to be reactive, they have not build in support to become reactive on the front-end too: Play supports classical HTTP requests and form posts, but the defined form validation is not easily available in say, JavaScript. Looking at all the work done to expose the Routes to JavaScript makes me wonder why no-one made the validation available too.

After having a conversation with another Play user I decided to give it a go and TADA: a converter from FormMapping to JSON. See my latest gist:

https://gist.github.com/hermanbanken/d65f88167b391bfd9cd72c3f9bef592b

TLDR: use something like this

def jsConstaints = Json.toJson(userForm.mapping.asInstanceOf[Mapping[Any]])(mappingFormat)

to generate JSON like this

{
  "key": "",
  "mappings": [
    { "key": "name" },
    { "key": "age", "format": ["format.numeric"] },
    {
      "key": "address",
      "mappings": [
        { "key": "address.street" },
        {
          "key": "address.city",
          "constraints": [ { 
            "name": "constraint.minLength", 
            "args": [ 10 ] 
          } ]
        }
      ]
    }
  ]
}

Browserify browserified libraries

Browserify does not like to eat his own output. When creating a npm library that is browserified make sure to derequire/minify the output so it can be reused in other projects without mystical ‘Cannot find module X’ errors where X is some file you know nothing about.

Possible fixes found in the wild:

  • Setting noParse for bundle A in the bundle B operation; or
  • Running the standalone bundle through derequire; or
  • Minifying the bundle

Summary,
if you own a library: make sure to minify or derequire the package,
if you use a library: make sure to noParse the library.

Reference: https://github.com/substack/node-browserify/pull/1151

RxSwift.Lifecycle

Once in a while I’m reminded that good API design is of vital importance. Today was such a day. Everybody developing for either Android or iOS platforms knows that one often needs to run something when the view is loaded or when it will appear. Both platforms provide nifty ‘callbacks’ for this:

Android vs iOS lifecycle diagram; iOS: viewDidLoad, viewWillAppear, viewDidAppear, viewWillDisappear, viewDidDisappear, viewDidUnload; Android: onCreate, onStart, onResume, onPause, onStop, onDestroy

It is good practice to start listeners onStart and cleaning up onStop (or other equal pairs). This is all good, and if we want to share functionality we simply create a subclass of UIViewController or Activity and we put the shared logic there. Then comes along another – very unrelated – piece of shared functionality which we also need to put in there: oops! We have only single inheritance. Or, we want that same functionality in both Activity and Fragment, or UIViewController and UITableViewController. There are two problems:

  • We can not override the same method multiple times (without creating a dependency chain).
  • We can not put the logic in 1 shared subclass if there are multiple parents (possibly related by inheritance), since we must create subclasses per specific parent.

Essentially there are some options to workaround this:

  1. Wait until Apple and Google add lifecycle events. That way we can create our own listeners or delegates.
  2. Create shared managers/utilties which we then delegate the logic to with 1 single call in 1 subclass per parent type.
  3. Swallow our pride and create a whole chain of subclasses per root type and per functionality. This becomes nasty very quickly.
  4. Change the compiled or byte code of the top most parent type. By adding lifecycle events we are essentially doing point 1 ourselves.

From how above list is formatted and the title of the article you can guess my preference.

Intermezzo: RxSwift
Since I use Rx (Reactive Extensions) a lot I found I had the following pattern quite often:

var disposable: Disposable? = nil
func viewDidLoad() {
  disposable = getSomeNiceObservable()
    .map(someTransformation)
    .subscribeNext { print($0) }
}
func viewDidUnload() {
  disposable?.dispose()
}

The same holds for Android. Luckily RxSwift adds a rx_deallocated Observable to NSObject which emits a value and completes in deinit. Now above code could be written like this:

func viewDidLoad() {
  _ = getSomeNiceObservable()
    .map(someTransformation)
    .takeUntil(rx_deallocated)
    .subscribeNext { print($0) }
}

Much shorter, and no extra instance variables needed, Eureka!

But this only works for deallocation, and as we are humans, we leak memory. If we retain self in the Observable sequence (this is quite common to accidentally do) a retain cycle is created between the Observable and self, the NSObject. To help and not hinder the programmer, it would be much easier if we could cleanup if the view is dismissed!

Introducing RxLifecycle
I created RxLifecycle, which works much like how RxSwift creates rx_deallocated. It provides 6 new Observables. Using a process called swizzling we swap the methods that correspond to the lifecycle with our own methods which trigger a Rx.Subject which is exposed by a normal field in a Swift extension. This way two Observable<Bool> are exposed:

  • rx_visible: did the controller appear/disappear?
  • rx_willBeVisible: will the controller appear/disappear?

Those are then conveniently split into Observable<Void> per distinct event:

  • rx_willAppear
  • rx_willDisappear
  • rx_appear
  • rx_disappear

Example usage:

Observable.interval(10, scheduler: MainScheduler.instance)
  .takeUntil(self.rx_disappear)
  .subscribeNext { print("\($0)") }

Find the full source at https://gist.github.com/hermanbanken/4ac458aede6290b59a4acd5d52b81a6f.