Nulis JavaScript karo ES6, Flow lan Babel

Wacanan iki gawe boso jowo ngoko karo bahasa indonesia lan ditambahi bahasa inggris (seng aku ora ngerti jawane) dadi nuwun sewu sak durunge lek bahasane rodo morat marit…

Dadi artikel iki tujuane yo iku yak opo carane nggawe aplikasi JavaScript ECMAScript 2015 utowo luwih dikenal ES6 lan karo dibantu ambek tool Flow sisan. Opo iku Flow?

Facebook Flow

Gampangane ngene flow iku fungsine yo iku mbatesi tipe data misale data nomer telpon sing kudu duwe tipe ongko (lak ora mungkin to nomer telpon ono hurufe?)

let telpon: number = 082188232300

Masano JavaScript iku ora koyok boso program Java utowo C# sing asline ancen boso loro iku boso pemrograman model strict-type lan compiled tapi JavaScript yo iso digawe model strict-type yo iku gawe Flow. Fungsi utomo Flow liyane yoiku gawe dokumentasi kode. Maksude piye?

Dadi flow iki njagani developer supoyo data sing di leboke misale nang fungsi JavaScript iku ora salah dadi ono tipene dewe. Contone

function simpenWacanan (tulisan) {
  // simpen nang database 
}

Gambarane koyok ngene…Aku kate nyimpen wacanan gawe fungsi sing jenenge simpenWacanan tapi lek ndek JavaScript tipe data opo ae aslie iso di lebokno, mbuh iku string, number, array ta liyane, dadi supoyo gampang di ngerteni ambek awake dewe opo maneh developer liyane sing moco kode iku maeng, mangkane model data tulisan nang fungsi simpenWacanan kudu dibatesi tipene.

Carane mbatesi data tulisan iku maeng lek gawe tool Flow contone ngene iki

function simpenWacanan (tulisan: Post) {
  // simpen nang database 
}

data tulisan dibatesi karo tipe data Post. Njur data tipe Post iki isine opo? Sakjane sembarang sakarepmu misale koyok ngene

export type Post = {
 title: string,
 content: string,
 postCreated : any,
 author: string,
 tags: Array<string>,
 generated_keys?: any
}

Dadi developer sing moco kode iso ngerti lek tulisan seng kate disimpen ndek fungsi simpenWacanan kudu duwe tipe Post seng isine title, content, postCreated, postPublished, lan sak teruse.

Kelemahane Flow iki yo iku developer kudu gawe alat bantuan koyok Babel gawe ngilangake tipe data. Lho kok di ilangno?

Aslie JavaScript ikut ora mendukung seng jenenge data strict-type dadine supoyo kode iku iso dilakokno ambek engine JavaScript V8, script utowo kode iku maeng kudu dirijiki disek tekok tipe data-tipe data koyok Post. Mangkane Flow iki asline tujuanne mung gawe dokumentasi kode tok.

Carane mrikso JavaScript nggawe Flow sakdurunge awakmu kudu ngetik

$ flow init
$ flow conto_file.js

Babel 6

Sing jenenge Babel iki fungsine ngubah script supoyo iso kompatibel ambek browser utowo platform Node.js, dadi misale awakmu pengen gawe fitur module ES6 tapi awakmu jek gawe Node.js 4.0.0, nah supoyo script ES6 iku iso mlaku ndek Node.js 4.0.0 carane yo iku maeng gawe sing jenenge Babel. Yak opo carane?…Ngene, dadi ndek folder projekmu isien file .babelrc

{
 “presets”: [“es2015”],
 “plugins”: [“transform-flow-strip-types”]
}

terus ojok lali di instal modul plugin gawe Babel 6 koyok iki parintahe

$ npm install --save-dev babel-plugin-transform-flow-strip-types babel-preset-es2015

terus siji maneh sing kudu di install yoiku babel-node lan fungsi utamane yo iku gawe ngartikke file JavaScript ES6.

$ sudo npm install -g babel-cli

Misale file projek ecek-ecek iki jenenge app.js, isine koyok ngene

/* @flow */
‘use strict’
type Post = {
 title: string,
 content: string,
 postCreated : any,
 author: string,
 tags: Array<string>,
 generated_keys?: any
}
let catetanku: Array<Post> = [];
 
class Catetan {
 constructor(){
   //ora lapo lapi
 }
 tambahan(tulisan:Post) {
   catetanku.push(tulisan)
   console.log(catetanku)
 }
}
let catet = new Catetan();
let tulisan_siji:Post = {
 title: ‘Mene Klopo’,
 content: ‘Carane menek klopo’,
 postCreated: new Date(),
 author: ‘Ndoro Kakung’,
 tags: [‘bluluk’, ‘cengkir’, ‘degan’, ‘klopo’],
 generated_keys: 123456789
}
catet.tambahan(tulisan_siji)

Lek dilakukne gawe babel-node file app.js

$ /usr/bin/babel-node app.js

Wes titik ae, lek ono sing ditakokno isien ndek komen. Maturnuwun