JavaScript Engine and WebAssembly

Feb 17, 20167 likes2,730 views

This document discusses JavaScript engines and WebAssembly. It describes several popular JavaScript engines like SpiderMonkey, V8, and Chakra. It explains how SpiderMonkey evolved through different optimizations like TraceMonkey and IonMonkey. It also discusses emscripten which compiles C/C++ to JavaScript, and asm.js which aimed for native performance from browser apps. Finally, it introduces WebAssembly as a binary format that can be decoded much faster than JavaScript and avoids constraints of asm.js while maintaining the same functionality and security permissions.

JAVASCRIPT ENGINE
AND WEBASSEMBLY
2016.2.18
동국대학교 멀티미디어공학과 이창환
(yich@dongguk.edu)
http://www.slideshare.net/yich/web-assembly

Contents
• Source Code Executions
• JavaScript Engine on FireFox
• WebAssembly
2

Source Code Executions
• Interpret
• Compile
• Interpret + Compile
• JIT(Just-in-time)
• AOT(ahead-of-time compile)
• etc.
3

4
http://image.slidesharecdn.com/principlesofcompilerdesign-120121013909-phpapp01/95/principles-of-compiler-design-24-728.jpg?cb=1327110100

JavaScript Engine
• SpiderMonkey
• A JavaScript engine in Mozilla Gecko applications
• JavaScriptCore
• A JavaScript interpreter and JIT originally derived from KJS(Konqueror’s Engine).
• Used in the WebKit project
• V8
• A JavaScript engine used in Google Chrome, Node.js, and V8.NET.
• Chakra (JScript9)
• A JScript engine used in Internet Explorer.
• Chakra
• A JavaScript engine used in Microsoft Edge.
• Carakan
• A JavaScript engine developed by Opera Software ASA
• Tamarin
• An ActionScript and ECMAScript engine used in Adobe Flash.
• Nashorn
• A JavaScript engine used in Oracle Java Development Kit (JDK) since version 8.
• Rhino
• One of several JavaScript engines from Mozilla, using the Java platform.
5

SpiderMonkey
• From Netscape and Firefox
• History of SpiderMonkey
• TraceMonkey: first javascript JIT, Firefox 3.5
• JägerMonkey: whole-method JIT, FireFox 4
• IonMonkey: Optimization
• OdinMonkey: asm.js
6

emscripten
• Emscripten
• http://kripken.github.io/emscripten-site/
• C/C++ -> JavaScript
• LLVM based Transpiler
• asm.js
• http://asmjs.org
• From Mozilla
• native performance from browser apps.
• C/C++ -> javascript
• Not javascript
7
http://ejohn.org/blog/asmjs-javascript-compile-target/

Typed Array / SIMD.js
• TypedArray
• https://www.khronos.org/registry/typedarray/specs/latest/
• WebGL
• SIMD.js (Single Instruction Multiple Data)
• https://hacks.mozilla.org/2014/10/introducing-simd-js/
8

WebAssembly
• Why? ASM.JS is not enough?
• A binary format can be decoded A binary format can be decoded much
faster than JavaScript; 20x faster
• Avoiding the simultaneous Avoiding the simultaneous ASM.JS
constrains constrains: AOT-compatibility and redundant optimization
• High-Level Goals of WASM
• Binary format also considering mobile and IoT
• Incremental implementation Incremental implementation
• Same functionality as ASM.JS
• A polyfill library to translates WASM code into JavaScript
• Languages other than C/C++
• Compatabile with existing Web Platform
• Synchronous calls to and from JavaScript
• Same security policy Same security policy
• Access Same Web API accessible to JavaScript
9

References
• List of ECMAScript engines,
https://en.wikipedia.org/wiki/List_of_ECMAScript_engines
• SpiderMonkey JavaScript Engine,
http://new.whiteinternet.com/web-
development/spidermonkey
• WebAssembly
• http://webassembly.github.io/
• https://github.com/webassembly
• Web Assembly 기술 동향,
http://www.html5forum.or.kr/api/filedown.jsp?filename=07
_WebAssembly.pdf&folder=upload/board , HTML5Forum
웹 고속화 기술과 킬러웹앱 컨퍼런스
10

WebAssembly is a new binary format for the web that is fast, compact and provides near-native performance. It was developed by major browser vendors as a compilation target for programming languages like C/C++ to run on the web. WebAssembly has a small binary format, runs in any browser, and provides performance comparable to native code. It fills gaps in JavaScript for heavy computation tasks. The roadmap includes adding threads, shared memory and exception handling to WebAssembly.

