Exploring the Future of Web Development with WebAssembly and Javascript - CityJS Conf 2023

The way we engineer software on the web has improved over the years. In this presentation, we will explore what the future of web engineering is going to be with WebAssembly and the most used web language, JavaScript. WebAssembly, or Wasm, is a cutting-edge technology that offers a binary instruction format for running high-performance code within web browsers and beyond. Originally designed for web development, it has quickly expanded to diverse computing contexts, promising improved performance, enhanced security, and portability across different platforms. Understanding the significance of this technology is critical as we navigate the evolving landscape of modern computing.

The main objective of this talk is to explore the vast potential that WebAssembly holds in revolutionizing computing on the web. We will discuss the advantages it offers over traditional programming languages and platforms, such as improved performance, enhanced security, and cross-platform compatibility. Through real-world use cases, we will demonstrate how WebAssembly can be applied to various domains, especially web development. We will also explore what else is coming to WebAssembly, take a glimpse of what the future of web engineering will be like and finally, we will discuss how to get hands-on with this technology, its communities, tools, resources and knowledge base.

Transcript

1. Desmond Obisi (He/Him) OSS Engineer Exploring the Future of Web Development with WebAssembly and Javascript CityJS Conference 2023 Lagos, Nigeria
2. Introduction 01 Overview and Objectives
3. Introduction The way we engineer software on the web has improve over the years. In this presentation, we will explore what the future of web engineering is going to be with WebAssembly and the most used web language, JavaScript. WebAssembly, or Wasm, is a cutting-edge technology that offers a binary instruction format for running high-performance code within web browsers and beyond. Originally designed for web development, it has quickly expanded to diverse computing contexts, promising improved performance, enhanced security, and portability across different platforms. Understanding the significance of this technology is critical as we navigate the evolving landscape of modern computing.
4. Objectives of This Talk The main objective of this talk is to explore the vast potential that WebAssembly holds in revolutionizing computing on the web. We will discuss the advantages it offers over traditional programming languages and platforms, such as improved performance, enhanced security, and cross-platform compatibility. Through real-world use cases, we will demonstrate how WebAssembly can be applied to various domains, especially web development. We will also explore what else is coming to WebAssembly, take a glimpse of what the future of web engineering will be like and finally, we will discuss how to get hands-on with this technology, its communities, tools, resources and knowledge base.
5. Understanding WebAssembly 02 Definition, Architecture & Examples
6. WebAssembly, often abbreviated as Wasm, is a binary instruction format designed to be executed within web browsers but has expanded its reach to other computing contexts. WebAssembly serves as an efficient and portable compilation target for a wide range of programming languages, allowing high-performance code to be executed with near-native speed. Its purpose lies in bridging the gap between the web platform and lower-level programming languages, providing benefits such as faster load times, enhanced security, and improved performance. WebAssembly was initially developed as a collaborative effort by major browser vendors, including Mozilla, Google, Microsoft, and Apple. The project aimed to address the limitations of traditional web programming languages like JavaScript, introducing a new runtime that enables near-native performance for web applications. Its design allows code to be written in languages like C/C++, Rust, and others, compiled down to a compact binary format that can be efficiently executed within the browser environment What is WebAssembly?
7. WASM Architecture WebAssembly technical underpinnings further solidify its power and versatility. It utilizes a binary format, which allows for compact representation and efficient transmission over the web. Its assembly-like language enables low-level control and optimization, enabling developers to write code with greater efficiency. The execution process of WebAssembly involves the browser's runtime environment, where it is compiled on the fly and executed by a Just-In-Time (JIT) compiler. This architecture enables WebAssembly to take full advantage of the underlying hardware, resulting in exceptional performance and compatibility across different browsers and platforms.
8. This section is dedicated to showcasing real-world examples of what can be achieved with WebAssembly. From high-performance web applications and multimedia tools to 3D modeling and complex CAD software, WebAssembly has become a fundamental building block for a diverse range of applications. These examples illustrate the power and flexibility of WebAssembly, offering improved performance, cross-platform compatibility, and a seamless user experience. Built With WASM Fusion 360 Figma AutoCAD Web Google Earth Mattermost
9. Benefits Of WebAssembly 03 How WASM is Making the Web Better
10. Benefits of WASM WebAssembly offers several advantages that make it a compelling technology for a wide range of applications and industries. Here are some of the key advantages of WebAssembly: 1 Improved Performance 2 Security 3 Memory Safety 4 Native Like Experience 5 Interoperability 6 Open Standard 7 Browser Integration 8 Efficient Size
11. Use Case Of WebAssembly 04 How WASM is Making the Web Better
12. Web Use Cases HTML5 canvas and multimedia: With WebAssembly, you can create rich, interactive visualizations and multimedia experiences on the web. It opens up a whole world of possibilities! These are web applications that can work offline, load quickly, and provide a more app-like experience. WebAssembly allows developers to make these PWAs faster and more efficient. Real-time graphics and audio: WebAssembly brings the power of high-performance computing to the browser, making it possible to create graphically-rich and immersive gaming experiences. Seamless deployment across platforms: With WebAssembly, game developers can write their code once and have it run on different platforms without having to worry about compatibility issues. Web Development & Beyond Progress Web Application Game & Multimedia Apps
13. Web Use Cases Smart contracts & decentralized computing: WebAssembly can be used to build smart contracts and enable decentralized computing in blockchain networks, enhancing security, trust, and transparency. Enhancing security and trust: WebAssembly's sandboxed execution environment provides an additional layer of security for running decentralized applications, making them less prone to attacks. Blockchain and DApps
14. Future of WebAssembly & The Web 05 Coming Features, Potential Integrations
15. In Progress & Upcoming Features Threading: WebAssembly is working towards adding support for threading, which will enable concurrent execution and unlock even greater performance optimizations. Garbage Collection: Efforts are underway to incorporate garbage collection in WebAssembly, which will improve memory management and make it easier for developers to write memory-safe code. Multiple Memories: This proposal adds the ability to use multiple memories within a single Wasm module. In the current version of Wasm, an application can already create multiple memories, but only by splitting things up into multiple modules.
16. Potential Integrations Virtual Reality (VR) & Augmented Reality (AR): WebAssembly can enhance the performance and interactivity of VR and AR applications, allowing for more immersive experiences on the web. Machine Learning/AI: WebAssembly can allows developers to run optimized algorithms and deploy machine learning models directly in the browser, opening up possibilities for AI-powered web applications. Quantum Computing: As quantum computing continues to advance, WebAssembly could be used as a means to deploy and execute quantum algorithms directly in the browser, making this cutting-edge technology more accessible.
17. Ecosystem & Community 06 Getting Started, Resources, Communities
18. Tools and Frameworks Supporting WebAssembly Development: When it comes to developing with WebAssembly, there are several popular languages and compilers you can use. Some of these include: Rust, C/C++, AssemblyScript etc Additionally, there are various development tools and libraries available for building WebAssembly-based projects. These tools help with tasks such as: • Compiling: Tools like Emscripten, Binaryen, and wasm-pack enable the compilation of code to WebAssembly format. • Debugging: Tools like Wasmtime and WASI provide debugging capabilities for WebAssembly applications. • Runtime: Tools such as Wasmer allow you to run or deploy WebAssembly modules. • Integration: Libraries like WebAssembly JS API and wasm-bindgen simplify the interaction between JavaScript and WebAssembly.
19. Learning Resources and Documentation: If you're interested in getting started with WebAssembly, here are some recommended resources: • WebAssembly.org: The official website of the WebAssembly project offers comprehensive documentation and guides. • MDN Web Docs: Mozilla Developer Network provides a wealth of WebAssembly-related articles, tutorials, and reference material. • WebAssembly Weekly: A weekly newsletter that highlights the latest news, articles, projects, and resources related to WebAssembly. • Online Courses: Platforms like Coursera, Udemy, and edX offer courses on WebAssembly development, covering different languages and frameworks. • Community Forums: Online forums like the WebAssembly Community Group, WebAssembly GitHub Organization and Reddit's r/WebAssembly provide valuable insights and discussions. • Made With WebAssembly: A showcase of awesome production applications, side projects, and use cases made with WebAssembly (Wasm).
20. CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik Thank You Reach Me… Email: desmond.obisi.g20@gmail.com Twitter: @0X_anon_