article

How it feels to learn JavaScript in 2016

[WHAT]

1.  ] 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. 
2. 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.

[WHY]

1. ] provides a good listing of the latest/greates in the js world, along with brief descriptions
2. ] also talks about about history of development libs/tools etc that went before 

[WHERE]

1. ] READ THE FULL ARTICLE
1. ] https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.n4bhh1rht

[WHEN]

1. ] 2016-10-04 

[EXAMPLE]

1. ] article inspired by its-the-future - 
1. ] which is a "dev ops" version of this story 
2. ] This piece is just an opinion, and like any JavaScript framework, it shouldn’t be taken too seriously.
2. ] new web project,to be honest I haven’t coded much web in a few years and I’ve heard the landscape changed a bit. You are the most up-to date web dev around here right? 
1. ] The actual term is Front End engineer, but yeah, I’m the right guy. I do web in 2016. 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. 
3. ] 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. I was thinking maybe using jQuery to fetch and display the data?
1. ] Oh my god no, no one uses jQuery anymore. You should try learning React, it’s 2016.
4. ] whats react
1. ]-It’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. 
5. ] Can I use React to display data from the server?
1. ] -Yeah, but first you need to add React and React DOM as a library in your webpage.
2. ] -So one is the actual library and the second one is for manipulating the DOM, which now you can describe in JSX.
6. ] JSX? What is JSX?
1. ] -JSX is just a JavaScript syntax extension that looks pretty much like XML. It’s kind of another way to describe the DOM, think of it as a better HTML.
7. ] whats wrong with HTML?
1. ] -It’s 2016. No one codes HTML directly anymore.
8. ] Right. Anyway, if I add these two libraries then I can use React?
1. ] -Not quite. You need to add Babel, and then you are able to use React.
9. ] Babel 
1. ] Babel is a transpiler that allows you to target specific versions of JavaScript, while you code in any version of JavaScript. You don’t HAVE to include Babel to use ReactJS, but unless you do, you are stuck with using ES5, and let’s be real, it’s 2016, you should be coding in ES2016+ like the rest of the cool kids do.
10. ] Whats ES5, ES6 and ES2016+?
1. ] different versions of javascript standard(ecmascript), change in naming convention after ES6
2. ] which version to choose? ES5 is most widespread, has been around the longest, later versions have more language features but ...
3. ] -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.
11. ] huh ???,  
1. ] I’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’t I just do that?
2. ] It’s 2016 man, no one uses jQuery anymore, it ends up in a bunch of spaghetti code. Everyone knows that.
12. ] Right. 
1. ] So my alternative is to load three libraries to fetch data and display a HTML table.
2. ] -Well, you include those three libraries but bundle them up with a module manager to load only one file.
13. ] module manager - 
1. ] The definition depends on the environment, but in the web we usually mean anything that supports AMD or CommonJS modules. 
14. ] Riiight. And AMD and CommonJS are…?
1. ] 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.
15. ] browserify 
1. ] It’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. 
16. ] npm registry?
1. ] It’s a very big public repository where smart people put code and dependencies as modules.
17. ] Like a CDN?
1. ] Not really. It’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. 
2. ] Oh, like Bower!
3. ] -Yes, but it’s 2016 now, no one uses Bower anymore.
4. ] Oh, I see… so I need to download the libraries from npm then?
5. ] 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.
18. ] Oh, like Angular!
1. ] -Angular is so 2015. But yes. Angular would be there, alongside VueJS or RxJS and other cool 2016 libraries. Want to learn about those?
19. ] React it is
1. ] Let’s stick with React, I’m already learning too many things now. 
2. ] So, if I need to use React I fetch it from this npm and then use this Browserify thing?
20. ] yes, you need a taskmanager
1. ] That seems overly complicated to just grab a bunch of dependencies and tie them together.
2. ] It is, that’s why you use a task manager like Grunt or Gulp or Broccoli to automate running Browserify. Heck, you can even use Mimosa.
21. ] task manager(s)
1. ]  But they are not cool anymore. We used them in like, 2015, then we used Makefiles, but now we wrap everything with Webpack.
22. ] webpack
1. ] -It’s another module manager for the browser while being kind of a task runner as well. It’s like a better version of Browserify.
2. ] -Well, maybe not better, it’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.

[HOW-TO]

1. ]

[REFERENCE]

1. ] SRC = HN, 496 comments (229)
2. ] SRC = HN, 435 comments (182)

 

Details

ID: 5297

NAME: How-it-feels-to-learn-javascript-in-2016

DESCRIPTION: ] by Jose Aguinaga @hackernoon.com - Jose explores the state of whats current in the world of javascript development

AUTHOR: article.author/s

EDITOR: article.editor/s

PUBLISHER: article.publisher/s

STATUS: Write

PRIORITY: -5

OWNER ID: 75

photos

actions

Email Email-Owner SMS and