An Introduction to WebAssemblyDaniel Budden

JS Fest 2018. Александр Скачков. WebAssembly vs JavaScriptJSFestUA

WebAssembly новая, но быстро развивающаяся технология, которая поддерживается всеми основными браузерами. Из доклада вы узнаете, что такое WebAssembly, для чего это нужно и чем это отличается от JavaScript. В докладе так же будут рассмотрены вопросы, когда лучше применять WebAssembly, а когда лучше остановится на JavaScript.

Web Assembly Big PictureYousif Shalaby

Web Assembly is a new web standard that defines a binary format for executable code in web pages. It is meant to enable executing code nearly as quickly as native machine code. Web Assembly allows other languages like C/C++ to be compiled to run in the browser. It has performance gains over JavaScript due to execution speed and smaller file sizes. Major browsers now support Web Assembly, allowing its use without plugins. Common use cases include games, media editing, peer-to-peer apps, and scientific/CAD applications.

Isomorphic JavaScript: #DevBeat Master ClassSpike Brehm

1) Isomorphic JavaScript allows code to run on both the client and server by being environment-agnostic or shimmed for different environments. 2) It improves performance by enabling faster initial page loads and improves SEO by allowing search engines to crawl single page apps. 3) Popular libraries like Underscore, Backbone, Handlebars, and React can be used isomorphically, and isomorphic applications exist on a spectrum from sharing small parts of code to entire applications.

WebAssemlby vs JavaScriptAlexandr Skachkov

DevDay 2018 - BlazorDenis Voituron

Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"Fwdays

Compiling To Web AssemblyIgalia

The document summarizes a talk on compiling to WebAssembly. It discusses compiling a sample recursive factorial function to WebAssembly, the core components of a WebAssembly module, testing WebAssembly output, and filling in gaps like closures, tail calls, exceptions, and garbage collection. It also addresses host integration issues and questions around compiling versus interpreting, how much JavaScript to use, and code generation tools.

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

This document discusses isomorphic JavaScript applications. Isomorphic apps allow developers to write code that runs both on the server and client using the same JavaScript. This avoids maintaining separate codebases and allows search engines to index content rendered on the server. The document outlines how isomorphic apps handle rendering, routing, data fetching and modules in a consistent way across server and client. It provides an example of building a simple isomorphic app and demonstrates core concepts like rendering, routing and data fetching.

Isomorphic JavaScript with NashornMaxime Najim

Isomorphic JavaScript applications can share the same code and run on both the front end and back end. It is also a spectrum containing applications that share minimal bits of validation logic with ones that share a bulk of the application code. Nashorn is a new JavaScript engine for Java that was released with Java 8. The Nashorn JavaScript engine makes isomorphic web apps on the JVM possible by allowing the exact same browser code to run on the server. This enables us to achieve the don’t-repeat-yourself (DRY) principle, by reducing repetition in a multitier architecture. This presentation covers the key concepts, rationale, and categories of Isomorphic JavaScript and how it makes your large applications maintainable.

Blazor v1.1Juan Luis Guerrero Minero

This document provides an overview of Web Assembly (WASM) and Blazor. It discusses how WASM allows code to run in browsers without plugins and is optimized for speed and size. Examples of WASM usage include games, video editors, and CAD tools. Blazor is introduced as a framework that runs .NET code in browsers using WASM. It follows an MVVM pattern and enables two-way data binding. The document compares Blazor to other technologies and provides resources for learning more.

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

This document discusses isomorphic JavaScript, which allows JavaScript code to run on both the client and server sides. It explains that isomorphic JavaScript is environment-agnostic and does not depend on browser- or server-specific properties. Popular libraries like Handlebars, Backbone, and React can be used isomorphically. Building isomorphic apps improves performance, enables search engine crawling of single-page apps, reduces code duplication, and increases flexibility. The document outlines how tools like Browserify and build systems like Grunt can be used to bundle code for both environments.

Isomorphic web applicationOliver N

The document discusses isomorphic web applications, which allow running JavaScript code on both the server and client for improved performance, SEO, and user experience. It provides an overview of traditional multi-page and single-page applications, then introduces isomorphic applications as a hybrid approach. Popular companies using isomorphic applications are listed. The document demonstrates how to build an isomorphic app using React for rendering and Browserify for bundling modules to run on both server and client.

Scripting with NodeJSBen Pearson

