My first week as a part of a professional development team is definitely an eye-opener. I was overwhelmed, in a good way, by all the tools used that give efficiency and quality to programming.
GitHub
First, let's talk about GitHub. I used GitHub before, or so I thought. Just a week ago, I thought downloading the GitHub client and clicking some buttons is all I needed to do. Now, I realize how useless the GitHub client really is when I have the awesome git (command line, not GitHub) installed. Here's a list of useful git commands I learned so far:
git clone your-clone-url
This command will create a local repository from the remote repository described by the URL (the URL can be found on the GitHub repository page, it's on the right side under the title "HTTPS clone URL". Make sure you get the one for HTTPS.
git checkout your-branch-name
This command switches your local active branch to the branch that you specify. If you never pulled the branch that you specified, it will get pulled before switching to that branch.
git checkout -b your-branch-name
Adding the -b flag creates a new branch and makes it your active branch. In this case, the branch name specified can be anything. The new branch will have the same files as whatever previous branch you were on.
git pull
This command updates your local branch with the remote branch to include any commits that you missed. You keep changes that you make though, if they don't conflict with the changes from the commits on the remote branch.
git branch
This command lists all your local branches.
git branch -r
Adding the -r flag lists all your remote branches.
git branch -a
Adding the -a flag lists all your local and remote branches.
git branch your-branch-name
If you specify a branch name, that branch will get created, but you will not checkout that branch.
git branch -d your-branch-name
Adding the -d flag will delete the branch that you specify.
git branch -dr your-branch-name
Adding the -r flag with the -d flag will also delete your remote branch.
git add your-directory
This command will include all the changes to existing files and new files to your next commit. It will ignore file deletions. I usually just use . for directory to indicate that I want to include changes in all files.
git add -u
This command will include file deletions to your next commit.
git add -A
This command combines the previous two, so that you will include file changes, new files, and file deletions in your next commit.
git commit -m "your-commit-description"
This command will commit all changes you've included via git add, with a commit description.
git push
This command pushes your local commits to the remote branch.
That's it for git commands that I learned.
JIRA
The next thing I got introduced to is JIRA. So far from my understanding, JIRA is an issue tracking system with support for Agile development. Since it's my first week, I was assigned some simple JIRA tickets that usually involves an easy-to-squash bug. Basically, I had to begin my progress on these tickets by literally dragging them with my mouse, log my hours spent on them, and drag them again to indicate that they have been solved and await for deployment and QA. I was also fortunate enough to be given the chance to create a ticket. For that, I had to choose the severity of the issue, estimate the duration needed to solve the issue, and provide a description of the issue (among other minuscule things).
AngularJS
Now let's talk about the real deal: AngularJS. In my opinion, learning a new language isn't so hard, since they are mostly based on familiar concepts. Learning a clever framework, however, is not as easy. AngularJS is a JavaScript MVC framework developed by the pros at Google. MVC on the front-end is definitely a new concept to me, and I found it to be very exciting. In contrast to the very-popular jQuery, which adds content dynamically to a web application, AngularJS prefers to have all the template of the web application available at the very start and fills the template dynamically while the application runs. One probably can't tell what a jQuery application does just by reading its markup (ignoring comments), but one should definitely have an idea of what an AngularJS application does by reading its template views.
In case you didn't know, MVC stands for model-view-controller. Its concept is to separate structure (model), markup (view) and application logic (controller). In AngularJS, the presence of model is weak because one can add properties dynamically to a JavaScript object. Therefore, in most cases, dynamic JavaScript objects make up the model component. Views are HTML-like markups that act as template with bindings to data which can be dynamically updated (a little more on that in the next paragraph). Controllers are what truly drives the application. They are the necromancers that animate the view templates. Controllers define models, assign models with values, consume back-end services, define behaviour for that cool button, and much more. After all, application logic is a broad term.
Much of what AngularJS does seems like magic to me (maybe I will see through their tricks after a few weeks). By surrounding expressions in double curly brackets or by assigning expressions as strings to directives, the expressions can be interpreted by AngularJS during its compilation process and markup will be outputted with your expressions evaluated. To make things crazier, data binding allows the expression to be re-evaluated if something changes and the markup will be updated.
If you don't know what a directive is, then you are probably slightly puzzled by the last paragraph. Well... to be honest, I don't know what exactly it is yet either. So far, it seems to me that they are used to assign certain properties to a view element, but the properties that you can assign seem so diverse and I am still very confused. I'll fill the gap after I master this concept.
Yeoman, Bower, Grunt
Yeoman (yo), Bower and Grunt are all modules that run on the infamous node.js. They are development tools that make life easy for JavaScript developers. yo is a scaffolding tool that can automatically generate files for your project with generators. Say you are sick of having to create 10 controllers manually. You can do it with yo by, perhaps, simply specifying the controller name. Of course, it is configurable so you can create your own generators for your projects.
Bower is a dependency management tool. You can list all your project dependencies in its config file (generated for you by yo) and you will be able to fetch and/or update dependencies with a simple bower install. It downloads and/or updates dependencies for you via git.
Grunt is my favourite of the trio. It allows you to run a development server, automatically build your project with minification and uglification, automatically update the build and your pages when you edit files while the server is running, and so much more. It supports plugins so the possibilities are truly without limit!
The end
Phew. I just realized after writing this that I've learned so much during my first week! I can't wait to discover what new intellectual treasures await me in my second week!
