First Days as A Developer: Nice to Meet You Backbone!

It has been already more than three weeks since I started working as a front-end developer. So, I decided to share some of my initial experience. The topic of this article might be helpful to many of you who are starting to work with real-life applications which are often quite big. To quickly understand such applications and their code is a skill every developer must master. In particular, this post will focus on how to understand large projects written in the Backbone JavaScript library.

This was precisely what I had to do when I started my new job. One of my first tasks was to work with a complex JavaScript application. This meant that it already had a particular code structure that must be respected by anyone who would want to modify it.

What made it even more challenging was the fact that this application was written in the JavaScript Backbone library with which I had no previous experience.

What to do in order to understand the application’s architecture in a way that will enable me to properly modify it? 

1. What is MVC?

When I googled what the Backbone is, I learned that it is a library for structuring JavaScript code which is based on the so-called Model, Controller, View (MVC) pattern. MVC is an architecture model for implementing user interfaces. It separates the application into three kinds of components – model (M), view (V) and controller (C). The idea is to promote a separation of concerns which should result in better structured and more maintainable applications. 

MVC Pattern

There are many other JavaScript libraries and frameworks that implement MVC pattern, for example: Ember, Angular, and React (to some degree). None of these frameworks are better or worse than the others, each is just designed for the different purpose.

2. What is Backbone?

When I learned that the application, I will be working on, is built with Backbone library, I thought that it can't be that difficult to understand it. Since I already knew how to build applications in React, I was pretty sure that this knowledge will help me to grasp the Backbone logic as well.

‘They’re all based on MVC pattern anyway, right?!’

‘...or not?!’

The truth is that React isn’t a classic MVC since it is considered only as V in MVC. Moreover, Backbone is neither an example of classic MVC. Although it provides the concept of models and views, its views are more like controllers (more on that later). 

So, there is no clear separation between models, views and controllers in Backbone.

I learned the difference between Backbone and React myself. If you compare the code structure of applications built in these two libraries, you will find out that it is pretty different. Nevertheless, they still have a lot in common. They are both great for building single page applications (SPA) which aim is to provide a rich user experience similar to desktop applications. In these applications, all the necessary code (HTML, CSS and JavaScript) is retrieved with a single page load.

Backbone has five components: events, models, collections, views and routers. However, to understand the Backbone logic, it is important to get to know the relationship between models and views.

