#100DaysOfCode - Day 27: Frameworks (?) & JS Tools!

#100DaysOfCode - Day 27: Frameworks (?) & JS Tools!

2 mins

Today, I’ve mostly just started looking into different ways that I can tweak and improve this blog.

For quite a while, I’ve been researching whether I should bite the bullet and implement a style theme such as Bootstrap (always 4.0+), which is actively maintained by open-source developers and Twitter, or something like Material (in AngularJS), which is ultimately a child product of Google (but not really controlled by them anymore). I’ve decided against VueJS, mostly because I use AngularJS fairly regularly (both very similar), and I don’t want to confuse myself with the conflicting syntax, but that’s another option that I’d probably love as well.

For some background on my perspective of JS frameworks, I don’t like dependencies, but I acknowledge that it’s not really a rational dislike at this point. Early on my development career, I worked at a shop that injected dependencies left and right, and ultimately had really slow applications due to the various types of jQuery it relied on… and a lot of bugs due to various versions of jQuery being lodaded. Well, realistically, that’s not what modern depedencies are like anymore, since we’re dealing mostly with single page apps that have the same dependencies across the board. Additionally, dependencies have actually be shown to make things FASTER more often than not, because they allow for the tooling to minify javascript and make it easier for browsers to interpret it.

Earlier today, I listened to a podcast by @WesBox and @STolinski about JavaScript tooling.

While they’re definitely big react guys, they also talked a lot about tools that make your job easier as developers.

  • Babel: transpile newer javascript to older javascript to support older browsers
  • Webpack: bundling various .js files into one file for quicker loading. This can partly be done by gulp, but it seems like this is the more standard way to do it in React?
  • Prettier: This plugin seems fantastic, because it enforces a unified styling across a project. For projects that have multiple contributors (e.g. my SecretSanta app), this is pretty important (I’m also curious if this can be used for non-JS files…)
  • ESLint: lint your code to find issues before you attempt to load them in the browser
  • Bablify: basically another version of gulp, but intergrated with BabelJS, which all web applications should be using anyways.
  • Prepack: JavaScript optimization on things that may not make sense to run the way they are coded, for the user. The example given for this is if a function is being called multiple times but always returns 4 (2*2), no matter the input, the code will change that function to a variable with 4 declared, when loaded by the user.

Tomorrow, I’ll be looking to implement some of these tools in one of my apps, so that I can make it easier to work with the code. Hopefully, one day, I’ll even branch out and decide on what sort of JS libraries to use for this blog :smiley:

Happy Coding!

@Moxnr

Written on November 18, 2020