{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: yusuf","description":"The latest articles on DEV Community by yusuf (@canbax).","link":"https:\/\/dev.to\/canbax","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F232480%2Fd918b9de-8abf-494d-b219-ca0ea300c2cd.jpeg","title":"DEV Community: yusuf","link":"https:\/\/dev.to\/canbax"},"language":"en","item":[{"title":"Can WebAssembly make your web apps faster?","pubDate":"Sun, 16 Apr 2023 17:29:10 +0000","link":"https:\/\/dev.to\/canbax\/can-webassembly-make-your-web-apps-faster-378j","guid":"https:\/\/dev.to\/canbax\/can-webassembly-make-your-web-apps-faster-378j","description":"

\n \n \n What is WebAssembly?\n<\/h2>\n\n

\n \n \n Assembly?\n<\/h3>\n\n

As we all know, machines read binary codes (strings of zeros and ones) because it is very convenient for them but not for humans. So engineers basically created a mapping from binary code and called the mapped version 'Assembly'.<\/p>\n\n

\"Assembly<\/a><\/p>\n\n

\n \n \n WebAssembly?\n<\/h3>\n\n

WebAssembly is an 'Assembly'-like language. It's nickname is wasm<\/em>. Basically WebAssembly is the Assembly language for modern browsers. <\/p>\n\n

People usually don't write Assembly code directly because it can be tedious. That's why there are many Assembly compilers that simply create Assembly code from C\/C++<\/a>, C#, Rust, Java ... So basically you can run an existing C\/C++ or Rust application inside a browser.<\/p>\n\n

WebAssembly code can be directly injected into Javascript or Node.js environment. This can be very useful because you can combine WebAssembly with Javascript.<\/p>\n\n

WebAssembly provides near native performance. Javascript is just-in-time (JIT) compiled. But WebAssembly is pre-compiled. So that's why wasm can be executed faster than Javascript code. <\/p>\n\n

\n \n \n Get your hands dirty\n<\/h2>\n\n

Firstly, all the source codes used in this post available in GitHub<\/a>. The ultimate question in my mind is \"Can we sort an array of integers faster with WebAssembly?\"<\/strong>. Since we want to execute faster, I think I should use the holy programming language C<\/strong>.
\nTo compile WebAssembly, I used emscripten<\/a> I wrote C code and compiled C code into WebAssembly using emscripten. I simply followed instructions at MDN<\/a> and emscripten<\/a><\/p>\n

\n \n \n Hello World!\n<\/h3>\n\n

After you download and install emscripten by following their documentation, you should have a emsdk<\/code> folder. Go into that folder and run source .\/emsdk_env.sh<\/code>. Now you can compile your C codes into WebAssembly. To compile a hello world WebAssembly code, I used command emcc -o hello3.html hello3.c --shell-file html_template\/shell_minimal2.html -s NO_EXIT_RUNTIME=1 -s \"EXPORTED_RUNTIME_METHODS=['ccall']\"<\/code>. Here emcc<\/code> is the emscripten compiler. -o hello3.html hello3.c<\/code> means compile 'hello3.c' and output HTML file 'hello3.html'. My 'hello3.c' is like below
\n<\/p>\n\n

\n
#include <stdio.h>\n#include <emscripten\/emscripten.h>\n\nint main() {\n    printf(\"Hello World\\n\");\n    return 0;\n}\n\n#ifdef __cplusplus\n#define EXTERN extern \"C\"\n#else\n#define EXTERN\n#endif\n\nEXTERN EMSCRIPTEN_KEEPALIVE void myFunction(int argc, char ** argv) {\n    printf(\"MyFunction Called\\n\");\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
It simply prints 'Hello World' to the developer console when the web page is loaded. And also prints 'MyFunction Called' when the C function is called.<\/p>\n\n
--shell-file html_template\/shell_minimal2.html<\/code> of the script basically uses a template html file to generate the output 'hello3.html' file. My 'shell_minimal2.html' is like below.
\n<\/p>\n\n
\n
<html>\n  <body>\n    <button id=\"mybutton\">Call the C function<\/button>\n  <\/body>\n<\/html>\n{{{ SCRIPT }}}\n<script>\n  document.getElementById(\"mybutton\").addEventListener(\"click\", () => {\n    alert(\"check console\");\n    const result = Module.ccall(\n      \"myFunction\", \/\/ name of C function\n      null, \/\/ return type\n      null, \/\/ argument types\n      null \/\/ arguments\n    );\n  });\n<\/script>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
The rest of the command is necessary to call the function using some special method called ccal<\/code>. If you execute the command, it will generate 'hello3.html', 'hello3.js', and 'hello3.wasm' files. If you look at 'hello3.html' you will see
\n<\/p>\n\n
\n
<html>\n  <body>\n    <button id=\"mybutton\">Call the C function<\/button>\n  <\/body>\n<\/html>\n<script async type=\"text\/javascript\" src=\"hello3.js\"><\/script>\n<script>\n  document.getElementById(\"mybutton\").addEventListener(\"click\", () => {\n    alert(\"check console\");\n    const result = Module.ccall(\n      \"myFunction\", \/\/ name of C function\n      null, \/\/ return type\n      null, \/\/ argument types\n      null \/\/ arguments\n    );\n  });\n<\/script>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
The only difference between the template file 'shell_minimal2.html' and 'hello3.html' is the {{{ SCRIPT }}}<\/code> section. Inside the 'hello3.html', this part is replaced with <script async type=\"text\/javascript\" src=\"hello3.js\"><\/code> 'hello3.js' is a Javascript file that provides a global variable named Module<\/code> and also imports hello3.wasm<\/code>. hello3.wasm<\/code> is a binary file. You cannot read it with naked eye easily. Start an HTTP server and open 'hello3.html' in a modern browser. I'm using VSCode for code editing and it has a nice extension<\/a> for simple HTTP server. Then you can actually see that wasm file is converted to WebAssembly Text (.wat) format in your browser.
\n\"WebAssembly<\/a>
\nIn developer console, you can see printf<\/code> statements of C codes are actually printed. This is hello world for WebAssembly! Also if you click to the button, you will see it calls a C function! That's amazing! From JavaScript we can call a C function!
\n\"Image<\/a><\/p>\n
\n  \n  \n  Fibonacci\n<\/h3>\n\n
Now let's see if a C code can execute faster than plain Javascript code. To make a comparison I implemented fibonacci algorithm in a very inefficient way in both C and Javascript and executed side-by-side. <\/p>\n\n
I executed command just like hello world example emcc -o hello4.html fib.c --shell-file html_template\/simple_compare.html -sEXPORTED_FUNCTIONS=_fib -sEXPORTED_RUNTIME_METHODS=cwrap<\/code>. Here to call a C function, we use someother special method cwrap<\/code>.
\nBelow is my C code file 'fib.c'
\n<\/p>\n\n
\n
int fib(int n)\n{\n    if (n < 2)\n        return n;\n    return fib(n - 1) + fib(n - 2);\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Here is my 'simple_compare.html' file
\n<\/p>\n\n
\n
{{{ SCRIPT }}}\n<input type=\"number\" id=\"fibNum\" value=\"35\" \/>\n<button id=\"mybutton\">Compare JS vs C on Fibonacci<\/button>\n<script>\n  document.getElementById(\"mybutton\").addEventListener(\"click\", () => {\n    const fibIndex = Number(document.getElementById(\"fibNum\").value);\n    const t1 = executeFibonacciOnC(fibIndex);\n    const t2 = executeFibonacciOnJS(fibIndex);\n    console.log(\"C time:\", t1, \"JS time:\", t2);\n  });\n\n  \/\/ finds the 'n'th fibonacci number in C using the worst implementation and returns the execution time\n  function executeFibonacciOnC(n) {\n    fibC = Module.cwrap(\"fib\", \"number\", [\"number\"]);\n    const t1 = performance.now();\n    const res = fibC(n);\n    const t2 = performance.now();\n    console.log(\"c result: \", res);\n    return t2 - t1;\n  }\n\n  function executeFibonacciOnJS(n) {\n    const t1 = performance.now();\n    const res = fib(n);\n    const t2 = performance.now();\n    console.log(\"JS result: \", res);\n    return t2 - t1;\n  }\n\n  function fib(n) {\n    if (n < 2) return n;\n    return fib(n - 1) + fib(n - 2);\n  }\n<\/script>\n\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Here you can see that Javascript is a lot faster than C code. I feel like I wasted all my time and WebAssembly is just a balloon. 
\n\"C<\/a><\/p>\n\n
Then I realized there is some compiler optimization flags in emscripten. Let's use them emcc -o hello4.html fib.c --shell-file html_template\/simple_compare.html -sEXPORTED_FUNCTIONS=_fib -sEXPORTED_RUNTIME_METHODS=cwrap -O2<\/code> I just added a -O2<\/code> flag to my command and do it again.<\/p>\n\n
Now you can see some magic!
\n\"C<\/a>
\nThis time, C code executes faster! In some cases it is like even 2 times faster!<\/p>\n
\n  \n  \n  Sort numbers\n<\/h3>\n\n
Now let's try our ultimate aim. Can we sort numbers faster than Javascript? Let's try with C standard library function qsort<\/code> I think it should be faster, C codes are usually fast. Similar to previous command, I executed command emcc -o qsort.html arraySorter.c --shell-file html_template\/simple_compare_array.html -sEXPORTED_FUNCTIONS=_arraySorter,_malloc,_free -sEXPORTED_RUNTIME_METHODS=cwrap<\/code> My 'arraySorter.c' is very simple like below. It simply calls qsort<\/code> function with a comparer function.
\n<\/p>\n\n
\n
#include <stdlib.h>\n\nint compareFn(const void *a, const void *b)\n{\n    return (*(int *)a - *(int *)b);\n}\n\nvoid arraySorter(int *arr, int size)\n{\n    qsort(arr, size, sizeof(int), compareFn);\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
My template file 'simple_compare_array.html' is like below. Here passing and array as a parameter is bit hard. We need to use malloc<\/code> and free<\/code> functions to create and array and pass it to C.
\n<\/p>\n\n
\n
{{{ SCRIPT }}}\n<input type=\"number\" id=\"arrSize\" value=\"1000000\" \/>\n<button id=\"mybutton\">Compare JS vs C on sorting integer array<\/button>\n<script>\n  function getArray() {\n    const l = Number(document.getElementById(\"arrSize\").value);\n    return Array.from({ length: l }, () => Math.floor(Math.random() * l));\n  }\n  document.getElementById(\"mybutton\").addEventListener(\"click\", () => {\n    const arr1 = getArray();\n    const arr2 = Array.from(arr1);\n    const t1 = arrayOperationsOnC(arr1);\n    const t2 = arrayOperationsOnJS(arr2);\n    console.log(\"C time:\", t1, \"JS time:\", t2);\n  });\n\n  function arrayOperationsOnC(n) {\n    const BYTE_SIZE_OF_INT = 4;\n    const t1 = performance.now();\n    const arraySize = n.length;\n    const arrayPointer = Module._malloc(arraySize * BYTE_SIZE_OF_INT);\n    Module.HEAP32.set(new Int32Array(n), arrayPointer \/ BYTE_SIZE_OF_INT);\n    const cFunc = Module.cwrap(\"arraySorter\", null, [\"number\", \"number\"]);\n    cFunc(arrayPointer, arraySize);\n    const resultArray = Array.from(\n      Module.HEAP32.subarray(\n        arrayPointer \/ BYTE_SIZE_OF_INT,\n        arrayPointer \/ BYTE_SIZE_OF_INT + arraySize\n      )\n    );\n    console.log(resultArray);\n    Module._free(arrayPointer);\n    const t2 = performance.now();\n    return t2 - t1;\n  }\n\n  function arrayOperationsOnJS(n) {\n    const t1 = performance.now();\n    const res = arraySorter(n);\n    console.log(res);\n    const t2 = performance.now();\n    return t2 - t1;\n  }\n\n  function arraySorter(arr) {\n    return arr.sort((a, b) => a - b);\n  }\n<\/script>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
If I execute this I see my C code is like 4 times slower! 
\nWhat the heck is wrong?<\/p>\n\n
\"Image<\/a><\/p>\n\n
OK I see I didn't use compiler optimization flags. Let's try -O2<\/code> flag and do it again. Now it is faster but still very slower than Javascript.<\/p>\n\n
\n
C time: 716.1 JS time: 269.5<\/p>\n<\/blockquote>\n\n
Even if I use -O3<\/code> flag, I see it is still slower. There is no '-O4' this is the most optimized.<\/p>\n\n
\n
C time: 711.9 JS time: 270.6<\/p>\n<\/blockquote>\n\n
Now we are sure that quick sort with C cannot pass plain Javascript. But we used C standard library function qsort<\/code>. Can we try plain C code for quick sort? Let's try. I used command emcc -o faster_sorter.html arraySorter2.c --shell-file html_template\/simple_compare_array.html -sEXPORTED_FUNCTIONS=_arraySorter,_malloc,_free -sEXPORTED_RUNTIME_METHODS=cwrap -O2<\/code> Here I used the same HTML template but this time I implemented quick sort algorithm with plain C code. Below in my arraySorter2.c<\/code> file.
\n<\/p>\n\n
\n
\/\/ Quick sort in C\n\n\/\/ function to swap elements\nvoid swap(int *a, int *b)\n{\n    int t = *a;\n    *a = *b;\n    *b = t;\n}\n\n\/\/ function to find the partition position\nint partition(int array[], int low, int high)\n{\n\n    \/\/ select the rightmost element as pivot\n    int pivot = array[high];\n\n    \/\/ pointer for greater element\n    int i = (low - 1);\n\n    \/\/ traverse each element of the array\n    \/\/ compare them with the pivot\n    for (int j = low; j < high; j++)\n    {\n        if (array[j] <= pivot)\n        {\n\n            \/\/ if element smaller than pivot is found\n            \/\/ swap it with the greater element pointed by i\n            i++;\n\n            \/\/ swap element at i with element at j\n            swap(&array[i], &array[j]);\n        }\n    }\n\n    \/\/ swap the pivot element with the greater element at i\n    swap(&array[i + 1], &array[high]);\n\n    \/\/ return the partition point\n    return (i + 1);\n}\n\nvoid quickSort(int array[], int low, int high)\n{\n    if (low < high)\n    {\n\n        \/\/ find the pivot element such that\n        \/\/ elements smaller than pivot are on left of pivot\n        \/\/ elements greater than pivot are on right of pivot\n        int pi = partition(array, low, high);\n\n        \/\/ recursive call on the left of pivot\n        quickSort(array, low, pi - 1);\n\n        \/\/ recursive call on the right of pivot\n        quickSort(array, pi + 1, high);\n    }\n}\n\nvoid arraySorter(int *arr, int size)\n{\n    quickSort(arr, 0, size - 1);\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n
Now it seems with -O2<\/code> flag we can sort integers faster than plain Javascript! Now C code is like 2 times faster. That's amazing!<\/p>\n\n
\n
C time: 156.8 JS time: 271.5<\/p>\n<\/blockquote>\n\n
Is Wasm faster in your browser? Try and see<\/a> now. All the source codes<\/a> is available under MIT license.<\/p>\n\n","category":["javascript","webassembly","c"]},{"title":"\u0130nternette gezerken d\u00fcnyay\u0131 kurtar!","pubDate":"Mon, 20 Jun 2022 13:56:26 +0000","link":"https:\/\/dev.to\/canbax\/internette-gezerken-dunyayi-kurtar-38ne","guid":"https:\/\/dev.to\/canbax\/internette-gezerken-dunyayi-kurtar-38ne","description":"
English translation<\/a>
\n\u0130nternetin yayg\u0131nla\u015fmas\u0131 ile insanlar hemen hemen her g\u00fcn d\u00fcnyay\u0131 saran bu kablolu\/kablosuz a\u011fda gezinmeye ba\u015flad\u0131. K\u00fc\u00e7\u00fckken internetin Google oldu\u011funu zannederdim \ud83d\ude01 ancak b\u00fcy\u00fcy\u00fcp m\u00fchendis olunca \"internet taray\u0131c\u0131s\u0131\" denilen programlar ve \"arama motoru\" denilen internet siteleri sayesinde internette gezdi\u011fimi fark ettim.  <\/p>\n\n
Google Chrome, Safari, Microsoft Edge, Mozilla Firefox, Opera ... gibi programlar pop\u00fcler internet taray\u0131c\u0131lar\u0131d\u0131r. 
\n\"Yayg\u0131n<\/a><\/p>\n\n
Google, Bing, Baidu, Yahoo!, Yandex ... gibi internet siteleri ise yayg\u0131n arama motorlar\u0131d\u0131r. 
\n\"Yayg\u0131n<\/a><\/p>\n\n
\u0130nternet taray\u0131c\u0131lar\u0131n\u0131n ve arama motorlar\u0131n\u0131n \u00e7o\u011fu (yukar\u0131da \u00f6rnek verilenlerin hepsi) \u00fccretsiz oldu\u011fu halde reklam alarak milyar dolar mertebelerinde gelirler elde edebiliyorlar. Bunu kullanc\u0131lar\u0131n\u0131n yapt\u0131klar\u0131 aramalar\u0131n ve ki\u015fisel bilgilerin kay\u0131tlar\u0131n\u0131 tutup \u00e7e\u015fitli algoritmalar kullanarak ba\u015far\u0131yorlar. \u00d6rne\u011fin Google 2021 y\u0131l\u0131nda 200 milyar dolardan fazla<\/a> reklam geliri elde etmi\u015ftir.<\/p>\n\n
\n  \n  \n  Ecosia\n<\/h1>\n\n
Ecosia<\/a> da t\u0131pk\u0131 Google gibi bir arama motoru. Google'dan farkl\u0131 olarak Ecosia elde etti\u011fi t\u00fcm net k\u00e2r\u0131n\u0131 a\u011fa\u00e7 dikmek i\u00e7in harcad\u0131\u011f\u0131n\u0131 iddia ediyor. Bu \u015firketle herhangi bir alakam yok ve bir g\u00fcvenilirlik garantisi de veremem. Yakla\u015f\u0131k 1-2 y\u0131ld\u0131r Ecosia'y\u0131 kullan\u0131yorum ve genel olarak memnunum. Ecosia'ya g\u00fcveniyorum \u00e7\u00fcnk\u00fc \u015feffaf bir yap\u0131lar\u0131 var, finansal raporlar\u0131<\/a> ve sosyal medya g\u00f6nderileri<\/a> bana ikna edici geldi.<\/p>\n\n
\n  \n  \n  Neden Ecosia kullan\u0131yorum?\n<\/h2>\n\n