Tweet
Tweet

Slide 1

Slide 1 text

©2018 Wantedly, Inc. React with Reason Roppongi.js #1 20.Mar.2018 - Yuki Yamada

Slide 2

Slide 2 text

©2018 Wantedly, Inc. Yuki Yamada @yamadayuki I’m an Engineer @ Wantedly I write JS, Golang, Ruby … etc. Now I focus on Machine Learning.

Slide 3

Slide 3 text

©2018 Wantedly, Inc. What is Reason / BuckleScript ?

Slide 4

Slide 4 text

©2018 Wantedly, Inc. Reason https://reasonml.github.io Reason have BuckleScript/OCaml backend. It gives OCaml a familiar syntax geared toward JavaScript programmers. Powerful, safe type inference means you rarely have to annotate types, but everything gets checked for you.

Slide 5

Slide 5 text

©2018 Wantedly, Inc. BuckleScript https://bucklescript.github.io BuckleScript makes OCaml compile to clean, readable and performant JavaScript code. - Sound type system - Strong type inference - Expressive type features

Slide 6

Slide 6 text

©2018 Wantedly, Inc. ReasonReact

Slide 7

Slide 7 text

©2018 Wantedly, Inc. ReasonReact Why & What ReasonReact is safer and simpler than the React Application implemented with vanilla JavaScript. And you can easily integrate with benefit from OCaml syntax and its functionality such as Variants and pattern matching.

Slide 8

Slide 8 text

©2018 Wantedly, Inc. ReasonReact Sample Simple Button component

Slide 9

Slide 9 text

©2018 Wantedly, Inc. ReasonReact Sample Button component (Solid / Ghost / Transparent)

Slide 10

Slide 10 text

©2018 Wantedly, Inc. ReasonReact Sample Button component (Solid / Ghost / Transparent)

Slide 11

Slide 11 text

©2018 Wantedly, Inc. ReasonReact Sample Button component (Solid / Ghost / Transparent)

Slide 12

Slide 12 text

©2018 Wantedly, Inc. ReasonReact State, Action and Reducer ReasonReact stateful components are like ReactJS stateful components, except with the concept of "reducer" (like Redux) built in.

Slide 13

Slide 13 text

©2018 Wantedly, Inc. ReasonReact Router ReasonReact has tiny router functions to use with ReasonReact. - The simplest, thinnest possible - Easily pluggable anywhere into your existing code - Performant and tiny

Slide 14

Slide 14 text

©2018 Wantedly, Inc. Enjoy