forked from software-tools-books/js4ds
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro.tex
201 lines (168 loc) · 8.89 KB
/
intro.tex
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
\chapter{Introduction}\label{s:intro}
\hreffoot{https://www.dabeaz.com/}{David Beazley}\index{Beazley, David} thought that ``JavaScript \emph{versus} Data Science''
would be a better title for this book.
While that one word sums up how many people view the language,
we hope we can convince you that modern JavaScript is usable as well as useful.
Scientists and engineers are who we were thinking of when we wrote this book
but we hope that these lessons will also help librarians,
digital humanists,
and everyone else who uses computing in their research.
We will cover:
\begin{itemize}
\item
Core features of modern JavaScript
\item
Programming with callbacks and promises
\item
Creating objects and classes
\item
Writing HTML and CSS
\item
Creating interactive pages with React
\item
Building data services
\item
Testing
\item
Data visualization
\item
Combining everything to create a three-tier web application
\end{itemize}
Unlike most introductions to JavaScript,
these lessons present an even mix of browser programming and server programming.
We give each topic only shallow coverage;
if you want to know more,
there are many other free tutorials you can dive into once you've mastered the basics,
some of which are both up-to-date and well designed.
\section{Who You Are}\label{s:intro-personas}
Every lesson should aim to \hreffoot{http://teachtogether.tech/en/process/}{meet the needs of specific learners} \cite{Wils2019}.
The three people described below define the intended audience for this one.
\begin{description}
\item[Bhadra]
received a BSc in microbiology five years ago,
and has worked since then for a biotech firm with labs in four countries.
She did a statistics class using R as an undergrad,
then learned some more R and some Unix shell scripting
in a \hreffoot{http://software-carpentry.org/}{Software Carpentry} workshop,
but has no other training as a programmer.
Bhadra's team is developing tools
to detect structural similarities between proteins.
They would like to build a browser interface to their tools
so that people can test different algorithms on various datasets.
This book will show Bhadra how to build, test, and deploy that interface.
\item[Efraim]
did fieldwork for the Ministry of Natural Resources for thirty-one years.
He learned Visual Basic so that he could write Excel macros,
then mastered C in order to maintain the control software
for some second-hand remote sensing equipment.
Efraim recently retired,
and is now an active member of several citizen science projects.
This book will show him how to create a service
to share those projects' data with the world,
and how to build a web-based administrative interface for it.
\item[Sumi]
is completing a PhD in 19th Century history.
As part of her research,
she is transcribing and cataloging the records of several dozen Japanese-American midwives.
She has been creating and customizing WordPress sites for several years,
and has picked up bits and pieces of JavaScript while doing so.
Sumi is about to start looking for a job,
and wants to create an interactive website to showcase her research.
This book will fill in some of the gaps in her knowledge
and show her how to take advantage of JavaScript's more modern features.
\end{description}
These prototypical users:
\begin{itemize}
\item
can write two-page programs that use lists, loops, conditionals, and functions,
\item
can run commands in the Unix shell to navigate the filesystem and create and delete directories and files, and
\item
have reliable access to the Internet.
\end{itemize}
\section{Who We Are}\label{s:intro-contributors}
\textbf{Maya Gans} is a freelance data scientist and front-end developer by way of quantitative biology.
She has 4 years of experience programming in R,
and her passion for data visualization brought her to the weird world of JavaScript.
When she isn't debugging \hreffoot{https://maya.rbind.io/}{or blogging} about code,
she's somewhere remote climbing large mountains.
She dedicates this book to her fellow self-taught programmers who were told they weren't good enough
but are too driven and excited to care.
\textbf{\hreffoot{https://tbyhdgs.info/}{Toby Hodges}} is a bioinformatician turned community
coordinator, working on the \hreffoot{https://bio-it.embl.de}{Bio-IT Project} at
\hreffoot{https://www.embl.de}{EMBL}\index{EMBL}. He teaches a lot of courses in computing, organizes
a lot of community-building events, listens to a lot of punk rock, and
occasionally still finds time to write code and ride his bike. Toby would like
to thank his wife for her support and patience while he swore about how annoying
JavaScript is to debug.
\textbf{\hreffoot{http://third-bit.com/}{Greg Wilson}} has worked for 35 years in both industry and
academia, and is the author or editor of several books on computing and two for
children. He co-founded \hreffoot{http://carpentries.org}{Software Carpentry}\index{Software Carpentry}, a non-profit
organization that teaches basic computing skills to researchers, and is now part
of the education team at \hreffoot{http://rstudio.com}{RStudio}\index{RStudio}. Greg would like to
thank everyone at \hreffoot{https://rangle.io/}{Rangle} who was so patient with him when
he was learning JavaScript.
\section{Setting Up}\label{s:intro-setup}
You can find the examples for each chapter in the \texttt{src} directory
in our \hreffoot{https://github.com/software-tools-in-javascript/js4ds}{GitHub repository}.
Each sub-folder contains the code and data needed to follow along with the text.
The exercises at the end of each chapter include new information
that you will need later in the book,
and are therefore not optional.
You can do the first few online,
using a service like \hreffoot{https://runkit.com/}{RunKit}\index{RunKit},
which gives you an interactive JavaScript playground in your browser.
For larger things,
and for chapters starting with the one on creating dynamic web pages (\chapref{s:dynamic}),
you should \hreffoot{https://nodejs.org/en/download/}{download and install} the latest Long-term Support (LTS) versions of Node and NPM.
\gref{g:node-js}{Node}\index{Node} is an open source implementation of JavaScript
that includes a command-line interpreter like those for languages such as Python and R.
The command \texttt{node} on its own starts a \gref{g:repl}{read-evaluate-print loop} (REPL)\index{REPL}
that executes commands as they are typed in and displays their output.
The command \texttt{node\ filename.js} reads and runs the commands in \texttt{filename.js};
we will see in \chapref{s:pages} how to run JavaScript in a browser.
\texttt{npm}\index{npm|texttt}\index{Node Package Manager (\texttt{npm})}
is the Node \grefdex{g:package-manager}{Package Manager}{package manager},
a command-line tool for finding, installing, updating, building, and executing JavaScript libraries.
The command \texttt{npm\ install\ -\/-global\ library-name} (without a \texttt{.js} extension)
installs a library \gref{g:global-installation}{globally}{installation!global}\index{global installation}
so that all projects can use it,
while \texttt{npm\ install\ -\/-save\ library-name} installs the library
\gref{g:local-installation}{locally}{installation!local}\index{local installation}
(i.e., in the current project folder).
Local installation is usually a better idea,
since it isolates projects from one another.
\section{Contributing}\label{s:index-contrib}
Contributions of all kinds are welcome, from errata and minor improvements to
entirely new sections and chapters: please submit an issue or pull
request to \hreffoot{https://github.com/software-tools-in-javascript/js4ds/}{our
GitHub repository}. Everyone whose work is incorporated will be acknowledged;
please note that all contributors are required to abide by our Code of Conduct
(\appref{s:conduct}). Please note that we use Simplified English rather than
Traditional English, i.e., American rather than British spelling and grammar. We
encourage translations; if you would like to take this on, please
\hreffoot{[email protected]}{email us}.
If you wish to report errata or suggest improvements to wording, please include
the chapter name in the first line of the body of your report (e.g., \texttt{Testing\ Data\ Analysis}).
\subsection{Acknowledgments}\label{s:intro-acknowledgments}
We are grateful as always to Shashi Kumar for help with the LaTeX.
We are also grateful for fixes from:
\begin{itemize}
\item
\hreffoot{https://github.com/sdruskat}{Stephan Druskat}
\item
\hreffoot{https://github.com/cRAN-cg}{Chiranjeev Gupta}
\item
\hreffoot{https://erictleung.com/}{Eric Leung}
\item
\hreffoot{https://github.com/pdm55}{Peter Munro}
\item
\hreffoot{http://www.leouieda.com/}{Leonardo Uieda}
\end{itemize}
\section{Exercises}\label{s:intro-exercises}
\exercise{Setting Up}
\hreffoot{https://nodejs.org/en/download/}{Install Node} on your computer,
then run the commands \texttt{node\ -\/-version} and \texttt{npm\ -\/-version}
to see which versions you have.
\section*{Key Points}
\input{keypoints/intro}