React.js adalah salah satu teknologi client-side javascript yang kian meranjak mengikuti pendahulunya. Teknologi client-side ini dibuat untuk memudahkan web developer membangun user interface yang lebih mudah dikelola dan berbasis komponen. Tidak hanya itu, library ini pun dilengkapi dengan komunikasi data seperti AJAX yang sudah dibungkus sedemikian rupa sehingga memudahkan pengunanya. Seperti kita ketahui, jauh sebelum React.js ada, Angular.js, Ember.js, dan Backbone.js sudah lama bersaing di dunia teknologi client-side ini.

Dikutip dari <a href="http://facebook.github.io">Halaman Github Facebook</a>, pada tanggal 28 September 2016 Vjeux menceritakan bagaimana kesuksesan React.js diraih hingga akhirnya mencapai 50.000 bintang di Github yang diberikan oleh pengguna Github kepada reposiori ini. Bermula dari Bolt.js, hingga akhirnya ditambahkan JSX, dan dipiloti oleh Instagram dengan menggunakan React.js di website-nya, itulah titik awal bagaimana React.js sukses. Mari kita simak cerita dari Vjeux yang dituliskannya di halaman Github Facebook React.js.

<img class="size-large wp-image-12924 aligncenter" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/Selection_011-700x320.png" alt="Selection_011" width="700" height="320" />
<h3>Cerita Awal</h3>
Tim React.js telah menghabiskan waktu yang cukup banyak untuk menjelaskan konsep bagaimana React.js bekerja dan masalah yang harus diselesaikannya, tapi hingga belum ada waktu untuk membicarakan React.js yang begitu cepat berevolusi sebelum di-opensource-kan. Milestone ini merupakan waktu yang menyenangkan dan awal yang baik.

Cerita dimulai ketika di divisi ads, ingin membangun aplikasi client-side web yang keren dan memukau menggunakan MVC framework milik internal yang bernama Bolt.js. Berikut adalah contoh kodenya:
<pre><code>var CarView = require('javelin/core').createClass({
 name: 'CarView',
 extend: require('container').Container,
 properties: {
 wheels: 4,
 },
 declare: function() {
 return {
 childViews: [
 { content: 'I have ' },
 { ref: 'wheelView' },
 { content: ' wheels' }
 ]
 };
 },
 setWheels: function(wheels) {
 this.findRef('wheelView').setContent(wheels);
 },
 getWheels: function() {
 return this.findRef('wheelView').getContent();
 },
});

var car = new CarView();
car.setWheels(3);
car.placeIn(document.body);
//&lt;div&gt;
// &lt;div&gt;I have &lt;/div&gt;
// &lt;div&gt;3&lt;/div&gt;
// &lt;div&gt; wheels&lt;/div&gt;
//&lt;/div&gt;

</code></pre>
Bolt mengenalkan sejumlah API dan fitur yang mungkin akan melahirkan React.js seperti render, createClass, dan refs. Bolt memperkenalkan konsep seperti refs yang dapat membuat referensi ke nodes dan dapat digunakan secara imperatif. Hal ini sangat relevan untuk interoperabilitas dengan sistem yang sudah ada ataupun penggunaan secara bertahap. Walaupun pada saat itu React.js diharapkan lebih functional, refs membuktikan kegunaannya tanpa harus menghancurkan paradigma functional yang semakin populer.

[caption id="attachment_12923" align="aligncenter" width="700"]<img class="size-large wp-image-12923" src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/Selection_010-700x339.png" alt="Halaman github Bolt.js" width="700" height="339" /> Halaman github Bolt.js[/caption]

Tapi dengan aplikasi yang terus membesar dan semakin keren, codebase Bolt semakin membingungkan. Melihat framework lainnya yang dikembangkan oleh Jordan Walke dengan FaxJS-nya, masalah yang dihadapi pun hampir sama dengan Bolt. Namun dia dapat menyelesaikannya dengan cara yang berbeda. Disinilah React.js versi awal mulai lahir termasuk props, state, server-side rendering, dan konsep dasar component.
<pre><code>TestProject.PersonDisplayer = {
 structure : function() {
 return Div({
 classSet: { personDisplayerContainer: true },
 titleDiv: Div({
 classSet: { personNameTitle: true },
 content: this.props.name
 }),
 nestedAgeDiv: Div({
 content: 'Interests: ' + this.props.interests
 })
 });
 }
};
</code></pre>
<h3>FBolt Lahir ke Dunia</h3>
Dengan eksperiman FaxJS-nya, Jordan memberikan saran untuk perubahan API yang lebih baik dan lebih skalabel dalam membangun user interface. Dia mengimport library-nya ke codebase Facebook pada Maret 2012 dan menamainya dengan FBolt, ekstensi penting untuk Bolt yang komponennya ditulis menggunakan gaya functional programming. Mungkin "FBolt" ada singkatan FaxJS-nya tapi dia tidak memberitahu apapun tentang ini.

