CategoriesProgramming

GitHub Copilot Asisten Powerfull Untuk Programmer

GitHub Copilot

Github mengeluarkan salah satu produknya AI yang sangat powerfull bernama GitHub Copilot, dengan tagline nya “Your AI Programmer” tools ini bisa memberikan suggestion kepada kita untuk menyelesaikan sebuah problem, hanya dengan mengetikkan sebuah komentar saja nantinya Github Copilot ini dapat memberikan sampai sepuluh rekomendasi, bahkan untuk dapat menyelesaikan algoritma struktur daya yang rumit sekalipun, untuk support bahasa pemrogramannya saya mengutip di websitenya begini

“GitHub Copilot works with a broad set of frameworks and languages. The technical preview does especially well for Python, JavaScript, TypeScript, Ruby, Java, and Go, but it understands dozens of languages and can help you find your way around almost anything.”

Karena untuk sekarang statusnya masih technical review, buat yang ingin menjadi tester GitHub Copilot ini dapat mengajukanya di https://copilot.github.com/ kurang lebih sekitar 4-5 bulan nanti akan mendapatkan email persetujuan dari GitHub seperti ini

Oke langsung saja kita akan coba tools ini, untuk mencobanya kita bisa mencoba di teks editor vscode kita tinggal install saja ekstensi nya yaitu ekstensi GitHub Copilot ini

Nah setelah kita sudah install ekstensinya, kita akan diminta untuk login ke github kita, sudah kelihatan sekali di bagian pojok kanan bawah ada notifikasinya, silahkan login ke akun githubnya yang sudah dapat persetujuan menjadi tester, kalau sudah login nanti pada pojok kanan bawah vscode kita bakal ada icon dari copilot nya nih seperti dibawah ini, dan kita bisa langsung coba

Oke sekarang kita sudah bisa mencoba untuk ngoding, sekarang kita coba nih pakai komentar saja gimana copilot ini memberikan suggestion nya untuk kita, meskipun support banyak bahasa pemrograman tapi kita bakal coba pakai bahasa GO, seperti yang tertera di atas copilot ini sudah sangat bagus di bahasa pemrograman GO

Bahkan untuk pengetikan komentar saja copilot ini sudah bisa memberikan sebuah suggestion, kita tinggal tab aja untuk langsung dapat memakai suggestion yang diberikan copilot ini, lalu untuk melihat solusi yang ditawarkan kita bisa tekan CTRL + Enter antinya akan membuka tab baru yang mana isinya adalah solusi yang ditawarkan dan kita bisa pilih yang sesuai sama yang kita butuhkan kemudian tekan accept solution

Kemudian selain menggunakan komentar, kita juga dapat menggunakan nama function seperti dibawah ini, untuk suggestion yang langsung muncul itu, jika kita merasa kurang puas, kita bisa mendapatkan suggestion lain dengan mengetikkan ALT + kurung buka atau kurung tutup saat udah sesuai kita tinggal tekan Tab

Kesimpulannya menurut saya copilot ini sebuah AI yang dapat membantu para programmer, bukan untuk menggantikan programmer, karena bagaimanapun juga penggendalinya adalah kita sendiri sebagai programmer, tool ini bagi saya sangat membantu sekali agar kita bisa ngoding lebih cepat dan tentunya kodingan yang diberikan bukan asal asalan suggestion yang diberikan juga memberikan kode kode yang mudah di baca dan di mengerti

CategoriesProgramming

Mengenal Svelte JS

         Beberapa minggu yang lalu saya mulai belajar Svelte JS. Mengapa saya belajar Svelte JS, ini dikarenakan saya kebiasaan hunting library atau framework baru  dan tolak ukur saya Fremework atau library yang mendapat bintang banyak di github maka dilihat dari segi ekosistemnya akan bagus pula. Svelte JS mendapat 33.7 Ribu  Bintang dalam kurun waktu 3 Tahun di thaun 2020 dan akan terus naik setiap harinya. Dari segi pengertian dan penggunaan Hampir sama dengan React dan Vue Js yang lebih dahulu rilis dengan usia 6 tahun di tahun 2020. Svelte JS memberikan warna Baru. Salah satu perbedaan jelas Svelte JS dengan React Js dan Vue JS adalah Tanpa menggunakan Virtual DOM. 

Tokopedia juga menggunaan Svelte JS untuk aplikasi yang mereka gunakan, ada beberapa alas an mengapa mereka menggunaan Svelte JS silakan baca Artikel berikut: http://shorturl.at/elrV4 .

Tokopedia tertera sebagai salah satu platform yang menggunakan Svelte

Mari kita explore Svelte JS:

1.  Apa itu Svelte JS.

