Notes from JSUnconf 2016

Or, how I gave my first tech talk (on 3 hours’ notice)

24 Apr 2016

This conference was awesome: not too big, not too cramped of a schedule (long breaks between talk sessions), free drinks, snacks & meals (with vegan options!), unisex bathrooms (toiletries & tampons provided!), a code of conduct, and - most importantly, to me - a great diversity program that gave me and 16 others support to attend! The unconference format was really interesting, and worked better than I expected. It also enabled something I wasn’t planning on: I gave my first talk at a tech conference!

What’s an unconference?

There’s no pre-planned schedule; instead, at the beginning of each day, anyone who’s interested in giving a talk makes a short pitch of their topic, and for the next hour or so the rest of the attendees vote on which talks they want to attend. The highest-voted talks are selected, and begin shortly after that. It sounds like it would be chaos, but it works!

I gave my first tech talk! On 3 hours’ notice!

On day 2 of the conference, in a completely unexpected turn of events, I proposed, planned, and delivered a 30-minute talk within a period of about 3 hours. Am I crazy? Perhaps. But the good kind of crazy!

See, there had been some interest in functional programming in JS (as part of the unconference format, people can submit topics they’d like to hear a talk on as well), and some talks on specific topics related to functional languages/libraries, but no one had proposed a high-level general introduction about it. So, at literally the last minute of the talk-proposal session, I spontaneously got up and pitched “Learning Functional Programming with JS” (that’s how I learned FP, after all!).

Turns out people were indeed interested: my proposal actually got more votes than any other that day. Which meant that I would present in the main room, the only one out of the three tracks that was being recorded. So all I had to do was, you know, plan a talk and make slides from scratch and then speak for 30 minutes in front of a camera, all in the space of about 3 hours.

Yay! No, wait… panic!

Luckily my years of teaching experience and a few presentations at academic conferences came to the rescue. I had to skip a couple of the sessions before mine (luckily some talks were recorded), and get a little instant feedback from a few folks at the conference that I had gotten to know, but ultimately I was able to throw together a talk outline and some slides.

When it came to actually delivering the talk, it was actually less scary than I thought. I even had enough time to do an ad-hoc digression (on the chalkboard!!!) into persistent data structures, which are the topic of my first scheduled tech talk at !!Con 2016.

So, how did it go? I’ll let Twitter tell you:

Aw geez y’all, I’m blushing! :D

The whole thing was a great experience, and definitely gave me a huge confidence boost for speaking at more conferences in the future (look out, !!Con and EuroPython!). I would recommend it to anyone! Come to think of it, why aren’t you giving talks yet?

Some things I learned at JSUnconf

• The unconference format is pretty sweet!
• Giving a tech talk is not as scary as all that!
• HTTP/2 is a thing
• Service Workers are a thing
• There is a library for building neural nets in JS: Synaptic
• I want to learn Elm
• Flora Power Mate is so much better than Club Mate (i.e. it actually tastes like mate)!

Talk notes

These are the unedited notes I jotted down during the talks. Mistakes, omissions, and misunderstandings are totally possible! Don’t take my word for anything; when in doubt check out the slides!

HTTP/2

Speaker: Ole Michaelis (@CodeStars, nesQuick on Github), from Jimdo

• HTTP/1.1 has been in use since 1997
• But it has some problems:
  • Lots of requests required to load a single page; “request bonanza”
  • Have to load the page itself, assets, ad stuff, tracking stuff….
  • Requests have to be done one-at-a-time, creating a “‘waterfall’ of blocked requests”
  • This causes latency (e.g. ~10 second load time for a web page like The Verge)
  • Especially problematic for mobile
• You can get around it with weird hacks/workarounds, but these could violate best practices
• Google made a thing called SPDY (“speedy”), which was sort of a predecessor to…
• HTTP/2 is the real solution
  • Binary, not text
  • Single TCP connection, but multiple streams with requests running in parallel
  • Headers are compressed
• Each browser can determine how to figure out/build the tree of dependencies
  • Firefox has the most efficient implementation at the moment
  • It sets up the dependency tree of requests before actually making any requests (?)
• Sidenote: Huffman encoding
  • Take a string to compress
  • Count the frequencies of each character
  • Make a binary tree such that the leaf nodes are the characters arranged left-to-right from most frequent to least, and the leaves are connected through binary nodes from right to left, where each branch is labeled 0 on the left and 1 on the right
  • Use the path from the root of the tree to the character’s leaf node as the compression table
  • So the most frequent character will be 00, the least frequent will be e.g. 1111
  • This means more frequent characters have shorter compressions, so the overall compression will be as small as possible