Interoperabilitas antara FBolt dan Bolt membuat kita untuk bereksperimen dengan mengganti satu komponen sekali saja dengan lebih banyak API komponen functional. Kami dapat test the waters paradigma functional baru kami tanpa harus melangkah lebih dalam. Kami mulai dengan komponen yang sangat jelas fungsionalitasnya terlebih dahulu.

Melihat FBolt tidak akan menjadi nama yang keren untuk library miliknya, Jordan Walke dan Tom Occhino memutuskan memberi nama baru yang disebut dengan "React". Setelah Tom mengirimkan diff untuk mengubah seluruh nama menjadi React, Jordan berkomentar:
<blockquote>Jordan Walke: I might add for the sake of discussion, that many systems advertise some kind of reactivity, but they usually require that you set up some kind of point-to-point listeners and won't work on structured data. This API reacts to any state or property changes, and works with data of any form (as deeply structured as the graph itself) so I think the name is fitting.</blockquote>
Saat itu, kebanyakan commit Tom adalah untuk pengembangan versi awal GraphiQL, proyek yang baru saja di-open source-kan.
<h3>Menambahkan Bumbu yang Bernama JSX</h3>
Sejak sekitar 2010, Facebook telah menggunakan ekstensi PHP yang dinamakan XHP, yang dapat membuat kita untuk membuat UI dengan menggunakan XML di dalam kode PHP langsung. Hal ini pertama kali diperkenalkan untuk mencegah lubang XSS tapi akhirnya membuat struktur aplikasi dengan cara yang bagus.
<pre><code>final class :a:post extends :x:element {
 attribute :a;
 protected function render(): XHPRoot {
 $anchor = &lt;a&gt;{$this-&gt;getChildren()}&lt;/a&gt;;
 $form = (
 &lt;form
 method="post"
 action={$this-&gt;:href}
 target={$this-&gt;:target}
 class="postLink"
 &gt;{$anchor}&lt;/form&gt;
 );
 $this-&gt;transferAllAttributes($anchor);
 return $form;
 }
}

</code></pre>
Sebelum Jordan bergabung, Adam Hupp telah mengimplementasikan konsep seperti XHP untuk Javascript yang ditulis dalam Haskell. Sistem ini dapat membuat Anda menulis kode XML di dalam file Javascript seperti berikut:
<pre><code>function :example:hello(attrib, children) {
 return (
 &lt;div class="special"&gt;
 &lt;h1&gt;Hello, World!&lt;/h1&gt;
 {children}
 &lt;/div&gt;
 );
}

</code></pre>
Kode diatas akan di-compile menjadi kode Javascript ES3-compatible seperti berikut:
<pre><code>function jsx_example_hello(attrib, children) {
 return (
 S.create("div", {"class": "special"}, [
 S.create("h1", {}, ["Hello, World!"]),
 children
 ]
 );
}
</code></pre>
Di dalam purwarupa ini, S.create akan dengan segera membuat dan mengembalikan sebuah DOM node. Selama obrolan masalah ini semua mengerucut pada masalah performa antara innerHTML dan pembuatan DOM node scara langsung. Pada waktu itu, sangat kurang ideal bila harus mengajak developer untuk menghindari pembuatan DOM node secara langsung karena masalah performa. CTO Facebook saat itu, Bret Taylor, tetap menyarangkan penggunaan innerHTML ketimbang document.createElement.
<blockquote>Bret Taylor: If you are not convinced about innerHTML, here is a small microbenchmark. It is about the same in Chrome. innerHTML is about 30% faster in the latest version of Firefox (much more in previous versions), and about 90% faster in IE8.</blockquote>
Kedatangan React.js membuat masalah ini menjadi lebih cerah. Konsep "Virtual DOM" yang dikenalkan oleh Jordan menepis masalah performa yang telah dibahas sebelumnya.
<pre><code>Jordan Walke: For the first step, I propose that we do the easiest, yet most general transformation possible. My suggestion is to simply map xml expressions to function call expressions.

 &lt;x&gt;&lt;/x&gt; becomes x( )
 &lt;x height=12&gt;&lt;/x&gt; becomes x( {height:12} )
 &lt;x&gt; &lt;y&gt; &lt;/y&gt; &lt;/x&gt; becomes x({ childList: [y( )] })

At this point, JSX doesn't need to know about React - it's just a convenient way to write function calls. Coincidentally, React's primary abstraction is the function. Okay maybe it's not so coincidental ;)
</code></pre>
Adam memberikan komentar menarik pada masalah ini, yang sekarang menjadi cara paling umum menulis sebuah list di React.js dengan JSX.
<pre><code>Adam Hupp: I think we should just treat arrays of elements as a frag. This is useful for constructs like:

 &lt;ul&gt;{foo.map(function(i) { return &lt;li&gt;{i.data}&lt;/li&gt;; })}&lt;/ul&gt;

