CategoriesProgramming

Performa Apache Druid dibanding dengan ekosistem MYSQL

A.    Pengenalan Apache Druid

Figure 1 Core System Druid
Figure 1 Core System Druid

      Apache Druid adalah Open Source untuk mendistribusikan data penyimpanan. Core Desain Druid menggabungkan ide-ide dari Data Warehouse Timeseries Database, dan Search System untuk membuat analisa dengan performa terbaik untuk pencarian di database secara realtime khusus kasus tertentu. Apache Druid paling tepat digunakan untuk analisa Big Data. 

 

1.      Kapan harus menggunakan Apache Druid

Druid digunakan untuk mendistribusikan sesuai dengan sekenario berikut:

·         Pada saat proses Menambah data atau INSERT sangat tinggi, dan UPDATE data rendah.

·         Kebanyakan menggunakan query  untuk reporting seperti Grouping, tapi juga bias untuk query pencarian.

·         Lama ekseskusi query antara 0.1 detik sampai beberapa detik.

·         Data memiliki komponen waktu.

·         Saat banyak sekali Table, tapi query hanya mengambil dari Table yang memiliki data yng Besar.

·         Banyak kolom Cardinal (numeric) yang membutuhkaan perhitungan cepat dan melakukan  pemeringkatan.

·         Data yang akan di proses dari atau  dalam bentuk Apache Kafka, HDFS, flat files dan Object Storage seperti Amazon S3.

 

2.      Kapan tidak harus menggunanakan Apache Druid

Druid tidak bisa digunakan untuk mendistribusikan sesuai dengan sekenario berikut:

·         Butuh waktu cepat untuk update Data. Druid mendukung untuk Streaming INSERT tapi tidak mendukung Streaimng UPDATE (bisa melakukan update tapi harus menggunakan batchs job dan memakan resource tentunya).

·         Menyediakan reporting historical data dalam bentuk data mentah, tanpa adanya grouping.

·         Membuat reporting system secara  offline menghiraukan kecepatan proses data.

·         Query yang memiliki join antara Big Table, yang mana kamu nyaman dengan query yang memakan waktu yang lama. 

 

3.      Integration

Figure 2 Integration

Druid bisaa digunakan beberapa opensource untuk terintegrasi diantaranya Apache Kafka, HDFS, System processor, dan kemudian out put dari integrasi Apache Druid diantaranya SQL Queries, Custom Aplications dan Monitoring & BI Tools.

 

4.      Ingestion

Figure 3 Ingestion

Druid mengolah data dalam bentuk Row Data  hasil dari Event Streaming dan Barch File yang kemudian diolah sesuai dengan Spec dan akan menghasil kan druid segment yang bisa dugunakan. Bisa dilihat di dokumentasi: Link

 

5.      Storage

 
Figure 4 Storage Druid

Seperti  Data Store lainnya, Druid memiliki Colomn, data type (String, Num dll) dan tentunya druid menyediakan data partition berdasarkan waktu ingestion dari segment. Optimized Filter atau Query bisa di lakukan pada saat Proses Ingestion /  Input Row Data.
bisa dilihat dokumentasi: Link

 

6.      Querying

Figure 5 Querying

Querying dalam Druid bisa menggunakan JSON dan SQL, untuk SQL sepenuhnya querying akan sama dengan SQL seperti JOIN, GROUPING dll dalam bentuk aggregation. Silakan lihat dokumentasi: Link

 

7.      Architecture


Figure  SEQ Figure \* ARABIC 6 Apache Druid Architecture

Druid memiliki Architecture seperti Figure 6, berikut runtutan penjelasannya:

·         Raw Data (Stream Data/Batch Data) : Dalam bentuk Event Streaming atau dalam bentuk file (JSON, csv, txt dll).

·         Data Node: Dalam data node terjadi Ingestion dengan indexer dan olah data untuk menjadi history Segment.

·         Deep Storage: Dalam Deep Storage adalah data yang sudah di Ingestion akan tersimpan dalam Storage Druid dan data siap digunakan .

·         Query Node: dalam query node ini adalah proses untuk mengambil data dan proses akhir analisa yang dibutuhkan.

B.    Penggunaan Apache Druid

Dalam penggunaan Apache Druid yang saya praktik kan hanya menggunakan Load data Batch File dalam bentuk CSV.  Druid bisa realtime hanya bisa menggunakan Event Streamer yaitu Apache Kafka,Kinesis, HDFS, Amazon S3.  Dalam riset ini saya menggunakan Raw Data Batch File

Kenapa tidak Riset menggunakan Apache Kafka:

·         Setelah berdiskusi apabila harus install apache Kafka harus menambah RAM kurang lebih 8 GB.

·         Harus riset tapa itu Apache Kafka.

·         Apabila kebutuhan untuk optimization Time Load bisa menggunaakan Chace seperti Redis.

       Methode Raw Data Batch File tidak akan bisa mendapatkan Data Realtime dan data terupdate, dikarenakan saya upload melalui overlord secara manual walaupun bisa kita buat sebuahh strategi update batch file disimpan dalam storage kemudian kita buat Task Spec Granularity update setiap beberapa menit akan mengabil data secara terus menerus.

Akhirnya kami memutuskan untuk Riset menggunakan Batch File Load data dari storage. Dikarenakan Percobaan Batch File 4 Juta data gagal maka saya punya ide untuk partial dibagi per 200 Ribu. Dalam percobaan Load data dengan 4 Juta data saya mengalami permasalahan yaitu Pada saat Ingestion dimana Status akan selalu ‘WAITING’ dan apabila saya kill Task Ingestion maka akan hilang namun pada saat Load data lagi maka akan GAGAL seperti Figure 7. Akhirnya Harus install Ulang Apache Druid dan saya mencoba method maksimal Load data 200 Ribu dan setting Append sehingga data bisa menambah.

Figure 7 Cannot Kill Task Ingestion

1.      Load Data

