slide.md

Start R & B

johnhax.net/2017/r&b/ （观赏本 slide 请使用 Chrome 50+ 等支持 ES6、Fetch API 等新特性的浏览器）

个人简介

hax

贺师俊

百姓网 www.baixing.com

百姓网 架构组

Web 前端

HTML, Acknowledgments

做了 一点微小的 工作

JavaScript

Babel Atom ESLint   ...  

..<, 1 ..< 10

exclusive range 运算的符号

Groovy, Swift

JS

人呐… 自己就不可以预料

github: @hax zhihu: 贺师俊 weibo: @johnhax

R & B

<iframe width="854" height="480" src="https://www.youtube.com/embed/abaOVzZC4x8" frameborder="0" allowfullscreen></iframe>

R & B Reason & BuckleScript

What is Reason?, 近 JS 语法 -> OCaml

What is OCaml?, ML语言家族一员, F#, Scala, Elm, Haxe …

Software written in OCaml:, MirageOS, Flow, Infer, Hack, Haxe, Coq, Opa, WebAssembly …

Facebook

What is BuckleScript?, OCaml -> JS 编译器

张宏波

What is R & B?, JS -> OCaml -> JS

（二哈脸）

以近 JS 语法 写 OCaml 程序 并编译到 JS

Example

Quicksort

let rec sort list =>
	switch list {
	| [] => []
	| [x, ...xs] =>
			sort (xs |> List.filter (fun u => u <= x))
			@ [x, ...sort (xs |> List.filter (fun u => u > x))]
	};
let list = [1, 3, 2, 4, 5, 10, 23, 3];
let list = sort list;
list |> List.iter Js.log;

let rec sort list =
  match list with
  | [] -> []
  | x::xs ->
      sort (xs |> List.filter (fun u  -> u <= x))
			@ (x :: (sort (xs |> List.filter (fun u  -> u > x))))
\
let list = [1; 3; 2; 4; 5; 10; 23; 3]
let list = sort list
let () = list |> List.iter Js.log

let qsort = list => {
	if (list.length === 0) return [];
\
	let [x, ...xs] = list;
	return [...qsort(xs.filter(u => u <= x)),
		x, ...qsort(xs.filter(u => u > x))];
};
let list = [1, 3, 2, 4, 5, 10, 23, 3];
list = qsort(list);
list.forEach(i => console.log(i));

let rec sort list =>
	switch list {
	| [] => []
	| [x, ...xs] =>
			sort (xs |> List.filter (fun u => u <= x))
			@ [x, ...sort (xs |> List.filter (fun u => u > x))]
	};
let list = [1, 3, 2, 4, 5, 10, 23, 3];
let list = sort list;
list |> List.iter Js.log;

// Generated by BUCKLESCRIPT VERSION 1.7.4, PLEASE EDIT WITH CARE
'use strict';
var List       = require("bs-platform/lib/js/list.js");
var Caml_obj   = require("bs-platform/lib/js/caml_obj.js");
var Pervasives = require("bs-platform/lib/js/pervasives.js");
function sort(list) {
  if (list) {
    var xs = list[1];
    var x = list[0];
    return Pervasives.$at(sort(List.filter(function (u) {
                          return Caml_obj.caml_lessequal(u, x);
                        })(xs)), /* :: */[
                x,
                sort(List.filter(function (u) {
                            return Caml_obj.caml_greaterthan(u, x);
                          })(xs))
              ]);
  } else {
    return /* [] */0;
  }
}
var list = sort([1, [3, [2, [4, [5, [10, [23, [3, /* [] */0]]]]]]]]);
List.iter(function (prim) {
      console.log(prim);
      return /* () */0;
    }, list);
/* list Not a pure module */

Why?

Why another language?

Static Type

动态类型一时爽 代码重构火葬场

FP Functional Programming

React

FRP Functional Reactive Programming

Immutable.js

Ramda, Sanctuary

Problem

import R from 'ramda';
import S from 'sanctuary';
const $ = function queryElement(selector) {
  return S.toMaybe(document.querySelector(selector));
};
const $$ = function queryElements(selector) {
  let temp = document.querySelectorAll(selector);
  return temp.length ? R.map(S.toMaybe, temp) : [S.Nothing()];
};
module.exports = { $, $$ };

缺乏语言级别的支持

module Impl(T: { type t; }) => {
  external querySelector : string => option Dom.element = "" [@@bs.send.pipe: T.t] [@@bs.return null_to_opt];
  external querySelectorAll : string => Dom.nodeList = "" [@@bs.send.pipe: T.t];
};
\
let e = document |> querySelector ".list";

真·函数式语言

Elm, PureScript Clojure (ClojureScript)

Why OCaml

历史悠久 接近产业界

almost pure strict static type type infer

Why Reason

Syntax Matters!

Tools Matters!

Why BuckleScript

Performance Matters!

Fast compilation Finishes before others warm up

Minimal Runtime

FFI

Readable Easy to debug

Demo of R & B reason-react-example

bs-platform reason-cli vscode-reasonml BuckleTypes/index

Q & A