Skip to content

Commit aad344a

Browse files
aturonaturon
authored
Merge pull request #108 from aturon/stage2-wasm
STAGE 2: wasm revisions
2 parents 6e05ae4 + 15dd8a9 commit aad344a

File tree

5 files changed

+212
-274
lines changed

5 files changed

+212
-274
lines changed

‎templates/what/wasm.hbs

Lines changed: 5 additions & 274 deletions
Original file line numberDiff line numberDiff line change
@@ -6,279 +6,10 @@
66
</div>
77
</header>
88

9-
<section id="wasm-why" class="background-purple">
10-
<div class="container">
11-
<header>
12-
<h2>Why Rust and WebAssembly?</h2>
13-
<div class="highlight highlight-yellow"></div>
14-
</header>
15-
<div class="row">
16-
<div class="three columns">
17-
<div class="domain-icon">
18-
<img src="/static/images/gears.svg" alt="?" />
19-
<h3>Reliable Performance</h3>
20-
</div>
21-
<p>
22-
No unpredictable garbage collection pauses. No JIT compiler
23-
performance cliffs. Just low-level control coupled with high-level
24-
ergonomics.
25-
</p>
26-
</div>
27-
<div class="three columns">
28-
<div class="domain-icon">
29-
<img src="/static/images/microscope.svg" alt="?" />
30-
<h3>Small Code Size</h3>
31-
</div>
32-
<p>
33-
Small code size means faster page loads. Rust-generated
34-
<code>.wasm</code> doesn't include extra bloat, like a garbage
35-
collector. Advanced optimizations and tree shaking remove dead code.
36-
</p>
37-
</div>
38-
<div class="three columns">
39-
<div class="domain-icon">
40-
<img src="/static/images/handshake.svg" alt="Handshake" />
41-
<h3>JavaScript Integration</h3>
42-
</div>
43-
<p>
44-
Do <u>not</u> rewrite your whole code base, just surgically
45-
replace hot code paths with Rust-generated WebAssembly.
46-
</p>
47-
</div>
48-
<div class="three columns">
49-
<div class="domain-icon">
50-
<img src="/static/images/luggage.svg" alt="?" />
51-
<h3>Modern Amenities</h3>
52-
</div>
53-
<p>
54-
A lively ecosystem of crates and libraries to help you hit the
55-
ground running. Expressive, zero-cost abstractions. A welcoming
56-
community.
57-
</p>
58-
</div>
59-
</div>
60-
</div>
61-
</section>
62-
63-
<section id="wasm-get-started" class="background-green">
64-
<div class="container">
65-
<header>
66-
<h2>Get Started!</h2>
67-
<div class="highlight highlight-purple"></div>
68-
</header>
69-
<div class="row">
70-
<div class="four columns">
71-
<div class="domain-icon">
72-
<a href="https://rustwasm.github.io/book">
73-
<img src="/static/images/reference.svg" alt="Books" />
74-
<h3>The Rust and WebAssembly Book</h3>
75-
</a>
76-
</div>
77-
<p>
78-
Learn how to build, debug, profile, and deploy Rust and WebAssembly
79-
applications!
80-
</p>
81-
</div>
82-
<div class="four columns">
83-
<div class="domain-icon">
84-
<a href="https://webassembly.org/">
85-
<img src="https://webassembly.org/css/webassembly.svg" alt="WebAssembly Logo" />
86-
</a>
87-
</div>
88-
<p>
89-
Learn more about the fast, safe, and open virtual machine called
90-
WebAssembly, and read its standard.
91-
</p>
92-
</div>
93-
<div class="four columns">
94-
<div class="domain-icon">
95-
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
96-
<img src="/static/images/mdn-logo.svg"/>
97-
</a>
98-
</div>
99-
<p>
100-
Learn more about WebAssembly on the Mozilla Developer Network.
101-
</p>
102-
</div>
103-
</div>
104-
</div>
105-
</section>
106-
107-
<section id="wasm-plays-well-with-javascript" class="background-red">
108-
<div class="container">
109-
<header>
110-
<h2>Plays Well With JavaScript</h2>
111-
<div class="highlight highlight-yellow"></div>
112-
</header>
113-
<div class="row">
114-
<div class="four columns">
115-
<div class="domain-icon">
116-
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
117-
<h3>Augment, not Replace</h3>
118-
</a>
119-
</div>
120-
<p>
121-
The dream of WebAssembly is not to kill JavaScript but to work
122-
alongside of it, to help super charge processing-heavy or low-level
123-
tasks that would benefit from manual memory management or expression
124-
in a systems-level language.
125-
</p>
126-
</div>
127-
<div class="four columns">
128-
<div class="domain-icon">
129-
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
130-
<h3>Works with Familiar Toolchains</h3>
131-
</a>
132-
</div>
133-
<p>
134-
All of the Rust WebAssembly tooling has been designed with a Web
135-
developer’s pre-existing toolchain in mind. You can publish Rust
136-
generated WebAssembly packages to package registries like npm, bundle
137-
them for production with all the popular bundlers, and maintain them
138-
with tools like <code>npm audit</code> and Greenkeeper.
139-
</p>
140-
</div>
141-
<div class="four columns">
142-
<div class="domain-icon">
143-
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
144-
<h3>Data Structure Bindings</h3>
145-
</a>
146-
</div>
147-
<p>
148-
WebAssembly only supports a small set of primitives, but Rust
149-
WebAssembly tooling is designed to help you write maintainable code with
150-
abstractions and types that you already know, seamlessly generating
151-
binding code between Rust, WebAssembly, and JavaScript &mdash; so you
152-
don’t have to!
153-
</p>
154-
</div>
155-
</div>
156-
</div>
157-
</section>
158-
159-
<section id="wasm-production-use">
160-
<div class="container">
161-
<header>
162-
<h2>Production Use</h2>
163-
<div class="highlight highlight-green"></div>
164-
</header>
165-
<div class="testimonials">
166-
<div class="testimonial row">
167-
<div class="four columns">
168-
<a href="https://blogs.dropbox.com/tech/2018/06/building-better-compression-together-with-divans/">
169-
<img src="https://ucc07b4a6f7dce2bca4c5ff762a1.previews.dropboxusercontent.com/p/thumb/AAJGSN9OJyk-hrFWzjySLSC_RH-a57cOouIjHMBPMhEQmqqrZFJsA6oJSw9Pxqoa_WE4-Lc_RYZ08GzhusUlq9d2LviOQduExeH3yJJ0GlVxUXSED9J1nG2KHovqtP9DBvFuEWY1GdTVJVuwJNYsr6JeQF4nTYxtowaGeJuv4FMb6Z6EeglqUcq6I8KdMFWxUG7gzsBN7GEHT4LIU5XwMLfmuu46bKa562S3EmVUYJtwZQ/p.png"/>
170-
</a>
171-
</div>
172-
<div class="eight columns">
173-
<blockquote>
174-
[Rust’s] properties make it easy to embed the DivANS codec in a
175-
webpage with WASM, as shown above.
176-
</blockquote>
177-
<p class="attribution">
178-
&ndash; Daniel Reiter Horn and Jongmin Baek,
179-
<a href="https://blogs.dropbox.com/tech/2018/06/building-better-compression-together-with-divans/">
180-
Building Better Compression Together with DivANS
181-
</a>
182-
</p>
183-
</div>
184-
</div>
185-
<div class="testimonial row">
186-
<div class="eight columns">
187-
<blockquote>
188-
The JavaScript implementation [of the <code>source-map</code> library]
189-
has accumulated convoluted code in the name of performance, and we
190-
replaced it with idiomatic Rust. Rust does not force us to choose
191-
between clearly expressing intent and runtime performance.
192-
</blockquote>
193-
<p class="attribution">
194-
&ndash; Nick Fitzgerald,
195-
<a href="https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/">
196-
Oxidizing Source Maps with Rust and WebAssembly
197-
</a>
198-
</p>
199-
</div>
200-
<div class="four columns">
201-
<a href="https://hacks.mozilla.org/2018/01/oxidizing-source-maps-with-rust-and-webassembly/"
202-
style="display: block;">
203-
<img src="https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2018/01/first.pause_.at_.exception.scalajs.png"/>
204-
</a>
205-
</div>
206-
</div>
207-
<div class="testimonial row">
208-
<div class="four columns">
209-
<a href="https://mnt.io/2018/08/22/from-rust-to-beyond-the-webassembly-galaxy/">
210-
<img src="https://mntio.files.wordpress.com/2018/07/gutenberg_logo.png"/>
211-
</a>
212-
</div>
213-
<div class="eight columns">
214-
<blockquote>
215-
The Rust part for WebAssembly plus the Javascript part totals 313
216-
lines of code. This is a tiny surface of code to review and to
217-
maintain compared to writing a Javascript parser from scratch… The
218-
WebAssembly binary is in average 86 times faster than the actual
219-
Javascript implementation… So not only it is safer, but it is faster
220-
than Javascript in this case. And it is only 300 lines of code.
221-
</blockquote>
222-
<p class="attribution">
223-
&ndash; Ivan Enderlin,
224-
<a href="https://mnt.io/2018/08/22/from-rust-to-beyond-the-webassembly-galaxy/">
225-
Parsing the WordPress Gutenberg Post Format in Rust and WebAssembly
226-
</a>
227-
228-
</p>
229-
</div>
230-
</div>
231-
</div>
232-
</div>
233-
</section>
234-
235-
<section id="wasm-friends">
236-
<div class="container">
237-
<header>
238-
<h2>Friends</h2>
239-
<div class="highlight highlight-red"></div>
240-
</header>
241-
<div class="row">
242-
<div class="four columns">
243-
<div class="domain-icon">
244-
<a href="https://mozilla.org">
245-
Mozilla
246-
</a>
247-
</div>
248-
</div>
249-
<div class="four columns">
250-
<div class="domain-icon">
251-
<a href="https://dropbox.com/">
252-
Dropbox
253-
</a>
254-
</div>
255-
</div>
256-
<div class="four columns">
257-
<div class="domain-icon">
258-
<a href="https://wordpress.com/">
259-
WordPress
260-
</a>
261-
</div>
262-
</div>
263-
</div>
264-
<div class="row">
265-
<div class="four columns">
266-
<div class="domain-icon">
267-
<a href="https://webpack.js.org/">
268-
Webpack
269-
</a>
270-
</div>
271-
</div>
272-
<div class="four columns">
273-
<div class="domain-icon">
274-
<a href="https://parceljs.org/">
275-
Parcel
276-
</a>
277-
</div>
278-
</div>
279-
</div>
280-
</div>
281-
</section>
9+
{{> what/wasm/pitch }}
10+
{{> what/wasm/js }}
11+
{{> what/wasm/get-started }}
12+
{{> what/wasm/production }}
28213

