Slide 1

Slide 1 text

ROCK SOLID Web Apps With HASKELL And JAVASCRIPT! !!!!!!

Slide 2

Slide 2 text

About Me ● 9+ years as a software developer ● Consulting in Web, Mobile, and Embedded Systems domains ● Currently Bootstrapping a Mobile App Startup ● In Santiago as a part of Startup Chile

Slide 3

Slide 3 text

I ♥ Programming Languages ● 6+ Years as a Javascript Developer ● 10+ Years as Haskell Developer (on and off) ● Have also worked with other “modern” languages such as Ruby, Python, Erlang, & Lua ● Still in search for the elusive “Sweet Spot” of Web Development

Slide 4

Slide 4 text

“The Javascript Problem” ● Javascript is the de facto platform for web development ● However it wasn't designed for large complex apps ● Javascript is elegant and frustrating at the same time!

Slide 5

Slide 5 text

This is What JS Feels Like To Me

Slide 6

Slide 6 text

Javascript Is Huge ● Universal ● Huge Developer Community ● Large Number of Libraries and Frameworks ● Build and Infrastructure tools – NPM – Grunt – Bower ● IDE Support

Slide 7

Slide 7 text

Javascript Is Elegant ● Higher Order Functions ● Anonymous Functions ● Closures ● Recursion ● Dynamic Objects ● Object and Array Literals

Slide 8

Slide 8 text

JS Lacks Crucial Functionality ● No Typing ● No Module System or “import” Statements ● No Data Structures ● Broken 'this' keyword and Inheritance Model ● Single Threaded ● Callback Hell

Slide 9

Slide 9 text

