COMP6080 Transpilation
Presented by
Copyright By PowCoder代写 加微信 powcoder
Definition
transpilation?
Definition
Compilation
source code -> machine code
Transpilation
source code -> source code
Definition
Compilation
C++ -> Machine code
Transpilation
C++ -> Javascript
Transpilation
Why do we need it?
What are the use cases?
Other language -> is the only natively supported language in the browser**. This means that by default if you want to use a different language to write your frontend web apps, you need to transpile to JS.
**yes there’s wasm now, it’s still not totally well supported /
Source (C++) -> Transpiled (Javascript)
-> Old Javascript
New features become available in Javascript that aren’t supported in old browsers. We can transpile our new Javascript (e.g. native js Class) to compatible older APIs, while still using new features when we write our code.
Source -> Transpiled (no class support)
You can try compiling new -> old
Javascript at
https://babeljs.io/repl
Almost Javascript -> of Javascript have been created for syntactic sugar or type safety. For example, Coffeescript or Typescript. These are almost JS (much closer than C++) but still need to be transpiled to vanilla JS to run in the browser.
Typescript -> Javascript
Try the typescript compiler:
typescriptlang.org/play
JSX transformation
React is just Javascript. It doesn’t use any
string or HTML templating.
Under the hood when you write something like
component =
what you’re actually writing is:
component = React.createElement(“div”, null,
React.createElement(“button”, null));
JSX -> Javascript
Minification + Obfuscation Javascript Minification and / or Obfuscation
are both technically types of transpilation.
Minification / Obfuscation takes our existing code and condenses it, removing whitespace, removing comments, shortening variable names and in some cases even automatically refactoring control flow to save network transfer when downloading scripts.
This process also makes it more difficult for
competitors or malicious actors to reverse
engineer our source code.
Min / Obfs example: Google “Closure Compiler” in advanced mode can determine that the function hello and the user object are only used once, and removes them completely
over a large application, this can save a lot of bytes
Try it out:
https://closure-compiler.appspot.com/home
How does transpiling generally work?
Before we deploy our Javascript code to production, we run a build step using tooling like webpack or rollup or gulp.
Tools like webpack are usually a chain of plugins
that handle lots of different file types and
transpilation steps. In webpack they are called loaders but have different names (“plugins”, etc)
in other tools.
Transpiling isn’t free. It takes time
and will slow down your development /
deployment experience if you aren’t
Heavy transpilation means the code executing in the browser may be difficult to debug. You will need good source map support to help you understand how the transpiled code maps back to the source code.
程序代写 CS代考 加微信: powcoder QQ: 1823890830 Email: powcoder@163.com