Hi everyone, welcome to episode number 45 of the build podcast and today we'll be going through
Bauer which is a client-side javascript package manager. So let's first briefly look at some
of the associated websites. This is the Bauer main website, bauer.io and here you will come with
the basic instructions on how to install it or even install the packages and configurations.
A very short page for a young project but it is definitely very self-explanatory.
Next connected to Bauer, I also wanted to point out Bauer components or rather all the packages
that are listed under Bauer is this neat little website created by Cintasaurus and this also provides
us a very neat little user interface to do some searches on what are the packages available.
Just a few weeks ago after the Google IO talks were over, I also watched this video which I highly
recommend you to watch. It's by Dan Heberden. He also spoke about client-side package management
Bauer and he also used it with an AngularJS little application so do go and check this out.
And definitely this is his slides and I was very intrigued by this slide of his which is
basically saying that Yo-Man, Grunt, Bauer and RequireJS are sort of the tool set for the client
side application. So Yo-Man is basically the the generator or the scaffolding type of application
tool. Grunt is the build tool. The Bauer is the package manager and RequireJS is the module loader.
So very interesting thing. All are in heavy development and something very exciting going
on with each of these tools. So there are so many package managers. We have NPM, Bauer, Ender,
Volo, which one to use. So the way I see it is whenever I have some sort of server-side application
I use NPM in terms of package.json to kind of install all the modules and the Bauer is sort of
for the client side. I also highly recommend you to go through this article which is written by
Cody Lindley, another awesome JavaScript developer. And he spoke in this very detailed article both
about NPM and Bauer. And I would like to point out especially this paragraph on what Bauer is not
because I feel he pointed out exactly where NPM and Bauer both has their users. For example,
in NPM it uses this kind of common JS modular pattern to include the various NPM modules whereas
Bauer is a little bit agnostic or rather flexible. Later on you will see that Bauer we can also use
it for browser-specific modules. Alright, so with that little introduction let's get started with
Bauer. So let me come back to my command line and inside this project I only have one simple file
which is index.html. So next you will need NPM itself to install Bauer and it is good to install
Bauer globally. So we will go ahead and use this command NPM install dash G for global and then
Bauer. I already did that. So when I do Bauer dash-version I will get a reply back saying it is
0.9.2. Of course along with knowing the version the other command that I always like to use is the
help command. So Bauer help is definitely a very useful command and later on we'll be using a lot
of them. Alright, so just like any other package managers I find that the commands for any package
manager is pretty similar. So it should be very intuitive and easy to pick up Bauer for any of
us. So the very first thing we will do is to search for packages. So let's say Bauer search one of
the very common client-side frameworks that we tend to use is jQuery. So let's go ahead and search
for that. So there you go. It will basically list not only jQuery but also a lot of jQuery based
applications. Now this is hardly any useful because you have so much such a long list. So let's go
ahead and search for a specific one. How about this thing called form-styler? So in order to search
for form-styler under jQuery we will do Bauer search jQuery and then we will just grip it with
form-styler. And there you go. It will give us the answer and some information about it especially
its git repository. Now apart from search if you want to specifically know some information about
that package we can also do so and that's via Bauer info and let's just try a jQuery. And the
interesting thing is it will give us a long list of versions that are available which is very useful
whenever we want to install a package. So that was a little bit about searching and finding out
information about the available packages in the entire Bauer environment. Now what if we want to
install a jQuery. Now notice here once I come back to my text editor it's only index.html and I am
inside that folder in the command line. So let's install jQuery. So I'll do Bauer install a jQuery
and notice once this happens when we come back to the folder structure we will see that there'll be
this little folder called components and once we open up we will see jQuery and inside here there'll
be several files and there you go we will see jQuery.min.js or even jQuery.js for the development
version. And as usual if you want to uninstall it it's really easy we'll just do Bauer uninstall
and jQuery and when we go back to the folder structure we will see that the components folder
is completely empty. Now let's say we want a particular version of jQuery not the latest one
when we do Bauer install and the package name it will basically give us the latest one as you
observed here it was 2.0.1 and in jQuery info it was the latest one. What if we want to have the
1.10 version because you know in jQuery 2.0 they are not supporting the legacy browsers so let's
just settle for 1.10 because I want to support a legacy browser for this project. So in order to
do that it will be Bauer install jQuery very same but instead now we will append the version number
with a hash sign so I'll do 1.10. Great so there you go it will install 1.10 why don't we hook it up
with our HTML file so in order to do that we will do it inside the script tag of course and then the
source attribute and we will find it under the file jQuery.min.js let me just click it and yep it
is version 1.10 so why don't we refer to the path slash jQuery.min.js let's open this up in the
browser and why don't we just query jQuery yep it's coming up pretty fine and how about the version
and there you go it gives us 1.10 now this is where I see the power of Bauer traditionally what we
would do is probably go to the jQuery website or some kind of cdn website from google or cdnjs.com
and then download it to our local folder and then refer it that process probably took us a few minutes
but over here all we need to do is just some command line instructions and we can switch the
versions with the click of our finger. Great now this is all good but usually in a project we will
have more than one framework to kind of refer to and base our main project code upon and for this
it is probably better to have some kind of manifest file which the bauer will call in one shot
it will install all the frameworks that are needed so let's go ahead and create the manifest file
so right now if we want to create the manifest file let's start afresh so for this I'll just
delete away all the dependencies for this project and it's really easy all we need to do is just
delete this components folder so in order to do that we can just simply do rm-rf and then components
and there you go we will be back with our plain old html file so why don't we create a manifest
file and this will consist of a few packages and with just one command it will install all the
packages so in order to do that to initiate this manifest file we will simply do bauer and then
init and we can do a name of the project so maybe for this I'll just do example bauer version 0.0.1
and once you do that you'll notice this brand new file bauer.json will be created
and this is where we can add in the various dependencies in order to include the dependencies
we will extend the json format and then we will say dependencies and inside here let's include some
of them so the very first one was jquery and here we will include the version so for us let's say it
was 2.0.1 now the interesting thing about this dependency parameter is that we can define the
framework name on the left or rather as the key and then the value can be the three things so what
are the three things according to the bauer documentation we can see the three things can be
version package or folder as you saw here the version name is included why don't we include
another package and that is called moment and let me just do a little search about moments so bauer
search moment so there you go I do have a moment but let me get some info about it so bauer info
moment great so there are many versions of moment available but I'll just take the latest one which
is 2.0.0 so let me come back to the manifest file and I'll do this so notice here I have two frameworks
or rather dependencies that I need for my project so all you need is a bauer.json file and how do
we install these all we need to do is come back to our command line and then do bauer and install
so as you can see it has finished installing jquery as well as moment and now when we go back to our
project folder inside the components folder we'll find two folders which is jquery and moment and
yep of course if we open it up we will find the relevant files to refer into our javascript or
html now let's say during the development of the project we want to include one more dependency
and there is a shortcut to install it as well as include that one more line in bar.json in one
command so let's go ahead and try that so let me try to install prism.js which is a syntax highlighting
javascript framework so to do that we'll do bauer install prism and we will pass in a parameter
called dash dash save so this will do two things one it will definitely install the framework itself
and if you come back to the folder components prism will be there and next you will also see prism has
been automatically added to the bauer.json file so next time when you do bauer install it will
refer to this json file and take all the dependencies that are needed awesome so after the all the
javascript libraries are already installed why don't we go ahead and refer to it now notice here in
jquery we did not change the path but just with few commands we have easily changed the version
number and and now when we go back to our little project and we query the jquery version yep it is
2.0.1 and if we query where the moment is available it is obviously not available because
although we have downloaded it we did not refer to it so for a moment it will be components dash
moment moment dot min dot js awesome why don't we try to use moment a little bit so let's try to
use this one which is really easy basically it will format the date for us so after requiring all
the dependencies we will open up another brand new script tag and inside here i'll simply call moment
i obviously need to enclose it within console lock statement so that it comes up in the console
and there you go it will say two years so using this form of installing various packages becomes
really easy for us to change the versions and test out because it is just so modular right so why
don't we start over once again so i am going to delete the folder and of course you will see that
we cannot refer to the files anymore and in our project folder the components folder is completely
gone this time we will initiate a bower config file to initiate a got bower config file we need to
create a new file and call it bower rc and the rc file basically is another json file one of the
parameters is called directory now by default it was called components let's say we wanted for this
project to be called as libs or libraries it is possible and you can also define the json file
name for us it can be bower dot json as we have already created or it can be even a name of your
choice of course be sure to check out other several options that are available as part of bower rc
right so once we have these three files now we have bower rc which is the config file
bower json which basically states what are the dependencies which are particular for this project
and lastly is the index rhtml now once we have that all we need to do is bower and install great so
looks like all the three files or frameworks are already installed but this time notice that the
folder name is libs just as we defined it in the bower rc file and when we open it these are the
three files of course be sure to change them when we go to the index rhtml so i'll go ahead and change
them to libs and of course when we go back to our project the moment js is working lastly we will use
bower with required js which is a amd javascript loader now if you have a lot of libraries to be
loaded script tags are definitely not one of the most performance enhancing so amd loader such as
required js comes in really handy now the other day i was reading through another open book by adios
mani writing modular javascript with amd common js and es harmony i highly recommend you to check
this out because as our complex applications grow we will definitely use some sort of modular javascript
to kind of make it more efficient and loosely coupled great so instead of having so many script
tags we will just have one script tag so the script tag for require js will firstly refer to
require js library itself and it will have a data main attribute which will refer to the projects
main.js right so for the source i will just go to cdngs one of my favorite cds to use so let's
find require js so there you go this is the one and i'll use a cdn copy and inside data main
attribute i'll just include main it will automatically read it as main.js so why don't we go ahead and
create that files a new file main.js now inside main.js will do two things firstly we will define
the configurations or rather the dependencies of each of the modules and then we will require each
of the modules and make them do some functions and inside here we will include some parts as you
notice the first one is jquery jquery slash jquery dot min now we do not need to include the dot js
similarly we will also include a moment js next we will require them first so firstly we need to
define all the dependencies so the very first one is jquery and then the next one is moment and the
second parameter is actually a function and this function will pass in the modules and i will
basically use moment now notice here this becomes a lot more efficient because number one you have
only one script tag and number two you only need to come back to these paths to define where are
the exact javascript files and they're all being maintained by the bower great so now when we come
back and we refresh the project well nothing has seemed to change but we are obviously using require
js to do our modular javascript file loading now lastly before we end sometimes we need certain
files or packages only in our development environment so let me give you one example
so i often use heads up grid especially in development environment because i want this sort
of grid to be defined as i'm coding up the client side application so why don't we go ahead and
search for this so you see no results are found at this point how do you include packages that
are not listed in the bower so for this we will go to the git repository and we will grab the
git url so make sure you choose git and then we will copy this url come back to bower.json and
this time we will include it in a different parameter called dev dependencies and we can
similarly give it a name called hue grid and instead of the version number here we can actually
include the git repository right so why don't we do a fresh install i'll just remove the components
and i'll do bower install so notice here after it has installed everything when we go back it is under
libs folder as defined in bower rc file and it will install all the relevant packages needed
including the ones in our development environment so now let's go to our main.js and put in the
relevant hue grid code so i'll just put in a very simple code as defined here all right so it says
main.js make hue grid is not defined so where did we go wrong obviously we did not include it in the
config so why don't we go ahead and include it so here you go hue grid and of course here we will
also have to identify the module which is hue grid and as the function parameter as well and of
course we will also need the css now this is also one of the main things about bower is that we can
also refer to css files just like this so it will be very similar libs slash something like this so
once again if you notice from the json file we had about four packages and one of them are specifically
for the development environment and in our script tag we referred to one file called main.js and we
loaded up all the modules via the requirejs amd method and we even referred to a dot css file
and there you go hue grid is available and if you on it the grid lines are available
and this is only for the development environment let's check out some other resources that i found
very helpful in understanding not only what our package manages in general but of course about
bower so here's one package management for the browser with bower the next one is an important
article i feel it's the state of package management in the javascript environment here the author goes
and compares not only what are the available package managers but also why and how to use them so npm
bower ender volocomponent jam wow they're really a lot so this article is really good to understand
that the different technologies behind each of them and next is of course yo man which is heavily
coupled with bower as the package manager i recommend you to also use yo man if you want to
sort of scoff old or generate some stuff and lastly there is by Ben Schwartz this is a very neat
sublime text package and you can basically so let me just show you very quickly what it does so
you can come here and shift command p and you can go to bower and you can install package from here
so why don't we try one so there you go all the packages to install will come up here so let me
just try for the sake of fun let me just try this agility so there you go it will say downloading
agility and you will also eventually have it as a folder right here and guess what very nicely
it will automatically include it in the dot json file which is basically same as including dash
dash save in our command so pretty neat tool do check it out and finally for the build link
of the episode it goes to up to date dot front end rescue dot org i found this website really fun
to read and also to learn on how to pick up technologies that are so useful not only on
technology they also talk about cool people some of the amazing people from whom we can learn from
so do go ahead and give this website a brush through tons of links tons of inspiration and
definitely a big nudge for all of us to go there and create something so have fun and hope bower
makes you more organized in the client side of projects so that's it for this week's episode
of bower client side package manager for all other episodes of bill podcast you can visit
build dash podcast dot com and subscribe via one of the five channels rss github itunes
video and youtube and get your weekly content and i'll see you next week goodbye