JS Has Lots Of Warts ● args = Array.prototype.slice.call(arguments); ● handler(function() {this.foo()}.bind(this)) ● for (v in o) {if (o.hasOwnProperty(v)) { ● (function(newVar) { … })(oldVar); ● addHandler(Klass, 'method', args); ● if(!isNaN(parseFloat(n)) && isFinite(n)) { ● setTimeout(function() { … }, 0);

Slide 10

Slide 10 text

Transpilers To The Rescue ● Coffeescript ● Typescript ● Purescript ● Dart ● GWT ● Elm ● Roy ● And perhaps a million more https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that- compile-to-JS

Slide 11

Slide 11 text

Haskell Solutions ● QuasiQuotation – Julius – JMacro ● Subset of Haskell – Fay – Haste ● Full Haskell – GHCJS

Slide 12

Slide 12 text

Haskell JS Interop Used To Be Like This

Slide 13

Slide 13 text

Now Haskell And JS Are Awesome Together!

Slide 14

Slide 14 text

Why Haskell + JS ● Elegant ● Concise ● Modular ● Strongly Typed ● Overcome Most (All?) Javascript Warts ● Can Drop Down to JS Whenever Needed ● Focus on Features instead of Workarounds ● Works Best With Haskell on the Server Side

Slide 15

Slide 15 text

Quasiquoted Haskell Solutions

Slide 16

Slide 16 text

Julius ● Type Safe JS Includes ● Type Safe Variable Interpolation ● Type Safe URL Interpolation ● “Stick your Haskell into JS – with Type Safety!” $(function(){ $("section.#{sectionClass}").hide(); document.location = "@{SomeRouteR}"; ^{addBling} });

Slide 17

Slide 17 text

Jmacro ● Programmatic Generation Of JS Code ● QuasiQuoted Syntax mostly compatible with JS ● Syntax is Statically Checked At Compile Time ● Type Safe Variable Interpolation ● Hygienic Names ● A Bunch of Additional Syntactic Features ● “Haskell Macros for Javascript”

Slide 18

Slide 18 text

Jmacro Syntactic Additions ● Block Level Scoping ● Concise Syntax for Lambdas and Function Application ● Destructuring Bind (a.k.a. Pattern Matching) var x = “abcd” var foo = \x -> bar x + x \[a,b] -> a; \{| x:u, y:v |} [u,v] →

Slide 19

Slide 19 text

Subset of Haskell Solutions

Slide 20

Slide 20 text

Fay ● Proper Subset of Haskell ● Converts Haskell Source to JS Source ● Tiny Runtime ● Generates Simple Readable Code ● Supports Cabal (Haskell Package Installer) ● Trivial To Use FFI ● Provides Automatic Marshalling of JS values to Haskell and Vice Versa (The Dispatcher) ● Provides a Fay Monad for Side Effects ● Small Codebase

Slide 21

Slide 21 text

Sample Fay Program import Prelude main :: Fay () main = print $ fib 10 where fib :: Int -> Int fib 0 = 0 fib 1 = 1 fib n = fib (n - 1) + fib (n - 2)

Slide 22

Slide 22 text

Optimising Fay “Hello World” Stage Size Vanilla Compilation 62k Google Closure 3.8k -O flag 3.7k --no-dispatcher & --no-builtins 807 bytes Nested scopes removed and inlining 798 bytes

Slide 23

Slide 23 text

Fay Generated Output var i=new function(){function f(a){return new b(function(){var c;if(0===d(a))c=0;else if(1===d(a))c=1;else{var j=f(g(a,1)),e=f(g(a,2));c=new b(function(){return d(j)+d(e)})}return c})}function d(a,c){for(;a instanceof b;)a=a.f(c);return a}function b(a){this.a=!1;this.value=a}function k(){this.value=void 0}function h(a, c){this.d=a;this.e=c}function g(a,c){return new b(function(){return d(a)-d(c)})} b.prototype.f=function(a){return a?this.value():this.a? this.value:(this.value=this.value(),this.a=! 0,this.value)};this.b=new b(function(){var a=f(10),c=new b(function(){for(var c=d(a)+"",e=null,b=c.length- 1;0<=b;b--)e=new h(c[b],e);return e });return new b(function(){for(var a=c,b="",a=d(a);a instanceof h;)b+=a.d,a=d(a.e);console.log(b);return new k})});this.c=d};i.c(i.b);

Slide 24

Slide 24 text

Fay In The Real World ● I worked on a Large Production App About a Year Ago – Over 10k lines of Fay – 200-300 lines of JS ● Very Pleasant To Use ● If It Compiles, It Usually Works ● Being Able to Share Datatypes Across Server and Client Side is a Big Win! ● You Start Missing Typeclasses After a While ● No Source Maps Makes Debugging Hard ● Fay Forgets Types During Compilation!

Slide 25

Slide 25 text

Real World Fay Code section :: String -> Dom () section name = do Namevar var name ← h1 $ “Section ” ++ show name input $ do value name attribute "placeholder" "Name of the section'" bind "change" $ \newname do → alert $ “Name changed to ” ++ newname set namevar newname return False alert :: String Fay () → alert = ffi “alert(%1)”

Slide 26

Slide 26 text

Haste ● Like Fay But Supports Almost All Haskell ● GHC Compatible Whenever It Makes Sense ● Parses and Converts Haskell STG To JS ● Small Runtime (Not as Small as Fay) ● Generates Sort Of Readable Code ● Easy To Use FFI ● Provides Automatic Marshalling of JS values to Haskell and Vice Versa ● Compatible With Cabal ● Seamless RPC Calls with Haste.App

Slide 27

Slide 27 text

Haste In The Real World ● Haven't Yet Had a Chance to Use Haste In Production But Used It In Several Toy Projects ● Has All The Advantages And Very Few Problems Of Fay ● Generally Less Buggy Than Fay ● Implements All The Haskell That Is Relevant To Javascript Development ● Package Management is Much More natural ● Currently My Favorite Solution

Slide 28

Slide 28 text

Full Haskell Solutions

Slide 29

Slide 29 text

GHCJS ● A JS Backend For Haskell ● Supports Everything In Haskell ● Threads, Memory Management, Transactional Memory, IO, Everything! ● FFI to JS Instead of C ● Slow and Complex ● Currently Hard To Get Started With ● Rapidly Improving And May Become A Viable Alternative

Slide 30

Slide 30 text

Haste Is My Solution of Choice

Slide 31

Slide 31 text

Thank You! Questions?