Untuk menjadi seorang Web Developer atau seorang Front End Developer, ada banyak hal yang harus Anda pelajari. Beberapa di antaranya adalah fundamental html yang dapat anda baca disini dan juga bahasa pemrograman JavaScript.

Pada kesempatan ini, kita akan mempelajari lebih banyak mengenai  bahasa pemrograman JavaScript.

Di halaman ini, Anda akan mendapatkan jawaban untuk pertanyaan-pertanyaan seperti apa itu JavaScript, apa fungsi dari JavaScript, dan pertanyaan-pertanyaan lainnya.

Sudah siap untuk memulai? Mari kita awali dengan pengertian dari JavaScript.

Apa Itu JavaScript?

JavaScript merupakan salah satu bahasa pemrograman tingkat tinggi yang diciptakan untuk membantu Anda menciptakan sebuah halaman web yang lebih interaktif dan menarik seperti menampilkan animasi 3D, audio player, video dan lain sebagainya. 

The Basics of JavaScript. What is JavaScript and why should you… | by UH  COSC 4315 Group 4 | Medium

Ada beberapa cara dalam membuat program JavaScript, pertama dengan cara menulis langsung program JavaScript pada sebuah file html dengan cara membuat tag script

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // Tulis kode JavaScript disini
    </script>
</head>
<body></body>
</html>

atau dengan membuat file dengan ekstensi .js yang dihubungkan kedalam file html, kemudian file tersebut akan berjalan otomatis pada saat halaman web dimuat di browser.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lokasiProgramJavascript.js"></script>
</head>
<body></body>
</html>

Perlu diketahui, bahasa pemrograman JavaScript tidaklah sama dengan bahasa pemrograman Java, karena keduanya merupakan bahasa pemrograman yang sangat amat berbeda 100%.

Jika antara JavaScript dan Java merupakan bahasa pemrograman yang berbeda, mengapa mereka berdua memiliki nama yang mirip ya?

Sejarah Terciptanya JavaScript

Ketika bahasa pemrograman JavaScript diciptakan, nama yang dipilih untuknya bukanlah JavaScript, melainkan LiveScript.

Tetapi karena Java teramat sangat populer pada waktu itu, maka nama yang digunakan untuk bahasa baru inipun kemudian diganti menjadi JavaScript dengan harapan kepopuleran Java dapat mendongkrak JavaScript.

Seiring perkembangannya, JavaScript menjelma menjadi bahasa yang merdeka sepenuhnya dan memiliki spesifikasi tersendiri yang kemudian disebut sebagai ECMAScript.

Sekarang, JavaScript bisa dijalankan baik di browser, server, perangkat mobile atau di perangkat lain yang dilengkapi dengan program khusus bernama JavaScript Engine.

Browser biasanya memiliki sebuah mesin (engine) yang tertanam didalamnya yang disebut “JavaScript Virtual machine”. Setiap browser memiliki jenis engine yang berbeda walaupun saat ini ada beberapa browser dengan engine yang sama. Berikut contohnya:

Bagaimana mesin JavaScript di atas bekerja?

Perhatikan beberapa langkah di bawah ini.

Pada setiap langkah dalam memproses file JavaScript, mesin JavaScript (JavaScript Engine) akan melakukan optimisasi. Mesin bahkan sanggup melihat code yang sedang diubah ketika masih dijalankan.

Selain itu, mesin JavaScript juga mampu menganalisa data yang mengalir melalui engine. Selanjutnya, mesin akan mengoptimalkan kode JavaScript yang dieksekusi.

Kemampuan JavaScript

JavaScript merupakan bahasa pemrograman yang cukup aman. Apa maksudnya? JavaScript ini tidak menyediakan akses tingkat rendah ke Central Processing Unit atau ke memori karena ketika diciptakan, tujuannya adalah untuk digunakan oleh browser yang tidak membutuhkan akses tingkat rendah.

Kemampuan JavaScript bergantung pada lingkungan dimana ia dijalankan. JavaScript dalam browser atau yang biasa disebut dengan in-browser JavaScript sanggup melakukan banyak hal yang berhubungan dengan manipulasi halaman situs web, interaksi dengan pengguna, dan juga server web.

Berikut beberapa hal yang dapat dilakukan oleh JavaScript dalam browser:

Meskipun sanggup melakukan berbagai hal, in-browser JavaScript atau JavaScript dalam browser juga dibatasi dalam beberapa hal.

Batasan yang Diterapkan Pada In-Browser JavaScript

Demi keamanan para penggunanya, kemampuan yang dimiliki oleh in-browser JavaScript telah dibatasi. Hal ini bertujuan untuk mencegah halaman situs web yang jahat untuk mencuri informasi pribadi pengguna dan merusak data yang dimiliki oleh pengguna. Pembatasan yang diberlakukan dalam in-browser JavaScript antara lain adalah:

Read & Write File Didalam Hard disk

JavaScript tidak diizinkan untuk membaca serta menulis file secara sembarangan di hardisk. JavaScript juga tidak boleh menyalin file serta menjalankan program. JavaScript tidak memiliki akses secara langsung ke berbagai fungsi dalam sistem operasi. Browser terbaru secara terbatas memperbolehkan JavaScript untuk melakukan tindakan dengan melibatkan file.

Akses Mikrofon & Kamera

JavaScript memerlukan izin dari pengguna untuk mengakses mikrofon serta kamera dan perangkat lain yang terhubung dengan browser. Halaman yang mengaktifkan JavaScript tidak bisa diam-diam mengaktifkan kamera web untuk mengamati lingkungan sekitar serta menyebarkan informasi yang diperoleh dari perangkat yang tersambung dengan browser.

