FrontEnd Developer

Recently I was working on some reasonml/ReasonReact project which required to request data in JSON format from an API endpoint, well there are some BuckleScript decoders such https://github.com/glennsl/bs-json which is the more popular one,
the way you decode is pretty easy:

point = {
  x: int,
  y: int
};

let point = json =>
    Json.Decode.{
      x: json |> field("x", int),
      y: json |> field("y", int)
    };

you pass in the json and define the field in Json.Decode…

at first it was ok to use for basic JSON structures, utill I came across to some deep nested level JSON format, it was so difficult to manually decode it with bs-json.

Someone pointed me to atdge(Atdgen is a command-line program that takes as input type definitions in the ATD syntax and produces OCaml code suitable for data serialization and deserialization.) and realised how stupid I am.

Atdgen allows you to share types in a format call xxx.atd. Where you define all your types in atd file, example in xxx.atd:

type gender = [female | Male| Others]

type person = {
  age: int;
    name: string;
    gender: gender;
}

type people = person list

so you have a list of person where contains some record age, name and gender as variant, so you want to decode this in JSON, its pretty easy with atdgen()

which comes with some Cli commands which allows you to generate the atd file into multiple format. You can install atdgen with opam install atdgen well yes you can install opam from brew

check list of commands from atdgen by calling atdgen --help, lets say we want to generate file type file that can be used in ReasonML project, you can generate the file with:

atdgen -t xxx.atd
atdgen -j xxx.atd

this will product 4 files where you can use it to deal with OCaml Type definitions and JSON.

since we are working with BS(BuckelScript) and we want to generate types and JSON decode for BS, we can use atdgenbs, opam install atdgenbs

atdgenbs -t xxx.atd
atdgenbs -bs xxx.atd

this will again generate 4 files but now we can use it to deal with BS Type definitions and JSON.

To learn how to decode, there is a guide here:

fast piping allow you to transform your function code into more readable syntax, imaging you have human(person(age())) this is very inconvenience to see. with piping you can do it like this:

age
->person
->human

which is exactly the same as human(person(age()))

there are 3 different pipes as I understand you can do like

age
|> person
|> human

or
human @@ age->person

whats different is that |> will put the parameter on the right side and -> on the left side

person->human("something"); this will take person function and use on the first parameter so it become
human(person, "something");

however if you are using person |> human("something"); it become human("something", person);

and @@ is like wrap into ()

human @@ age->person
is same as human(age->person) which will equals to human(person(age()))

you can readmore here

Recently I converted one of my old React project while studying React from Udacity sometime back, Since I am reading ReasonML recently so I thought I might as well convert to ReasonML language or ReasonReact, you can find it here. MyRead ReasonReact

When you start to work with lots of React components, and you realised alot of component patterns are the same, then you want to reuse these component patterns which is where Higher Order Component(HOC) kicks in. Think of HOC as higher order function:

usually you write function in Javascript:

  const thisFunction = function(a, b) {
    return a + b;
  }
  thisFunction(1, 2); // return 3;

Higher order function basically is just a function returns a function.

  const higherOrderFunction = function() {
    const thisFunction = function(a, b) {
      return a + b;
    }
    return thisFunction;
  }

  const getHigherOrderFunction = higherOrderFunction();
  getHigherOrderFunction(1, 2); // return 3

lets take an example at React Components:
Continue reading “Using react higher order component”

Recently Facebook has released the react 16.3 which bundled with a few awesome features including Context API and createRef(), I will talk abit about Context API since its quite hot topic.

Context API its a feature that allows you to pass your data down to all child levels without passing props around like what you used to do. Lets take below code as example and we will convert to use Context API.
Continue reading “React js 16.3”