NodeJS allows JavaScript to be used outside of the browser for scripting purposes like automating tasks, building command line utilities, web scraping, and more. It uses the V8 JavaScript engine and the npm package manager, which makes it easy to find, install, and update third-party packages. Getting started with NodeJS involves cloning a GitHub repo containing the n utility, which helps manage Node versions, and then using n to install the latest stable version of Node and gain access to npm. Example scripts demonstrated include using Node to interact with YouTube via the command line, build command line apps using commander.js, daemonize processes, and integrate with databases like MongoDB.

Web assembly: a brief overviewPavlo Iatsiuk

WebAssembly (WASM) allows code written in languages like C/C++ to run as web apps. It defines a binary format for fast execution across browsers. WASM code runs in the same sandbox as JavaScript, with JavaScript loading and executing WASM. Many languages can compile to WASM, including C/C++, Rust, Java, Kotlin, Go, and .NET languages. Frameworks like Emscripten and Rustwasm enable low-level WASM, while Blazor provides a complete solution for typical web app development.

WebAssembly FundamentalsKnoldus Inc.

WebAssembly (Wasm) is a binary instruction format for a stack-based virtual machine that allows deployment of web and server applications. Wasm is not a transpiling target for JavaScript or a replacement for JS, but rather a compilation target for programming languages to enable deployment on the web. The key aspects of Wasm include its stack-based architecture, core data types like integers and floats, control flow constructs, and use of linear memory. WABT is a toolkit that helps manipulate Wasm files, allowing generation of text format (wat) from binary (wasm) and vice versa. Building a Wasm app involves understanding its architecture and using tools like WABT.

Node.js with ExpressGergely Németh

DotNet MVC and webpack + Babel + reactChen-Tien Tsai

Introduction to ASP.NET CoreMiroslav Popovic

With .NET Core, Microsoft has started a new era for developing multi-platform software. ASP.NET Core web framework is written from scratch, works on all major platforms including Window, Linux, MacOS - and even on RaspberryPI, and brings all-around extraordinary performance. After the short introduction, we'll look into what's new in versions 2.x and through demos analyze the basic templates for web and API applications, connecting with client-side frameworks as well as using the console and IDEs.

TypeScript Jump StartMostafa

Web development using nodejsVaisakh Babu

This document provides an overview of web development using Node.js. It discusses what Node.js is, its event-driven and non-blocking I/O model. It also covers internal structures like the event loop and callbacks, issues like callback hell and ways to fix it. The document introduces Express as a web framework for Node.js and lists important related NPM libraries. It provides references for further reading.

Webpack and Web Performance OptimizationChen-Tien Tsai

Webpack and Web Performance Optimization discusses using Webpack and other tools to optimize web performance. It introduces Webpack as a module bundler and discusses its features like code splitting and optimizations. It covers setting up loaders and the Webpack build flow. The document also discusses various web optimization techniques including image optimization, reducing requests, minifying assets, critical rendering path, and caching. It provides examples of optimizing sites for mobile and comparisons of optimization approaches with different user and business impacts. The document discusses using tools like Gulp and integrating with Webpack for tasks like Sass compilation and testing. It also covers modularizing JavaScript with React and using Babel to transpile ES6 to ES5. Finally, it demonstrates collabor

Introduction to mean stackPraveen Gubbala

The document provides an overview of the MEAN stack, which is a collection of JavaScript technologies used to develop web applications. It consists of MongoDB (a no-SQL database), ExpressJS (a web application framework), AngularJS (a front-end JavaScript framework), and NodeJS (a runtime environment for JavaScript). Each technology is described briefly, outlining its purpose and benefits like performance, scalability, and the use of a single programming language throughout the application stack.

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

The document discusses the history and evolution of JavaScript, TypeScript, and related technologies. It describes how JavaScript originated as LiveScript in 1995 and was standardized as ECMAScript. It outlines the development of JavaScript engines like V8 and environments like Node.js that expanded JavaScript beyond browsers. Finally, it introduces TypeScript as a typed superset of JavaScript that transpiles to JavaScript and allows development of client-side and server-side apps using JavaScript and Node.js.

Mean Stack - An OverviewNaveen Pete

The document provides an overview of the MEAN stack, which uses JavaScript for full-stack development. It discusses the evolution of web development from separate front-end and back-end work to full-stack JavaScript with Node.js. The MEAN stack combines MongoDB for the database, Express for the web framework, Angular for the front-end, and Node.js as the runtime environment. Each component is introduced, with Node.js using a single-threaded and asynchronous model, Express providing features like routing and middleware, Angular using templates and two-way data binding, and MongoDB as a flexible document database.