Same Origin Policy

Adanya Same Origin Policy. Kebijakan tersebut memungkinkan jendela atau tab yang berbeda tidak mengenali jendela atau tab lain. Seandainya tab atau jendela mengenali tab atau jendela yang lain, JavaScript dalam satu halaman tidak akan bisa mengakses halaman lain apabila kedua JavaScript berasal dari situs yang berbeda. Hal ini mengurangi pencurian informasi antara website yang sedang dibuka.

JavaScript dapat berkomunikasi langsung dengan server menggunakan koneksi internet. Namun, kemampuan JavaScript dalam menerima data dari situs web yang lain menjadi tidak berfungsi. Batasan tersebut tidak berlaku jika JavaScript dijalankan di luar browser, seperti di server.

Kehebatan JavaScript

Ada beberapa kehebatan JavaScript yang membuatnya menjadi lebih unik dari pada yang lain. Apa saja kah itu? Berikut diantaranya:

Dibandingkan dengan teknologi browser lain, JavaScript adalah satu-satunya yang menggabungkan ketiga hal di atas dan disinilah letak keunikan JavaScript.

Tidak heran JavaScript menjadi alat yang sangat disukai serta paling banyak digunakan oleh para pengembang dalam menciptakan antarmuka baik browser interface maupun mobile interface.

Bahasa Pemrograman Diatas JavaScript

Setiap orang memiliki kebutuhan yang berbeda terhadap bahasa pemrograman, begitu juga JavaSript. Kebutuhan ini biasanya didasari oleh pengalaman pada penggunaan bahasa pemrograman sebelumnya selain JavaScript.

Sehingga bahasa pemrograman baru banyak bermunculan, dimana bahasa pemrograman baru ini yang ditranspilasi atau diubah ke dalam JavaScript sebelum dijalankan pada browser.

Contoh bahasa bahasa-bahasa pemrograman yang berjalan diatas JavaScript seperti:

Anda telah mendapatkan detail lengkap mengenai apa itu JavaScript dan kelebihan serta batasan yang dimilikinya. Tidakkah Anda tertarik untuk membuat situs web dan aplikasi seluler yang lebih hidup menggunakan JavaScript?

Pada artikel kali ini kita akan belajar sebuah tutorial dasar reactjs dengan cara yang paling sederhana dan mudah untuk dipahami, jika kalian belum membaca artikel tentang reactjs sebelumnya, saya sarankan untuk membacanya.

Baca Juga : Pemahaman dasar reactjs untuk pemula

Pada tutorial dasar reactjs kali ini kita akan membuat sebuah aplikasi "Message Box" atau Kotak Pesan, aplikasi kotak pesan adalah aplikasi sederhana untuk menampilkan alert  saat sebuah tombol di klik.

Aplikasinya sangat sederhana, lingkup yang akan kita buat seputar membuat button dan menampilkan alert yang dikirim dari sebuah tombol.

Pemahaman Dasar

Ada beberapa cara untuk memulai menggunakan reactjs, dari yang paling mudah hingga yang tidak cukup mudah, karena membutuhkan beberapa instalasi yang cukup memakan waktu.

Oleh karena itu, pada tutorial dasar reactjs kali ini kita akan memulai reactjs dengan cara yang paling mudah.

Cara yang paling mudah untuk memulai reactjs adalah dengan menggunakan file HTML biasa, lalu kita import React, ReactDOM, serta Babel library kedalam file HTML yang kita gunakan. Tahapan yang perlu kita lakukan untuk memulai adalah:

  1. Buat file index.html - Sebagai file untuk menampilkan reactjs library
  2. Import react library - library yang diperlukan untuk memulai reactjs
  3. Import react dom library - library yang diperlukan untuk memulai reactjs
  4. Import babel - library yang diperlukan untuk melakukan kompilasi sintaks `jsx` pada JavaScript

Apa itu JSX?

JSX adalah singkatan dari JavaScript XML. JSX memungkin kita untuk menulis tag HTML didalam JavaScript. Berikut adalah contohnya:

ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

Kode JSX mirip seperti kode yang ada pada HTML, karena kita dapat menulis semua elemen yang ada pada HTML kedalam JSX.

Apabila sintaks diatas kita diajalankan di browser, maka sintaks diatas akan menampilkan pesan di dalam tag h1 , lalu tag h1 tersebut akan disematkan kedalam elemen  container.

JSX juga digunakan oleh pengguna reactjs karena mempermudah dan mempercepat dalam pembuatan sebuah UI komponen dibanding kode JavaScript biasa.

Apakah kita harus & perlu menggunakan JSX?

Jawabannya adalah tidak, karena itu preferensi masing-masing software engineer, namun perlu kita ketahui, tujuan dari dibuatnya JSX adalah untuk mempermudah dalam development reactjs.

Sebab, jika kita tidak menggunakan JSX dalam membuat aplikasi reactjs, kita akan sedikit kesulitan, karena kita harus menuliskannya seperti ini:

"use strict";
 
React.createElement(
  "p",
  null,
  "Welcome Selamat Datang di Reactjs Kopidev !!"
)

Menurut kalian lebih nyaman yang mana antara JSX dan tidak menggunakan JSX? Bagi saya pribadi lebih nyaman menggunakan JSX dan saya memilih menggunakan JSX.

Apa itu Babel?

Babel adalah sebuah Javascript compiler. Babel digunakan untuk mengkonversi ECMAScript 2015+ agar kompatibel dengan browser yang belum mendukung ECMAScript 2015+.

