SlideShare une entreprise Scribd logo
1  sur  26
Télécharger pour lire hors ligne
Introduction à
WebAssembly
9 novembre 2017
Définition :
WebAssembly, ou wasm, est
un langage de programmation
binaire de bas niveau pour le
développement d’applications
dans les navigateurs Web.
https://fr.wikipedia.org/wiki/WebAssembly
Standard by design
https://www.w3.org/community/webassembly/
Apple
Google
Microsoft
Mozilla
Opera Software
Safari
Chrome
Edge
Firefox
Opera
“Rendre le Web
aussi performant
que le Natif”
Avantages
● Portabilité cross-browsers
● Poids des fichiers réduit
● Temps de chargement réduit
● Lisibilité pour un humain
● Facilement débuggable
● Sécurité en mode sandbox
● Compatibilité avec l’existant
Use cases
● Applications de traitement (image, son, vidéo, fichiers, données)
● Jeux vidéos : casuals (fast boot), AAA (heavy assets), portals / MMO
● Peer-to-peer
● Streaming
● Editeurs (online IDE) et interpréteurs (JSFiddle- & code-school- like)
● Clients lourds web-ifiés
● Logiciels de CAO (médical, architecture, industrie, transports & flux, etc.)
● Applications hybrides (mobiles)
● Opérations de calcul distribué
● Server-side applications (le futur des Services Workers ?)
http://webassembly.org/docs/faq/
Définition (bis) :
WebAssembly, ou wasm, est
un langage de programmation
binaire de bas niveau pour le
développement d’applications
dans les navigateurs Web.
https://fr.wikipedia.org/wiki/WebAssembly
“asm.js est mort !
longue vie à wasm !”
https://brendaneich.com/2015/06/from-asm-js-to-webassembly/
asm.js by Mozilla - Firefox, depuis 2013
asm.js is an intermediate programming language designed to allow computer software
written in languages such as C to be run as web applications while maintaining performance
characteristics considerably better than standard JavaScript, the typical language used for
such applications.
asm.js consists of a strict subset of JavaScript, into which code written in statically-typed
languages with manual memory management (such as C) is translated by a source-to-source
compiler such as Emscripten (based on LLVM). Performance is improved by limiting language
features to those amenable to ahead-of-time optimization and other performance
improvements.
http://asmjs.org/faq.html
Exemple de code
asm.js
http://asmjs.org/spec/latest/
NaCl & PNaCl by Google - Chrome, dès 2011
Native Client is a sandbox for running compiled C and C++ code in the browser
efficiently and securely, independent of the user’s operating system.
Portable Native Client extends that technology with architecture independence, letting
developers compile their code once to run in any website and on any architecture
with ahead-of-time (AOT) translation.
In short, Native Client brings the performance and low-level control of native code to modern
web browsers, without sacrificing the security and portability of the web. Watch the video
below for an overview of Native Client, including its goals, how it works, and how Portable
Native Client lets developers run native compiled code on the web.
https://developer.chrome.com/native-client
FTL JIT by Apple - Safari, depuis 2014
Le machin d’Apple, qui donne l’impression que les gars n’ont jamais vraiment cru à la
tendance / au concept.
https://trac.webkit.org/wiki/FTLJIT
AOT vs. JIT
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
cf. “Dans les entrailles de JavaScript”
by FRO
Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation
https://stackoverflow.com/questions/41450226/angular-2-just-in-time-jit-vs-ahead-of-time-aot-compilation
WebAssembly : le bytecode du Web
https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
From: C / C++ / Rust / Python
To: JS + WASP + WAST + HTML
Glossaire
● Emscripten : un compilateur open source développé par Mozilla permettant de
compiler du bitcode LLVM en Javascript pour pouvoir l'exécuter dans n'importe
quel navigateur web. Le JS généré peut être du asm.js ou du wasm.
● LLVM : Low Level Virtual Machine. Architecture de compilateur. Equivalent de la
JVM pour Java. Son but est de transformer du code écrit dans un langage typé
dans un autre langage de plus haut niveau (Intermediate Representation).
● Clang : compilateur & optimiseur de code C / C++. Il s’agit d’une alternative
réputée plus rapide (lancement et exécution) et efficace (taille de l’output obtenu)
que gcc / g++.
● wast : abréviation pour WebAssembly Text Format. Format textuel de wasm.
http://webassembly.org/roadmap/
https://wasdk.github.io/WasmFiddle/
code.c -> code.wast
https://wasdk.github.io/WasmFiddle/
code.c -> code.wasm
Next steps
● Unifier / centraliser les bases de code et de documentation
● Basculer le niveau de spec de “expérimental” à “stable”
● Établir un nouveau véhicule de gouvernance au sein du W3C
● Améliorer l’outillage de développement (IDE, automation- & debug- tools)
● Enrichir la norme
● Augmenter le nombre de langages supportés (C / C++, Rust, Go, Python, etc.)
● Pouvoir appeler WebAssembly directement depuis HTML
http://webassembly.org/roadmap/
Faut-il dès à présent investir sur
WebAssembly ?
I usually finish with a joke:
« Always bet on JS ».
•••
Brendan Eich
Articles :
● [TL;DR] WebAssembly: A New Hope – by PSPDFKit [lien]
● [TL;DR] Getting Started With WebAssembly – [lien]
● WebAssembly concepts – on Mozilla MDN [lien]
● WebAssembly: An initial view – by JC Bayler, Intel [lien]
● A cartoon intro to WebAssembly – by Lin Clark, Mozilla [lien]
Code & outils :
● emscripten – convertisseur C / C++ en asm.js [lien]
● WasmFiddle – éditeur en ligne de code wasm [lien]
● MASSIVE - the web computation benchmark – benchmark [lien]
● JS vs. WASM – benchmark [lien]
Démos & vidéos :
● Tanks! Demo – démo officielle & cross-browser d’un jeu vidéo [lien]
● AngryBots – jeu 3D développé par Microsoft [lien]
● Compiling for the Web with WebAssembly – Google I/O '17 [lien]
Questions ?
Merci :-)