Backbone modified MVC pattern (source: http://backbonejs.org/)

Models are containers for application data that can also send AJAX requests to the server to synchronize the data on the client with the server. On the other hand, views are responsible for rendering the models and listening to any events raised by the DOM or events raised by the model. Collection is just an ordered set of models.

When you open a typical Backbone application in your text editor or IDE, the folders will at least be named as models, views and collections. If your Backbone application contains dozens of files (as in my case), you might feel a little intimidated. Believe me, that is only the initial and wrong feeling.

The file names will often help you to understand the application's structure. You can tell from the names what a particular model or view actually do. You will also need to dive deep into the code to be able to understand it and work with it. Try to change a thing or two and refresh the browser to see how the changes affected the functionality. With this approach, you will eventually understand the basic logic of the application quite fast.

When you understand the basic logic of the application, you will be ready to actually produce a code on your own which will fit into the application's structure.

Programming Job Acquired: Mission Accomplished

So it is finally here:

This week, I am officially unemployed. Next week, I will be working as a front-end developer, finally! pic.twitter.com/FEyjmB55ae

— Coding Lawyer (@coding_lawyer) August 10, 2016

Monday was the last day in my legal job. Starting next Monday, I will be working as a front-end developer at medium-sized company. So, I think that this is the perfect time for me to reflect on my coding journey whose first scenario, which lasts from the beginning until this week, is coming to an end. However, at the same time, the second one is ready to begin.

In this post, I will share with you my 'coding journey in a nutshell' and interesting insights that I gained along the way.

My coding journey began on

26th November 2015

On this particular day, I bought my first programming online course on Udemy. Back then, my programming knowledge was equal to zero (triple equal to be precise). I was at the beginning of my journey. I had no idea that this decision will have such a huge impact on my future career.

Long story short, I got my first programming job on June this year. So, it took me seven months to learn how to code from scratch. However, I needed to wait two more months until the statutory notice period expires.

Coding Journey Part 1: Overview

At the beginning of my coding journey, I had no idea that I will be a professional programmer one day. I did not even know I was a type of a guy that can do that kind of job in the first place. My major concern was that I had no formal computer science education whatsoever. I was not even a fan of exact sciences at high school.

From my own experience, a lack of formal computer science education is the main reason why so many people are discouraged from trying to pursue a programming career. There is deeply rooted belief, that you need some kind of computer science education to be able to get a job as a programmer.

Of course, I thought this might be a hurdle for me too. However, the more I coded, learnt about coding and about other people’s experience, my state of mind began to change. I started to play with an idea that programming can be something more than just a hobby for me. I really enjoyed the creative process whose outcome is a fully functioning application made from scratch, which even do something useful.

I was literally consumed by it

At that time, I have been reading so many posts from people who switched to the programming career in a year. Well, that is a lot of time, you might say. But if you think about it, it is actually a pretty short period of time. If you are able to learn new skill from scratch and find a job in a year, well that is just awesome. Keep it mind, that people study many years to get a promising job.

I myself was able to get a job in seven months. The length of the period before you are able to get a job can be affected by many factors. You must choose your resources wisely. I already wrote two posts about JavaScript materials in general and React materials in particular. You must think about the way you learn all the time, since it is the main thing that makes a huge difference to your progress.


Turning-point No. 1: Feedback

There are so many other factors that affect your overall progress (motivation, regularity, spare time etc.). Some of them are more important than others. It is really useful to code regularly every day, as I wrote earlier. In my opinion, the most important is the one that is not fully under your control. It is feedback (check out my older post on this topic).

If you are not able to get any feedback, your progress will be much slower

When you are learning to code, it is not that difficult to get at least some. If you do not know any programmer personally, you still have whole internet overflowing with communities of people willing give you feedback for free. You can always find somebody who will tell you what is wrong or right with your code.

Of course, you can learn A LOT from your self-studies without anyone’s help. Nevertheless, you will eventually get to the point at which it will become more and more challenging for you to move forward effectively without any feedback. Your progress will be much smoother if you have a mentor who will tell you what is wrong with your code or how you should structure it better. There are so many issues that must be considered when writing proper code:

• Is this really the best way how to write a particular code feature?
• Should you use promise or callback in a given case?
• Is jQuery a perfect library for this project?
• What about React and Angular libraries, will not they be a better choice for this app?
• What coding design pattern should you use?

Without any mentorship whatsoever, you will be forced to not only answer these questions yourself, but to figure out that you need to ask them in the first place. Of course you can do this on your own, but you will need to read a lot of other people’s code and articles to be able to do that. Moreover, it will certainly take a significant amount of your precious time.

I myself was able to get some feedback on my coding projects I built from my friends as well as from an online community.


Turning-point No. 2: Real-life Projects

However, getting some feedback will not be the only crucial point you will experience on your coding journey. At least, this was my case. As I was gaining experience, I started to feel that by working only on my own small applications, I was not able to tackle more complex coding issues and concepts. For example, you can take a look at my JavaScript calculator (guide). I am proud of it. However, it is a relatively small application. I started to feel that I need to work on some larger real-life projects to be able to make significant progress.

In my opinion, this is the right time to start looking for a job

However, when I started applying for the front-end developer positions, I was not in this phase yet. I wanted to wait at least a month to learn more about various JavaScript libraries and frameworks. I still needed a little more time.

The reason why I actually applied for a job at that time was pure coincidence. On May this year, I visited startup job fair in Prague (Czech Republic). After talking to the people from different companies, I was invited to several interviews. I told myself, that I had nothing to lose. If I will not get any job, I will at least have a better knowledge about employers' job requirements.

However, it worked out well and I got a job as a front-end developer

Coding Journey Part 2: New Beginning

Today, two months later, a couple of days before the first day in my new job, I can say that I find myself in the exact position I mentioned above, which is the right one to start looking for a job.

I am now even more confident that my decision was the right one and I am really looking forward to my new job

WebDevRes #0

As already mentioned, I will be regularly posting the most interesting resources (articles, blog posts, podcasts, tweets…), I encounter, that are somehow related to programming. These posts are called WebDevRes which stands for Web Development Resources and you're just reading the first post of this series - History in the making!

As you can see, the first "issue" begins with 0 and not with 1. Do you know why?

Yep, you’re right, WebDevRes Weekly is a kind of an array of interesting links, and array index, as we all know, begins with 0!

Ok, (stupid) jokes aside and let’s get real.

Here are the top five links to interesting programming resources, I recently read or heard. Enjoy!

---

---

Article

How to write Medium stories people will actually read

The author describes how to convince other people to read your article on Medium.com. However, many of the rules can be applied to any of your internet posts as well. The post also contains links to the articles analyzing what words you should use in your headline to get more readers. You will also learn how you should write your posts and that you shouldn’t be scared to show your credibility to your readers.

---

---

Podcast

Code Newbie Ep. 19 - The Hard Way

This is a great interview with Zed Shaw, author of the Learn the Hard Way series. What I personally like about him is his different approach to the code learning since he puts strong emphasis on the memorization. He claims that you need to memorize syntax of the programming language before you can jump into your first coding project.

---

---

Blog Post

Leveling up your JavaScript

This is a story about an aspiring web developer, who talks about his programming journey. The interesting part of the post is when he describes challenges he faced, when moving from a beginner to an advanced programmer. I bet that everybody undergoes such troubles when going through this particular period since you don’t know what you don’t know. The easiest way, how to move on, is to learn from other’s experience. You should therefore read this article!

---

---

Article

Angular versus React: Which One Will Reign Supreme?

The article describes differences between the two most popular JS frameworks - Angular and React. The author talks about the advantages as well as of disadvantages of each framework. Since many of the web developers need to use at least one of them, it is good to understand the differences between them.

---

---

Article

Atom treasures a list of Atom plugins I can’t live without

If you’re using Atom text editor, this article is for you. If you don’t use it, you should at least give it a try J. This post is full of great packages which will enhance your productivity. Try the power mode package at least!

---

---