Cleanup of chapter 5
This commit is contained in:
parent
0097829cf3
commit
358550c89a
2 changed files with 101 additions and 128 deletions
BIN
build/report.pdf
BIN
build/report.pdf
Binary file not shown.
229
chapter/ch5.tex
229
chapter/ch5.tex
|
|
@ -14,6 +14,8 @@ The Do proposal~\cite{Proposal:DoProposal} is expected to not find as many match
|
|||
|
||||
Await to promise also has an expected number of matches, but this evaluation proposal is not meant to be real life representative. As it is limited to functions containing only a single await statement and that statement has to be a \texttt{VariableDeclaration}.
|
||||
|
||||
All these proposals have an impact on JavaScript, as they change how certain functionality is achieved. However, the size of the impact is very different. "Pipeline" is applicable to all function calls, this is why it produces so many more transformations than the others. From this we can deduce the impact each proposal might have on the current version of JavaScript. "Do Expression" is an interesting case, as it does produce a number of matches, and is quite applicable when ran on a large codebase. ... More
|
||||
|
||||
\paragraph*{Next.js}~\cite{NEXT.JS} is one of the largest projects on the web. It is used with React~\cite{React} to enable feature such as server-sire rendering and static site generation.
|
||||
|
||||
\begin{figure}[H]
|
||||
|
|
@ -34,6 +36,61 @@ Await to promise also has an expected number of matches, but this evaluation pro
|
|||
\label{fig:evalNextJS}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
async function getCurrentRules() {
|
||||
return fetch(`https://api.github.com/repos/vercel/next.js/branches/canary/protection`, {
|
||||
headers: {
|
||||
Accept: 'application/vnd.github+json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
'X-GitHub-Api-Version': '2022-11-28'
|
||||
}
|
||||
}).then(async res => {
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to check for rule ${res.status} ${await res.text()}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
return {
|
||||
// Massive JS object
|
||||
};
|
||||
});
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Await to Promise" transformation, from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
for (const file of typeFiles) {
|
||||
const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
|
||||
await fs.writeFile(join(typesDir, file), content)
|
||||
}
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
for (const file of typeFiles) {
|
||||
const content = await (styledJsxPath |> join(%, file) |> fs.readFile(%, 'utf8'));
|
||||
await (typesDir |> join(%, file) |> fs.writeFile(%, content));
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{next.js/packages/next/taskfile.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
await check(async () => {
|
||||
const html = await browser.eval('document.documentElement.innerHTML')
|
||||
return html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/)
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
await check(do {
|
||||
const html = await browser.eval('document.documentElement.innerHTML');
|
||||
html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/);
|
||||
\end{lstlisting}
|
||||
\caption*{"Do expression" transformation, taken from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
|
||||
\end{figure}
|
||||
|
||||
|
||||
|
||||
\paragraph*{Three.js}~\cite{ThreeJS} is a library for 3D rendering in JavaScript. It is written purely in JavaScript and uses GPU for 3D calculations. It being a popular JavaScript library, and being written in mostly pure JavaScript makes it a good case study for our tool. It currently sits at over 1 million downloads weekly.
|
||||
|
|
@ -56,6 +113,17 @@ Await to promise also has an expected number of matches, but this evaluation pro
|
|||
\label{fig:evalThreeJS}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
tracks.push( parseKeyframeTrack( jsonTracks[ i ] ).scale( frameTime ) );
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
frameTime
|
||||
|> (jsonTracks[i] |> parseKeyframeTrack(%)).scale(%)
|
||||
|> tracks.push(%);
|
||||
\end{lstlisting}
|
||||
\caption*{Transformation taken from \texttt{three.js/src/animation/AnimationClip.js}}
|
||||
\end{figure}
|
||||
|
||||
\paragraph*{React}~\cite{React} is a graphical user interface library for JavaScript, it facilitates the creation of user interfaces for both web and native platforms. React is based upon splitting a user interface into components for simple development. It is currently one of the most popular libraries for creating web apps and has over 223000 stars on Github.
|
||||
|
||||
|
|
@ -77,6 +145,21 @@ Await to promise also has an expected number of matches, but this evaluation pro
|
|||
\label{fig:evalReact}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
const logger = createLogger({
|
||||
storagePath: join(__dirname, '.progress-estimator'),
|
||||
});
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
const logger = {
|
||||
storagePath: __dirname |> join(%, '.progress-estimator')
|
||||
} |> createLogger(%);
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{react/scripts/devtools/utils.js}}
|
||||
\end{figure}
|
||||
|
||||
|
||||
|
||||
\paragraph*{Bootstrap}~\cite{Bootstrap} is a front-end framework used for creating responsive and mobile-first websites, it comes with a variety of built-in components, as well as a built in styling. This styling is also customizable using CSS. This library is a good evaluation point for this thesis as it is written in pure JavaScript and is used by millions of developers.
|
||||
|
||||
|
|
@ -98,6 +181,24 @@ Await to promise also has an expected number of matches, but this evaluation pro
|
|||
\label{fig:evalBootstrap}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
if (isElement(content)) {
|
||||
this._putElementInTemplate(getElement(content), templateElement)
|
||||
return
|
||||
}
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
if (content |> isElement(%)) {
|
||||
content |> getElement(%) |> this._putElementInTemplate(%, templateElement);
|
||||
return;
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{bootstrap/js/src/util/template-factory.js}}
|
||||
\end{figure}
|
||||
|
||||
|
||||
|
||||
\paragraph*{Atom}~\cite{Atom} is a text editor made in JavaScript using the Electron framework. It was created to give a very minimal and modular text editor. It was bought by Microsoft, and later discontinued in favor for Visual Studio Code.
|
||||
|
||||
\begin{figure}[H]
|
||||
|
|
@ -118,69 +219,6 @@ Await to promise also has an expected number of matches, but this evaluation pro
|
|||
\label{fig:evalAtom}
|
||||
\end{figure}
|
||||
|
||||
\subsection{Example transformations}
|
||||
\label{sec:RealLifeTransformations}
|
||||
|
||||
|
||||
\subsection*{Highlights of transformations from evaluation}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
tracks.push( parseKeyframeTrack( jsonTracks[ i ] ).scale( frameTime ) );
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
frameTime
|
||||
|> (jsonTracks[i] |> parseKeyframeTrack(%)).scale(%)
|
||||
|> tracks.push(%);
|
||||
\end{lstlisting}
|
||||
\caption*{Transformation taken from \texttt{three.js/src/animation/AnimationClip.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
const logger = createLogger({
|
||||
storagePath: join(__dirname, '.progress-estimator'),
|
||||
});
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
const logger = {
|
||||
storagePath: __dirname |> join(%, '.progress-estimator')
|
||||
} |> createLogger(%);
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{react/scripts/devtools/utils.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
if (isElement(content)) {
|
||||
this._putElementInTemplate(getElement(content), templateElement)
|
||||
return
|
||||
}
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
if (content |> isElement(%)) {
|
||||
content |> getElement(%) |> this._putElementInTemplate(%, templateElement);
|
||||
return;
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{bootstrap/js/src/util/template-factory.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
for (const file of typeFiles) {
|
||||
const content = await fs.readFile(join(styledJsxPath, file), 'utf8')
|
||||
await fs.writeFile(join(typesDir, file), content)
|
||||
}
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
for (const file of typeFiles) {
|
||||
const content = await (styledJsxPath |> join(%, file) |> fs.readFile(%, 'utf8'));
|
||||
await (typesDir |> join(%, file) |> fs.writeFile(%, content));
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Pipeline" transformation, taken from \texttt{next.js/packages/next/taskfile.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
|
|
@ -198,68 +236,3 @@ if (repo && repo.onDidDestroy) {
|
|||
\caption*{"Pipeline" transformation, taken from \texttt{atom/src/project.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
await check(async () => {
|
||||
const html = await browser.eval('document.documentElement.innerHTML')
|
||||
return html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/)
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
await check(do {
|
||||
const html = await browser.eval('document.documentElement.innerHTML');
|
||||
html.match(/iframe/) ? 'fail' : 'success'
|
||||
}, /success/);
|
||||
\end{lstlisting}
|
||||
\caption*{"Do expression" transformation, taken from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
|
||||
\end{figure}
|
||||
|
||||
\begin{figure}[H]
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
async function getCurrentRules() {
|
||||
const res = await fetch(
|
||||
`https://api.github.com/repos/vercel/next.js/branches/canary/protection`,
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/vnd.github+json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
'X-GitHub-Api-Version': '2022-11-28',
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(
|
||||
`Failed to check for rule ${res.status} ${await res.text()}`
|
||||
)
|
||||
}
|
||||
const data = await res.json()
|
||||
|
||||
return {
|
||||
// Massive JS Object
|
||||
}
|
||||
}
|
||||
\end{lstlisting}
|
||||
\begin{lstlisting}[language={JavaScript}]
|
||||
async function getCurrentRules() {
|
||||
return fetch(`https://api.github.com/repos/vercel/next.js/branches/canary/protection`, {
|
||||
headers: {
|
||||
Accept: 'application/vnd.github+json',
|
||||
Authorization: `Bearer ${authToken}`,
|
||||
'X-GitHub-Api-Version': '2022-11-28'
|
||||
}
|
||||
}).then(async res => {
|
||||
if (!res.ok) {
|
||||
throw new Error(`Failed to check for rule ${res.status} ${await res.text()}`);
|
||||
}
|
||||
const data = await res.json();
|
||||
return {
|
||||
// Massive JS object
|
||||
};
|
||||
});
|
||||
}
|
||||
\end{lstlisting}
|
||||
\caption*{"Await to Promise" transformation, taken from \texttt{next.js/test/integration/typescript-hmr/index.test.js}}
|
||||
\end{figure}
|
||||
|
||||
As can be seen in the results, ......... Some proposals more impactful than others
|
||||
Loading…
Reference in a new issue