Dokumen ini dibuat untuk membantu pengguna domestik yang mengalami kesulitan karena kurangnya materi Framer dalam Bahasa Indonesia, dengan menerjemahkan konten dari blog resmi ke dalam Bahasa Korea dan menambahkan informasi yang bermanfaat untuk praktik kerja. Semoga dapat memberikan sedikit bantuan kepada Anda yang menggunakan Framer.

Ringkasan Utama

• Performa Lebih Baik: Berkat rendering dan manajemen status efektif dari React, situs web memuat dan merespons dengan cepat

• Pengalaman Pengguna Lebih Baik: Struktur berbasis komponen memberikan pengalaman pengguna yang mulus dan konsisten

• Skalabilitas Masa Depan: React memungkinkan pengembangan situs web yang fleksibel dan berkelanjutan untuk masa kini dan masa depan

Apa yang Dibutuhkan Web Saat Ini?

Saat ini, web melebihi tampilan visual yang menarik, membuat pengalaman yang responsif dan mendalam tanpa gangguan adalah kuncinya. Untuk itu, diperlukan alat yang mempertimbangkan bukan hanya performa, tetapi juga pengelolaan, skalabilitas, dan kolaborasi.

Website di awal internet kebanyakan merupakan kumpulan halaman statis yang dirancang untuk konsumsi informasi. Situs berbasis HTML dan CSS tradisional ini ringan dan memiliki performa bagus, namun kekurangan interaktivitas dan fitur dinamis yang diharapkan oleh pengguna zaman sekarang.

Web modern berkembang menjadi dinamis dan interaktif, dan situs web sekarang menjadi aplikasi lengkap. Situs-situs ini terintegrasi dengan API, menawarkan animasi dan transisi yang halus dan efisien untuk meningkatkan keterlibatan pengguna, menyediakan pembaruan real-time, dan mendukung berbagai perangkat dari desktop hingga ponsel dan tablet.

Meskipun metode pengembangan web tradisional tetap menjadi bagian penting dalam pengembangan web saat ini, tanpa alat terbaru, pendekatan ini mungkin kesulitan membangun antarmuka pengguna/fitur yang kompleks yang diperlukan untuk aplikasi web masa kini.

Di sinilah alat seperti React berguna. React, dikembangkan oleh Meta dengan mempertimbangkan pembuatan situs web masa kini, adalah salah satu pustaka pengembangan front-end paling populer yang mendukung pengembang di perusahaan dari semua ukuran untuk memenuhi dan bahkan melampaui ekspektasi pengguna saat ini dengan aplikasi web canggih.

Peningkatan Performa dan Pengalaman Pengguna

Seiring situs web menggabungkan lebih banyak fitur dan UI yang kompleks, penurunan kecepatan muat dan masalah responsivitas menjadi tantangan yang umum. Ini bisa menyebabkan masalah performa, terutama di perangkat dengan spesifikasi rendah atau lingkungan jaringan yang lambat.

Browser melalui proses bernama “Pixel Pipeline” untuk memperbarui antarmuka pengguna. Ini termasuk perhitungan tata letak, pengecatan elemen, dan penggabungan lapisan. Proses ini penting untuk mengubah antarmuka tetapi juga dapat menghabiskan banyak sumber daya, menahan thread utama, dan kadang membuat antarmuka tidak responsif selama pembaruan.

Untuk mengatasi ini, React memperkenalkan konsep “Virtual DOM”. Alih-alih memperbarui DOM secara langsung, React memiliki DOM virtual di memori untuk menghitung perubahan sebelum dimasukkan ke dalam DOM nyata.

Ini disebut rekonsiliasi, menggunakan algoritma diff React untuk menentukan perubahan minimum yang diperlukan untuk memperbarui DOM nyata. Selanjutnya, React memproses pembaruan DOM secara batch dan menjalankannya dalam satu kali pas, mengoptimalkan proses pembaruan dan meminimalkan proses reflow dan repaint yang menghabiskan banyak sumber daya.

Selain itu, React menyediakan mekanisme penjadwalan yang memprioritaskan pembaruan sesuai interaksi pengguna dan kinerja rendering perangkat. Framer memanfaatkan mekanisme ini untuk memberi prioritas pada pembaruan penting, seperti masukan pengguna, untuk menjaga pengalaman pengguna tetap mulus dan responsif.

