larlet-fr-david-cache/cache/7044815984f8d2d65c2dd0b506a799ea/index.md

title: Why Javascript Development is Crazy
url: http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/
hash_url: 7044815984f8d2d65c2dd0b506a799ea

<p class="tldr">
Grunt/Gulp npm, require.js, browserify, es6, compilers, transpilers, jasmine mocha chai, react/angular/ember, closures, prototypes. *head explodes*
</p>

<p>Web development is fun! Javascript is … daunting.</p>
<p>Everything else in web development clicks for you, but when you dig into
Javascript it’s like you’re missing some big, foundational piece of
knowledge that everyone else has that would help you make sense of it
all.</p>
<p>The truth is, yes, you’re missing a few pieces to the puzzle.</p>
<p>But also, the current state of the art in frontend development is
actually crazy.</p>
<h3 id="its-not-just-you">It’s not just you.</h3>
<p>Sit down, pull up a chair. It’s time to write a Javascript
application.</p>
<p>First step is to get your local development environment up and
running. So Gulp, no wait Grunt, no … NPM scripts!</p>
<p>Webpack or Browserify? (Sheepishly) Require.js? Make the leap to ES6?
Or is adding Babel to your preprocessing too much?</p>
<p>BDD or regular unit testing? What assert framework should you use? It
sure would be nice to run tests from the command line, so maybe
PhantomJS?</p>
<p>Angular or React? Ember? Backbone?</p>
<p>You read some React docs, “Redux is a predictable state container for
JavaScript apps.” Sweet! You’ll definitely need one of those.</p>
<h3 id="why-is-it-so-crazy-to-build-a-javascript-application">Why is it so crazy to build a Javascript application?!?</h3>
<p>Let me help you understand why this all seems insane. We’ll start with
an example and then move on to pretty pictures.</p>
<p>This is React’s “Hello, world!” application.</p>
<div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// main.js</span>
<span class="kd">var</span> <span class="nx">React</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react'</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">ReactDOM</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'react-dom'</span><span class="p">);</span>

<span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
  <span class="o">&lt;</span><span class="nx">h1</span><span class="o">&gt;</span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!&lt;</span><span class="err">/h1&gt;,</span>
  <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'example'</span><span class="p">)</span>
  <span class="p">);</span></code></pre></div>
<p>Not quite done.</p>
<div class="highlight"><pre><code class="language-bash" data-lang="bash"><span class="nv">$ </span>npm install --save react react-dom babelify babel-preset-react
<span class="nv">$ </span>browserify -t <span class="o">[</span> babelify --presets <span class="o">[</span> react <span class="o">]</span> <span class="o">]</span> main.js -o bundle.js</code></pre></div>
<p>There are actually a few missing steps in here, like installing
browserify or what to actually do after you’re done here to make it
run on a web page, because it’s not like this actually produces a web
page that does anything. ¯\_(ツ)_/¯</p>
<p>After you’re done with that you end up with a file called bundle.js
that contains your new React Hello World application coming in
at 19,374 lines of code. And you only had to install browserify,
babelify and react-dom, weighing in at some unknown tens of thousands
of lines of code.</p>
<h3 id="so-basically-this-">So basically this …</h3>


<p>Ok, now let’s do a hello world app with plain Javascript.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;head&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width"</span> <span class="nt">/&gt;</span>
    <span class="nt">&lt;title&gt;</span>Hello World<span class="nt">&lt;/title&gt;</span>
  <span class="nt">&lt;/head&gt;</span>

  <span class="nt">&lt;body&gt;</span>
    <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"container"</span><span class="nt">&gt;&lt;/div&gt;</span>
    <span class="nt">&lt;script&gt;</span>
     <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
       <span class="kd">var</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">"container"</span><span class="p">);</span>
       <span class="nx">container</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'&lt;h1&gt;"Hello, world!"&lt;/h1&gt;'</span><span class="p">;</span>
     <span class="p">}</span>
    <span class="nt">&lt;/script&gt;</span>
  <span class="nt">&lt;/body&gt;</span>
  <span class="nt">&lt;/html&gt;</span></code></pre></div>
<p>That’s the whole thing. 18 lines of code. You can copy/paste that into a file called
index.html, double click and load it in your browser. Done.</p>
<p>If right at this moment you are thinking to yourself, “But wait, React
does so much more than this dinky little thing you just wrote and you
can’t write a Javascript app that way!” you are (mostly) correct, and
you are also one tiny step away from understanding why everything is
crazy.</p>
<h3 id="now-for-that-picture-i-promised">Now for that picture I promised.</h3>
<p><img src="http://www.planningforaliens.com/images/bell_curve.png" alt="Bell Curve"/></p>
<p>The vast majority of Javascript web applications you will work on will
fall somewhere in the middle of that bell curve. And in the middle, if
you start with a full React stack you have massively over-engineered
your application from the start.</p>
<p>And that is why everything is crazy. Most of these tools you think you
have to have are solving problems you don’t have NOR WILL YOU EVER
HAVE.</p>
<h3 id="heres-that-picture-again">Here’s that picture again:</h3>
<p><img src="http://www.planningforaliens.com/images/bell_curve_2.png" alt="Bell Curve"/></p>
<p>The state of Javascript development is overwhelming and confusing
because everyone is overengineering their apps by default without even
realizing it.</p>
<p>How should you start a Javascript application? Should you ever use
something like React or Angular? Should you use a package manager?
What do you do if you don’t? Are tests even necessary? Should you even
generate the markup with Javascript? These are all questions you
should be asking before starting with your gigantic tech stack by
default.</p>
<p>When you start a Javascript application, the key is to pick a spot on
that bell curve just in front of where you think the app could
possibly end up in terms of complexity.</p>
<p>I’m not going to lie, getting this right takes experience. But there
is a pretty large sweet spot where you can start most Javascript
applications: Jquery plus client-side templates and a dead simple
build tool for concatenating and minifying production files (assuming
your backend framework doesn’t do this already).</p>
<p>If you learn how to structure a Javascript app correctly, you will
start to understand how, when and why to use a framework or
npm/require/webpack or es6 or when to write tests or when you should
bother to make your tests run locally vs. in the browser, and all of
these other questions and problems that will come up.</p>
<p>Interested in filling in those gaps in your knowledge about Javascript
development? Want to avoid feeling overwhelmed and in the process
massively overengineer your Javascript application? That’s what
I’ll be focused on in the coming months in this newsletter, so stick
around, there’s more coming in a week or two!</p>