(public).sospep.subjects ~ view article ~ How-it-feels-to-learn-javascript-in-2016

<h1 style="text-align: center;">How it feels to learn JavaScript in 2016</h1>
<h2>[WHAT]</h2>
<ol>
<li>&nbsp;] by Jose Aguinaga @hackernoon.com - Jose explores the state of whats current in the world of javascript development. A tongue in cheek look at the multitude of frameworks, libraries, components, and tooling that one may try to learn in order to keep up with the current state of the art in js development.&nbsp;</li>
<li>ALT ] While the article is a humorous play on the follies of chasing the latest javascript trends, it provides a listing and descriptions of some of the flavors of the day in the javascript world.</li>
</ol>
<h2>[WHY]</h2>
<ol>
<li>] provides a good listing of the latest/greates in the js world, along with brief descriptions</li>
<li>] also talks about about history of development libs/tools etc that went before&nbsp;</li>
</ol>
<h2>[WHERE]</h2>
<ol>
<li><strong>] READ THE FULL ARTICLE</strong></li>
<ol>
<li>]&nbsp;<a href="https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.n4bhh1rht" target="_blank">https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.n4bhh1rht</a></li>
</ol></ol>
<h2>[WHEN]</h2>
<ol>
<li>] 2016-10-04&nbsp;</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li>] article inspired by <a href="https://circleci.com/blog/its-the-future/" target="_blank">its-the-future</a> -&nbsp;</li>
<ol>
<li>] which is a "dev ops" version of this story&nbsp;</li>
<li>] This piece is just an opinion, and like any JavaScript framework, it shouldn&rsquo;t be taken too seriously.</li>
</ol>
<li>]&nbsp;<strong>new web project,</strong>to be honest <strong>I haven&rsquo;t coded much web in a few years</strong> and I&rsquo;ve heard <strong>the landscape changed a bit</strong>. You are the most up-to date web dev around here right?&nbsp;</li>
<ol>
<li>] The actual term is <strong>Front End engineer,</strong> but yeah, I&rsquo;m the right guy. <strong>I do web in 2016.</strong> Visualisations, music players, flying drones that play football, you name it. I just came back from JsConf and ReactConf, so I know the latest technologies to create web apps.&nbsp;</li>
</ol>
<li>]&nbsp;<strong>I need to create a page that displays the latest activity from the users, so I just need to get the data from the REST endpoint and display it in some sort of filterable table, and update it if anything changes in the server.</strong> I was thinking maybe <strong>using jQuery</strong> to fetch and display the data?</li>
<ol>
<li>]&nbsp;Oh my god no, <strong>no one uses jQuery anymore</strong>. You should <strong>try learning React,</strong> it&rsquo;s 2016.</li>
</ol>
<li><strong>] whats<span style="background-color: #ffff00;"> react</span></strong></li>
<ol>
<li>]-It&rsquo;s a super cool library made by some guys at Facebook, it really brings control and performance to your application, by allowing you to handle any view changes very easily.&nbsp;</li>
</ol>
<li><strong>] Can I use React to display data from the server?</strong></li>
<ol>
<li>] -Yeah, but first you need to <strong>add React</strong> and <span style="background-color: #ffff00;"><strong>React DOM</strong></span> as a library in your webpage.</li>
<li>] -So one is the actual library and the second one is for manipulating the DOM, which now you can <strong>describe in JSX.</strong></li>
</ol>
<li><strong>] JSX? What is <span style="background-color: #ffff00;">JSX</span>?</strong></li>
<ol>
<li>]&nbsp;-JSX is just a JavaScript syntax extension that looks pretty much like XML. It&rsquo;s kind of another way to describe the DOM, think of it as a better HTML.</li>
</ol>
<li><strong>] whats wrong with HTML?</strong></li>
<ol>
<li>]&nbsp;-It&rsquo;s 2016. No one codes HTML directly anymore.</li>
</ol>
<li>] Right. Anyway, <strong>if I add these two libraries then I can use React?</strong></li>
<ol>
<li><strong>]&nbsp;-Not quite.</strong> You need to <strong>add Babel,</strong> and then you are able to use React.</li>
</ol>
<li><strong>] <span style="background-color: #ffff00;">Babel&nbsp;</span></strong></li>
<ol>
<li>]&nbsp;<strong>Babel is a transpiler that allows you to target specific versions of JavaScript</strong>, while you code in any version of JavaScript. <strong>You don&rsquo;t HAVE to include Babel</strong> to use ReactJS, but unless you do, you are stuck with using ES5, and let&rsquo;s be real, it&rsquo;s 2016, you should be coding in ES2016+ like the rest of the cool kids do.</li>
</ol>
<li><strong>] Whats <span style="background-color: #ffff00;">ES5, ES6</span> and <span style="background-color: #ffff00;">ES2016+</span>?</strong></li>
<ol>
<li>] different versions of javascript standard(ecmascript), change in naming convention after ES6</li>
<li>] which version to choose? ES5 is most widespread, has been around the longest, later versions have more language features but ...</li>
<li>]&nbsp;-Well, you COULD use ES6, but to use cool features like async and await, you need to use ES2016+. Otherwise you are stuck with ES6 generators with coroutines to block asynchronous calls for proper control flow.</li>
</ol>
<li><strong>] huh ???, &nbsp;</strong></li>
<ol>
<li>] I&rsquo;m just loading a bunch of data from a server, I used to be able to just include jQuery from a CDN and just get the data with AJAX calls, why can&rsquo;t I just do that?</li>
<li>] It&rsquo;s 2016 man, no one uses jQuery anymore, it ends up in a bunch of spaghetti code. Everyone knows that.</li>
</ol>
<li><strong>] Right.&nbsp;</strong></li>
<ol>
<li>] So my alternative is to load three libraries to fetch data and display a HTML table.</li>
<li>] -Well, you include those three libraries but bundle them up with a module manager to load only one file.</li>
</ol>
<li><strong>] <span style="background-color: #ffff00;">module manager</span> -&nbsp;</strong></li>
<ol>
<li>] The definition depends on the environment, but in the web we usually mean anything that supports AMD or CommonJS modules.&nbsp;</li>
</ol>
<li><strong>] Riiight. And <span style="background-color: #ffff00;">AMD</span> and <span style="background-color: #ffff00;">CommonJS</span> are&hellip;?</strong></li>
<ol>
<li>] Definitions. There are ways to describe how multiple JavaScript libraries and classes should interact. You know, exports and requires? You can write multiple JavaScript files defining the AMD or CommonJS API and you can use something like Browserify to bundle them up.</li>
</ol>
<li><strong>] <span style="background-color: #ffff00;">browserify&nbsp;</span></strong></li>
<ol>
<li>] It&rsquo;s a tool that allows you to bundle CommonJS described dependencies to files that can be run in the browser. It was created because most people publish those dependencies in the npm registry.&nbsp;</li>
</ol>
<li><strong>] <span style="background-color: #ffff00;">npm registry</span>?</strong></li>
<ol>
<li>] It&rsquo;s a very big public repository where smart people put code and dependencies as modules.</li>
</ol>
<li><strong>] Like a <span style="background-color: #ffff00;">CDN</span>?</strong></li>
<ol>
<li>] Not really. It&rsquo;s more like a centralised database where anyone can publish and download libraries, so you can use them locally for development and then upload them to a CDN if you want to.&nbsp;</li>
<li>] Oh, like Bower!</li>
<li>] -Yes, but it&rsquo;s 2016 now, no one uses Bower anymore.</li>
<li>] Oh, I see&hellip; so I need to download the libraries from npm then?</li>
<li>] Yes. So for instance, if you want to use React , you download the React module and import it in your code. You can do that for almost every popular JavaScript library.</li>
</ol>
<li><strong>] Oh, like <span style="background-color: #ffff00;">Angular!</span></strong></li>
<ol>
<li>]&nbsp;-Angular is so 2015. But yes. Angular would be there, alongside VueJS or RxJS and other cool 2016 libraries. Want to learn about those?</li>
</ol>
<li><strong>] React it is</strong></li>
<ol>
<li>]&nbsp;Let&rsquo;s stick with React, I&rsquo;m already learning too many things now.&nbsp;</li>
<li>] So, if I need to use React I fetch it from this npm and then use this Browserify thing?</li>
</ol>
<li><strong>] yes, you need a taskmanager</strong></li>
<ol>
<li>] That seems overly complicated to just grab a bunch of dependencies and tie them together.</li>
<li>] It is, that&rsquo;s why you use a task manager like Grunt or Gulp or Broccoli to automate running Browserify. Heck, you can even use Mimosa.</li>
</ol>
<li><strong>] task manager(s)</strong></li>
<ol>
<li>]&nbsp;&nbsp;But they are not cool anymore. We used them in like, 2015, then we used Makefiles, but now we wrap everything with Webpack.</li>
</ol>
<li><strong>] webpack</strong></li>
<ol>
<li>]&nbsp;-It&rsquo;s another module manager for the browser while being kind of a task runner as well. It&rsquo;s like a better version of Browserify.</li>
<li>]&nbsp;-Well, maybe not better, it&rsquo;s just more opinionated on how your dependencies should be tied. Webpack allows you to use different module managers, and not only CommonJS ones, so for instance native ES6 supported modules.</li>
</ol></ol>
<h2>[HOW-TO]</h2>
<ol>
<li>]</li>
</ol>
<h2>[REFERENCE]</h2>
<ol>
<li>] SRC = HN, 496 <a href="https://news.ycombinator.com/item?id=12634577" target="_blank">comments</a>&nbsp;(229)</li>
<li>] SRC = HN, 435&nbsp;<a href="https://news.ycombinator.com/item?id=12628921" target="_blank">comments</a>&nbsp;(182)</li>
</ol>
<div>
<h2>[RELATED]</h2>
<div><ol>
<li>[] # 5296 -&nbsp;<a href="/view/article?id=5296" target="_blank">SUMMARY-reflections-of-an-old-programmer</a>&nbsp;- ] by Ben Northrop, @bennorthrop.com - Northrop explores his experience in the programming feild to other professions and how the knowledge he has learned needs to be continually discarded and replaced with the "new and innovative" tools of the day,</li>
<li>[x] # 5025 -&nbsp;<a id="5025" href="/view/article?id=5025&amp;startpage=0" target="_blank">javascript-state-of-the-art-2016</a>&nbsp;- ] by Francois Ward @medium.com - Ward's personal picks for most pieces of a modern web application. Some choices are likely controversial and I will only give basic reasoning behind each choices.</li>
<li>[x] # 5298 -&nbsp;<a href="/view/article?id=5298" target="_blank">state-of-javascript-2016-survey</a>&nbsp;] by @stateofjs.com - survey of 9000+ developers on the javascript, broken down into language versions, tooling, api's, etc</li>
<li>[x] # 5388 - <a href="/view/article?id=5388" target="_blank">summary javascript 2016 (es-2016) - highlights / changes</a> - ] by adrian mejia @ adrianmejia.com - adrians lists the newest features in this version of JavaScript. Explains each feature and provides examples of usage of the new features in comparison to similar features in ES5.</li>
<li>[+=] # # - benefits of a boring tech stack</li>
<li>[x] # 1663 -&nbsp;<a href="/view/article?id=1663" target="_blank">BOOK -language-javascript</a>&nbsp;- &nbsp;my collection of javascript articles, notes, examples and more</li>
<li>[+=] # # - The 5 most important skills in web development</li>
<li>[+=] # # - getting started with javascript in 2014</li>
<li>[+=] # # -&nbsp; https://careerfoundry.com/en/blog/web-development/should-you-learn-javascript/</li>
<li>[x] # 5523 - <a href="/view/task?id=5523" target="_blank">our most popular javascript links of 2016</a> - by sospep, a collection of the most visited javascript articles on our website</li>
</ol></div>
</div>
<h1 style="text-align: center;">&nbsp;</h1>

~ view article ~ Chapter] ch-099-index FROM [ Book] language-javascript IN [ libraries] technology-developer-www