Proses Load data ini bertujuan untuk menentukan proses Raw data yang akan diinputkan menggunakan method apa dan pengatusan Spec. Berikut Proses Load Data.

·         Pilih Menu Load Data yang berada paling kiri Atas, dapat dilihat di Figure 8.

Figure 8 Menu Utama Druid

·         Start: Pilih Menu Local Disk kemudian pilih Connect.

Figure 9 Menu Load untuk Start

·         Connect: Masukan informasi Source Type, Base Directory dan nama file csv. Kemudian klik Applyy dan kemudian file akan terload di Raw Data.

Figure 10 Content Connect

·         Parse Data: Parsing data sebelum diolah di Parse Time, Parsing jenis data Raw Data yaitu Input Format (jenis format yang diinputkan),Find Colomn Fron Header (semacam filter dalam field apabila false akan ada permintaan nama colomn yang dihindari untuk di cari).

Figure 11 Content Parse Data

·         Parse Time: Druid akan selalu berbasi skan waktu untuk mengolah data, sehingga dafult aka nada file bernama ( _time ) yang mengambil dari salah satu filed asli disini mengambil dari created_at . Dalam Parse Time kita bisa mengatur  Timestamp bisa From Colomn ( dari colomn) atau bisa diisi sendiri (Constant Value).

Figure 12 Content Parse Time

·         Transform: Dalam Transform Colomn lebih semacar Grouping dll dan bisa juga untuk alter field/Colomn.

Figure 13 Transform

·         Filter: Dalam Filter bisa memilih Add Colomn Filter dan Add global Filter seperti di Figure 14. Dalam Add Colomn Filter (Figure 15) ada Type  filter, Dimension dan Value ini sama dengan di SQL type seperti SELECT Dimension seperti nama field dan value. Untuk Add Global Filter (Figure 16) bisa set Intervals dan Filter dalam Bentuk HJSON.

Figure 14 Filter

Figure 15 Add Colomn Filter
Figure 16 Add Global Filter

·         Configure Schema: dalam Configure Schema ini ada untuk membuat liast Aggregation sesuai dengan type data.Terdapat Add Dimension bisa untuk menambah Field dan Add Metric untuk menambah Schema perhitungan di Filed Baru. Dan Set Granularity yaitu Setting Query akan diupdate setiap Waktu tertentu atau juga bisa tidak diatur.

Figure 17 Configure Schema

·         Partition: Dalam Partition ada beberapa Fitur namun fitur utama nya adalah Partition By Time dan Secondary Partition, kebetulan disini saya setting Type Uniform dan segment granularity By HOUR selebihnya default dari Druid Learn More.

Figure 18 Partition

·         Tune:  Disini untuk mengatur properties dari Ingestion data untuk men setting kecepatan memory task dll. Learn More

Figure 19 Tune

·         Publish: dalam publish terdapat configurasi Datasource Name atau istilahnya dalah SQL Table Name, dn kemudian bisa di Append data apabila terjadi Task berulang maka data akan menambah dan tidak di rebase. Parse Error untuk menyimpan setiap Log Error pada saat menjalankan Task.

Figure 20 Publish

·         Edit Spec: Spec adalah ringkasa dari semua Configurasi muli dari Start sampai Publish yng di simpan dalam bentuk JSON. Apabilasudah mkaa siap Untuk Di submit dan masuk ke Task Ingestion.

Figure 21 Edit Spec

2.      Ingestion

Menu Ingestion ada 2 Fitur yaitu Untuk Supervisor dan Tasks yang mana untuk memperlihatkan proses Ingestion yang terjadi di Overlord Learn More. Beberapa Status dalam Task Ingestion:

·         RUNNING : menunjukan proses Task ingestion dalam proses (Figure 22)

·         PENDING: Menunjukan harus menunggu Task yang running menjadi tidak success.

·         FAILED: Apabila Task memiliki Spec yang tidak valid seperti Raw Data yg sebenaarnya tidak ada.

·         WAITING: Waiting terjadi pada saat menunggu proses Deep Storage dari system belum selesai.

·         SUCCESS: Sukses adalah proses yang menunjukan Task sudah selesai dan Data source, service, Segment dan Query sudah terbuat dan bisa digunakan.

Figure 22 Task Ingestion Status Running

Figure 23  Ingestion Task status Success

Figure 24 Task menunjukan beberapa Status

3.      Data Source

Dalam data source akan terlihat list nya dan mana yg aktif atau pun tidak dan beberapa field yang menunjukan informasi Datasource.

Figure 25 Datasource

4.      Segments

Dalam segment  terdapat informasi hasil ingestion yang dibuat dalam bentuk segment.

Figure 26 Segements

5.      Services

Service menunjukan informasi service PoRT yang berjalan dan Informasi Max Sice Usage daan Detail.

Figure 27 Services

6.      Query

Querying dalam Apache Druid bisa dibuat dalam bentuk Model MYSQL juga bisa dalam Bentuk JSON.  Ada beberapa property yang bisa dugunakan  didalam druid bisa dipelajari disini Learn More

Figure 28 QuerB

C.     Queries Library

Depedensi Library yang bisa digunakan untuk Fetch atu olah Query Apache Druid terdaapat hampir disemua Platform dan Bahasa Pemrograman silahkan kunjungi Learn More.

Figure  29 Query Libraries

A.    Benchmark Performance

         Dalam Benchmark ini saya membandingkan Performa dengan Druid dengan MYSQL dan Query Service HTTP (API Druid) Dengan MYSQL. Dengan menggunakan schema Querying di Druid dan di MYSQL. Sebelumnya ada beberapa langkah dalam ingestion yang saya buat default saya sesuaikan agar bisa Load Data sebanyak 4 Juta data. Berikut List Datasource yang bisa kita gunakan Figure 30.

Figure 30 Datasource Siap untuk Querying

      Mengesampingkan spesifikasi Server disini saya akan mencoba membandikan Druid Query dengan MYSQL Query dan Service HTTP (API Druid) dengan MYSQL Query untuk mendapatkan performa secara latency time. Disini kita menggunakan Query yang sama dengan jumlah data yang sama  sebagai Acuan.

       Proses Cara Perbandingan:

