From 4e0ecc63c703cd21ada052af83843add1d96d343 Mon Sep 17 00:00:00 2001
From: Levi Olson Golang is incredibly powerful. Its standard library has so much to offer, but I think other languages have encouraged the
use of external libraries for even the most basic tasks. For example, with JavaScript, most inexperienced developers
seem to use jQuery to do simple tasks like selecting an element and replacing its contents. When you and I both know
jQuery is way overkill for such a task.
- See my article on Vanilla JS basics.Basic HTTP Routing in Golang
I believe that in order to be considered an expert in a language, you must at least be able to demonstrate using the core
language to achieve your goal. In our current case, HTTP routing. Now to be clear, I don't think you need to write everything
from scratch all the time, but you should have a firm grasp on what is available by the core language, and when you are
@@ -55,7 +56,7 @@
http.ResponseWriter
and a message to display. Our browser will now look like this when we visit the
/url
endpoint.
- +
Here is what
main.go
looks like at this point:
+ Warning: This article turned out to be a bit of rant. So if you are the type to get offended when I say negative things + about JavaScript, you are welcome to leave. +
+JavaScript is what I consider to be an "easy" language. Now what do I mean by that? Well, its usually the first + scripting language that new developers learn, and you can get started with very little "training". It + has a relatively simple syntax. It can be very powerful. So from my point of view, its an easy language to pick up. And + therein lies the problem.
+So many of the JavaScript programmers out there today hear the term "JavaScript" and think in there mind "jQuery". + Now that's great to have that kind of brand recognition if you are jQuery, but if you are looking to be an efficient + programmer that doesn't put holes in everything you make, you may want to consider that JavaScript is NOT jQuery.
+Additionally, we need to start thinking about the consequences of using third-party libraries for everything. Longer load + times, additional security risks, more memory consumption, and the list goes on.
+I want to give you at least a few little snippets of vanilla JavaScript that will get you on your way to not importing jQuery + on every project as a + step 1. It should be near the end of your steps and only as needed.
++ Disclaimer: Vanilla JavaScript will be longer (i.e. more verbose), but this isn't always a bad thing. Keep in mind that + we are eliminating the import of another package, and all the bloat that comes with it. +
+For starters, I'm assuming that you getting this far means that you at least have heard of JavaScript. If you have not heard + of jQuery, + leave now, I don't want "introducing someone to jQuery" to be what you get out of this.
+Let's begin...
+jQuery
+ $('#myID')
+
+Vanilla JavaScript
+ document.getElementById('myID')
+
+Again, note that vanilla JavaScript is longer, but its actually more descriptive of what is going on here. Unless you are + familiar with jQuery (yes, I know you are) the jQuery syntax doesn't tell you what its doing.
+jQuery
+ $('#myID').html('here is the replacement')
+
+Vanilla JavaScript
+ document.getElementById('myID').innerHTML('here is the replacement')
+
+Very similar eh. However, there is actually some performance gain by using vanilla JavaScript. See + here.
+jQuery
+ $('#myID').click(function() {
+ alert('Clicked it!')
+ })
+
+Vanilla JavaScript
+ document.getElementById('myID').addEventListener('click', function(e) {
+ alert('Clicked it!')
+ })
+
+So easy.
+jQuery
+ $('.item').hide()
+
+Vanilla JavaScript
+ var items = document.getElementsByClassName('.items')
+ for (var i = 0; i < items.length; i++) {
+ item[i].style.display = 'none'
+ }
+
+We're starting to see the verbosity I mentioned above, but again, remember that we aren't loading in a massive third-party + library!
+See Patrick Kunka's article + A Year Without jQuery +
+Patrick and I agree on many of the same points and his article articulates some helper functions that can be used to perform + more advanced loops, child selection and child indexing. I highly recommend you read through his article.
+If you find that your requirements heavily rely on JavaScript for DOM manipulation, or that you need animations such as the + ones provided by jQuery, then don't let me stop you. But if you only need some of what was covered above, or you want + to put a priority on performance, then you should really consider going with plain vanilla JavaScript and leave the dependencies + behind. You won't regret it.
\ No newline at end of file diff --git a/posts/vanilla-js-basics.json b/posts/vanilla-js-basics.json new file mode 100644 index 0000000..f14ae4f --- /dev/null +++ b/posts/vanilla-js-basics.json @@ -0,0 +1,9 @@ +{ + "title": "Vanilla JS Basics - Levi Olson", + "permalink": "/posts/vanilla-js-basics", + "created_at": "2018-05-09T11:52:50-06:00", + "created_at_short": "2018-05-09", + "post_title": "vanilla js basics", + "active": "posts", + "content_file": "vanilla-js-basics.html" +} \ No newline at end of file diff --git a/posts/vanilla-js-basics.md b/posts/vanilla-js-basics.md new file mode 100644 index 0000000..68b9de2 --- /dev/null +++ b/posts/vanilla-js-basics.md @@ -0,0 +1,84 @@ +# Vanilla JS Basics # + +_Warning: This article turned out to be a bit of rant. So if you are the type to get offended when I say negative things about JavaScript, you are welcome to leave._ + +JavaScript is what I consider to be an "easy" language. Now what do I mean by that? Well, its usually the first _scripting_ language that new developers learn, and you can get started with very little "training". It has a relatively simple syntax. It can be very powerful. So from my point of view, its an easy language to pick up. And therein lies the problem. + +So many of the JavaScript programmers out there today hear the term "JavaScript" and think in there mind "jQuery". Now that's great to have that kind of brand recognition if you are jQuery, but if you are looking to be an efficient programmer that doesn't put holes in everything you make, you may want to consider that JavaScript is NOT jQuery. + +Additionally, we need to start thinking about the consequences of using third-party libraries for everything. Longer load times, additional security risks, more memory consumption, and the list goes on. + +I want to give you at least a few little snippets of vanilla JavaScript that will get you on your way to not importing jQuery on every project as a _step 1_. It should be near the end of your steps and only as needed. + +_Disclaimer: Vanilla JavaScript will be longer (i.e. more verbose), but this isn't always a bad thing. Keep in mind that we are eliminating the import of another package, and all the bloat that comes with it._ + +## Assumptions ## + +For starters, I'm assuming that you getting this far means that you at least have heard of JavaScript. If you have not heard of jQuery, **leave now**, I don't want "introducing someone to jQuery" to be what you get out of this. + +Let's begin... + +### Selecting Element in the DOM ### + +jQuery + + $('#myID') + +Vanilla JavaScript + + document.getElementById('myID') + +Again, note that vanilla JavaScript is longer, but its actually more descriptive of what is going on here. Unless you are familiar with jQuery (yes, I know you are) the jQuery syntax doesn't tell you what its doing. + +### Replace Text/HTML in the DOM ### + +jQuery + + $('#myID').html('here is the replacement') + +Vanilla JavaScript + + document.getElementById('myID').innerHTML('here is the replacement') + +Very similar eh. However, there is actually some performance gain by using vanilla JavaScript. See [here](https://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml#answer-3563136). + +### Click Handling in the DOM ### + +jQuery + + $('#myID').click(function() { + alert('Clicked it!') + }) + +Vanilla JavaScript + + document.getElementById('myID').addEventListener('click', function(e) { + alert('Clicked it!') + }) + +So easy. + +### Advanced Queries and Iteration ### + +jQuery + + $('.item').hide() + +Vanilla JavaScript + + var items = document.getElementsByClassName('.items') + for (var i = 0; i < items.length; i++) { + item[i].style.display = 'none' + } + +We're starting to see the verbosity I mentioned above, but again, remember that we aren't loading in a massive third-party library! + +### Even More Advanced ### + +See Patrick Kunka's article [A Year Without jQuery](https://blog.wearecolony.com/a-year-without-jquery/) + +Patrick and I agree on many of the same points and his article articulates some helper functions that can be used to perform more advanced loops, child selection and child indexing. I highly recommend you read through his article. + +## Conclusion ## + +If you find that your requirements heavily rely on JavaScript for DOM manipulation, or that you need animations such as the ones provided by jQuery, then don't let me stop you. But if you only need some of what was covered above, or you want to put a priority on performance, then you should really consider going with plain vanilla JavaScript and leave the dependencies behind. You won't regret it. \ No newline at end of file