Halo gaes !! kali ini saya akan berbagi pengalaman ketika menggunakan Cypress dan mocha dalam tools pengujian automation test. Berdasarkan pengalaman pribadi saya saat menggunakan mocha dan cypress yang mana ketika menggunakan mocha jika kita ingin menjalankan semua file testing yang ada di dalam folder satu, maka kita perlu untuk mengubah kode default dan itu akan membutuhkan effort yang bisa berdampak pada pekerjaan. Seperti contoh struktur file dan folder dibawah ini :
Bahasa Pemrograman Elm adalah Bahasa pemrograman fungsional untuk Frontend atau User Interface yang kaya akan fungsi Visualisasi yang bersifat Deklaratif. Elm dibuat untuk pengguna Web Apps dengan fungsionalitas untuk 3D Graphic dan Data Visualisation. Dilihat dari Fungsi dan kinerja Elm sangat berguna untuk membuat Game atau Game Dev berbasis Web Apps yang sangat Interaktif. Elm sendiri rilis versi stabilnya pada 21 Oktober 2019 Elm V 0.19 .1 namun pengguna sudah banyak. Sebelum lebih lanjut ke Elm tentunya kita harus tahu dasar dari Html dan CSS ya karena di Elm akan diintegrasikan dengan HTML dan CSS agar lebih cantik, tenang HTML dan CSS hanya pemanis karena Elm sendiri sudah Manis. Belajar Elm sangat mudah apabila Anda sudah memahami Pemrograman Dasar.
Beberapa kelebihan Elm Sebagai Berikut:
1. No Runtime Exceptions.
Elm menggunakan metode inferensi untuk mendeteksi error dan memberikan petunjuk yang jelas. Untuk lebih jelasnya silakah pelajari di link berikut : Detail
Berikut Contoh untuk Runtime Exception:
Pada saat Error akan muncul hints atau petunjuka yang jelas
2. Great Performance
Elm memiliki Virtual DOM sendiri yang di desain untuk kemudahan dan kecepatan. Semua funsional tidak bisa dirubah di Elm dan tolak ukur yang digunakan membuat code javascript yang cepat.
Perbandingan dengan beberapa Framework terkenal untuk frontend lain, semakin kecil semakin bagus
3. Enforced Sematic Versioning
Elm memiliki Package yang digunakan sesuai dengan kegunaan. berikut link untuk packeage: Detail
tau bisa menggunakan comandline seperti gambar berikut:
Command line untuk Install Package Elm
4. Small Assets
Dibandingkan dengan React, angular dan Vue Assets Elm lebih kecil sehingga otomatis load akan cepat, elm memiliki cara endiri untuk meminimalisir assets silahkan baca di link berikut: Detail
Perbedaan ukuran / Size Asset dibandingkan dengan Vue, Angular dan React
5. Javascript Interop
Elm dapat digunakan di suatu node yang aktif, dan dapat disisipkan di suatu project tanpa menggangu.
Elm Bisa disispkan di project dengan javascript
Bahasa Pemrogram Elm sering digunakan untuk Desain Grafis atau Game Dev. Berikut Contoh Penggunaan Bahasa Pemrograman silahkan Anda Explore :
NuAshworld – MMO RPG Game. A game in the vein of the (not playable anymore) Fallout-themed PBBG “Ashworld”. [play]
Bike-Wars – Tron clone. Bike Wars is a two-player local multiplayer game where each player controls a Light Bike (like the ones in Tron) and tries to survive the longest.
Mogee – Platformer game. A WebGL platformer that fits into 64x64px screen. [doc][play]
sonnym/scorched – Turn-based artillery game. A clone of Scorched Earth.
Dilihat dari Contoh diatas bermacam macam game berbasis Web yang menggunaan Bahasa pemrograman Elm, tidak hanya untuk Game tentunya juga digunakan untuk landing page dll untuk mempercantik Website. Apabila Anda tertarik dengan Elm silahkan untuk mempelajari langsung di portal Web nya : Link. Akan banyak sekali contoh yang bisa Anda gunakan untuk belajar lebih lanjut.
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.
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>
letcats = [
{ id:‘J—aiyznGQ’, name:‘Keyboard Cat’ },
{ id:‘z_AbfPXTKms’, name:‘Maru’ },
{ id:‘OUtn3pvWmpg’, name:‘Henri The Existential Cat’ }
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.
Realtime Chat atau Realtime Data sering disebut dalam dunia programing adalah suatu hal akan sering digunakan dan sangat diperlukan. Dalam kesempatan ini kita akan membahas dan langsung mem praktik kan Realtime Data dengan Chat App.
Senjata yang akan kita gunakan adalah:
1. HTML
Sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Platform umum yang sering digunakan sehingga akan mudah untuk di praktik kan.
2. Javascript
Javascript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript biasanya digunakan untuk olah data secara Client ke server namun juga bisa sebagai server ke client. Disini Javascript akan berfungsi GET POST data dari client atau HTML.
3. Socket.io
Apa itu Socket.Io? Socket.io ada suatu library dari Node.JS yang berfungsi untuk menjembatani realtime data, Namun jangan salah socket.io tidak hanya bisa digunakan di Node.js. Socket.io bisa digunakan di multiplatform dan yang Paling penting Gratis tanpa Batasan jumlah / Unlimited.