·         Druid Query

Figure 31  Query menggunakan Overlord Druid

                Dalam Console Druid saya akan membuat Query dan kemudian saya menghilangkan Smart Query Limit untuk menghilangkan fitur limit sehingga akan diload semua sesuai dengan Query yang sama.

·         MYSQL Query

Dalam MYSQL Query saya menggunakan HEIDISQL.

·         Service Druid (API Druid).

Figure 31  Query menggunakan Overlord Druid

Dalam Service ini saya menggunakan POSTMAN sebagai Tools untuk Client Service HTTP.

Saya harus setting sebagai berikut

                                 i.            Authorization: menggunakan Basic Auth

                               ii.            Header : KEY: Content-Type  Value : application/json

                              iii.            End Point: https://linkendpoint/druid/v2/sql

                             iv.            Request rody:  raw JSON

Berikut hasil dari perbandingan performa :

·         Druid Query VS MYSQL Query

·         Service HTTP (API Druid) dengan MYSQL Query

Dari perbandingan Druid dengan MYSQL berdasarkan lama latency load data terdapat beberapa hasil sebagai berikut:

1.       Untuk Pencarian dengan sepesifik field dan filter Druid bisa lebih cepat 2 kali lipat bahkan lebih   Query Biasa melalui MYSQL.

2.       Untuk Pencarian Flat Table Serrch All Content pakai OR Query maka MYSQL Query bisa lebih cepat  hampir 2 kali lipat.

3.       Untuk mengambil  data  Flat table dan multi join sebanyak 4 Juta Data terjadi Error.

4.       Untuk Service HTTP API Druid akan mengalami Error response size apabila memasuki data berjuta, selama masih belum masuk berjuta masih Aman.

 

E.    Kesimpulan

   Apache Druid adalah Open Source untuk mendistribusikan data penyimpanan. Core Desain Druid menggabungkan ide-ide dari Data Warehouse Timeseries Database, dan Search System untuk membuat analisa dengan performa terbaik untuk pencarian di database secara realtime khusus kasus tertentu. Apache Druid paling tepat digunakan untuk analisa Big Data.

Druid memiliki Architecture seperti Figure 6, berikut runtutan penjelasannya:

·         Raw Data (Stream Data/Batch Data) : Dalam bentuk Event Streaming atau dalam bentuk file (JSON, csv, txt dll).

·         Data Node: Dalam data node terjadi Ingestion dengan indexer dan olah data untuk menjadi history Segment.

·         Deep Storage: Dalam Deep Storage adalah data yang sudah di Ingestion akan tersimpan dalam Storage Druid dan data siap digunakan .

·         Query Node: dalam query node ini adalah proses untuk mengambil data dan proses akhir analisa yang dibutuhkan.

Dalam Riset ini saya menggunakan Raw Data Batch File sehingga proses input data masih manual karena beberapa alasan. Apabila ingin di otomatisasi bisa buat sebuah cronjob untuk create batch file yg akan diload oleh Druid secara berkala namun memerlukan waktu dan effort. Selain itu juga bisa menggunakan Event Streamer Seperti Apache Kafka dimana data akan selalu Realtime dengan granulity dibuat lebih pendek seperti per minute.

Druid memiliki kemampuan untuk filtering untuk setiap dimensi atau field pada saat ingestion sehingga apabila menggunakan event streamer walau pun dengan data 500GB tetap akan bisa diambil dengan cepat dengaan filtering berdasarkan interval segment yang dibuat.

 

Dari Hasil Benchmark menunjukan Druid memiliki kemampuan latency time dari segi Query filtering yang baik bahkan lebih baik 2 kali lipat Query MYSQL, namun saya menemukan bahwa Druid akan lama pada saat melakukan filter untuk semua field dengan filter ‘OR’ lebih lama dibandingkan MYSQL. Untuk Service HTTP API Druid hanya mengalami Response size Error namun untuk query dengan jumlah data dibawah 1 Juta masih bisa dieksekusi dengan cepat.

CategoriesProgramming

Teknik Materialized View dengan Database MySQL

Apa itu Materialized View?

Materialzied View adalah Hasil fisik / table dari sekumpulan table yang dilakukan Query JOIN, berbeda dengan View dimana Hasil dari Query JOIN. Materialized View memiliki keuntungan dari segi normalisasi Performa database yang cepat, secepat kita GET data Table, sedangkan View untuk mengambil 1 Data dari sekumpulan Query JOIN sangat banyak dan dengan data yang sangat Banyak dari Table akan memakan Waktu. Permasalahan Utama kita kenapa menggunakan Material View adalah GET data dengan JOIN table yang sangat banyak.

 

Materialized View akan berfungsi dan dibutuhkan pada saat system Anda berjalan dan sudah banyak data yg berjalan serta system membutuhkan data yang Real Time, Apabila optimasi ini belum diterapkan akan lebih bijaknya Anda pertimbangkan untuk menggunakannya.

Beberapa Database Lain sudah support untuk Materialized View diantaranya:

Di artikel Ini kita akan membahas Materialized View di MYSQL, benar MYSQL tidak ada dalam list Database yang support untuk Materialized View, namun disini saya akan mencoba memberikan beberapa Teknik yang lumayan mudah untuk diterapkan Apabila System Anda menggunakan Database MYSQL. Berikut Gambaran dasar Materialized View secara garis Besar: 

Gambaran Beberapa Table yang digunakan untuk menghasilkan Table Materialized view

Berdasarkan Gambaran Diatas bisa akita lihat  Hasil query dari beberapa table akan menghasilkan single table. Bagaimana caranya?

Berikut kita masuk ke topik utama yaitu Teknik Materialized View di Database MYSQL.

Sebagai Contoh disini saya membuat database untuk penjualan Rumah Makanan yang sederhana:

1.  Table user