BlazorRafał Hryniewski

The document discusses Blazor, a new web framework that uses C# and .NET to build client-side web UI using WebAssembly. It begins with background on JavaScript and WebAssembly. It then covers the key aspects of Blazor like components, routing, dependency injection. It addresses concerns about older browser support and downloading the .NET runtime. Overall, the document provides an introduction to Blazor highlighting its benefits and community projects while also addressing some potential concerns.

CloudFoundry@homeYohei Sasaki

This document discusses running CloudFoundry locally on a home server. It describes setting up a lightweight CloudFoundry environment tuned for an individual's needs, including support for Node.js, MongoDB, and mounting storage using CIFS/NFS. The goal is to gain the benefits of CloudFoundry while running everything locally on a personal server that is repaired easily using Chef deployment. A demo web UI is provided accessing text analysis applications deployed to this local CloudFoundry instance.

Java script nirvana in netbeans [con5679]Ryan Cuprak

This document discusses using NetBeans as an IDE for JavaScript development. It provides an overview of NetBeans' features for JavaScript including syntax highlighting, code completion, debugging, support for frameworks like Angular and Node.js, and mobile development with Apache Cordova. It also demonstrates how to set up and configure NetBeans for common JavaScript tasks like adding libraries, using build tools like Grunt and Gulp, and setting up unit testing with Karma and Jasmine.

JHipsterYuen-Kuei Hsueh

More Related Content

What's hot (20)

Compiling To Web AssemblyIgalia

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

Isomorphic JavaScript with NashornMaxime Najim

Blazor v1.1Juan Luis Guerrero Minero

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

Isomorphic web applicationOliver N

Scripting with NodeJSBen Pearson

Web assembly: a brief overviewPavlo Iatsiuk

WebAssembly FundamentalsKnoldus Inc.

Node.js with ExpressGergely Németh

DotNet MVC and webpack + Babel + reactChen-Tien Tsai

Introduction to ASP.NET CoreMiroslav Popovic

TypeScript Jump StartMostafa

Web development using nodejsVaisakh Babu

Webpack and Web Performance OptimizationChen-Tien Tsai

Introduction to mean stackPraveen Gubbala

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

Mean Stack - An OverviewNaveen Pete

BlazorRafał Hryniewski

CloudFoundry@homeYohei Sasaki

Compiling To Web AssemblyIgalia

Building Isomorphic JavaScript Apps - NDC 2015Eirik Vullum

Isomorphic JavaScript with NashornMaxime Najim

Blazor v1.1Juan Luis Guerrero Minero

In Pursuit of the Holy Grail: Building Isomorphic JavaScript AppsSpike Brehm

Isomorphic web applicationOliver N

Scripting with NodeJSBen Pearson

Web assembly: a brief overviewPavlo Iatsiuk

WebAssembly FundamentalsKnoldus Inc.

Node.js with ExpressGergely Németh

DotNet MVC and webpack + Babel + reactChen-Tien Tsai

Introduction to ASP.NET CoreMiroslav Popovic

TypeScript Jump StartMostafa

Web development using nodejsVaisakh Babu

Webpack and Web Performance OptimizationChen-Tien Tsai

Introduction to mean stackPraveen Gubbala

The Saga of JavaScript and TypeScript: Part 1Haci Murat Yaman

Mean Stack - An OverviewNaveen Pete

BlazorRafał Hryniewski

CloudFoundry@homeYohei Sasaki

Similar to JavaScript Engine and WebAssembly (20)

Java script nirvana in netbeans [con5679]Ryan Cuprak

JHipsterYuen-Kuei Hsueh

End-to-end W3C APIs - tpac 2012Alexandre Morgaut

- Web Worker context compared to SSJS context - Mixte Synchronous / Asynchronous APIs - Making Existing Client-side JS APIs recommendations adaptable to the server context - Defining W3C recommendation for Server-side JavaScript APIs? - Remote debugging for Remote (Server) Workers - Potential common package/module format support (CommonJS, AMD, ECMAScript 6) - DOM Events, ProgressEvent, EventSource, Server Events (EventEmitter?), & Client Events - Feedback on previous work at CommonJS and from some SSJS implementations - Feedback on our experiences in the Wakanda implementation - start the activity of the community group

JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.

The best code is the one you never need to write. Using code generation and automated builds, you can minimize the risk of human error when developing software, but how do you maintain control over code when large parts of it are handed over to a machine? In this tutorial, you will learn how to use open source software to create and control code automation. You will see how you can generate a completely object-oriented domain model by automatically analyzing your database schemas. Every aspect of the process is transparent and configurable, giving you, as a developer, 100 percent control of the generated code. This will not only increase your productivity but also help you build safer, more maintainable Java applications and is a perfect solution for Microservices.