Svelte adalah cara baru untuk membangun user interface dengan cepat. Sementara framework seperti React dan Vue melakukan semua task mereka di browser,   Namun Svelte melakukan Compile Step secara berkala sehingga tidak semua Task langsung di load di Browser.

2.  Menulis Kode Lebih Sedikit

Dari segi penulisan Svelte JS lebih pendek dibandingkan React dan Vue. Berikut contoh Aplikasi dan codenya:

Aplikasi yang dibuat akan tampil seperti berikut:

Aplikasi dari hasil code

Script code aplikasi tersebut di Svelte sebagai berikut:

Script Code Svelte

Script Code di React sebagai berikut:

Script code di React

Terakhir Script code di Vue sebagai berikut:

Script code di Vue

Terlihat bukan perbedaannya dari segi panjang Script Code yang dibuat untuk aplikasi sederhana tersebut, Svelte lebih seditkit dibandingkan dengan React dan Vue.

Untuk lebih jelasnya silakah Baca di link berikut: https://svelte.dev/blog/write-less-code

3. Tidak menggunakan Virtual DOM

DOM merupakan singkatan dari Document Object Model. Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek. Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Virtual DOM memang lebih cepat dari pada Real DOM. namun mengan Svelte dikatakan lebih cepat walau tanpa menggunakan DOM? silahkan baca di sini : https://svelte.dev/blog/virtual-dom-is-pure-overhead

4. Sangat Reaktif

Yang dimaksud dengan reactif adalah tidak diperlukan banyak library untuk proses di javascript. Kebalikannya Svelte klaim memudahkan fungsi dari javascript. Untuk lebih jelasnya silakan baca di : https://svelte.dev/blog/svelte-3-rethinking-reactivity

 

Lebih dalam lagi mari kita coba ulik2 untuk beberapa fungsionalitas namun disini saya akan membahas contoh script tentang : Declaration, Reactivity, Props, Logic, dan Event.

Dikarenakan ini masih awal saya akan membahas Script menggunakan REPL dari Svelte JS.

Declaration

Pendeklarasian varial dan pemanggilan variable di Svelte mudah seperti di Javascript namun ingat tanpa DOM atau menggunaan innerHTML sehingga script menjadi lebih Pendek. Berikut contohnya:

Contoh Deklarasi Svelte JS

Reactivity

Reactivity disini mengunakan huum aksi reaksi di javascript kita biasa menggunakan onclick=”myFunction()” berbeda dan lebih easy dan lebih pendek pendeklarasian onclick di Svelte. Silahkan lihat Contoh berikut:

Contoh Reactivity

Props

Props adalah property ata variable yang berasal dari luar class atau parent. Berikut contoh untuk props di Svelte:

Contoh untuk Props Svelte

Logic

Pada dasarnya semua logic sama namun perbedaan hanya di penulisan. Berikut penulisan Logic untuk Svelte:

Logic If

{#if args}
    <p>{content}</p>
{/if}

Logic If-Else

{#if args}
    <p>{content}</p>
{:else}
    <p>{content else}</p>
{/if}

Logic Else-If

 
 
{#if x > 10}   
 <p>{content}</p>
{:else if 5 > x}
    <p>{content}</p>
{:else}
    <p>{content}</p>
{/if}

Logic Looping

<script>
    let cats = [
        { id: ‘J—aiyznGQ’name: ‘Keyboard Cat’ },
        { id: ‘z_AbfPXTKms’name: ‘Maru’ },
        { id: ‘OUtn3pvWmpg’name: ‘Henri The Existential Cat’ }
    ];
</script>
{#each cats as { id, name }, i}
    <li><a target=“_blank” href=“https://www.youtube.com/watch?v={id}”>
        {i + 1}: {name}
    </a></li>
{/each}
 

Event

Event digunakan untuk melakukan suatu perintah. Event di Svelte dibuat cukup sederhana berikut contoh untuk onclick dan onMousemove:

Contoh Event Svelte

Sebenarnya masih banyak yang perlu dibahas atau dipelajari di Svelte JS ini namun menurut saya Artikel ini cukup untuk mengenal Svelte JS sesuai dengan judulnya. Untuk developer yang sudah bosan dengan React dan Vue saya sarankan mempelajari Svelte karena menurut saya pribadi cukup berguna untuk PWA (Progressive Web Apps) dan mudah untuk dipelajari. Karena usia masih 3 tahun di 2020 masih belum banyak yang mengetahui tentang Framework Svelte ini. Sejujurnya saat saya pelajari React dan Vue diawal lumayan kesulitan namun untuk Svelte ini lebih mudah dan memberikan perbandingan hasil yang cukup besar. Semoga bermanfaat. 

Wassalamualaikum