CREATE TABLE `user` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `phone` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `role_id` INT(11) NULL DEFAULT NULL,

      `status` TINYINT(4) NULL DEFAULT ‘1’,

      `created_at` DATETIME NOT NULL DEFAULT current_timestamp(),

      `updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),

      PRIMARY KEY (`id`) USING BTREE,

      INDEX `role_id` (`role_id`) USING BTREE

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

AUTO_INCREMENT=2;

2. Table role

CREATE TABLE `role` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `created_at` DATETIME NOT NULL DEFAULT current_timestamp(),

      `updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),

      PRIMARY KEY (`id`) USING BTREE

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

AUTO_INCREMENT=4;

 

3. Table menu (menu makanan)

CREATE TABLE `menu` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `price` DOUBLE(22,0) NULL DEFAULT NULL,

      `status` TINYINT(4) NULL DEFAULT NULL,

      `created_at` DATETIME NOT NULL DEFAULT current_timestamp(),

      `updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),

      PRIMARY KEY (`id`) USING BTREE

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

AUTO_INCREMENT=6;

 

4. Table Invoice

CREATE TABLE `invoice` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `user_id` INT(11) NULL DEFAULT NULL,

      `created_at` DATETIME NOT NULL DEFAULT current_timestamp(),

      `updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),

      PRIMARY KEY (`id`) USING BTREE,

      INDEX `user_id` (`user_id`) USING BTREE

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

AUTO_INCREMENT=2;

 

5. Table invoice_detail

