First Impressions of Swift

This morning I began working through the swift tutorial.

The playground is neat.

The synatx is familiar. The let and var keywords are comfortable coming from ES6. Built in optionals are nice. The weirdest thing so far is the optional binding in if statements. For example:

if let name = optionalName {
    greeting = "Hello, \(name)"
}

I guess it saves you the unboxing shuffle you’d otherwise do, e.g in Java:

if (optionalName.isPresent()) {
  String name = optionalName.get();
  greeting = "Hello, " + name;
}

It’s interesting how Swift differentiates between structs and classes by how they are passed as arguments. Structs are pass by value and classes/objects are pass by value. Structs can have functions and initializers, just like normal classes. However, structs aren’t compatible with inheritance or type casting. Here’s an example struct in Swift.

struct Card {
    var rank: Rank
    var suit: Suit
    func simpleDescription() -> String {
        return "The \(rank.simpleDescription()) of \(suit.simpleDescription())"
    }
}
let threeOfSpades = Card(rank: .Three, suit: .Spades)
let threeOfSpadesDescription = threeOfSpades.simpleDescription()

A Brief and Biased History of Javascript

First there was jQuery--a javascript library that makes finding and manipulating the DOM much less verbose using CSS selectors.  It was introduced in 2006.  Over time jQuery gained a lot of utility functions, including more succinct support for AJAX calls (a pretty wrapper around XMLHttpRequest).

Underscore.js is a utility library for javascript that allows for a functional style of code (e.g. _.each instead of a for loop).  It was released in 2009.

Lo-Dash is a fork of underscore originally intended to make certain feature consistent across environments (e.g. browsers and Node).  It's API-compatible with underscore, and bills itself as a better-tested, better-performing, alternative.  It started in 2012.

CoffeeScript hit the scene in late 2009.  It transpiles to javascript and is the default scripting language used by the Rails framework.

AngularJS is a framework for developing web applications developed by Misko Hevery at Google and released in 2009.  Misko was one of the main authors of Google's testing blog, and his posts informed many of my opinions on testing and dependency injection.  He brought these ideas to javascript development with Angular.  Angular sets up a dependency injection system and a system for controlling scope.  It swaps snippets of HTML in and out of the live DOM dynamically.  Angular handles updating those DOM snippets in response to changes in application state (e.g. when an AJAX call returns).  It also has a templating system and an HTML pre-processor so you can embed simple looping and variable access inside the HTML.  The tempting system behaves much like Rail's ERBs.

Angular feels similar to rails in that it establishes a standard folder structure and set of components (controllers, views, services, directives).  Thus it establishes conventions, making it easier to start or learn an Angular-based project once a baseline understanding of Angular is established.  A notable difference is that Angular runs entirely in the web browser rather than on the server.

Backbone.js was initially released in 2010.  It's known for being a lightweight Model-View-Presenter framework.  It was written by Jeremy Ashkenas, who also wrote Underscore.js and CoffeeScript.

Ember.js is yet another javascript framework (like Angular, React, Backbone, or Aurelia).  Development started in 2011 by Yehuda Katz of jQuery and Ruby on Rails fame.  Ember uses Handlebars templating engine (which is an extension of Mustache).  It follows the Rails convention over configuration approach.  I'd probably give this serious consideration if I were building a Rails-backed web application.

React is an alternative to Angular developed by Facebook and initially released in 2013.  It provides a simpler framework than angular that also does less.  One of its defining characteristics is that it embeds HTML templates (known as JSX) directly in the javascript.  This is great for developers, as the view code that uses their javascript is maintained in the same file where that javascript is defined.  React establishes good patterns of development--providing a simple system for decomposing and reusing javascript components.  However, it doesn't do as much as angular.  I think there's no dependency injection or testing.

React defines a one basic constructs: a component.  A minimal component has contains just render() function.  Components can be constructed with  mutable state and immutable props.  Components can be composed in the JSX syntax, which is then transpiled into javascript DOM manipulation by babel.  When state is changed, React handles re-rendering all affected components.

Flux is another Facebook tool that was developed in concert with React.  It appears to have been released in 2014.  It's described much more capably in the Cartoon Guide to Flux .  Basically it solves the problem of multiple views updating multiple models and also responding to their updates by enforcing a unidirectional data flow (from models to views).

Redux was created as a refinement on Flux, solving similar problems in a manner that also allows better support for developer tools, hot reloading, and time travel.   The Cartoon Guide to Redux is a great intro.

Relay is yet another Facebook product (released in August 2015) that works in concert with GraphQL to consolidate data queries across multiple components.  They are described by Lin Clark with exceptional clarity in the cartoon guides to Relay part 1 and 2.  Essentially it consolidates, optimizes, and prioritizes data fetching (via GraphQL) so that round-trips are minimized without consuming unnecessary bandwidth.  It sounds like this is actually a critical front-end half of GraphQL.

GraphQL (also Facebook, also 2015) is a syntax for querying data from a server.  The graph refers to an object graph.  This is completely independent of whether data is stored in a graph database or a traditional relational database.  GraphQL offers an alternative to REST API design.  Instead of using URL components to request data, you use the message body with GraphQL syntax to specify which objects and fields are needed.  Thus the response structure can be somewhat tailored to the client's needs--it won't contain any data other than what the client specifically requests.

Aurelia is a new (c.a. 2015) alternative to Angular, built by a guy who was involved in Angular 2.0 direction, but decided to build his own alternative.  It sounds like the goal is to be more flexible than Angular--allowing you to choose your own parts to the framework.  It also uses ES 2016 out of the box.

Final Thoughts

That's enough to make my head spin, and I'm sure I've missed some important things.  TypeScript and the various ECMAScripts certainly deserve some discussion.  Node.js also deserves some untangling regarding how it relates to in-browser Javascript.  Also Vue.js was mentioned as being possibly the best hybrid of React and Angular.  Also Elixir (not Javascript, but perhaps a front-end alternative thanks to babel?)  Perhaps I'll write more on all that later.

For now, I plan to learn more about Relay and GraphQL.  I really like what I'm reading about the architecture patterns that Facebook has established for front end.