A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.md 8.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. title: Why Javascript Development is Crazy
  2. url: http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/
  3. hash_url: 7044815984f8d2d65c2dd0b506a799ea
  4. <p class="tldr">
  5. Grunt/Gulp npm, require.js, browserify, es6, compilers, transpilers, jasmine mocha chai, react/angular/ember, closures, prototypes. *head explodes*
  6. </p>
  7. <p>Web development is fun! Javascript is … daunting.</p>
  8. <p>Everything else in web development clicks for you, but when you dig into
  9. Javascript it’s like you’re missing some big, foundational piece of
  10. knowledge that everyone else has that would help you make sense of it
  11. all.</p>
  12. <p>The truth is, yes, you’re missing a few pieces to the puzzle.</p>
  13. <p>But also, the current state of the art in frontend development is
  14. actually crazy.</p>
  15. <h3 id="its-not-just-you">It’s not just you.</h3>
  16. <p>Sit down, pull up a chair. It’s time to write a Javascript
  17. application.</p>
  18. <p>First step is to get your local development environment up and
  19. running. So Gulp, no wait Grunt, no … NPM scripts!</p>
  20. <p>Webpack or Browserify? (Sheepishly) Require.js? Make the leap to ES6?
  21. Or is adding Babel to your preprocessing too much?</p>
  22. <p>BDD or regular unit testing? What assert framework should you use? It
  23. sure would be nice to run tests from the command line, so maybe
  24. PhantomJS?</p>
  25. <p>Angular or React? Ember? Backbone?</p>
  26. <p>You read some React docs, “Redux is a predictable state container for
  27. JavaScript apps.” Sweet! You’ll definitely need one of those.</p>
  28. <h3 id="why-is-it-so-crazy-to-build-a-javascript-application">Why is it so crazy to build a Javascript application?!?</h3>
  29. <p>Let me help you understand why this all seems insane. We’ll start with
  30. an example and then move on to pretty pictures.</p>
  31. <p>This is React’s “Hello, world!” application.</p>
  32. <div class="highlight"><pre><code class="language-javascript" data-lang="javascript"><span class="c1">// main.js</span>
  33. <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>
  34. <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>
  35. <span class="nx">ReactDOM</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span>
  36. <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>
  37. <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>
  38. <span class="p">);</span></code></pre></div>
  39. <p>Not quite done.</p>
  40. <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
  41. <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>
  42. <p>There are actually a few missing steps in here, like installing
  43. browserify or what to actually do after you’re done here to make it
  44. run on a web page, because it’s not like this actually produces a web
  45. page that does anything. ¯\_(ツ)_/¯</p>
  46. <p>After you’re done with that you end up with a file called bundle.js
  47. that contains your new React Hello World application coming in
  48. at 19,374 lines of code. And you only had to install browserify,
  49. babelify and react-dom, weighing in at some unknown tens of thousands
  50. of lines of code.</p>
  51. <h3 id="so-basically-this-">So basically this …</h3>
  52. <p>Ok, now let’s do a hello world app with plain Javascript.</p>
  53. <div class="highlight"><pre><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
  54. <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
  55. <span class="nt">&lt;head&gt;</span>
  56. <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"utf-8"</span> <span class="nt">/&gt;</span>
  57. <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>
  58. <span class="nt">&lt;title&gt;</span>Hello World<span class="nt">&lt;/title&gt;</span>
  59. <span class="nt">&lt;/head&gt;</span>
  60. <span class="nt">&lt;body&gt;</span>
  61. <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"container"</span><span class="nt">&gt;&lt;/div&gt;</span>
  62. <span class="nt">&lt;script&gt;</span>
  63. <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>
  64. <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>
  65. <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>
  66. <span class="p">}</span>
  67. <span class="nt">&lt;/script&gt;</span>
  68. <span class="nt">&lt;/body&gt;</span>
  69. <span class="nt">&lt;/html&gt;</span></code></pre></div>
  70. <p>That’s the whole thing. 18 lines of code. You can copy/paste that into a file called
  71. index.html, double click and load it in your browser. Done.</p>
  72. <p>If right at this moment you are thinking to yourself, “But wait, React
  73. does so much more than this dinky little thing you just wrote and you
  74. can’t write a Javascript app that way!” you are (mostly) correct, and
  75. you are also one tiny step away from understanding why everything is
  76. crazy.</p>
  77. <h3 id="now-for-that-picture-i-promised">Now for that picture I promised.</h3>
  78. <p><img src="http://www.planningforaliens.com/images/bell_curve.png" alt="Bell Curve"/></p>
  79. <p>The vast majority of Javascript web applications you will work on will
  80. fall somewhere in the middle of that bell curve. And in the middle, if
  81. you start with a full React stack you have massively over-engineered
  82. your application from the start.</p>
  83. <p>And that is why everything is crazy. Most of these tools you think you
  84. have to have are solving problems you don’t have NOR WILL YOU EVER
  85. HAVE.</p>
  86. <h3 id="heres-that-picture-again">Here’s that picture again:</h3>
  87. <p><img src="http://www.planningforaliens.com/images/bell_curve_2.png" alt="Bell Curve"/></p>
  88. <p>The state of Javascript development is overwhelming and confusing
  89. because everyone is overengineering their apps by default without even
  90. realizing it.</p>
  91. <p>How should you start a Javascript application? Should you ever use
  92. something like React or Angular? Should you use a package manager?
  93. What do you do if you don’t? Are tests even necessary? Should you even
  94. generate the markup with Javascript? These are all questions you
  95. should be asking before starting with your gigantic tech stack by
  96. default.</p>
  97. <p>When you start a Javascript application, the key is to pick a spot on
  98. that bell curve just in front of where you think the app could
  99. possibly end up in terms of complexity.</p>
  100. <p>I’m not going to lie, getting this right takes experience. But there
  101. is a pretty large sweet spot where you can start most Javascript
  102. applications: Jquery plus client-side templates and a dead simple
  103. build tool for concatenating and minifying production files (assuming
  104. your backend framework doesn’t do this already).</p>
  105. <p>If you learn how to structure a Javascript app correctly, you will
  106. start to understand how, when and why to use a framework or
  107. npm/require/webpack or es6 or when to write tests or when you should
  108. bother to make your tests run locally vs. in the browser, and all of
  109. these other questions and problems that will come up.</p>
  110. <p>Interested in filling in those gaps in your knowledge about Javascript
  111. development? Want to avoid feeling overwhelmed and in the process
  112. massively overengineer your Javascript application? That’s what
  113. I’ll be focused on in the coming months in this newsletter, so stick
  114. around, there’s more coming in a week or two!</p>