One of the other areas of confusion is knowing that the JS object modules can exist both as a library and as a Framework. The difference being that with a library, you call the functions you want or need to get you web page or app you are building online and with a Framework you write modules that are called by the Framework and it handles everything for you.
The beauty of all this is that you don’t have to reinvent the wheel. The functions that you want to use are like Lego Blocks that you can use to build structures that are more complex. This speeds your development and lets you bring you webpage or app to market sooner.
However, you need to decide on whether you are going to use Frameworks or libraries and which one of the many, which are out there for you to use. Today, we will look at 3 of the popular libraries and 3 of the frameworks available and give you some highlights on what you can expect and a bit of code, you can use to access them.
Getting to the functions in JS
The easiest way of thinking about all of this is to consider those libraries as boxes holding different blocks that perform things for you. A Framework can be thought of in the same manner as it actually is a library of these types of functions that has a structure already in place so it is not only a container but as the skeleton as well, hence the name, framework. So, you can do the work yourself or plug your code into the Framework and let it do its thing.
A JS framework is actually a library that was classified as framework because it has full-stack capabilities and special properties that are not found in libraries.There are two basic things to do in order to call the functions from these JS repositories. We’ll use jQuery in our example, as it is one of the most popular ones for website animation and simple for the newbie to get their head around.
Your Dream Website Awaits!
1.Since this is a library, you want to do the follow to invoke them from your code. Add the source file between the Head Tags:
<head> <script src=”//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script> </head>
* Note we will be adding external links via CDN throughout this article in order to add the library to the HTML because it takes less storage space at your server and run much faster, if you wish you can also download the file from the author’s website and add it as a regular file to your JS folder.
2.Call the function you wish to use and here is how you go about it:
<body>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left: ‘250px’});
});
});
</script>
</body>
You see with a little cutting and pasting with a bit of a nip and a tuck you can call any of the functions from a library you desire.
We are now going to highlight the 6 most popular libraries/Frameworks for you. Remember a framework is a library even though it acts like a shell or skeleton where you pop in your code. It calls your code instead of you calling it. This is the opposite of what you may be used to in your previous programming. But, this gives JS some of its ability to be used in Rapid Prototyping of an app or a Webpage. The First Framework we will look at is EmberJS.
EmberJS – Framework
Open source, which means you, can see the inner workings of this Framework. You have a 3rd generation iteration in programming that takes the load off you as it handles a lot of the mundane bits for you.It is an MVVM (Model-View-View-Model) and before you complain that, it takes away your creativity. Remember it lets you have an already running environment to play in with all the things to get an App up, without you having to write it all for yourself.
Time is money and getting online fast without a lot of debugging is the name of the game.
Here are the instructions for installing EmberJS.
jQuery – Library
One of the most popular Libraries of functions out there and when over 10 million of the hottest websites use it you can see why you want to get a bit familiar with it. This suite of functions separates HTML from JS and that makes development more OO friendly and simplifies the coding and debugging process. If you want, animation that is easy to implement this is the library you should be using.
If you want to play with it right now here is some code to help you on your way:
<head><script src=”//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js”></script></head>
Angular – Framework
Another excellent Framework that is an OSFEWAF, (Open Source Front End Web App Framework). examples can be found at the Intel, NBC, and ABC News. It will give you single page Apps and uses both MVC (Model View Controller) and MVVM. Maintained by Google so you know you will have the support and a tested Framework for you web page development. Again, here is a class to get you up to speed. Angularwas created especially for developing large scale single page applications (SPAs), it has the ability to bind data to HTML using “expressions” and also to extend HTML attributes using “ng-directives” which saves developers a lot of time because a lot of code is being eliminated. The outcome is a clean, easy to read and to maintain code.
Along with above here is some code to help you get your feet wet.
<head><script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script></head>
ReactJS – Library
Created for use with Facebook it is made for creating an outstanding user experience in a UI. Top Down in nature it is intuitive and the logic flow is easy to follow. Walmart and Netflix use it extensively and you will too after you give it a test drive. It’s open Source and works with Android and iOS. So, it has applications in the Smartphone to/from Webpage and handheld arenas as well.
It is simple to use and here is some sample code to help you get started.
<head><script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script></head>
BackboneJS – Framework
This is what you might term “Framework Lite” that rides on top of jQuery and the Underscore JS Library (not talked about in today’s article) It adds addition functionality as it puts a framework over your existing libraries. It will also integrate nicely with CoffeScript but unlike the other two mentioned, it need not be present on your system to run.
Here again is some code to get you into the swing of things.
<head><script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js”></script><script type=”text/javascript” src=”https://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js”></script><script type=”text/javascript” src=”https://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js”></script></head>
D3.JS – Library
If you run a content oriented webpages, you will find this library of functions is tailor made for you. The concept here is that data drives your documents and it gives you the graphs, tables and the other bells and whistles that you can use to give presentations to your clients as well as put them online with your website. It handles a variety of document formats and creates the type of visualization of cold numbers in a graphical manner that is simple to grasp and much more interesting than lists of columns filled with statistics and numbers.
We have also provided you with the code to start using the library right away.
<head><script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js”</script></head>
Final Thoughts
You now have gotten a crash course on JS libraries and Frameworks. Both are libraries of functions and it is just Frameworks take more of a proactive role in doing most of the work for you and you just piggyback your app on top of it.You have 6 different ones that will expand your skill and repertoire of apps and web pages you can design and create. Each has its core uses for applications so, you may want to choose the one that best suits your current needs.
jQuery is an all around GP workhorse, it is probably the one you should start learning first, and then as you need specialized help you can turn to one of the others as needed. One size does not fit all and being flexible keeps you sharp and evolving in your art and career.
So, until next time, “Happy Scripting.”