28314
{{/inline}}
284-
{{~> (parent)~}}
15+
{{~> (parent)~}}

‎templates/what/wasm/get-started.hbs

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<section id="wasm-get-started" class="background-green">
2+
<div class="container">
3+
<header>
4+
<h2>Get Started!</h2>
5+
<div class="highlight highlight-purple"></div>
6+
</header>
7+
<div class="row">
8+
<div class="four columns">
9+
<div class="domain-icon">
10+
<a href="https://rustwasm.github.io/book">
11+
<img src="/static/images/reference.svg" alt="Books" />
12+
<h3>The Rust and WebAssembly Book</h3>
13+
</a>
14+
</div>
15+
<p>
16+
Learn how to build, debug, profile, and deploy WebAssembly
17+
applications using Rust!
18+
</p>
19+
</div>
20+
<div class="four columns">
21+
<div class="domain-icon">
22+
<a href="https://webassembly.org/">
23+
<img src="https://webassembly.org/css/webassembly.svg" alt="WebAssembly Logo" />
24+
</a>
25+
</div>
26+
<p>
27+
Learn more about the fast, safe, and open virtual machine called
28+
WebAssembly, and read its standard.
29+
</p>
30+
</div>
31+
<div class="four columns">
32+
<div class="domain-icon">
33+
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
34+
<img src="/static/images/mdn-logo.svg" />
35+
</a>
36+
</div>
37+
<p>
38+
Learn more about WebAssembly on the Mozilla Developer Network.
39+
</p>
40+
</div>
41+
</div>
42+
</div>
43+
</section>