Contenu connexe

Tendances

MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?VMware Tanzu Korea
 
[오픈소스컨설팅] jira service desk 201908
[오픈소스컨설팅] jira service desk 201908[오픈소스컨설팅] jira service desk 201908
[오픈소스컨설팅] jira service desk 201908Open Source Consulting
 
RPC에서 REST까지 간단한 개념소개
RPC에서 REST까지 간단한 개념소개RPC에서 REST까지 간단한 개념소개
RPC에서 REST까지 간단한 개념소개Wonchang Song
 
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020AWSKRUG - AWS한국사용자모임
 
클라우드 비용 최적화 가이드
클라우드 비용 최적화 가이드클라우드 비용 최적화 가이드
클라우드 비용 최적화 가이드OpsNow
 
Web assembly: a brief overview
Web assembly: a brief overviewWeb assembly: a brief overview
Web assembly: a brief overviewPavlo Iatsiuk
 
NGSIv2 Overview for Developers That Already Know NGSIv1
NGSIv2 Overview for Developers That Already Know NGSIv1NGSIv2 Overview for Developers That Already Know NGSIv1
NGSIv2 Overview for Developers That Already Know NGSIv1Fermin Galan
 
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...Amazon Web Services Korea
 
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례Docker + Kubernetes를 이용한 빌드 서버 가상화 사례
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례NAVER LABS
 
Mesure de pertinence par le Cosinus de Salton
Mesure de pertinence par le Cosinus de SaltonMesure de pertinence par le Cosinus de Salton
Mesure de pertinence par le Cosinus de SaltonLaurent Hermann
 
Cloud native application 입문
Cloud native application 입문Cloud native application 입문
Cloud native application 입문Seong-Bok Lee
 
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저Amazon Web Services Korea
 
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...Amazon Web Services Korea
 
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017Amazon Web Services Korea
 
[AWS Builders 온라인 시리즈] AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트
[AWS Builders 온라인 시리즈]  AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트[AWS Builders 온라인 시리즈]  AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트
[AWS Builders 온라인 시리즈] AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트Amazon Web Services Korea
 
Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)Tony Tam
 
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018Amazon Web Services Korea
 

Tendances (20)

MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
MSA 전략 1: 마이크로서비스, 어떻게 디자인 할 것인가?
 
[오픈소스컨설팅] jira service desk 201908
[오픈소스컨설팅] jira service desk 201908[오픈소스컨설팅] jira service desk 201908
[오픈소스컨설팅] jira service desk 201908
 
Swagger
SwaggerSwagger
Swagger
 
RPC에서 REST까지 간단한 개념소개
RPC에서 REST까지 간단한 개념소개RPC에서 REST까지 간단한 개념소개
RPC에서 REST까지 간단한 개념소개
 
JHipster on AWS
JHipster on AWSJHipster on AWS
JHipster on AWS
 
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020
온라인 주문 서비스를 서버리스 아키텍쳐로 구축하기 - 김태우(Classmethod) :: AWS Community Day Online 2020
 
클라우드 비용 최적화 가이드
클라우드 비용 최적화 가이드클라우드 비용 최적화 가이드
클라우드 비용 최적화 가이드
 
