|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120 |
- 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"><</span><span class="nx">h1</span><span class="o">></span><span class="nx">Hello</span><span class="p">,</span> <span class="nx">world</span><span class="o">!<</span><span class="err">/h1>,</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"><!DOCTYPE html></span>
- <span class="nt"><html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">></span>
- <span class="nt"><head></span>
- <span class="nt"><meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/></span>
- <span class="nt"><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">/></span>
- <span class="nt"><title></span>Hello World<span class="nt"></title></span>
- <span class="nt"></head></span>
-
- <span class="nt"><body></span>
- <span class="nt"><div</span> <span class="na">id=</span><span class="s">"container"</span><span class="nt">></div></span>
- <span class="nt"><script></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">'<h1>"Hello, world!"</h1>'</span><span class="p">;</span>
- <span class="p">}</span>
- <span class="nt"></script></span>
- <span class="nt"></body></span>
- <span class="nt"></html></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>
|