Pada kasus JSX yang kita tulis diatas, jika kita tidak menambahkan babel, browser tidak akan dapat menjalankan atau mengerti kode yang kita tulis, sehingga layar browser tidak akan menampilkan apapun karena menganggap script yang kita tulis tidak dikenali. Oleh karena jika kita menggunakan JSX, kita membutuhkan babel.

Ini adalah hasil kompilasi yang dilakukan oleh babel, terhadap sintaks JSX yang kita tulis:

// JSX SEBELUM dicompile
ReactDOM.render(
  <h1>Welcome Selamat Datang di Reactjs Kopidev !!</h1>,
  document.getElementById('container')
);

// JSX SESUDAH dicompile oleh babel
"use strict";
ReactDOM.render( /*#__PURE__*/React.createElement("h1", null, "Welcome Selamat Datang di Reactjs Kopidev !!"), document.getElementById('container'));

Membuat aplikasi sederhana dengan reactjs

Buka code editor, lalu buat sebuah file bernama index.html, pada file ini, kalian import 3 file yang dibutuhkan (seperti yang diterangkan diatas), seperti ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Latihan React</title>
    <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <!-- tag yang digunakan untuk menampilkan reactjs yang dibuat -->
    <div id="root"></div>

    <!-- tag yang digunakan untuk menulis code reactjs -->
    <script type="text/babel">
      /**
       * Seluruh code reactjs akan ditulis disini
       * /
    </script>
  </body>
</html>

Coba kita perhatikan script HTML diatas, saya menambahkan tag div dengan id root, tujuan elemen ini dibuat adalah sebagai elemen utama untuk menampung atau merender script Reactjs yang akan kita buat nantinya.

Dan juga ada tag <script tyle="text/babel"> tag ini digunakan untuk menampung seluruh file reactjs yang akan kita tulis.

Menambahkan Judul Aplikasi

Selanjutnya kita buat sebuah elemen untuk menampilkan judul aplikasi, seperti ini:

    <script type="text/babel">
      function MessageBox() {
        return (
          <div>
            <h1>Kotak Pesan Kopidev</h1>
          </div>
        );
      }

      ReactDOM.render(<MessageBox />, document.getElementById("root"));
    </script>

Penjelasan kode diatas adalah:

  1. Kita buat sebuah fungsi bernama MessageBox(), dalam reactjs fungsi ini disebut dengan komponen. Komponen MessageBox ini berisi tag div, yang didalamnya terdapat tag h1 dengan isi "Kotak Pesan Kopidev"
  2. Terdapat sebuah sintaks ReactDOM.render(<MessageBox/>, document.getElementById("root")); , sintaks ini bermaksud untuk menampilkan komponen <MessageBox/> kedalam tag div dengan id root

Jika kita run di browser, akan muncul seperti ini

Menambahkan tombol

selanjutkan kita buat sebuah tombol, tombol yang akan kita buat memiliki fungsi untuk menampilkan sebuah alert saat di klik. Seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <button
        onClick={() => {
          alert("Hai kamu");
        }}
      >
        Tombol Hai
      </button>
    </div>
  );
}

Jika kita run di browser, maka akan muncul seperti ini:

Reusable Component

Seperti yang telah saya jelaskan di artikel dasar reactjs , reactjs menerapkan konsep Reusable Component , dimana komponen yang buat dapat digunakan secara berulang.

Di tahap ini, kita akan membuat sebuah tombol yang dapat digunakan berulang kali. Tombol ini kita beri nama "MyButton", seperti ini :

function MyButton() {
  return (
    <button
      onClick={() => {
        alert("Hai kamu");
      }}
    >
      Tombol hai
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
    </div>
  );
}

Penjelasan sintaks diatas adalah setelah kita membuat atau memindahkan tombol yang sebelumnya kedalam komponen MyButton, pada komponen MessageBox kita ubah tombol sebelumnya menjadi <MyButton/>. Kita juga dapat menggunakan komponen <MyButton/> secara berulang, seperti ini:

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton />
      <MyButton />
      <MyButton />
      <MyButton />
    </div>
  );
}

Hasilnya seperti ini:

Component Props

Pada tahap ini, kita akan belajar tentang props. Pada dasarnya setiap komponen di reactjs dapat memiliki atau menerima sebuah input, attribute, dan lain sebagainya. Setiap Input terhadap suatu komponen disebut dengan props (kependekan dari property). Contoh sederhana:

function Welcome(props) {
  return <h1>Selamat Datang, {props.name}</h1>;
}

Sintaks diatas adalah untuk membuat sebuah komponen bernama Welcome, komponen welcome tersebut menerima sebuah props bernama name, jadi kita dapat memanggil komponen Welcome tersebut dengan cara seperti ini

const element = <Welcome name="Sara" />;

Hasilnya seperti ini

Pada tahap ini kita akan menambahkan beberapa props terhadap komponen MyButton, props yang akan tambahkan adalah judul, dan pesan. Kurang lebih seperti ini:

function MyButton(props) {
  return (
    <button
      onClick={() => {
        alert(props.pesan);
      }}
    >
      {props.judul}
    </button>
  );
}

function MessageBox() {
  return (
    <div>
      <h1>Kotak Pesan Kopidev</h1>
      <MyButton judul="Arryangga" pesan="Selamat Datang Arryangga" />
      <MyButton judul="Jokowi" pesan="halo boskuuuuhhhhh" />
      <MyButton judul="Soekarno" pesan="Gimana pak disana? Enak?" />
    </div>
  );
}

Hasilnya seperti ini, bisa kalian klik satu per satu

Latihan React


Kesimpulan

Tutorial ini bertujuan untuk memahami konsep dasar reactjs, dengan cara belajar memahami apa itu JSX, apa itu babel, dan apa korelasi antara babel dan JSX. Dan juga kita belajar membuat sebuah aplikasi sederhana yang didalamnya terdapat reusable komponen, dan juga props pada reactjs.

Sampai jumpa di tutorial berikutnya ya. Terimakasih banyak

Sejak 5 tahun terakhir banyak bermunculan JavaScript library seperti ReactJS, VueJS, Angular, Preact, dan lain sebagainya. Library tersebut dibangun dengan tujuan yang sama, yaitu untuk mendukung pembuatan aplikasi agar lebih cepat dan efisien.

Saat ini ReactJS adalah library yang paling populer digunakan oleh Frontend Developer untuk membangun User Interface dengan JavaScript.

Baca juga: ✅Panduan Menjadi Front End Developer Lengkap

Pada survey yang dilakukan oleh StackOverflow, library ReactJS menduduki peringkat pertama pada kategori JavaScript Library (Pustaka JavaScript) yang paling banyak digunakan, seperti pada gambar dibawah ini:

most popular front-end frameworks in 2020

Peringkat kedua disusul oleh Vue.JS, dan AngularJS ada diposisi ketiga. Oleh karenanya pada tulisan ini, saya akan coba membahas tentang React.JS

Apa itu ReactJS?

Jadi, apa itu reactjs? ReactJS adalah sebuah library bahasa pemrograman JavaScript yang dibuat oleh Facebook. ReactJS merupakan library yang bersifat Open-Source. ReactJS digunakan untuk membangun sebuah User Interface pada Website, Mobile, dan juga aplikasi Desktop.

ReactJS dibangun dengan konsep "Reusable Components", dimana kita dapat membuat komponen kecil (bagian kecil dari User Interface, seperti tombol, input, dsb) yang dapat kita gunakan secara berulang sehingga memberikan performa yang bagus pada aplikasi yang dibuat, serta dapat membuat proses development menjadi lebih cepat.

Digunakan Oleh Banyak Perusahaan Besar

Top 25 Companies/Brands Using ReactJS Development - Frontend ...

ReactJS digunakan oleh banyak perusahaan besar seperti Facebook, Instagram, Netflix, Airbnb, dan lain sebagainya. Di indonesia sendiri beberapa startup besar yang menggunakan ReactJS diantaranya adalah WarungPintar, Sorabel, Traveloka, Tokopedia, dan lain sebagainya.

Facebook

Sosial media terbesar di dunia yaitu Facebook secara keseluruhan dibangun menggunakan ReactJS pada website mereka. Pada aplikasi facebook yang berbasis android dan ios sebagian halamannya dibangun menggunakan Framework React Native.

Instagram

Website instagram.com juga dibangun menggunakan ReactJS. Sedangkan untuk aplikasi instagram yang berbasis android dan ios hanya sebagian fitur yang dibangun menggunakan React Native.

WarungPintar

Website utama warungpintar sepenuhnya dibangun menggunakan ReactJS dan GatsbyJS. Sedangkan untuk aplikasi mobile seperti aplikasi Juragan dan KurirApps secara keseluruhan dibangun menggunakan Framework React Native.

Support Komunitas Yang Besar

ReactJS juga memiliki komunitas yang sangat besar, di Indonesia ada sebuah komunitas bernama ReactJS Indonesia yang sangat aktif dan sering mengadakan meetup untuk membahas perkembangan ReactJS.

Di kota Surabaya, ada 2 komunitas yang aktif membahas perkembangan ekosistem JavaScript, yaitu komunitas Surabayadev dan komunitas Surabayajs

Alasan Kenapa Memilih ReactJS

Ketika sebuah teknologi atau library baru muncul, selalu ada persaingan sengit dalam menentukan pilihan, dan sebagai seorang Frontend Developer pasti ada saat dimana kita harus memilih sebuah library yang akan digunakan di Project selanjutnya.

Pilihan tahun ini biasanya pada 3 library besar, yaitu ReactJS, VueJS, dan AngularJS. Namun saya akan coba menjelaskan kenapa kita ReactJS adalah pilihan yang paling bijak dan tepat.

ReactJS mudah untuk dipelajari

Didalam kaidah teknologi, jika sesuatu mudah dipelajari dan dipahami, itu berarti akan mudah untuk diterapkan atau diimplementasikan. Karena kemudahan untuk dipelajari saya meyakini jika setiap programmer dapat dengan mudah memahami sintaks dan siklus hidup (lifecycle) pada komponen di ReactJS.

Requirements yang dibutuhkan untuk mempelajari ReactJS tidak rumit kok, kalian cukup memiliki dasar pengetahuan tentang HTML, CSS, dan JavaScript. Dengan 3 pengetahuan dasar ini, saya jamin kalian bisa untuk belajar ReactJS

ReactJS itu cukup sederhana

ReactJS mudah dipelajari dan diimplementasikan (dengan catatan kita sudah memiliki pemahaman dasar tentang JavaScript). Siklus hidup pada komponen di ReactJS sangat mudah untuk dipahami. Kita akan selalu bertemu dengan komponen, karena semua yang ada di ReactJS adalah komponen.

Native Approach

Future Scope of React Native for Mobile App Development ...

ReactJS terkenal dengan reusabilitynya, yang dimaksud reusability adalah komponen yang ada pada ReactJS dapat dengan mudah digunakan untuk platform yang lain, seperti Android, iOS, dan Desktop.

Jadi dengan sekali belajar ReactJS kita dapat mengimplementasikan ke banyak platform, tentunya ini menjadi nilai plus bagi para Frontend Developer.

write once, run anywhere.

-- ReactJS

One Way Data Binding

Singkat cerita, sebelum react lahir konsep two-way data binding lebih dulu populer di dunia frontend. Cara kerjanya, ketika data berubah maka UI berubah, begitu juga sebaliknya. Framework seperti angular dan ember menggunakan turut mempopulerkan konsep ini.

Tapi ternyata banyak developer merasa performance dari konsep ini kurang baik ketika aplikasi semakin besar, akhirnya facebook memperkenalkan react dengan konsep one-way data flow yang di dasari oleh functional programming.

Berbeda dengan two-way data binding, merubah UI tidak otomatis mengubah data. Aliran datanya akan tetap satu arah itu sebabnya disebut one-way data flow. Cara untuk merubahnya menggunakan teknik callback.

Kedua konsep ini mirip seperti analogi jalan satu arah dan dua arah, keduanya memiliki kelebihan dan kelemahan masing-masing. React memilih one-way data flow untuk alasan performancescalability, dan single source of truth.

- Sastra Nababan

Performa yang bagus dengan Virtual DOM

ReactJS terkenal cepat dan aman. Dan tidak banyak terjadi permsalahan performa pada tahap production. Virtual DOM adalah representasi DOM secara virtual. Pada dasarnya, bahasa pemrograman JavaScript sudah cukup kencang. Faktor yang membuat JavaScript menjadi lambat adalah ketika JavaScript mengolah DOM.

React membuat virtual DOM untuk mempercepat urusan tersebut. React melakukan semua operasi di dalam virtual DOM. Setelah operasi tersebut selesai, React melakukan perubahan tersebut pada DOM.

Banyak Lowongan Pekerjaan

Karena ReactJS sanagat populer, banyak perusahaan yang mengadaptasi library ini kedalam project mereka. Karena hal ini pula, lowongan pekerjaan dengan requirement ReactJS juka sangat membludak, baik onsite maupun remote.

Jika kalian googling dengan kata kunci "Lowongan Frontend" kalian akan banyak menemukan requiremens ReactJS pada deskripsi lowongan pekerjaan mereka.

Kesimpulan

ReactJS adalah library yang dibangun oleh Facebook, karena popularitasnya banyak Frontend developer yang akhirnya menggunakan ReactJS. Akibatnya sangat banyak perusahaan besar yang mencari Frontend Developer yang menguasai ReactJS.

Untuk belajar ReactJS tidaklah sulit, pengetahuan dasar yang harus dimiliki hanyalah HTML, CSS, dan JavaScript. 3 pengetahuan ini merupakan requirements wajib sebelum mempelajari ReactJS.

Jika teman-teman lebih menyukai video penjelasan ReactJS, teman-teman dapat menonton video ini

 

Pada hari Sabtu, tanggal 15 Februari 2020, pengurus Komunitas Surabayadev sejumlah kurang lebih 10 orang mengadakan kegiatan belajar bersama di Dilo Surabaya yang terletak di AJBS Surabaya.

Kegiatan ini merupakan kegiatan rutin yang diadakan oleh komunitas Surabayadev untuk meningkatkan skill masing-masing pengurus. Sebelumnya komunitas Surabayadev juga mengadakan kegiatan belajar bersama dengan materi UI UX.

Kenapa Surabayadev Belajar JavaScript?

Selama bertahun-tahun berturut-turut, JavaScript adalah bahasa pemrograman yang paling dicari dan tumbuh cepat. JavaScript merupakan salah satu pilihan paling tepat dalam pengembangan antarmuka web interaktif karena didukung oleh semua browser modern.

Seperti yang ditunjukkan oleh survei tahunan yang diadakan oleh Stack Overflow, sekitar 70 persen dari 72.525 Software Developer profesional menyatakan mereka menggunakan JavaScript. Selain itu, ini adalah salah satu bahasa yang paling dicari yang berarti bahwa 17,8% responden belum menggunakannya tetapi ingin mempelajarinya.

survei tahunan yang diadakan oleh Stack Overflow

Menurut data yang diberikan oleh stackshare.io, lebih dari 10400 perusahaan di seluruh dunia menggunakan JavaScript di techstack yang mereka gunakan, diantaranya adalah Facebook, Linkedin, AirBnb, dll.

Perusahaan yang menggunakan JavaScript

Begitulah kawan, JavaScript itu keren, dan oleh sebab itu Pengurus SurabayaDev ingin meningkatkan skill programming JavaScript dipandu oleh Antoni dan Arryangga.

Inti Acara Belajar JavaScript Hari ini

Materi yang dibawakan oleh Arryangga dan Antoni

Kegiatan belajar bersama kali ini berlangsung dari pukul 10.00 hinggal 17.00, cukup lama namun seru. Hal yang dipelajari oleh para pengurus Surabayadev diantaranya adalah:

  1. Apa itu front end?
  2. JavaScript Basic
    • Tipe Data
    • Array & Object Properties (Loop & Iteration)
    • DOM Manipulation
    • Events & Event Handling
    • LocalStorage
    • Fetch API
  3. Live Practice (Coding & Deploy) TODO List App dengan Vanilla JS

Source code tersedia di Github: https://github.com/surabayadev/todolist-vanillajs
(Jangan lupa di ⭐ star juga ya ?)

Antoni dan Arryangga Sedang mengajar JavaScript

Seperti yang sebelumnya, sesi akhir dari acara ini ditutup dengan diskusi langsung, setiap individu dapat memberikan pertanyaan kepada Arryangga dan Antoni, serta review acara hari ini.

Dan setelah itu masuk kepada ritual intinya yang tidak boleh ketinggalan sama sekali, foto bareng:

Foto bersama Arryangga dan Antoni di Surabayadev

Banyak dari kita yang menggunakan Kerangka CSS (CSS Framework) seperti TailwindCSS, Bootstrap, MaterializeCSS, Foundation, dll. Namun sangat banyak code CSS yang mubadzir, alias tidak digunakan sama sekali.

Contoh saat kita menggunakan Bootstrap Framework, di dalamnya terdapat banyak sekali komponen seperti carousel, dropdown button, button group, dll. Namun apakah kita menggunakan semua komponen tersebut? saya rasa 90% pengguna bootstrap tidak menggunakan semua komponen yang ada.

Komponen yang tidak digunakan akan menjadi sampah, karena code css pada komponen yang tidak digunakan akan terus berada bersama dengan css pada komponen yang benar-benar digunakan.

Efek Buruk Pada Sebuah Website

Kode-kode sampah pada CSS yang tidak digunakan dapat menimbulkan efek buruk pada sebuah website, salah satunya adalah performa website itu sendiri. Website dapat mengalami penurunan loading time yang diakibatkan oleh banyaknya kode CSS maupun JS yang tidak digunakan, hal ini karena Browser harus mendownload lebih banyak resource daripada yang seharusnya.

Kita ambil contoh salah satu website di Indonesia yaitu dicoding.com, kita coba lihat pada homepage mereka, kira-kira berapa banyak sih CSS yang tidak mereka gunakan pada halaman tersebut?

CSS yang tidak digunakan pada Homepage diconding sebanyak 90%

*untuk menampilkan Coveraga, cukup buka Chrome Devtools

Saya cukup kaget melihat hasilnya, ?. Ternyata pada homepagenya hampir 90% CSS yang mereka load saat pertama kali itu tidak digunakan.

Kan halaman mereka nggak cuma homepage? Saya setuju, mereka memiliki banyak halaman selain homepage, masih banyak halaman lain lagi. Solusi yang mungkin dapat diberikan adalah dengan melakukan splitting pada CSS.

Splitting maksudnya memisah CSS menjadi beberapa bagian, dan memanggil CSS jika memang dibutuhkan, mau baca lebih lengkap tentang CSS Code Splitting? https://lihautan.com/css-code-splitting/

Apa itu PurgeCSS

CSS Code splitting rasanya terlalu advance bagi apra pemula, saya akan membahas dengan cara sederhana saja. Ada sebuah tools bernama PurgeCSS. PurgeCSS adalah sebuah development tool untuk menghapus CSS yang tidak digunakan. PurgeCSS menganalisa dan memilah konten yang kita miliki (contoh: HTML, JSX) dan file CSS.

Pada proses ini PurgeCSS mencocokkan setiap CSS selector pada file HTML, dan memilih selector yang tidak digunakan dari CSS yang kita miliki, lalu menghapusnya untuk menghasilkan file CSS yang lebih kecil.

Installasi PurgeCSS

Pastikan komputer kita sudah terinstall npm. Kita dapat menginstall PurgeCSS secara global dengan cara membuka terminal, lalu kita berikan perintah:

npm i -g purgecss

Untuk memastikan purgecss sudah terinstall secara global, kita coba berikan perintah purgecss pada terminal, jika berhasil di install maka akan keluar hasil seperti ini:

➜  kopidev ✗ purgecss
purgecss --css <css> --content <content> [option]

Options:
  --con, --content  glob of content files                                [array]
  -c, --config      configuration file                                  [string]
  -o, --out         Filepath directory to write purified css files to   [string]
  -w, --whitelist   List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help        Show help                                          [boolean]
  -v, --version     Show version number                                [boolean]

Cara Sederhana

Anggaplah kita memiliki sebuah project dengan struktur sebagai berikut:

- build // folder output
- index.html
- boostrap.css

Kita buka terminal, lalu kita berikan perintah:

purgecss --css bootstrap.css --content index.html --output ./build

Penjabaran dari perintah diatas adalah purgecss memindai file CSS bernama bootstrap.css dan memindai kontent index.html , jika proses pemindaian dan penghapusan selesai, purgecss akan menyimpan hasilnya ke dalam folder build

Penerapan pada PostCSS

Kita installasi dulu library PurgeCSS untuk PostCSS:

npm i -D @fullhuman/postcss-purgecss

Kita buka file postcss.config.js dan tambahkan kode berikut:

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    './src/**/*.js',
    './src/**/*.jsx',
    './samples/**/*.html'
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    ...
    purgecss,
    ...
  ]
}