How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss

Blazor.pptxssuserb1d1a2

Peru JUG Micronaut & GraalVMDomingo Suarez Torres

Micronaut is a framework for building microservices that uses compile-time dependency injection and supports reactive programming and cloud native features. It can be used with GraalVM, an open source project that compiles Java applications ahead-of-time to native images for faster startup times and reduced memory usage. Together, Micronaut and GraalVM provide a lightweight and high-performance solution for building microservices that is well-suited for cloud environments.

DevNetCreate Workshop - build a react app - React crash courseCisco DevNet

How to generate a REST CXF3 application from Swagger ApacheConEU 2016johannes_fiala

This presentation shows you how you can generate server stubs from a Swagger contract, configure the jaxrs-cxf language to enable Spring-configuration, Spring-Boot integration + tests, automatic BeanValidation on the server side, generate client code for java and javascript, use/integrate swagger-ui, use swagger2markup use custom Swagger-Codegen templates + how you can create your own language implementation.

WebAssembly overview. KievJS meetupAlexandr Skachkov

WebAssembly is a new low-level compilation target that provides better performance than JavaScript without compromising on portability and security. It runs at native speed by taking advantage of common hardware capabilities available on a wide range of platforms. WebAssembly code is portable and works consistently across multiple browsers without modifications. It also inherits JavaScript's security model and allows safe sandboxing of code.

JavaScript in Universal Windows Platform appsTimmy Kokke

Web開発の技術選び、好き嫌いでやってませんか〜技術選びで注目すべきポイントとは〜Yuki Okada

This document discusses various web development technologies and their usage. It covers popular frameworks for languages like Java, Ruby, PHP, and JavaScript. It also discusses SQL injection prevention and technologies used by companies like Facebook, Twitter, and ChatWork including their migrations from some technologies to others. The document provides links to external articles for further reading.

Rapid development with RailsYi-Ting Cheng

This document discusses rapid development using Ruby on Rails. It covers how Rails enables rapid development through conventions, community best practices, and continuous innovation. It also provides tips for scaling Rails applications, such as client-side performance tuning, database optimization, version control, automation, and modern architectural patterns like Arel, Rack, and Bundler. The overall message is that Rails can help deliver projects quickly while maintaining quality through its principles of DRY, agile development, and an active community of developers.

Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA...Samsung Open Source Group

Android lessons you won't learn in schoolMichael Galpin

This document discusses several lessons about Android development that are not typically covered in school. It covers architectural changes in Android over time, security best practices, techniques for logging user activity and crash reports, strategies for building hybrid mobile-web applications, considerations for creating mobile SDKs, and approaches for testing Android apps on multiple device configurations.

Seven Versions of One Web ApplicationYakov Fain

Developing High Performance Web Apps - CodeMash 2011Timothy Fisher

This document provides an overview of techniques for developing high performance web applications. It discusses why front-end performance matters, and outlines best practices for optimizing page load times, using responsive interfaces, loading and executing JavaScript efficiently, and accessing data. The presentation recommends tools for monitoring and improving performance, such as Firebug, Page Speed, and YSlow.

External JavaScript Widget Development Best Practices (updated) (v.1.1) Volkan Özçelik

The document discusses best practices for developing JavaScript widgets. It covers challenges like versioning, cross-domain restrictions, cookies, security, and performance. Versioning can be handled through URL parameters or initializing with a version number. Cross-domain issues can be addressed using techniques like CORS, postMessage, or JSONP. Security requires sanitizing inputs, whitelisting domains, and handling risks like XSS and CSRF. Performance involves minimizing payload size and network requests.

Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5David Voyles

Introduction to Micronaut - JBCNConf 2019graemerocher

Java script nirvana in netbeans [con5679]Ryan Cuprak

JHipsterYuen-Kuei Hsueh

End-to-end W3C APIs - tpac 2012Alexandre Morgaut