Web assembly: a brief overview
Web assembly: a brief overviewWeb assembly: a brief overview
Web assembly: a brief overview
 
NGSIv2 Overview for Developers That Already Know NGSIv1
NGSIv2 Overview for Developers That Already Know NGSIv1NGSIv2 Overview for Developers That Already Know NGSIv1
NGSIv2 Overview for Developers That Already Know NGSIv1
 
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...
AWS 기반 클라우드 아키텍처 모범사례 - 삼성전자 개발자 포털/개발자 워크스페이스 - 정영준 솔루션즈 아키텍트, AWS / 유현성 수석,...
 
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례Docker + Kubernetes를 이용한 빌드 서버 가상화 사례
Docker + Kubernetes를 이용한 빌드 서버 가상화 사례
 
Mesure de pertinence par le Cosinus de Salton
Mesure de pertinence par le Cosinus de SaltonMesure de pertinence par le Cosinus de Salton
Mesure de pertinence par le Cosinus de Salton
 
Cloud native application 입문
Cloud native application 입문Cloud native application 입문
Cloud native application 입문
 
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
AWS 클라우드 비용 최적화를 위한 TIP - 임성은 AWS 매니저
 
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...
금융권 최신 AWS 도입 사례 총정리 – 신한 제주 은행, KB손해보험 사례를 중심으로 - 지성국 사업 개발 담당 이사, AWS / 정을용...
 
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017
전자 상거래 기업을 위한 클라우드 성공 전략 - AWS Summit Seoul 2017
 
[AWS Builders 온라인 시리즈] AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트
[AWS Builders 온라인 시리즈]  AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트[AWS Builders 온라인 시리즈]  AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트
[AWS Builders 온라인 시리즈] AWS 서비스를 활용하여 파일 스토리지 빠르게 마이그레이션 하기 - 서지혜, AWS 솔루션즈 아키텍트
 
Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)Swagger APIs for Humans and Robots (Gluecon)
Swagger APIs for Humans and Robots (Gluecon)
 
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018
Serverless 개발에서의 인증 완벽 가이드::박선용::AWS Summit Seoul 2018
 
Rest api-basic
Rest api-basicRest api-basic
Rest api-basic
 

Similaire à Introduction à web assembly

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphipprem
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsFlorent Dupont
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09Claude Coulombe
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignRelax In The Air
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement bruteYounesOuladSayad1
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lroxmed
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesGaëtan LAVENU
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiquesJohan Moreau
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Microsoft Technet France
 

Similaire à Introduction à web assembly (20)

Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
Développez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome appsDéveloppez des applications natives en HTML/JS avec Chrome apps
Développez des applications natives en HTML/JS avec Chrome apps
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119Paug aosp ice-creamsandwich_20120119
Paug aosp ice-creamsandwich_20120119
 
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
GWT Approfondissement  - GTI780 & MTI780 - ETS - A09GWT Approfondissement  - GTI780 & MTI780 - ETS - A09
GWT Approfondissement - GTI780 & MTI780 - ETS - A09
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Gdd07 Gwt Dig
Gdd07 Gwt DigGdd07 Gwt Dig
Gdd07 Gwt Dig
 
Programmation sous Android
Programmation sous AndroidProgrammation sous Android
Programmation sous Android
 
developpement web framework cms developpement brute
developpement web framework cms developpement brutedeveloppement web framework cms developpement brute
developpement web framework cms developpement brute
 
TP GWT JDEV 2015
TP GWT JDEV 2015TP GWT JDEV 2015
TP GWT JDEV 2015
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
 
Architecture android
Architecture androidArchitecture android
Architecture android
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
Windows Azure Media Services : des API pour encoder, multiplexer et difuser v...
 

