{"id":14296,"date":"2024-03-14T23:36:04","date_gmt":"2024-03-14T22:36:04","guid":{"rendered":"https:\/\/norbert-kathriner.ch\/webassembly-a-paradigm-shift-in-web-development\/"},"modified":"2025-05-24T17:00:41","modified_gmt":"2025-05-24T15:00:41","slug":"webassembly-a-paradigm-shift-in-web-development","status":"publish","type":"post","link":"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/","title":{"rendered":"WebAssembly: A paradigm shift in web development?"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>WebAssembly brings a revolution in web development. However, in order to reduce keyword density, the focus should be on the qualitative use of keywords. Use them strategically and make sure they are organically embedded in the text. This allows you to achieve a balanced and harmonious relationship between content and search terms.<\/p>\n[vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; column_position=&#8221;default&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_column_text text_direction=&#8221;default&#8221;]\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_87 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #1c1c1c;color:#1c1c1c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #1c1c1c;color:#1c1c1c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#What_is_WebAssembly\" >What is WebAssembly?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#The_advantages_of_WebAssembly\" >The advantages of WebAssembly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Challenges_and_limits\" >Challenges and limits<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#The_future_of_WebAssembly\" >The future of WebAssembly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Areas_of_application_for_Wasm\" >Areas of application for Wasm<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#How_does_WebAssembly_work\" >How does WebAssembly work?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#1_language_independence\" >1. language independence<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#2_compilation_to_wasm_bytecode\" >2. compilation to wasm bytecode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#3_integration_in_web_applications\" >3. integration in web applications<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#4_execution_in_the_browser\" >4. execution in the browser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#5_interaction_with_JavaScript\" >5. interaction with JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Using_WebAssembly\" >Using WebAssembly<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Basic_principles\" >Basic principles<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Binary_and_text_format\" >Binary and text format<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Support_for_CC\" >Support for C\/C++<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#WebAssembly_tools\" >WebAssembly tools<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#WABT_and_binaries\" >WABT and binaries<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Use_of_WebAssembly\" >Use of WebAssembly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Interoperability_between_C_and_JavaScript\" >Interoperability between C and JavaScript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Conclusion_advantages_in_terms_of_speed_flexibility_and_security\" >Conclusion: advantages in terms of speed, flexibility and security<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Sources\" >Sources<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/norbert-kathriner.ch\/en\/webassembly-a-paradigm-shift-in-web-development\/#Links\" >Links<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"What_is_WebAssembly\"><\/span>What is WebAssembly?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>WebAssembly is an open standard that provides a binary instruction format for the code that can be executed almost natively in web browsers. In contrast to JavaScript, which runs as an interpreted language and therefore has to be translated by the browser at runtime, Wasm enables pre-compiled delivery. This leads to a significantly faster execution speed, as the code is available in a form that can be processed directly by the machine.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"The_advantages_of_WebAssembly\"><\/span>The advantages of WebAssembly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Speed: Wasm offers an almost native execution speed, which represents a significant performance advantage, especially for computationally intensive applications and games on the web.<\/li>\n<li>Language independence: Developers can write their code in different programming languages and then compile it in Wasm. This opens the door to a wide range of developer tools and communities.<\/li>\n<li>Security: By running in a sandbox environment, the risks of security vulnerabilities are minimized. Wasm was designed with a strong focus on safety aspects.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"Challenges_and_limits\"><\/span>Challenges and limits<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Despite its many advantages, Wasm also faces some challenges:<\/p>\n<ul>\n<li>Browser compatibility: Although most modern browsers support Wasm, there are still differences in implementation and performance.<\/li>\n<li>Learning curve: For developers who have previously worked exclusively with JavaScript and related technologies, getting started with Wasm can be challenging.<\/li>\n<li>Interoperability with JavaScript: Despite its strengths, Wasm still requires JavaScript for certain tasks, especially when interacting with the DOM. This requires both technologies to coexist effectively.<\/li>\n<\/ul>\n<h3><span class=\"ez-toc-section\" id=\"The_future_of_WebAssembly\"><\/span>The future of WebAssembly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wasm is still at a relatively early stage of development, but its potential is undeniable. With a growing community and continuous improvements, Wasm could become a central element of web development, especially for applications that require high performance and complex computation.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Areas_of_application_for_Wasm\"><\/span>Areas of application for Wasm<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Games and interactive applications: Wasm&#8217;s high performance enables complex graphics and physics calculations directly in the browser.<\/li>\n<li>Web-based tools and applications: From image editing programs to CAD software, WebAssembly can form the basis for sophisticated applications that were previously reserved for desktop programs.<\/li>\n<li>Blockchain and cryptography: Wasm offers a platform for the secure execution of cryptography and blockchain applications on the web.<\/li>\n<\/ul>\n[\/vc_column_text][vc_row_inner column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; text_align=&#8221;left&#8221; row_position=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; pointer_events=&#8221;all&#8221;][vc_column_inner top_padding_desktop=&#8221;60&#8243; bottom_padding_desktop=&#8221;60&#8243; top_margin=&#8221;60&#8243; bottom_margin=&#8221;60&#8243; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; overflow=&#8221;visible&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;advanced&#8221; border_top_desktop=&#8221;4&#8243; border_bottom_desktop=&#8221;4&#8243; column_border_color=&#8221;#000000&#8243; column_border_style=&#8221;solid&#8221; column_padding_type=&#8221;advanced&#8221; gradient_type=&#8221;default&#8221;][nectar_single_testimonial testimonial_style=&#8221;small_modern&#8221; image=&#8221;5526&#8243; color=&#8221;Default&#8221; quote=&#8221;WebAssembly is a game changer.&#8221; name=&#8221;Brendan Eich&#8221;][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; text_align=&#8221;left&#8221; row_position=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; pointer_events=&#8221;all&#8221;][vc_column_inner column_padding=&#8221;padding-6-percent&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; top_margin=&#8221;30&#8243; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color=&#8221;#008abd&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; font_color=&#8221;#ffffff&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; overflow=&#8221;visible&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; column_padding_type=&#8221;default&#8221; gradient_type=&#8221;default&#8221;][vc_column_text text_direction=&#8221;default&#8221;]\n<h2><span class=\"ez-toc-section\" id=\"How_does_WebAssembly_work\"><\/span>How does WebAssembly work?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"1_language_independence\"><\/span>1. language independence<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Developers can program in various high-level languages such as C, C++, Rust or even AssemblyScript (a language similar to TypeScript). This flexibility makes it possible to use existing code for the web or to develop applications in the preferred language.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"2_compilation_to_wasm_bytecode\"><\/span>2. compilation to wasm bytecode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The code written in a high-level language is compiled into Wasm bytecode. This bytecode is a machine-oriented, binary instruction format. The compilation can be done with different tools, e.g. with Emscripts for C\/C++ or with the Rust compiler for Rust.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"3_integration_in_web_applications\"><\/span>3. integration in web applications<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The compiled Wasm bytecode is loaded onto a web server together with the rest of the web application (HTML, CSS, JavaScript etc.). When a user visits the corresponding website, the browser loads the Wasm bytecode together with the other files.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"4_execution_in_the_browser\"><\/span>4. execution in the browser<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Modern web browsers have a Wasm runtime environment that executes the Wasm bytecode almost natively. The bytecode is translated by the browser into machine code and executed, which enables very fast performance. Wasm works in a sandbox environment that ensures security and isolation from the rest of the system.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"5_interaction_with_JavaScript\"><\/span>5. interaction with JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Although Wasm is very powerful, some operations, such as DOM manipulations or network requests, still rely on JavaScript. Wasm can interact with the rest of the web application via JavaScript interfaces (APIs). JavaScript functions can call Wasm functions and vice versa. This interoperability makes it possible to utilize the strengths of both technologies.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; text_align=&#8221;left&#8221; row_position=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; pointer_events=&#8221;all&#8221;][vc_column_inner column_padding=&#8221;padding-6-percent&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; top_margin=&#8221;30&#8243; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color=&#8221;#111111&#8243; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; font_color=&#8221;#ffffff&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; overflow=&#8221;visible&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; column_padding_type=&#8221;default&#8221; gradient_type=&#8221;default&#8221;][vc_column_text text_direction=&#8221;default&#8221;]\n<h2><span class=\"ez-toc-section\" id=\"Using_WebAssembly\"><\/span>Using WebAssembly<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Basic_principles\"><\/span>Basic principles<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A central principle of WebAssembly is the seamless integration into the existing JavaScript environment. This includes technical aspects such as interoperability and common security guidelines (same-origin policy) as well as integration in tooling and developer tools, such as support for the &#8220;Show source code&#8221; function in web browsers.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Binary_and_text_format\"><\/span>Binary and text format<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>WebAssembly defines both a binary format for execution in web browsers and an equivalent text format for use by tools and for easier readability by humans. The text format uses S-expressions, which enable a clear and structured representation of the code. However, most tools offer an even more comprehensible presentation to make working with WebAssembly easier.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Support_for_CC\"><\/span>Support for C\/C++<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The original release of WebAssembly was aimed at supporting C\/C++. This was chosen for technical and practical reasons, in particular because WebAssembly did not support garbage collection in its first version and could rely on established tools such as LLVM. The choice of LLVM allowed WebAssembly developers to significantly reduce the workload and achieve seamless integration with other tools that also use LLVM, such as Emscripten.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"WebAssembly_tools\"><\/span>WebAssembly tools<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Currently, the official WebAssembly tools can primarily compile C\/C++ in WebAssembly. However, developers have already started to add support for other languages and platforms. With these tools, developers can either work directly in WebAssembly&#8217;s text format or use third-party tools that are based on these official tools.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"WABT_and_binaries\"><\/span>WABT and binaries<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>There are two main toolkits for working with WebAssembly: WABT (WebAssembly Binary Toolkit) and Binaryen. WABT perfectly supports the specification of the format and enables conversion between the binary and textual format as well as execution using an interpreter. Binaryen, on the other hand, is intended for use in a compiler infrastructure and offers optimizations as well as the option of compiling code from other formats such as asm.js, Rust MIR and LLVM.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Use_of_WebAssembly\"><\/span>Use of WebAssembly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For developers who want to use WebAssembly, the use of Emscripten is recommended. Emscripten is a toolchain that is already used to compile C\/C++ in asm.js and enables simple integration with WebAssembly. By installing emscripts and binaries, developers can compile their C\/C++ code directly in WebAssembly and use it in their web applications.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Interoperability_between_C_and_JavaScript\"><\/span>Interoperability between C and JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The interoperability between C and JavaScript is crucial for the use of WebAssembly. Special markers in C code, such as EMSCRIPTEN_KEEP_ALIVE, can be used to make functions accessible for calling from JavaScript. Communication between JavaScript and C code takes place via special functions such as ccall and cwrap, which enable C functions to be called from JavaScript.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; text_align=&#8221;left&#8221; row_position=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; pointer_events=&#8221;all&#8221;][vc_column_inner column_padding=&#8221;padding-6-percent&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; top_margin=&#8221;30&#8243; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color=&#8221;#f5f5f7&#8243; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; overflow=&#8221;visible&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; column_padding_type=&#8221;default&#8221; gradient_type=&#8221;default&#8221;][vc_column_text text_direction=&#8221;default&#8221;]\n<h3><span class=\"ez-toc-section\" id=\"Conclusion_advantages_in_terms_of_speed_flexibility_and_security\"><\/span>Conclusion: advantages in terms of speed, flexibility and security<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Wasm represents a significant development in the world of web technologies. With its advantages in terms of speed, flexibility and security, it has the potential to fundamentally change the way web applications are developed. Even if some challenges have to be overcome, there are many indications that Wasm will be an essential part of future web development.<\/p>\n<p>Whether it is a complete paradigm shift remains to be seen, but the signs are good for a revolutionary change in the way we create and use interactive and powerful web applications.[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row type=&#8221;in_container&#8221; full_screen_row_position=&#8221;middle&#8221; column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; scene_position=&#8221;center&#8221; text_color=&#8221;dark&#8221; text_align=&#8221;left&#8221; row_border_radius=&#8221;none&#8221; row_border_radius_applies=&#8221;bg&#8221; overflow=&#8221;visible&#8221; overlay_strength=&#8221;0.3&#8243; gradient_direction=&#8221;left_to_right&#8221; shape_divider_position=&#8221;bottom&#8221; bg_image_animation=&#8221;none&#8221;][vc_column column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; column_position=&#8221;default&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221;][vc_row_inner column_margin=&#8221;default&#8221; column_direction=&#8221;default&#8221; column_direction_tablet=&#8221;default&#8221; column_direction_phone=&#8221;default&#8221; text_align=&#8221;left&#8221; row_position=&#8221;default&#8221; row_position_tablet=&#8221;inherit&#8221; row_position_phone=&#8221;inherit&#8221; overflow=&#8221;visible&#8221; pointer_events=&#8221;all&#8221;][vc_column_inner column_padding=&#8221;no-extra-padding&#8221; column_padding_tablet=&#8221;inherit&#8221; column_padding_phone=&#8221;inherit&#8221; column_padding_position=&#8221;all&#8221; top_margin=&#8221;30&#8243; column_element_direction_desktop=&#8221;default&#8221; column_element_spacing=&#8221;default&#8221; desktop_text_alignment=&#8221;default&#8221; tablet_text_alignment=&#8221;default&#8221; phone_text_alignment=&#8221;default&#8221; background_color_opacity=&#8221;1&#8243; background_hover_color_opacity=&#8221;1&#8243; column_backdrop_filter=&#8221;none&#8221; column_shadow=&#8221;none&#8221; column_border_radius=&#8221;none&#8221; column_link_target=&#8221;_self&#8221; overflow=&#8221;visible&#8221; gradient_direction=&#8221;left_to_right&#8221; overlay_strength=&#8221;0.3&#8243; width=&#8221;1\/1&#8243; tablet_width_inherit=&#8221;default&#8221; animation_type=&#8221;default&#8221; bg_image_animation=&#8221;none&#8221; border_type=&#8221;simple&#8221; column_border_width=&#8221;none&#8221; column_border_style=&#8221;solid&#8221; column_padding_type=&#8221;default&#8221; gradient_type=&#8221;default&#8221;]<div class=\"nectar-fancy-ul\" data-list-icon=\"fa fa-external-link\" data-animation=\"false\" data-animation-delay=\"0\" data-color=\"accent-color\" data-spacing=\"default\" data-alignment=\"left\"> \n<h3><span class=\"ez-toc-section\" id=\"Sources\"><\/span>Sources<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/de.wikipedia.org\/wiki\/Brendan_Eich\" target=\"_blank\" rel=\"noopener\">Brendan Eich<\/a><\/li>\n<li><a href=\"https:\/\/blog.defichain.com\/webassembly-the-game-changer-for-blockchain-performance-and-flexibility\/\" target=\"_blank\" rel=\"noopener\">WebAssembly: The Game-Changer for Blockchain Performance and Flexibility<\/a><\/li>\n<li><a href=\"https:\/\/www.theregister.com\/2023\/09\/01\/web_assembly_wasm_column\/\" target=\"_blank\" rel=\"noopener\">Will WASM win the web wars?<\/a><\/li>\n<\/ul>\n <\/div><div class=\"nectar-fancy-ul\" data-list-icon=\"fa fa-link\" data-animation=\"false\" data-animation-delay=\"0\" data-color=\"accent-color\" data-spacing=\"default\" data-alignment=\"left\"> \n<h3><span class=\"ez-toc-section\" id=\"Links\"><\/span>Links<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/norbert-kathriner.ch\/en\/micro-front-ends-solution-for-growing-complexity-or-just-more-chaos\/\">Micro front ends: solution for growing complexity or just more chaos?<\/a><\/li>\n<li><a href=\"https:\/\/norbert-kathriner.ch\/en\/progressive-web-apps-pwas-the-future-of-the-mobile-internet\/\">Progressive Web Apps (PWAs): The future of the mobile internet?<\/a><\/li>\n<li><a href=\"https:\/\/norbert-kathriner.ch\/en\/headless-cms-revolution-or-just-another-buzzword-hype\/\">Headless CMS: Revolution or just another buzzword hype?<\/a><\/li>\n<\/ul>\n <\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"<p>In the dynamic world of web development, WebAssembly (Wasm) heralds a technological revolution that has the potential to fundamentally rethink our current approaches and methods. Wasm, an innovative alternative to JavaScript, promises efficiency, performance and security for complex web applications and games. But are we really facing a paradigm shift, or is it just another development in the constant evolution of the web? In this article, we explore this question and shed light on the potential, challenges and future prospects of WebAssembly.<\/p>\n","protected":false},"author":1,"featured_media":7727,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[45],"tags":[],"class_list":["post-14296","post","type-post","status-publish","format-standard","has-post-thumbnail","category-web-development"],"_links":{"self":[{"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/posts\/14296","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/comments?post=14296"}],"version-history":[{"count":0,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/posts\/14296\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/media\/7727"}],"wp:attachment":[{"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/media?parent=14296"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/categories?post=14296"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/norbert-kathriner.ch\/en\/wp-json\/wp\/v2\/tags?post=14296"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}