CREATE TABLE `invoice_detail` (

      `id` INT(11) NOT NULL AUTO_INCREMENT,

      `invoice_id` INT(11) NULL DEFAULT NULL,

      `menu_id` INT(11) NULL DEFAULT NULL,

      `price` DOUBLE(22,0) NULL DEFAULT NULL,

      `quantity` INT(11) NULL DEFAULT NULL,

      `created_at` DATETIME NOT NULL DEFAULT current_timestamp(),

      `updated_at` DATETIME NOT NULL DEFAULT current_timestamp() ON UPDATE current_timestamp(),

      PRIMARY KEY (`id`) USING BTREE,

      INDEX `menu_id` (`menu_id`) USING BTREE,

      INDEX `invoice_id` (`invoice_id`) USING BTREE

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

AUTO_INCREMENT=2;

6. View invoice_report_list ini adalah view yang akan kita Materialized.

DROP TABLE IF EXISTS `invoice_report_list`;

CREATE ALGORITHM=UNDEFINED SQL SECURITY DEFINER VIEW `invoice_report_list` AS SELECT i.id,id.invoice_id, id.price, id.quantity, i.created_at AS sale_date, u.name AS cahsier, m.name AS menu_name, r.name AS role_name, r.id AS role_id FROM invoice_detail id JOIN invoice i ON (id.invoice_id = i.id) JOIN user u ON (i.user_id = u.id) JOIN menu m ON (id.menu_id = m.id) JOIN role r ON (u.role_id = r.id) ;

Berikut beberapa Teknik Materialized View:

1. Materialize View dengan Event Scheduller dan Store Routine (Tidak Real Time).

Event Scheduller digunakan untuk memanagement Eksekusi suatu event dalam Batabase MYSQL dan Task dijalankan secara barkala atau sesuai dengan penjadwalan. Event Scheduller dalam Materialized View ini digunakan sebagai perintah penjadwalan yang kemudian digunakan untuk eksekusi secara berkala sehingga hasil Materialized View akan terupdate berdasarkan Jadwal dari Event Scheduller.  Disini selain menggunakan Event scheduler juga menggunakan Store Routine. Store Routine adalah semacam prosedur fungsi yang bisa digunakan di MYSQL. Dengan menggunakan DB Rumah makan diatas, Berikut Langkah Materialized View:

  • Kita akan membuat Table dengan nama invoice_report_mv_event_sche sebagai Materialized View nya yang memiliki field sama dengan View invoice_report_list:

CREATE TABLE `invoice_report_mv_event_sche` (

      `id` INT(11) NULL DEFAULT NULL,

      `invoice_id` INT(11) NULL DEFAULT NULL,

      `price` DOUBLE(22,0) NULL DEFAULT NULL,

      `quantity` INT(11) NULL DEFAULT NULL,

      `sale_date` DATETIME NULL DEFAULT NULL,

      `chasier` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `menu_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `role_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `role_id` INT(11) NULL DEFAULT NULL

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB;

  • Buat Store Routine yang digunakan untuk refresh Table invoice_report_mv_event_sche.

CREATE DEFINER=`root`@`localhost` PROCEDURE `store_routine_mv`(

      IN `rc` INT

)

LANGUAGE SQL

NOT DETERMINISTIC

CONTAINS SQL

SQL SECURITY DEFINER

COMMENT

BEGIN

        TRUNCATE TABLE invoice_report_mv_event_sche;

     INSERT INTO invoice_report_mv_event_sche

     select * from invoice_report_list;

     SET rc = 0;

END

  • Buat Event untuk melakukan penjadwalan refresh dari Store Routine yang telah kita buat tadi. Event disini saya buat akan dijadwalkan setiap 1 Jam akan dieksekusi

CREATE DEFINER=`root`@`localhost` EVENT `event_scheduller_mv`

      ON SCHEDULE

            EVERY 1 HOUR STARTS ‘2020-10-25 10:46:00’

      ON COMPLETION NOT PRESERVE

      ENABLE

      COMMENT

      DO BEGIN

      CALL `store_routine_mv`(@rc);

END

  • Untuk menjalankan Event Scheduller di system dengan menggunakan command berikut:

SET GLOBAL event_scheduler = ON;

  • Apabila semua step diatas sudah dilaksanakan maka table invoice_report_mv_event_sche akan ter refresh setiap 1 Jam.

2. Materialized View dengan Trigger (Real Time)

Materialized View dengan Trigger ini digunakan untuk setiap perubahan  1 data akan menambah data dari Table Material View sehingga akan terlihat Real Time. Jadi INSERT, UPDATE, DELETE akan mempengaruhi Tabel dari material view khusus untuk hanya 1 (INSERT, UPDATE, DELETE) data row saja. Berikut Langkah untuk Materialized View untuk INSERT dengan Trigger:

  • Buat Table Materialized View dengan nama invoice_report_mv_trigger

CREATE TABLE `invoice_report_mv_trigger` (

      `id` INT(11) NULL DEFAULT NULL,

      `invoice_id` INT(11) NULL DEFAULT NULL,

      `price` DOUBLE(22,0) NULL DEFAULT NULL,

      `quantity` INT(11) NULL DEFAULT NULL,

      `sale_date` DATETIME NULL DEFAULT NULL,

      `chasier` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `menu_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `role_name` VARCHAR(50) NULL DEFAULT NULL COLLATE ‘utf8mb4_general_ci’,

      `role_id` INT(11) NULL DEFAULT NULL

)

COLLATE=‘utf8mb4_general_ci’

ENGINE=InnoDB

ROW_FORMAT=DYNAMIC;

  • Buat Trigger yang akan update setiap ada penambahan di table invoice_detail kemudian insert ke table Materialized View.

CREATE DEFINER=`root`@`localhost` TRIGGER `trigger_invoice_detail_mv` AFTER INSERT ON `invoice_detail` FOR EACH ROW BEGIN

INSERT INTO invoice_report_mv_trigger SELECT * FROM invoice_report_list WHERE id = NEW.id;

END

  • Apabila step sudah dilakukan maka data di table Materialized View invoice_report_mv_trigger akan terupdate dan bisa dikatakan Real Time.


3. Materialized View dengan Easy Script

Easy Script disini kita tinggal panggil query SQL setiap ada perubahan dari table utama kemudian kita update hasil View ke Materialized View, car aini hamper sama dengan MV Trigger, ini tergantung dengan logic yang Anda gunakan apaah bisa digunakan atau tidak, tapi tentunya bisa digunakan sesuai dengan alur scripting Anda. Untuk report Rumah Makan kita akan memperhatikan perubahan dari table invoice_detail, untuk setiap penambahan id dari invoice_detail maka akan kita update row di table  Materialized View invoice_report_mv_trigger. Untuk query terserah Anda sesuai kreasi Anda namun di Report Rumah Makan ini saya hanya akan menggunakan query INSERT berikut untuk mengupdate:

INSERT INTO invoice_report_mv_trigger SELECT * FROM invoice_report_list WHERE id = $id_invoice_detail

 

4. Materialized View dengan Flex View

flexviews menggunakan plugin untuk backlog proses Materialized View di DB Utama sehingga akan erlihat realtime tanpa harus membuat proses yang berlebihan . Repository -> Resource (ada Async biar seperti NoSQL)
Manual -> Resource
PPT -> Resource

Silahkan menggunakan File SQL Berikut Untuk Mencoba Sendiri Teknik Materialized View di Database MYSQL : Download

Materialized View akan terasa gunanya pada waktunya namun sebaiknya anda impementasikan diawal saat pembuatan system apabila menggunakan MYSQL, ditakutkan apabila diimplementasikan ditengah tengah program berjalan akan mempengaruhi performa dan kestabilan jalannya program apabila tidak berhati hati. 

Semoga Bermanfaat

Wassalamualaikum

CategoriesProgramming

Mengenal Phoenix Web Framework

        Sebelum Masuk ke Phoenix Framework kita mengenal dulu Elixir functional language, Elixir adalah bahasa pemrograman functional yang di build berdasarkan VM dari Erlang. Dan dibuat untuk memenuhi kebutuhan developing scalable system dan maintainable system.

        Jika kamu ingin mengembangkan aplikasi yang selalu ada dan tersedia (high-availability), maka Elixir bisa menjadi pilihan yang bagus. Sebagai referensi, Erlang Virtual Machine masuk dalam nine nines reability yang membuat downtime-nya sangat rendah. Downtime-nya tidak sampai satu detik dalam setahun! Hampir tidak pernah crash. Sedari awal, Elixir dibangun dengan fitur toleran-kesalahan (fault-tolerance) yang memungkinkan menjalankan ulang proses yang mengalami kegagalan dalam ketika dijalankan. Setiap kode berjalan pada sebuah lightweight thread terisolasi yang disebut sebagai proses (process) dan berkomunikasi menggunakan pesan (messages). Resource: https://medium.com/phoenixir/kenapa-memilih-elixir-c628dabddc3b

Phoenix Framework digunakan sebagai Realtime Data comment App

         Elixir memiliki Framework bernama Phoenix Framework untuk pengembangan Web, masih jarang yang menggunakan Phoenix Framework terutama di Indonesia namun Apabila anda mencari reability, Aplikasi Web Interaktif dengan less code, dan Real Time data. Maka Phoenix bisa menyajikan dengan sangat Baik.

Kelebihan yang diberikan Phoenix Framework:

1. Real Time

Interaksi dengan berbagai User yang dibuild dengan Phoenix dan tanpa ada kompleksitas untuk develop dari client side.

2. Di build dengan MVC yang rapi

MVC dibuld semudah mungkin dan dengan mudah untukdi maintainace.

3. Scalability

Phoenix menyediakan VM Erlang yang mana untuk membuat realtime data bisa dengan mudah tanpa harus menggunakan pihak ketiga.

Cara penggunaan:

Silahkan Buka Laman untuk versi Phoenix yang terbaru : https://hexdocs.pm/phoenix/Phoenix.html

Dalam Dokumentasi Phoenix memiliki struktur Modul yang rapi dan menurut saya lengkap diantaranya:

  1. Modul MVC
  2. Testing
  3. Adapter dan Plugin
  4. Socket dan Transport
  5. Templating
  6. Exception

Beberapa Contoh Penggunaan Phoenix Web Framework:

1. Build a real-time Twitter clone

 

Dalam Video ini akan menjelaskan langkah dan cara membuat Real Time Tweets Clone dengan menggunakan Phoenix Framework. Resource : Link

2. Realtime Chat
 Hasil dari Contoh Realtime chat dengan Phoenix Framework

Realtime Chat sederhana Anda bisa melihat contoh berikut:

Phoenix Web Framework  untuk komunitas masih belum sebesar Bahar bahas pemrogramn yang lain, namun  Framework ini memiliki feature dan modul yang lengkap dilihat dari segi framework. Silahakan Anda coba mempelajari Phoenix Framework ini nanti Anda akan menumakn dimana simplenya Phoenix Web Framework. Berikut Link Utama Phoenix Framework: Link

Semoga Bermanfaat

Wassalamualaikum

CategoriesProgramming

Mengenal Bahasa Pemrograman Elm

     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 :

Beberapa Contoh Game   Dibuat dari Elm

Snake

Previous Elm versions

Tetris

Breakout

Pong

Mario

Tic Tac Toe

Space Invaders

Memory

Asteroid

Pac Man

Minesweeper

Roguelike

Classic Card & Board Game

Real-Time Strategy

Puzzle Games

Racing Game

  • Elm 0.18
    • Tacks – Real-time multiplayer sailing game [play]
    • Retrorace – Retrorace is a multiplayer game where the aim is to be the first to reach the top of the screen. [play]

Tools

Miscellaneous

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.

Semoga Bermanfaat

Wassalamualaikum

 
CategoriesProgramming

Framework Performance untuk Developer

Performance adalah pilihan bagi pengguna framework, di artikel kali ini saya akan menyajikan beberapa pilihan yang mungkin bisa anda gunakan untuk menentukan framework yang akan anda gunakan.

Realworld adalah salah satu repository yang menyediakan perbandingan pengguna asli dari suatu framework. Realword sudah mendapat binta sebanya 45.2 K dan tentunya masih akan terus bertambah untuk meningkatkan performance sharing to sharing developer. Dari sini akan terlihat mana framework backend maupun frontend yang sering digunakan, juga tentunya bisa digunakan sebagai acuan untuk menentukan envorinment adalam suatu system.

Berikut Peringkat Pengguna asli Frontend.

Sorted by popularity on Sun Jul 19 2020

🥇🥈🥉
React / Redux
React / Redux Star Fork
Angular
Angular Star Fork
Vue
Vue Star Fork
Elm
Elm Star Fork
React / MobX
React / MobX Star Fork
Svelte / Sapper
Svelte / Sapper Star Fork
PureScript + Halogen
PureScript + Halogen Star Fork
AngularJS
AngularJS Star Fork
ClojureScript + re-frame
ClojureScript + re-frame Star Fork
Angular + ngrx + nx
Angular + ngrx + nx Star Fork
Aurelia
Aurelia Star Fork
Ember.js
Ember.js Star Fork
Rust + Yew + WebAssembly
Rust + Yew + WebAssembly Star Fork
AppRun
AppRun Star Fork
Next.js
Next.js Star Fork
Vanilla JS Web Components
Vanilla JS Web Components Star Fork
ClojureScript + Keechma
ClojureScript + Keechma Star Fork
Stencil.js
Stencil.js Star Fork
Hyperapp 1
Hyperapp 1 Star Fork
Dojo 2
Dojo 2 Star Fork
Ember Octane
Ember Octane Star Fork
San
San Star Fork
Riot.js v4
Riot.js v4 Star Fork
neo.mjs
neo.mjs Star Fork
Imba
Imba Star Fork
Crizmas MVC
Crizmas MVC Star Fork
Bridge.Spaf
Bridge.Spaf Star Fork
Riot.js v3
Riot.js v3 Star Fork
Riot.js + Universal + Effector
Riot.js + Universal + Effector Star Fork
 

Tentunya pengguna juga harus mengetahui patokan dalam menentukan ekosistem yang akan dibuat disni kita bandingkan adalah Framework.

1. Performance

Performance dilihat dari seberapa banyak orang atau End User  menggunakan Aplikasi dan di build dari framework tertentu dan seberapa bagus feedback dari enduser.

Semakin Tinggi Semakin Bagus

Untuk  nilai diatas 90 akan terasa perbedaan dengan yang dibawahnya.

2. Size

Transfer Size bisa di analitik menggunakan inspect element di browser dengan melihat Network dengan melihat GZIPed transfer response dan lama Deliver dari server.

Walaupun semakin banyak library yang digunakan bisa menjadi semakin lama load size nya, namun semakin baik coding maka seharunya library yang tidak berguna tidak boleh di load.

Semakin Kecil Semakin Bagus

Semakin kecil ukuran file maka semakin cepat download page.

Kesimpulan

Semakin kecil load file coding maka semakin cepat. Svelte menjadi nomor satu karena memiliki Langkah yang keren load tanpa virtual DOM jadi sangat cepat

3. Line Code

Lone Code menunjukkan betapa ringkasnya library / framework / bahasa yang diberikan. Berapa banyak baris kode yang Anda perlukan untuk diterapkan di aplikasi yang sama.

Semakin Kecil Semakin Bagus

Kesimpulan

Pada dasarnya semua framework bagus, namun didunia kerja kecepatan pengerjaan sangat menentukan. Jadi adanya framework sangatlah membantu, beberapa refrensi diatas saya harap bisa membantu anda para pembaca agar lebih eksplor lagi dan belajar lagi sehingga bisa mengatahui framework terbaik apa yang cocok untuk system Anda.

Semoga Bermanfaat
Wassalamualaikum
CategoriesInternetLinuxProgramming

Menganal OpenStack untuk Cloud Computing

          Salah satu integrasi Open Stack yang pernah
saya buat ada dengan CRM (Customer Relationship Management) dimana Openstack
mengatur Cloud Computing yang berhubungan dengan penjualan atau yang sering
disebut dengan Cloud VPS, Cloud Hosting, Rack location dan RackSpace, integrasi
ini saya buat dalam bentuk Admin Dashboard yang bisa digunakan untuk mengatur
Cloud Computing dan Penjualan. Open stack memiliki fitur yang lengkap untuk
semua kebutuhan IAAS.

Gambaran Service dari OpenStack

Apa itu OpenStack?

       OpenStack merupakan project open source untuk platform cloud computing. sebagian besar digunakan sebagai Infrastructure as a Service (IaaS), di mana server virtual dan sumber daya lain tersedia untuk pelanggan.Platform perangkat lunak terdiri dari komponen-komponen yang saling terkait yang mengendalikan beragam perangkat keras multi-vendor yang meliputi pengolahan, penyimpanan dan sumber daya jaringan di seluruh data center. Pengguna dapat mengelolanya melalui dasbor berbasis web, hingga command-line tools, atau REST layanan web (wikipedia).

         OpenStack menyediakan solusi IaaS (Infrastructure ad a Service) dengan berbagai layanan yang berhubungan. Masing-masing layanan/service menyediakan API (Application Programming Interface) yang memfasilitasi integrasi. Layanan-layanan atau service-service ini dapat kita instal sesuai kebutuhan kita. Dimana API ini bisa digunakan untuk integrasi sesuai kebutuhan Anda, saya pernah membuat untuk kebutuhan CRM.

 

Service di Arsitektur OpenStack sebagai Berikut:

Dashboard / Horizon 

Dashboard menyediakan tampilan web yang berinteraksi dengan layanan OpenStack seperti meluncurkan instance, memberikan IP address dan mengkonfigurasi akses control untuk Nova, Neutron, Swift dll.

Compute / Nova

Compute/ Nva menyediakan manajemen instan dari Compute yang ada pada lingkungan OpenStack sebagai contoh Compute di Virtual Server. Nova / Compute memiliki fitur untuk managemen dalam Virtual Machine, baremetal servers dan system contaners. Nova /  Compute adalah daemon yang berjalan di linux server.

Networking / Neutron

Neoutorn memiliki fungsi untuk mempermudah kita memahami layanan Networking sebagai layanan yang membuat jaringan secara virtual tentunya. Memiliki plugin yang mendukung berbagai jaringan dari vendor dan teknologi.

Object Storage / Swift

Swift  Pada Object storage ini akan menympan dan menambil object data melalui RESTful, API berbasis HTTP.

Block Storage / Cinder

Cinder sebagai Object Storage menyediakan persistent block storage untuk menjalankan instance. Kita dapat melakukan  manajemen block storage devices.

Identity service / Keystone

Keystone menyediakan manajemen otorisasi layanan.

Image service / Glance

Glance adalah untuk pengelolaan image terutama untuk menyimpan dan meluncurkan VM disk images. OpenStack compute menggunakan hal ini selama provision.

Telemetry / Ceilometer

Ceilometer akan memantau billing, benchmarking, scalability dan tujuan statistik.

Orchestration / Heat

Heat berfungsi untuk menggabungkan beberapa aplikasi cloud.

Database service /  Trove

Trove Meydiakan layanan Cloud database-as-a-Service.

Data processing service

Menyediakan kemampuan provision untuk Hadoop clusters.

Kesimpulan

OpenStack adalah open source yang memili resource yan besar sehingga bisa digunakan stakeholder untuk membangun usaha atau bisnis maupun hanya untuk IOT. Namun apabila penggunaannya sebagai bisnis maka akan berguna , bayangkan apabila harus secara manual atau hanya dalam bentuk Insfrastruktur tanpa Service instan dari Open Stack, akan sangat merepotkan. Pada inti nya dengan Open Stack semua Insfrastruktur bisa tertata dan semua service bisa dijalankan dengan cepat dan Mudah. Untuk belajar lebih dalam silahkan dipijak disini.

Semoga Bermanfaat.

Wassalamualaikum.

CategoriesProgramming

Efisiensi proses fetching data dengan GraphQl

Apa itu GraphQl?

GraphQl adalah query pemrosesan data untuk memanipulasi API. GraphQl dikembangkan secara internal oleh Facebook pada tahun 2012 dan di publikasikan pada tahun 2015 namun untuk rilis stabilnya pada tahun 2018. GraphQl memiliki posisi diantara Client dan Server dimana menjembatani aliran data. GraphQl hamper sama seperti REST  dimana ada proses CRUD bedanya GraphQl ini memerlukan skema untuk proses fetching data yang diinginkan sehingga tidak ada proses berulang dari client dan server. Salah satu tujuan pengembangan bahasa query ini adalah untuk mempermudah komunikasi data antara server dan Client.

Alur poses penggunaan Schema GraphQl

GraphQl dapat diimplementasikan di berbagai bahasa sisi client seperti react, vue, svelte dll. Apapun jenis framework nya selama dapat mengakses data dengan API. dan karena GraphQl ini hanya penerjemah (query language) dan runtime saja maka tidak tergantung pada bahasa pemograman sisi server dan database apapun.

Kegunaa Utama?

Pandangan alur proses data di GraphQl
1. Handle untuk Permintaan Ganda.

GraphQl memiliki proses dimana fetching data setelah diproses dari server maka akan dimanipulasi lagi sehingga smeua yang client butuhkan bisa didapatkan. proses berulang seperti di REST tidak akan terjadi karena data yang diinginkan sudah diload oleh GraphQl dan hanya perlu mengambil ulang dari schema yang di buat GraphQl.

2. Efisiensi Data dan Konsistensi.

Asumsinya kita semua sudah mengenal REST endpoint jadi tidak perlu dijelaskan apa itu REST. Setiap endpoint mewakili satu entitas dan memiliki beberapa metode seperti GET, POST, PUT dan DELETE. Ketika mengakses endpoint dengan metode GET akan menampilkan data dari entitas tersebut. Data yang ditampilkan bersifat tetap, maksudnya kita akan menerima semua data meskipun kita tidak membutuhkan data itu. Konsistensi data karena data kita sendiri yang atur atau yg menjembatani antara API yang ada dengan data yang akan kita berikan ke client.

Seklias penggunaan GraphQl untuk Argument

Argument Pada saat fetching data menggunakan GraphQl
Argument ini menunjukan get data dari API akan dioleh oleh query GraphQl sesuai dengan kebutuhan client sehingga tidak semua data dari API akan muncul di Client. Untuk lebih jelasnya silahkan bermeditasi disini: graphql

Perbedaan dengan graphQl dengan REST API

Pada dasarnya GraphQl dan REST API tidak terlalu berbeda namun sesuai dengan penggunaannya, GraphQl digunakan untuk data yang besar dimana didapat API dari pihak ketiga yang kemudian akan di deliver ke client sedangkan REST API proses data yang diingin kan sudah disiapkan oleh programmernya sehingga telihat pakem.

 

Kesimpulan

GraphQl memiliki efisiensi, konsistensi dan kemapampuna untuk handle data yang ganda. GraphQl dibutuhkan pada saat data dari sebuah aplikasi semakin besar dan dari segi development akan sangat lama apabila menggunakan RESTful API langsung ke client, jadi GraphQl akan memilah data mana saja yang akan tampil dan digunakan oleh client. Meski bitupun GraphQl bisa digunakan di aplikasi dengan skala kecil.

Semoga Bermanfaat

Wassalamualaikum

CategoriesProgramming

Memahami Synchronous dan Asynchronous dalam Pemrograman

         Pertama kali saya terjun di dunia kerja langsung menghadapi banyak materi yang asing. Namun materi pertama dan selalu saya gunakan sampai sekarang adalah suatu proses menjalankan aplikasi dan proses jalannya secara client dan server side, hal utama yang menurut saya perlu dipelajari adalah  Synchronus dan Asynchronus. Materi ini menurut saya sangat diperlukan untuk dasar pemrograman (walaupun saat kuliah tidak pernah ada :3). Walaupun secara tidak langsung hampir semua Web Developers  menggunakannya namun perlu Pengetahuan lebih dalam karena proses ini sederhana dan berdampak ke semua aspek kehidupan program Anda.

Apakah yang di maksud dengan Synchronouse?

Synchronous adalah proses jalannya program secara sequential , disini yang dimaksud sequential ada berdasarkan antrian ekseskusi program. Pada dasarnya semua Bahasa pemrograman menggunakan Asynchronouse terutama PHP.

Cotoh Synchronous di Bahasa Perograman PHP:

beri nama file synchronous.php
<?php
$now = date(‘Y-m-d’);
// antrian 1
echo $now.‘ |’;
$yesterday = date(‘Y-m-d’,strtotime(‘-1 days’));
// antrian 2
echo $yesterday.‘ |’;
$week = date(‘Y-m-d’,strtotime(‘-1 week’));
// antrian 3
echo $week.‘ |’;
?>
Hasil Eksekusi:
Hasil eksekusi file php sync
Penjelasan: Pada saat file synchronouse.php dieksekusi maka proses nya adalah membaca antrian 1 terlebih dahulu kemudian antrian 2 dan terakhir adalah antrian 3.

Apakah yang dimaksud dengan Asynchronous?

Asynchronous adalah proses jalannya program bisa dilakukan secara bersamaan tanpa harus menunggu proses antrian. Synchronous merupakan bagian dari Asynchronous (1 antrian) dimana proses akan dieksekusi secara bersamaan dan untuk hasil tergantung lama proses suatu fungsi synchronous . Asynchronouse hampir disemua Bahasa pemrograman ada namun untuk PHP masih belum ada. PHP sebagai server side hanya menyediakan synchronous namun bisanya di WEB Developers tetap digunakan namun menggunakan AJAX (Asynchronous Javascript And XML) untuk proses Asynchronouse.

Contoh Asynchronouse PHP + AJAX

Buat file HTML+CSS+AJAX dengan nama test.html

<style type=“text/css”>
  #sync
{
  width100px;
  height100px;
  backgroundred;
  -moz-border-radius50px;
  -webkit-border-radius50px;
  border-radius50px;
  float:left;
  margin:5px;
}
.one
{
  line-height100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
.two
{
  line-height100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
</style>
<div id=“sync”><span class=“one”>0</span></div>
<div id=“sync”><span class=“two”>0</span></div>
<br />
<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js” 
type=“text/javascript”></script>
<script type=“text/javascript”>
  $.ajax({
        url: ‘syncronous.php?1’,
        type: “GET”,
        success: function(result)
        {
          $(‘.one’).html(result);
          $(‘.one’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  $.ajax({
        url: ‘syncronous.php?2’,
        type: “GET”,
        success: function(result)
        {
          $(‘.two’).html(result);
          $(‘.two’).each(function () {
              $(this).prop(‘Counter’,0).animate({
                  Counter: $(this).text()
              }, {
                  duration: 4000,
                  easing: ‘swing’,
                  step: function (now) {
                      $(this).text(Math.ceil(now));
                  }
              });
          });
        }
      });
  
</script>
Buat file PHP dengan nama syncronous.php
<?php
if(isset($_GET[“1”])){
    
    echo json_encode(20000);
if(isset($_GET[“2”])){
    
    echo json_encode(40000);
}
?>
 Hasil Eksekusi:
Nilai terus berjalan Secara bersamaan tanpa ada Antrian
Penjelasan: Counter Nilai terus berjalan tanpa  ada antrian.
Berikut Source Code Link Gitlab apabila anda ingin mencoba: Link

Contoh Asynchronous di NODE JS

Di artikel saya sebelumnya pernah membahas chat menggunakan Socket.io dimana basic dari Realtime Chat dengan socket.IO ada Synchronous. Silahkan lihat di Artikel saya berikut : Realtime Chat dengan Html, Javascript dan Socket.io

Note: Synchronous  dan Asynchronous saling berkisambungan jadi apabila anda ingin lebih detail bisa Anda pahami lebih dalam. Kegunakan juga sesuai kebutuhan.

Semangat Belajar!!
Wassalamualaikum..

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