Untuk lebih lengkapnya baca disini

Penerapan pada Gatbsy

npm i gatsby-plugin-purgecss

Lalu kita tambahkan kode berikut pada gatsby-config.js:

// gatsy-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-stylus`,
    `gatsby-plugin-sass`,
    `gatsby-plugin-less`,
    `gatsby-plugin-postcss`,
    // Add after these plugins if used
    { 
      resolve: `gatsby-plugin-purgecss`,
      options: {
        printRejected: true, // Print removed selectors and processed file names
        // develop: true, // Enable while using `gatsby develop`
        // tailwind: true, // Enable tailwindcss support
        // whitelist: ['whitelist'], // Don't remove this selector
        // ignore: ['/ignored.css', 'prismjs/', 'docsearch.js/'], // Ignore files/folders
        // purgeOnly : ['components/', '/main.css', 'bootstrap/'], // Purge only these files/folders
      }
    }
  ]
};

Hai guys, pada event komunitas SurabayaJS kali ini saya datang untuk pertama kalinya. Dan pada tulisan ini saya ingin sedikit bercerita (bukan review) tentang acara meetup di komunitas SurabayaJS pada tanggal 18 Januari 2020.

Opening

Seperti yang sudah-sudah, acara event atau meetup komunitas apapun pasti diselingi oleh pembukaan, rasanya ini sudah menjadi ritual khusus disetiap acara komunitas. Dan pembukaan pada meetup di komunitas SurabayaJS ini dibuka oleh Grico sebagai salah satu pengurus di komunitas SurabayaJS, dan setelah itu acara intinya langsung dimulai.