React tidak menjamin performa sempurna secara default tetapi menyediakan alat yang diperlukan untuk memperbaiki masalah performa web saat ini. Ini mengoptimalkan proses pembaruan, memprioritaskan interaksi pengguna, dan dengan teknologi seperti Virtual DOM dan rekonsiliasi, memungkinkan pengembang untuk membangun aplikasi web yang kompleks dan interaktif sambil menjaga performa dan responsivitas yang baik.

Desain Berbasis Komponen

Pada pengembangan web tradisional, HTML, CSS, JavaScript sering kali ditulis dalam file terpisah, menciptakan file kode tunggal yang besar. React menawarkan pendekatan berbeda dengan merancang UI dalam unit komponen. Komponen dibuat sebagai elemen UI yang dapat diinkapsulasi dan dapat digunakan kembali, yang dapat digabungkan untuk membangun antarmuka pengguna yang kompleks. Komponen ini dibuat menggunakan fungsi atau kelas JavaScript, dirancang untuk menerima input (props) yang mengubah cara kerja dan isi tampilannya.

Ini memungkinkan pengembang untuk membangun antarmuka pengguna kompleks secara sistematis dengan komponen sederhana. Komponen ini dapat dengan mudah dibagikan dan digunakan kembali di seluruh aplikasi atau beberapa proyek, meningkatkan konsistensi dan penggunaan kembali kode.

Framer menyediakan rangkaian komponen React yang dibuat secara profesional dari komunitas untuk memaksimalkan paradigma berbasis komponen ini. Komponen ini dapat dengan mudah diintegrasikan ke dalam proyek, disesuaikan sesuai kebutuhan spesifik, sambil memanfaatkan kemudahan penggunaan kembali dan modularitas model berbasis komponen React.

Struktur Masa Depan

Dalam lingkungan web yang terus berubah saat ini, keunggulan React adalah dirancang untuk mudah beradaptasi terhadap perubahan. Cara pemrograman antar muka tradisional mengharuskan deskripsi manual untuk manipulasi DOM.

// index.html

<div>
  <input type="text" id="itemInput" placeholder="Enter new item" />
  <button id="addItemButton">Add Item</button>
  <ul id="itemList"></ul>
</div>

// index.js

// 1. Get the button element
const addItemButton = document.getElementById("addItemButton");

// 2. Add event listener to button element
addItemButton.addEventListener("click", {

  // 3. Get input and list elements
  const itemInput = document.getElementById("itemInput");
  const list = document.getElementById("itemList");

  // 4. Create new list item
  const listItem = document.createElement("li");

  // 5. Set inner text to value of input
  listItem.innerText = itemInput.value;

  // 6. Add list item to list
  list.appendChild(listItem);

  // 7. Set input back to empty
  itemInput.value = "";
})

React, bagaimanapun, mendefinisikan antarmuka dengan cara deklaratif.

// itemList.jsx

import React, { useState } from "react";

function itemList() {

  // 1. Define the state
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState("");

  // 2. Handle button click
  function handleAddItem() {
    setItems(prevItems => [...prevItems, newItem]);
    setNewItem(""); // Clear input after adding;
  }

  // 3. Bind state and event handlers to the UI
  return (
    <div>
      <input 
          type="text"
          value={newItem}
          onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  );
}

Ketika mendefinisikan antarmuka di React, cukup mendeklarasikan “UI harus tampak seperti ini saat dalam keadaan ini.” Setelah data berubah, React akan secara otomatis memperbarui DOM secara efisien sesuai dengan komponen yang telah didefinisikan.

Pendekatan deklaratif ini membuat komponen mudah dibagikan dan dikombinasikan untuk membangun antarmuka pengguna yang lebih kompleks, meningkatkan penggunaan kembali kode. Pengembang hanya perlu memperbarui keadaan atau atribut komponen yang diinginkan, memudahkan penyesuaian fitur baru dan perubahan sesuai dengan kebutuhan pengguna dan standar web yang terus berubah.

