How Not To Boil The Ocean- Javascript and Friends


Here is where we get into the real challenge of learning how Not To Boil The Ocean. After reading this post it might be a challenge not to go out and “meet” all of Javascript’s friends at the library, but hold up, there is a solution. Attend a Hackathon and see how a mentor “teaches” you about these friends in real time.

I love Javascript! It has gotten me very far in my self taught career and I have a deep, real passion for what it does. Once I learnt what all newbies do, Java and Javascript are not the same thing  I realized that I wouldn’t be creating any Android Apps anytime soon as the SDK used Java. “Must Not Attempt The Crazy” Instead, I decided to devote my friendship to Javascript and it’s libraries and frameworks. I attempted the impossible, failed and boiled it down to what follows.

Javascript Libraries and Frameworks -Say Hello To My Lil’ Fren.


Libraries are not the same as Frameworks but often people use them interchangeably. No worries, here’s what to keep in mind. A Library is where you can “check out” blocks of code, mostly functions and use them on your site. A Framework is a more restrictive group of software libraries that are very strict in their rules and also cut hard coding time drastically.
These are very basic descriptions and for more advanced programmers may seem too simplified. However, this description will make it super easy to understand the basic differences when you are making a choice of what Javascript “friend type” you want to call on.

Javascript + node.js for server side stuff.

node.js, is used to build things outside of the browser. node.js, REACT, Meteor and Rendr are all considered Javascript Libraries. These are libraries you should get to know well if you are considering adding some skills on the server side to your stack.

Javascript + jQuery/jQuery UI for interactivity, browser related issues.

jQuery is a library and jQuery UI is a more specific library to optimize user interface (UI) using widgets, animation and other cool features. Self disclosure, jQuery was explained to me first as it related to the DOM and at the time I thought it made complete sense. Since I don’t use it in my day to day programming, yet, it has started to confuse me, simply due to muscle memory. I keep forgetting when I should use it and why, which is not the way I code. Moving along, when I did make use of jQuery, it is the fastest type of” DRY “programming on the planet. jQuery also comes with a ton of new plugins, (don’t go down that rabbit hole…yet).

Javascript + ajax for interactivity “calls” to the server

Ajax is neither a library or framework per se, but really a friend with benefits to Javascript. Ajax is important to know when you are doing server side programming and when you are ready for that to become part of your stack.

Javascript +Bootstrap+(must have jQuery to use templates) for saving time

Bootstrap is a framework that saves a ton of time and works beautifully to build responsive websites. It works exceptionally well with CSS stylesheets for maximum uniqueness and it is part of the Mobile First family. I have heard and read that Bootstrap is not as customizable as it seems and sites tend to look the same. It seems that as a framework, it doesn’t follow a best practices approach with regards to clean coding. Think of Bootstrap as fast food for your site, not good for you but looks yummy. I used Bootstrap for a MadLib’s-esque application I built at a Hackathon.

Javascript + Backbone for MVC

Backbone is a library that literally provides a backbone for your MVC (Model View Controller) programming design. It is used mostly for single page web applications. If combined with Underscore.js and jQuery it provides access to a full library of creative helpers. Think of Backbone as Javascript’s friend who tries on all the cute size 0 clothing.

Javascript + Angular for extended HTML for dynamic web applications

Angular is a library that extends HTML. I adore angular and am aware that I can’t use it for everything I create but wish I could. I think of Angular as HTML all grown up. Angular is mostly ideal to turn static HTML pages into single page web applications. I created a Cats-o-Gram App with Angular at a GDI Workshop and it was super easy! Think of Angular as the friend that convinced Javascript to get hair extensions and Javascript looked gorgeous!

Javascript + Ember for an all inclusive MVC experience

Ember is a framework whose most attractive feature is it’s mashup of MVC. Ember even comes with it’s own data sets. I have not used Ember in any of my projects, yet, but from what I can see it looks like it is a great tool to add to your stack when you want to get coding tasks done quickly in both the browser and the server, and still maintain peak performance UI. Think of Ember as the friend of Javascript that has the itinerary all planned out and brought extra lip gloss in several shades.

Javascript + Coffeescript for using the best features of Javascript

Coffeescript is neither a library or a framework. It is used mostly by Rails and node.js. programmers. In this brief instance, thing of Coffeescript as the friend to Javascript that tells Javascript it’s wearing too many accessories.

Javascript + D3 for

D3 is a library that is pretty freakin fantastic. I look at D3 as the friend who takes all the clothes (data) in Javascript’s closet, and makes pretty outfits (interactive data visualizations) with them. I recently had a talk with a graphic artist turned developer who used SVG (Scalable Vector Graphics) to animate a feature on a huge corporate website. It looked super cool! He said it took him very little time after another developer told him it couldn’t be done and to just use a gif.

I know that I have simply gleaned the surface here discussing Javascript’s friends and I will discuss each individual environment in later series,and as I use them in my work,  but this is a really great comparison of some ways to expand on your stack without learning hugely new concepts. I had the fantastic opportunity to be introduced to Bootstrap, and D3 during Hackathon’s. THAT is how easy Javascript’s friend are.

I would love to hear your experience with Javascript’s friends in the comments. And if you know what Front End Web Developers should look out for in 2016, shout it out! Stay tuned for next in the series ‘How Not To Boil The Ocean -SQL(mySQL)/noSQL.

Resources:

The Best Javascript Frameworks and Libraries 2015
What Is Bootstrap via Stack Overflow
To Use Or Not To Use Bootstrap
20 Things I Learned About Browsers
Top Notch jQuery Plugins To Use In 2015
w3schools Ajax
Girl Develop It Angular Workshop
Angular.js VS Backbone.js VS Ember.js 
Why Ember?
The Absolute Beginners Guide To Coffeescript 
Why Build Data Visualizations With D3.js 

Leave a comment

Your email address will not be published. Required fields are marked *