In this case the ul(..) will get a childList with a single child, which is itself a list.
</code></pre>
React.js tidak berakhir pada implementasi Adam saja. Kami membuat JSX dengan mem-fork <a href="https://github.com/laverdet/js-xml-literal">js-xml-literal</a>, sebuah side project yang dikerjakan oleh pembuat XHP, Marcel Laverdet. JSX mengambil namanya dari js-xml-literal, yang dimodifikasi Jordan untuk membuat nested function call yang lebih dalam.
<h3>API Campuraduk</h3>
Selama awal masa - masa React.js, penggunaan internal tumbuh dengan cepat tapi ada berbagai churn dalam API komponen seperti konvensi penggunaan nama:
<ul>
 	<li>project diganti menjadi declare kemudian menjadi structure dan akhirnya menjadi render</li>
 	<li>Componentize diganti namanya menjadi createComponent dan akhirnya menjadi createClass</li>
</ul>
Sehubungan dengan akan di-opensource-kannya proyek ini, Lee Byron duduk bersama dengan Jordan Walke, Tom Occhino, dan Sebastian Markbage untuk merefaktor, mengimplementasikan ulang, dan mengganti nama salah satu bagian React.js yang paling disukai - lifecycle API. Lee akhirnya datang dengan well-designed API yang masih ada hingga hari ini. Berikut adalah API rancangan Lee tersebut:
<ul>
 	<li>Concepts
<ul>
 	<li>component - a ReactComponent instance</li>
 	<li>state - internal state terhadap komponent</li>
 	<li>props - external state terhadap komponent</li>
 	<li>markup - sebuah string HTML yang dihasilkan oleh komponen</li>
 	<li>DOM - dokumen dan elemen di dalam dokumen</li>
</ul>
</li>
 	<li>Actions
<ul>
 	<li>mount - untuk menaruh komponen ke dalam DOM</li>
 	<li>initialize - menyiapkan komponen untuk proses rendering</li>
 	<li>update - transition of state yang menghasilkan render.</li>
 	<li>render - side-effect-free process untuk mendapatkan markup suatu komponen.</li>
 	<li>validate - membuat pengujian apakah sesuatu sudah dibuat atau disediakan</li>
 	<li>destroy - kebalikan dari initialize</li>
</ul>
</li>
 	<li>Operands
<ul>
 	<li>create - membuat sesuatu yang baru</li>
 	<li>get - mengambil sesuatu yang sudah ada</li>
 	<li>set - menggabungkan sesuatu ke yang sudah ada</li>
 	<li>replace - menimpa yang sudah ada</li>
 	<li>receive - tanggapan terhadap data yang diberikan</li>
 	<li>force - melewati aksi</li>
</ul>
</li>
 	<li>Notifications
<ul>
 	<li>shouldObjectAction</li>
 	<li>objectWillAction</li>
 	<li>objectDidAction</li>
</ul>
</li>
</ul>
<h3>Instagram</h3>
Pada tahun 2012, Instagram diakuisisi oleh Facebook. Pete Hunt, yang waktu itu bekerja untuk Facebook Photo dan Video, bergabung dengan tim web yang baru dibentuk. Dia ingin membangun website-nya dengan React.js seluruhnya, yang justru berseberangan dengan penggunaan bertahap yang digunakan oleh Facebook.

Untuk membuat hal ini terjadi, React.js harus di-decouple dari infrastruktur Facebook, karena Instagram tidak menggunakan sedikit pun. Proyek ini merupakan sebuah keharusan agar React.js dapat di-open source-kan. Selama proses, Pete juga menemukan dan mempromosikan sebuah proyek kecil bernama Webpack. Dia juga mengimplementasikan cikal bakal renderToString yang dibutuhkan untuk server-side rendering.

Sambil menyiapkan untuk membuat React.js open source, Maykel Loomans, desainer dari Instagram, membuat rancangan website untuk React.js akan seperti apa. Header halaman tersebut memberikan kesan identitasi visual bagaimana React.js terlihat dan logonya berwarna biru elektrik.

Pada masa awal terbentuknya, React.js mendapat banyak sekali berbagai macam saran, ide, dan kontribusi teknis dari pengguna dan kolaborator awal di seluruh tempat di Facebook. Mungkin ini terlihat seperti keajaiban satu malam, tapi cerita perjalanannya merupakan contoh besar bagaimana sebuah ide baru harus mengalami sejumlah perbaikan, perjalanan, dan perbaikan dalam waktu yang panjang sebelum akhirnya mencapai potensi penuh ide tersebut.

Pendekatan React.js adalah membangun user interface dengan prinsip functional programming telah mengubah bagaimana cara kita membuat user interface dalam beberapa tahun terakhir. Kita dapat melihat hal tersebut dengan sendirinya, tapi React.js tidak akan menjadi apapun tanpa kehadiran komunitas open source yang luar biasa dalam membangun proyek ini.

(rfs/reactjs/facebook)

Bermula dari Bolt.js Hingga Akhirnya Menjadi React.js

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Bermula dari Bolt.js Hingga Akhirnya Menjadi React.js

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Yukihiro Matsumoto, Perancang Bahasa Pemrograman Ruby

Guido van Rossum, Tokoh Di Balik Bahasa Python

17 Grup Populer tentang Pemrograman di Facebook yang Berasal dari Indonesia

Haris Hasanudin, Pembuat Bahasa Pemrograman BAIK

Intip Perkembangan Teknologi di Negeri Tirai Bambu

Larry Wall, Sang Guru Bahasa Perl