grico membuka acara event komunitas surabayajs

Event komunitas SurabayaJS yang saya datangi kali ini bertema Machine Learning using TensorFlow.js and jQuery Alternatives, yang mana materinya dibawakan oleh langsung oleh Dzulfikar Adi Putra (jQuery Alternatives), dan Rakha Asyrofi (Machine Learning using TensorFlow.js).

Saya perhatikan peserta yang datang di acara event komunitas SurabayaJS ini cukup banyak, menurut penerawangan saya pesertanya lebih dari 50, angka 50 adalah jumlah minimal yang dapat saya terawang, untuk jumlah pastinya, silahkan bertanya pada pengurum komunitas SurabayaJS.

peserta Event bulanan komunitas SurabayaJS

Sesi Pertama

Sesi pertama pada event ini dibawakan oleh Dzulfikar Adi Putra dengan materi jQuery Alternatives, bagi saya pribadi materinya yang disuguhkan oleh Dzulfikar Adi Putra cukup keren, Dzulfikar Adi Putra mencoba menerangkan beberapa alternative library selain jQuery, diantaranya adalah Vue.js, unpoly, alpine.js, dll. Bagi yang belum memiliki kesempatan datang di acara event komunitas SurbayaJS kali ini, teman-teman dapat membaca materinya di https://jquery-alt.pikarlabs.com

