JSFoo 2016

The Elm Architecture (TEA) is widely talked and written about as a scalable way to approach web UI development. Yet, for many it isn’t clear about how to think about and model domains within the architectural “constraint” posed by TEA. This talk will dive deep into animations in user interfaces as an example of how to approach such “effectful” domains in Elm. We’ll take a look into well known models of animation deployed on mobile devices and in browsers and single step through building a model for working with general purpose animations in Elm. The ideas and approach outlined are expected to be portable into other domains too. The process presented will also illustrate using the Elm compiler as an interactive peer to arrive at a domain model as opposed to “just a code translation tool”. Will feature demos, of course.

Outline

1. A brief introduction to Elm and “The Elm Architecture”. (v0.17)
2. Component composition in Elm and typical usage.
3. Effectful domains that feel hard and how v0.17 addresses some of these difficulties. This is inspired by the “Tackling the awkward squad” work in Haskell.
4. Intro to animations in interactive systems
   1. Fixed animations
   2. Traditional reactive approach (Fran)
   3. Interruptible and retargetable animations
   4. The Core Animation model
   5. Physics based animations
5. Systematic decomposition of an Elm application.
6. Modeling various types of animations in Elm. Note that I won’t be talking about a layer atop SVG or CSS animations, but about elm code that determines the appearance and behaviour of an interface at every time step - i.e. the level where a developer has full control.
   1. Basic model of physics based animations
   2. Effects and application state transitions
   3. Drag-n-drop
7. Incorporating sophisticated animations in Elm applications.
8. Performance roundup.
9. Summary, code pointers, etc.

Based on ideas described in Functional thinking for fun and profit and Towards reactive animation in Elm but updated for Elm v0.17.

Requirements

A basic grasp of Elm would give a leg up. Will try and make it accessible to a wide audience of programmers.

Speaker bio

Currently heads engineering at Pramati Technologies, Chennai. Has been an Elm user and evangelist for a long time. Created elm-anima to illustrate how to think about animations in Elm and used it in internal and client applications - desktop and mobile. Fan of “doing it all in Elm” - from layout to styling to animations. Part of the Elm v0.17 pre-release group.

Links

• 1. Previous talk at JSFoo 2015 - Orchestrating the Web Audio API
• 2. Functional thinking for fun and profit
• 3. elm-anima

Slides

https://goo.gl/lDSisn