‎templates/what/wasm/js.hbs

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<section id="wasm-plays-well-with-javascript" class="background-red">
2+
<div class="container">
3+
<header>
4+
<h2>Plays Well With JavaScript</h2>
5+
<div class="highlight highlight-yellow"></div>
6+
</header>
7+
<div class="row">
8+
<div class="four columns">
9+
<div class="domain-icon">
10+
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
11+
<h3>Augment, don't replace</h3>
12+
</a>
13+
</div>
14+
<p>
15+
The dream of WebAssembly is not to kill JavaScript but to work
16+
alongside of it, to help super charge processing-heavy or low-level
17+
tasks &mdash; tasks that benefit from Rust's focus on performance.
18+
</p>
19+
</div>
20+
<div class="four columns">
21+
<div class="domain-icon">
22+
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
23+
<h3>Works with familiar toolchains</h3>
24+
</a>
25+
</div>
26+
<p>
27+
Publish Rust WebAssembly packages to package registries like npm.
28+
Bundle and ship them with WebPack, Parcel, and others.
29+
Maintain them with tools like <code>npm audit</code> and Greenkeeper.
30+
</p>
31+
</div>
32+
<div class="four columns">
33+
<div class="domain-icon">
34+
<a href="https://developer.mozilla.org/en-US/docs/WebAssembly">
35+
<h3>Seamless interop</h3>
36+
</a>
37+
</div>
38+
<p>
39+
Automatically generate binding code between Rust, WebAssembly, and JavaScript APIs.
40+
Take advantage of libraries like <a href="https://rustwasm.github.io/wasm-bindgen/web-sys/index.html"><code>web-sys</code></a>
41+
that
42+
provide pre-packaged bindings for the entire web platform.
43+
</p>
44+
</div>
45+
</div>
46+
</div>
47+
</section>

0 commit comments

Comments
 (0)