Dzulfikar adi putra di Event bulanan komunitas SurabayaJS

Sesi Kedua

Sesujurnya pada sesi kedua saya keluar dari venue, karena ada hal urgent yang harus saya lakukan. Jadi saya tidak dapat bercerita banyak tentang sesi kedua ini, tapi teman-teman dapat menikmat tulisan Rakha Asyrofi di https://medium.com/@asyrofist/machine-learning-dengan-javascript-6f3a461ac748 lengkap banget.

Rakha Asyrofidi Event bulanan komunitas SurabayaJS

Sesi Terakhir & Tanya Jawab

Dan lagi, seperti ritual komunitas yang sudah-sudah, acara terakhir pada event komunitas SurabayaJS kali ini adalah tanya jawab tentang materi tadi, dan foto bersama, setelah itu audience diajak untuk berfoto di depan venue. Untuk gallery fotonya dapat dilihat di https://www.icloud.com/sharedalbum/#B0f5idkMwsiWYZt

Sesi Pengurus

Setelah semua acara selesai, seluruh pengurus komunitas SurabayaJS berkumpul untuk dihukum, dan mereka akan mendapatkan hukuman sesuai kesalahannya. Yang pastinya saya hanya bercanda kok. Pengurus komunitas SurabayaJS berkumpul untuk semacam reflection kali ya, untuk mendengarkan what things right and wrong.