Introduction à web assembly

  • 2. Définition : WebAssembly, ou wasm, est un langage de programmation binaire de bas niveau pour le développement d’applications dans les navigateurs Web. https://fr.wikipedia.org/wiki/WebAssembly
  • 4. “Rendre le Web aussi performant que le Natif”
  • 5. Avantages ● Portabilité cross-browsers ● Poids des fichiers réduit ● Temps de chargement réduit ● Lisibilité pour un humain ● Facilement débuggable ● Sécurité en mode sandbox ● Compatibilité avec l’existant
  • 6. Use cases ● Applications de traitement (image, son, vidéo, fichiers, données) ● Jeux vidéos : casuals (fast boot), AAA (heavy assets), portals / MMO ● Peer-to-peer ● Streaming ● Editeurs (online IDE) et interpréteurs (JSFiddle- & code-school- like) ● Clients lourds web-ifiés ● Logiciels de CAO (médical, architecture, industrie, transports & flux, etc.) ● Applications hybrides (mobiles) ● Opérations de calcul distribué ● Server-side applications (le futur des Services Workers ?) http://webassembly.org/docs/faq/
  • 7. Définition (bis) : WebAssembly, ou wasm, est un langage de programmation binaire de bas niveau pour le développement d’applications dans les navigateurs Web. https://fr.wikipedia.org/wiki/WebAssembly
  • 8. “asm.js est mort ! longue vie à wasm !” https://brendaneich.com/2015/06/from-asm-js-to-webassembly/
  • 9. asm.js by Mozilla - Firefox, depuis 2013 asm.js is an intermediate programming language designed to allow computer software written in languages such as C to be run as web applications while maintaining performance characteristics considerably better than standard JavaScript, the typical language used for such applications. asm.js consists of a strict subset of JavaScript, into which code written in statically-typed languages with manual memory management (such as C) is translated by a source-to-source compiler such as Emscripten (based on LLVM). Performance is improved by limiting language features to those amenable to ahead-of-time optimization and other performance improvements. http://asmjs.org/faq.html
  • 11. NaCl & PNaCl by Google - Chrome, dès 2011 Native Client is a sandbox for running compiled C and C++ code in the browser efficiently and securely, independent of the user’s operating system. Portable Native Client extends that technology with architecture independence, letting developers compile their code once to run in any website and on any architecture with ahead-of-time (AOT) translation. In short, Native Client brings the performance and low-level control of native code to modern web browsers, without sacrificing the security and portability of the web. Watch the video below for an overview of Native Client, including its goals, how it works, and how Portable Native Client lets developers run native compiled code on the web. https://developer.chrome.com/native-client
  • 12. FTL JIT by Apple - Safari, depuis 2014 Le machin d’Apple, qui donne l’impression que les gars n’ont jamais vraiment cru à la tendance / au concept. https://trac.webkit.org/wiki/FTLJIT
  • 13.
  • 15. Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation https://stackoverflow.com/questions/41450226/angular-2-just-in-time-jit-vs-ahead-of-time-aot-compilation
  • 16. WebAssembly : le bytecode du Web https://hacks.mozilla.org/2017/02/what-makes-webassembly-fast/
  • 17. From: C / C++ / Rust / Python To: JS + WASP + WAST + HTML
  • 18. Glossaire ● Emscripten : un compilateur open source développé par Mozilla permettant de compiler du bitcode LLVM en Javascript pour pouvoir l'exécuter dans n'importe quel navigateur web. Le JS généré peut être du asm.js ou du wasm. ● LLVM : Low Level Virtual Machine. Architecture de compilateur. Equivalent de la JVM pour Java. Son but est de transformer du code écrit dans un langage typé dans un autre langage de plus haut niveau (Intermediate Representation). ● Clang : compilateur & optimiseur de code C / C++. Il s’agit d’une alternative réputée plus rapide (lancement et exécution) et efficace (taille de l’output obtenu) que gcc / g++. ● wast : abréviation pour WebAssembly Text Format. Format textuel de wasm. http://webassembly.org/roadmap/
  • 21. Next steps ● Unifier / centraliser les bases de code et de documentation ● Basculer le niveau de spec de “expérimental” à “stable” ● Établir un nouveau véhicule de gouvernance au sein du W3C ● Améliorer l’outillage de développement (IDE, automation- & debug- tools) ● Enrichir la norme ● Augmenter le nombre de langages supportés (C / C++, Rust, Go, Python, etc.) ● Pouvoir appeler WebAssembly directement depuis HTML http://webassembly.org/roadmap/
  • 22. Faut-il dès à présent investir sur WebAssembly ?
  • 23. I usually finish with a joke: « Always bet on JS ». ••• Brendan Eich
  • 24. Articles : ● [TL;DR] WebAssembly: A New Hope – by PSPDFKit [lien] ● [TL;DR] Getting Started With WebAssembly – [lien] ● WebAssembly concepts – on Mozilla MDN [lien] ● WebAssembly: An initial view – by JC Bayler, Intel [lien] ● A cartoon intro to WebAssembly – by Lin Clark, Mozilla [lien] Code & outils : ● emscripten – convertisseur C / C++ en asm.js [lien] ● WasmFiddle – éditeur en ligne de code wasm [lien] ● MASSIVE - the web computation benchmark – benchmark [lien] ● JS vs. WASM – benchmark [lien] Démos & vidéos : ● Tanks! Demo – démo officielle & cross-browser d’un jeu vidéo [lien] ● AngryBots – jeu 3D développé par Microsoft [lien] ● Compiling for the Web with WebAssembly – Google I/O '17 [lien]