• HTTP/2 is already in use (22% of sites(???)) - you should start using it now!
  • Customers using HTTP/1.1 will experience an increase in load times, but those using updated browsers will see a decrease

Natural user interfaces using JS

Speaker: @princi_ya, from Zalando

• Gesture-based interfaces, e.g. Intel RealSense 3D, Leap Motion
• Some terminology:
  • Augmented Reality, also called Mediated Reality(?): real environment augmented with virtual components
  • Virtual Reality: totally simulated environment
  • Perceptual Computing: automatically perceiving what’s happening in the environment
• Using JS/the browser to communicate with RealSense/Leap Motion SDK via WebSocket server and getUserMedia to access the user’s webcam
• JS-Object Detect - open-source library for object detection from webcam
• Unfortunately not very accurate - demo didn’t work

Elm: Web development with delight

Speaker: Bastian Krol (@bastiankrol), from codecentric

Slides

• Why Elm?
  • Clean syntax - inspired by Haskell(?) and OCaml
  • No runtime exceptions (!!!) - if code compiles, it will run
  • Interoperates smoothly with vanilla JS, you can use JS libraries
  • Reduces bug hunting
  • Everything is stateless & immutable
    • application is composed out of stateless functions
    • removes a whole category of bugs in JS
• Hello world:

  import Html
  main = Html.text "Hello Hamburg!"
  

• Convention: every Elm app has a “main” module, and that module has a “main” function

• Optional type annotations (best practice to add type annotations to all your top-level functions):

    import Html exposing (Html)
  
    greet : Int -> String -> Html
    greet number string =
      Html.text str
  
    main : Html
    main =
      greet "Hello Hamburg"
  

• Elm supports partial function application
  • when it takes in the Int in the greet function above, it essentially returns an anonymous function that takes a String and returns an Html
  • so there’s no real difference between greet : Int -> String -> Html and greet : Int -> (String -> Html)
• Signals
  • use Signal.map to do something with the input from the signal (e.g. map Mouse.x to Html)
  • can filter signals do drop certain events if you’re not interested
  • you can also
  • Further reading:
    • Elm guide to reactivity
    • Elm architecture tutorial
• Architecture
  • Features:
    • Unidirectional data flow
    • Single source of truth
    • Everything immutable & stateless
    • …these are similar to Redux and other popular libraries (who may have copied these features from Elm)
  • Uniform structure for apps
  • Main concepts:
    • Model: custom type that you declare (could be a simple int or a huge data structure)
    • Update: function that takes an action and the current model, and produces a new model (Action -> Model -> Model)
    • View: function that turns a model into an Html structure (essentially how you render the model)
• Compiler
  • Catches edge cases etc., e.g. empty lists
  • So if your code compiles it will run - no runtime errors!

Shipping an app to production using WebMIDI and WebAudio: Lessons learned

Speaker: Jan Krutisch

• Web Audio API
  • allows you to generate, play back, modify, filter, etc. digital sounds/music of any sort in a flexible way
  • can build synthesizers with it, use audio in your games, etc. etc.
• Web MIDI API
  • MIDI: Musical Instrument Digital Interface
• Weird bit operations in JS

Some experiences building an Android app with React Native & Redux

Speaker: Alex Bepple (@alexbepple), from it-agile

• Introducing a new term: Owdaf - One-way reactive data flow (aka unidirectional data flow)
• What’s cool about Owdaf?
  • All UI is a functional representation of the state of the (web/mobile/whatever) app
  • The user always sees the same thing if the state is the same
  • Changing what the user sees requires dispatching an action - but the presentational components don’t need to know anything about that
  • You change something in one place, and everything in UI gets updated automatically
• React Native
  • Bridge between JS and the UI
  • You have native components for the given mobile platform, but they’re controlled from a JS thread
  • Great ecosystem of components
  • Some gotchyas: require is different than in node, problems centering a grid, …
• Redux:
  • brings Owdaf to React Native (?)
  • can persist state using redux-storage library
  • can use libraries like redux-act to create actions and reducers
  • encapsulation is a problem (?)
  • there’s supposed to be time-traveling, but it didn’t work last he checked
• React Native & Redux together:
  • Biggest gotchya: how to represent navigation in your global state?
  • for regular React there is react-router-redux
  • no such thing for React Native (because the concept of a URL doesn’t really exist in a native app)