Pengurus komunitas SurabayaJS

Sekian cerita dari saya di event kali ini. Mohon maaf jika ada salah kata, jika ada masukan untuk tulisan ini silahkan komentar atau beli pull request. Thank you.

Jika kita berselancar di dunia maya, kita sering menjumpai berbagai macam tipe file dokumen, seperti audio, picture, pdf, ppt, docx, dan lain sebagainya. Sebagai pelajar atau mahasiswa pasti sangat sering menemukan dokumen tersebut jika sedang mencari tugas di internet.

Orang-orang dapat menemukan file tersebut tidak lain karena sumbangsih dari  para author di Internet yang melakukan upload dokumen. Dokumen tersebut sejatinya hanya bisa di download, namun ada cara agar para penjelajah internet dapat menikmatnya tanpa harus melakukan download terlebih dahulu.

Nah, pada artikel ini, akan dibahas cara untuk menampilkan PDF tanpa JavaScript di Browser

Html Object element

Pada HTML, mungkin tidak banyak dari kita yang mengetahui sebuah element <object> , dengan adanya element <object> ini, kita dapat menanamkan (embed) file PDF yang kita miliki ke dalam HTML tanpa pustaka pihak ketiga. Caranya sangat mudah :

  1. Pastikan kita sudah memiliki URL file pdf yang ingin ditampilkan.
  2. Tambahkan attribute type dengan value application/pdf ke object element.
  3. Tambahkan attribute data dengan value URL pdf yang ingin ditampilkan ke object element.
  4. Set height and width sesuai keigininan.
<!DOCTYPE html>
<html>
  <head>
    <title>Embedding pdf</title>
  </head>
  <body>
    <h1>My pdf</h1>
    <object
      type="application/pdf"
      data="URL_pdf_yang_ingin_ditampilkan/sample.pdf"
      width="600"
      height="700"
    >
    </object>
  </body>
</html>

Output - Menampilkan Pdf tanpa JavaScript

Menampilkan PDF pada HTML tanpa JavaScript - 1

Demo

Salah satu hal yang membuat saya aneh (bukan artian negative) pada JavaScript adalah kita dapat menggunakan variable dan function yang belum di deklarasikan diawal, hal ini biasa disebut dengan Hoisting , coba kita perhatikan kode dibawah ini :

sayHi(); // Output : Hi there!

function sayHi() {
   console.log('Hi there!');
}

Walaupun function sayHi() dipanggil lebih dahulu dibanding dengan pendeklarasiannya, namun kode tersebut diatas akan berjalan normal, dan akan mengeluarkan output "Hi there!" , hal ini juga sama dengan :