JavaOne2016 - How to Generate Customized Java 8 Code from Your Database [TUT4...Speedment, Inc.

How to JavaOne 2016 - Generate Customized Java 8 Code from Your Database [TUT...Malin Weiss

Blazor.pptxssuserb1d1a2

Peru JUG Micronaut & GraalVMDomingo Suarez Torres

DevNetCreate Workshop - build a react app - React crash courseCisco DevNet

How to generate a REST CXF3 application from Swagger ApacheConEU 2016johannes_fiala

WebAssembly overview. KievJS meetupAlexandr Skachkov

JavaScript in Universal Windows Platform appsTimmy Kokke

Web開発の技術選び、好き嫌いでやってませんか〜技術選びで注目すべきポイントとは〜Yuki Okada

Rapid development with RailsYi-Ting Cheng

Stealing Chromium: Embedding HTML5 with the Servo Browser Engine (LinuxCon NA...Samsung Open Source Group

Android lessons you won't learn in schoolMichael Galpin

Seven Versions of One Web ApplicationYakov Fain

Developing High Performance Web Apps - CodeMash 2011Timothy Fisher

External JavaScript Widget Development Best Practices (updated) (v.1.1) Volkan Özçelik

Getting started with Emscripten – Transpiling C / C++ to JavaScript / HTML5David Voyles

Introduction to Micronaut - JBCNConf 2019graemerocher

More from Changhwan Yi (15)

Web sessions in Developer ConferencesChanghwan Yi

The document summarizes web-related sessions from several developer conferences in 2016, including Microsoft Build, Google I/O, and Apple WWDC. It also discusses the CSS Houdini project, which aims to give JavaScript more control over CSS styling similar to how it can control HTML. The CSS Houdini project includes several proposed APIs and specifications related to composited scrolling, animation, properties, layout, and more. The document provides code examples and links to learn more about Houdini and demo its capabilities.

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈Changhwan Yi

Html5 게임 기술의 개요Changhwan Yi

동국대 앱창작터 5일차:Cocos2d-X 확장기능Changhwan Yi

동국대 앱창작터 4일차:Cocos2d-X 고급기능Changhwan Yi

동국대 앱창작터 2일차:Cocos2d-X 기본기능Changhwan Yi

동국대 앱창작터 1일차:Cocos2d-X 소개, 환경설정, 주요개념Changhwan Yi

W3C HTML5 KIG-The near future of the web platformChanghwan Yi

The document discusses the near future of the web platform for game development. It outlines improvements to mobile browsers like Chrome for Android and Firefox for Android that will enhance performance. It also discusses increasing support for WebGL across browsers. Other emerging technologies mentioned that could impact game development include Chrome splitting from WebKit, rumors of a Chromium-powered Android web view, WebRTC for real-time networking, the Web Audio API, and ambient light reading. The document advocates for the web as a powerful gaming platform.

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

The document discusses building HTML5 games and provides resources on graphics libraries, physics engines, handling touch input, and gaming frameworks. It recommends libraries like EaselJS and frameworks like MelonJS and ImpactJS for HTML5 game development. Tutorials are presented on porting games to HTML5 using these tools as well as considerations for building games targeting multiple platforms like Windows 8.

차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi

WoO 2012-Web 서비스 기술Changhwan Yi

W3C HTML5 KIG-Typed ArraysChanghwan Yi

This document discusses typed arrays, which provide an efficient way to handle binary data in the browser. Typed arrays allow passing binary data directly to APIs like WebGL through a typed view into an ArrayBuffer. This avoids inefficiencies of passing data through regular JavaScript arrays. The document covers creating and using typed array views, the DataView for heterogeneous data, browser and third-party APIs that utilize typed arrays, the history and design considerations behind typed arrays.

하이브리드 앱(Hybrid App)Changhwan Yi

W3C HTML5 KIG-How to write low garbage real-time javascriptChanghwan Yi

This document summarizes techniques for writing low-garbage real-time JavaScript code. It discusses how to avoid object allocation using syntax like {} and [] instead of the new keyword. It also recommends reusing objects by wiping their properties instead of creating new ones. Functions should be created at startup instead of during runtime. Vector objects should be returned as individual values instead of vector objects. While avoiding garbage entirely is difficult, these techniques can help craft responsive real-time JavaScript with minimal garbage collector overhead.

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

This document discusses HTML5 game performance and compares the graphics capabilities of different platforms. It finds that Canvas 2D is faster than before but WebGL is still much faster for rendering 2D sprites. WebGL provides 3D graphics using OpenGL ES and is accessed through the HTML5 Canvas element. The document tests performance by drawing many blue squares and measuring framerates, finding that WebGL can render significantly more sprites before slowing down.

Web sessions in Developer ConferencesChanghwan Yi

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈Changhwan Yi

Html5 게임 기술의 개요Changhwan Yi

동국대 앱창작터 5일차:Cocos2d-X 확장기능Changhwan Yi

동국대 앱창작터 4일차:Cocos2d-X 고급기능Changhwan Yi

동국대 앱창작터 2일차:Cocos2d-X 기본기능Changhwan Yi

동국대 앱창작터 1일차:Cocos2d-X 소개, 환경설정, 주요개념Changhwan Yi

W3C HTML5 KIG-The near future of the web platformChanghwan Yi

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

차세대 웹비즈니스를 위한 "HTML5"Changhwan Yi

WoO 2012-Web 서비스 기술Changhwan Yi

W3C HTML5 KIG-Typed ArraysChanghwan Yi

하이브리드 앱(Hybrid App)Changhwan Yi

W3C HTML5 KIG-How to write low garbage real-time javascriptChanghwan Yi

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

Recently uploaded (20)

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

Join this UiPath Community Berlin meetup to explore the Orchestrator API, Swagger interface, and the Test Manager API. Learn how to leverage these tools to streamline automation, enhance testing, and integrate more efficiently with UiPath. Perfect for developers, testers, and automation enthusiasts! 📕 Agenda Welcome & Introductions Orchestrator API Overview Exploring the Swagger Interface Test Manager API Highlights Streamlining Automation & Testing with APIs (Demo) Q&A and Open Discussion Perfect for developers, testers, and automation enthusiasts! 👉 Join our UiPath Community Berlin chapter: https://community.uipath.com/berlin/ This session streamed live on April 29, 2025, 18:00 CET. Check out all our upcoming UiPath Community sessions at https://community.uipath.com/events/.

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

How analogue intelligence complements AIPaul Rowe

Artificial Intelligence is providing benefits in many areas of work within the heritage sector, from image analysis, to ideas generation, and new research tools. However, it is more critical than ever for people, with analogue intelligence, to ensure the integrity and ethical use of AI. Including real people can improve the use of AI by identifying potential biases, cross-checking results, refining workflows, and providing contextual relevance to AI-driven results. News about the impact of AI often paints a rosy picture. In practice, there are many potential pitfalls. This presentation discusses these issues and looks at the role of analogue intelligence and analogue interfaces in providing the best results to our audiences. How do we deal with factually incorrect results? How do we get content generated that better reflects the diversity of our communities? What roles are there for physical, in-person experiences in the digital world?

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Cyber Awareness overview for 2025 month of securityriccardosl1

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

Spark is a powerhouse for large datasets, but when it comes to smaller data workloads, its overhead can sometimes slow things down. What if you could achieve high performance and efficiency without the need for Spark? At S&P Global Commodity Insights, having a complete view of global energy and commodities markets enables customers to make data-driven decisions with confidence and create long-term, sustainable value. 🌍 Explore delta-rs + CDC and how these open-source innovations power lightweight, high-performance data applications beyond Spark! 🚀

tecnologias de las primeras civilizaciones.pdffjgm517

Build Your Own Copilot & Agents For DevsBrian McKeiver

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

Book industry standards are evolving rapidly. In the first part of this session, we’ll share an overview of key developments from 2024 and the early months of 2025. Then, BookNet’s resident standards expert, Tom Richardson, and CEO, Lauren Stewart, have a forward-looking conversation about what’s next. Link to recording, transcript, and accompanying resource: https://bnctechforum.ca/sessions/standardsgoals-for-2025-standards-certification-roundup/ Presented by BookNet Canada on May 6, 2025 with support from the Department of Canadian Heritage.

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

I started my online journey with several hosting services before stumbling upon Ai EngineHost. At first, the idea of paying one fee and getting lifetime access seemed too good to pass up. The platform is built on reliable US-based servers, ensuring your projects run at high speeds and remain safe. Let me take you step by step through its benefits and features as I explain why this hosting solution is a perfect fit for digital entrepreneurs.

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Procurement Insights Cost To Value Guide.pptxJon Hansen

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

Explore the benefits and features of advanced logistics management software for businesses in Riyadh. This guide delves into the latest technologies, from real-time tracking and route optimization to warehouse management and inventory control, helping businesses streamline their logistics operations and reduce costs. Learn how implementing the right software solution can enhance efficiency, improve customer satisfaction, and provide a competitive edge in the growing logistics sector of Riyadh.

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPathCommunity

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Mobile App Development Company in Saudi ArabiaSteve Jonas

AI and Data Privacy in 2025: Global TrendsInData Labs

How analogue intelligence complements AIPaul Rowe

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Cyber Awareness overview for 2025 month of securityriccardosl1

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Rusty Waters: Elevating Lakehouses Beyond Sparkcarlyakerly1

tecnologias de las primeras civilizaciones.pdffjgm517

Build Your Own Copilot & Agents For DevsBrian McKeiver

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

SAP Modernization: Maximizing the Value of Your SAP S/4HANA Migration.pdfPrecisely

How Can I use the AI Hype in my Business Context?Daniel Lehner

#StandardsGoals for 2025: Standards & certification roundup - Tech Forum 2025BookNet Canada

AI EngineHost Review: Revolutionary USA Datacenter-Based Hosting with NVIDIA ...SOFTTECHHUB

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

Procurement Insights Cost To Value Guide.pptxJon Hansen

Complete Guide to Advanced Logistics Management Software in Riyadh.pdfSoftware Company

JavaScript Engine and WebAssembly

1. JAVASCRIPT ENGINE AND WEBASSEMBLY 2016.2.18 동국대학교 멀티미디어공학과 이창환 ([email protected]) http://www.slideshare.net/yich/web-assembly

2. Contents • Source Code Executions • JavaScript Engine on FireFox • WebAssembly 2

3. Source Code Executions • Interpret • Compile • Interpret + Compile • JIT(Just-in-time) • AOT(ahead-of-time compile) • etc. 3

4. 4 http://image.slidesharecdn.com/principlesofcompilerdesign-120121013909-phpapp01/95/principles-of-compiler-design-24-728.jpg?cb=1327110100

5. JavaScript Engine • SpiderMonkey • A JavaScript engine in Mozilla Gecko applications • JavaScriptCore • A JavaScript interpreter and JIT originally derived from KJS(Konqueror’s Engine). • Used in the WebKit project • V8 • A JavaScript engine used in Google Chrome, Node.js, and V8.NET. • Chakra (JScript9) • A JScript engine used in Internet Explorer. • Chakra • A JavaScript engine used in Microsoft Edge. • Carakan • A JavaScript engine developed by Opera Software ASA • Tamarin • An ActionScript and ECMAScript engine used in Adobe Flash. • Nashorn • A JavaScript engine used in Oracle Java Development Kit (JDK) since version 8. • Rhino • One of several JavaScript engines from Mozilla, using the Java platform. 5

6. SpiderMonkey • From Netscape and Firefox • History of SpiderMonkey • TraceMonkey: first javascript JIT, Firefox 3.5 • JägerMonkey: whole-method JIT, FireFox 4 • IonMonkey: Optimization • OdinMonkey: asm.js 6

7. emscripten • Emscripten • http://kripken.github.io/emscripten-site/ • C/C++ -> JavaScript • LLVM based Transpiler • asm.js • http://asmjs.org • From Mozilla • native performance from browser apps. • C/C++ -> javascript • Not javascript 7 http://ejohn.org/blog/asmjs-javascript-compile-target/

8. Typed Array / SIMD.js • TypedArray • https://www.khronos.org/registry/typedarray/specs/latest/ • WebGL • SIMD.js (Single Instruction Multiple Data) • https://hacks.mozilla.org/2014/10/introducing-simd-js/ 8

9. WebAssembly • Why? ASM.JS is not enough? • A binary format can be decoded A binary format can be decoded much faster than JavaScript; 20x faster • Avoiding the simultaneous Avoiding the simultaneous ASM.JS constrains constrains: AOT-compatibility and redundant optimization • High-Level Goals of WASM • Binary format also considering mobile and IoT • Incremental implementation Incremental implementation • Same functionality as ASM.JS • A polyfill library to translates WASM code into JavaScript • Languages other than C/C++ • Compatabile with existing Web Platform • Synchronous calls to and from JavaScript • Same security policy Same security policy • Access Same Web API accessible to JavaScript 9

10. References • List of ECMAScript engines, https://en.wikipedia.org/wiki/List_of_ECMAScript_engines • SpiderMonkey JavaScript Engine, http://new.whiteinternet.com/web- development/spidermonkey • WebAssembly • http://webassembly.github.io/ • https://github.com/webassembly • Web Assembly 기술 동향, http://www.html5forum.or.kr/api/filedown.jsp?filename=07 _WebAssembly.pdf&folder=upload/board , HTML5Forum 웹 고속화 기술과 킬러웹앱 컨퍼런스 10

JavaScript Engine and WebAssembly

Recommended

More Related Content

What's hot (20)

Similar to JavaScript Engine and WebAssembly (20)

More from Changhwan Yi (15)

Recently uploaded (20)

JavaScript Engine and WebAssembly