Selain itu, baik React maupun Framer mengikuti prinsip immutability. Alih-alih memodifikasi objek yang telah dibuat, membuat objek baru untuk diperbarui. Ini membuat UI lebih dapat diprediksi dan stabil, menguntungkan bagi pemeliharaan jangka panjang. React bahkan memastikan kompatibilitas mundur dengan fitur sebelumnya. Framer juga memungkinkan operasi proyek yang stabil dalam jangka panjang tanpa masalah tiba-tiba karena komponen lama tidak berfungsi.

Framer mengembangkan ini lebih lanjut, secara otomatis mengubah elemen desain yang dibuat pengguna di kanvas menjadi komponen React yang dapat digunakan kembali. Artinya, desainer dapat membuat antarmuka pengguna modular React tanpa menulis satu baris kode pun dan tetap menjaga kompatibilitas dengan teknologi web terbaru. Proyek yang dibangun dengan Framer terus berkembang sesuai tren web terbaru dan kebutuhan pengguna sambil menjaga kompatibilitas dengan fitur sebelumnya. Framer juga cocok untuk menyederhanakan proses menjaga aplikasi tetap terbaru.

Dukungan Komunitas

Salah satu kekuatan React lainnya adalah ekosistem komunitas yang aktif. React memiliki ekosistem luas di mana pengembang, desainer, dan perusahaan semuanya berkontribusi pada pertumbuhan dan pengembangannya. Lewat ekosistem ini, React terus berada di depan pengembangan web dan terus berkembang sesuai tuntutan web terbaru.

Framer berbasis tanpa kode tetapi terhubung dengan ekosistem React, memungkinkan animasi, integrasi API, dan fitur manajemen status lanjutan yang disediakan komunitas untuk diambil dan digunakan dengan mudah. Banyak dari inovasi teknologi berpusat komunitas ini terintegrasi sempurna ke dalam Framer, mendukung pengguna dalam menciptakan situs web yang lebih kreatif dan fungsional tanpa perlu menulis kode. Artinya, meskipun tidak belajar React, Anda tetap bisa merasakan manfaat dari ekosistem React.

Dukungan berbagi pengetahuan dan sumber daya dari komunitas React memungkinkan pengguna Framer untuk memanfaatkan berbagai sumber daya tanpa mempelajari React secara langsung. Dari tutorial dan dokumentasi terkait pustaka dan alat tertentu hingga praktik terbaik dan pola desain, upaya dalam komunitas membantu pengguna Framer memahami dan memanfaatkan potensi ekosistem React dalam proyek mereka.

Juga mungkin untuk memperluas proyek Framer dengan merekrut pengembang React berdasarkan desain Framer yang ada. Dengan editor kode Monaco yang terintegrasi, pengembang React bisa memperluas fungsionalitas situs web dalam lingkungan yang familiar dengan auto-completion dan menyerupai IDE.

Framer memberikan pengalaman yang melampaui batas untuk pencipta individu atau tim besar. Mulai dengan metode tanpa kode Framer dan seiring pertumbuhan proyek, integrasikan dengan lancar komponen React kustom, logika canggih, dan fitur canggih, sambil mempertahankan basis kode yang dapat diperluas dan mudah dikelola. Framer tidak hanya memungkinkan pengguna membuat situs web untuk web terbaru tanpa pengetahuan pengkodean, tetapi juga memberikan lingkungan masa depan yang memungkinkan pertumbuhan dan evolusi, memperluas batas yang mungkin dilakukan dalam web modern saat ini tanpa dibatasi oleh ekosistem tertutup.

Kesimpulan

Alasan Framer mengadopsi React jelas. Kinerja, pengalaman pengguna, masa depan, komunitas adalah empat elemen yang bergabung mengukuhkan Framer bukan hanya sebagai alat tanpa kode, tetapi sebagai platform yang dapat diperluas untuk web modern.

Baik Anda memiliki pengalaman pengembangan atau tidak, siapa pun dapat mewujudkan ide mereka dan, jika perlu, menarik ekosistem dan tenaga kerja React untuk lebih mengembangkan proyek. Memilih Framer berarti memilih React juga. Ini tidak hanya berarti menciptakan proyek saat ini, tetapi juga memilih fondasi yang stabil untuk perubahan di masa mendatang.

Artikel ini adalah adaptasi dari konten blog resmi Framer 'Why Framer uses React to build sites' dalam versi terjemahan.