function sayHi() {
   console.log('Hi there!');
}

sayHi(); // Output : Hi there!

Hal ini terjadi karena JavaScript masuk kedalam compiled language , oleh karena itu saat kode JavaScript yang sedang diproses, pada iterasi pertama semua variable dan function akan dideklarasikan di awal, sebelum kode di ekseskusi satu persatu. Hal ini mirip seperti saat kita mendeklarasikan variable dan function di awal.

Only declarations are hoisted

JavaScript Hoisting hanya berlaku pada pendeklarasian saja, bukan pada inisialisasi. Jika sebuah variable dideklarasikan dan di inisialisasi setelah digunakan, maka hasilnya akan undefined , contoh :

console.log(num); // Returns undefined 

var num; 

num = 6;

Namun jika kita melakukan pendeklarasian variable setelah digunakan, dan menginisialisasi sebelum digunakan, maka itu akan mereturn value yang di inisialisasi :

num = 6;

console.log(num); // returns 6

var num;

Contoh - contoh lain untuk mendemonstrasikan hoisting :

//Example 1 - Does not hoist
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2; // Initialize y
//This will not work as JavaScript only hoists declarations

//Example 2 - Hoists
var num1 = 3; //Declare and initialize num1
num2 = 4; //Initialize num2
console.log(num1 + " " + num2); //'3 4'
var num2; //Declare num2 for hoisting

//Example 3 - Hoists
a = 'Cran'; //Initialize a
b = 'berry'; //Initialize b
console.log(a + "" + b); // 'Cranberry'
var a, b; //Declare both a & b for hoisting

Hal lain yang harus diperhatikan adalah pendeklarasian sebuah Class tidak dapat di hoisting, kita tidak dapat menggunakan sebuah Class sebelum di deklarasikan :

var john = new Person('John', 'Doe'); //ReferenceError: Person is not defined

class Person {
    constructor(name, surname) {
        this.name = name;
        this.surname = surname;
    }
}

// This good!!
var jane = new Person('Jane', 'Doe'); //No problems here

Jika kalian memiliki masukan, komentar, atau ingin diskusi lebih lanjut, silahkan komentar ya. Terimakasih.

Chrome V8 atau bisa juga disebut dengan V8 Engine, adalah JavaScript Engine yang bersifat open source yang dikembangkan oleh The Chromium Project untuk Google Chrome dan Chromium. Versi pertama dari V8 Engine dirilis bersamaan dengan versi pertama Chrome Browser pada 2 September 2008.

V8 Engine berfungsi untuk memparsing/membaca kode javascript kita agar dapat dibaca oleh mesin/computer untuk kemudian di eksekusi, dan hasil nya dapat terlihat oleh mata kita di browser atau di console. V8 Engine juga bertugas untuk mengatur mekanisme, prioritas dna urutan eksekusi dari kode javascript yang kita buat.

V8 release v7.6

Versi V8 saat ini sudah menjadi versi 7.6, namun masih Beta Version, dan akan dirilis secara resmi bersama dengan Google Chrome veri 76 di beberapa minggu kedepan. Berikut adalah beberapa pembaharuan yang akan dibawa oleh V8 7.6 :

JSON Parse Improvement

Dalam aplikasi JavaScript modern, JSON biasanya digunakan sebagai format untuk mengkomunikasikan data yang terstruktur. Dengan mempercepat penguraian (parsing) JSON, kita dapat mengurangi latensi komunikasi ini.

Pada V8 v7.6, tim Google telah merombak JSON.parser menjadi lebih cepat dalam memindai dan mem-parsing JSON. Ini menghasilkan penguraian (parsing) data 2,7 kali lebih cepat

Chart menunjukan kenaikan performa untuk JSON.parse di berbagai macam website

Improved BigInt support

BigInt sekarang memiliki dukungan API yang lebih baik dalam berbagai bahasa (Internationalization). Anda sekarang dapat memformat BigInt sesuai dengan bahasa yang diinginkan, dengan menggunakan metode toLocaleString.

12345678901234567890n.toLocaleString('en'); // ?
// → '12,345,678,901,234,567,890'

12345678901234567890n.toLocaleString('de'); // ?
// → '12.345.678.901.234.567.890'

Intl.DateTimeFormat improvements

Aplikasi biasanya menampilkan interval tanggal atau rentang tanggal untuk menunjukkan rentang tanggal acara, seperti tanggal reservasi hotel, periode penagihan suatu layanan, dsb. Intl.DateTimeFormat API sekarang mendukung metodeformatRange dang formatRangeToParts  untuk dengan mudah memformat rentang tanggal sesuai dengan spesifiki lokaliasi yang kita tentukan.

const start = new Date('2019-05-07T09:20:00');
// → 'May 7, 2019'

const end = new Date('2019-05-09T16:00:00');
// → 'May 9, 2019'

const fmt = new Intl.DateTimeFormat('en', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});

const output = fmt.formatRange(start, end);
// → 'May 7 – 9, 2019'

const parts = fmt.formatRangeToParts(start, end);
// → [
// →   { 'type': 'month',   'value': 'May',  'source': 'shared' },
// →   { 'type': 'literal', 'value': ' ',    'source': 'shared' },
// →   { 'type': 'day',     'value': '7',    'source': 'startRange' },
// →   { 'type': 'literal', 'value': ' – ',  'source': 'shared' },
// →   { 'type': 'day',     'value': '9',    'source': 'endRange' },
// →   { 'type': 'literal', 'value': ', ',   'source': 'shared' },
// →   { 'type': 'year',    'value': '2019', 'source': 'shared' },
// → ]