8 tips that will keep you sane while you’re trying to learn Frontend. (especially when switching from Backend)

Over the last 10 years or so I’ve been on various Backend Development roles, from pure hands-on roles to development manager.

I developed a platform for bank transactions, a platform for online support, a platform for TV show that should’ve supported millions of concurrent connections.

On each and every time, the developers that got the users’ attention were the Frontend developers.

Why you ask? for creating the awesome animation (which took about 3 minutes to develop) and the cool visual graph (which uses an open-source library, so almost no dev work there).

No glory for the developers that calculated, aggregated and assembled this graph’s data on the backend.

a frustrated Backend developer reads the CEO’s feedback

Moreover, I hated the fact that I can’t deliver end to end product because of lack of User Interface related knowledge.

So, I interviewed at Wix.com for a Frontend Engineer position, as it is one of the best FED schools out there. Fortunately, Wix is an awesome company that is looking for the best developers and managers out there, regardless their area of expertise.

The first 3 months were not easy to say the least.

I got a task to add a badge to one of our components. I gave the task an estimation of two days.

2 weeks later I began to understand how much I didn’t understand. When I added the badge on the component, the component’s text moved. When I moved the text back, the badge disappeared. I know, if you’re a web developer you can easily understand what happened here, but if you’re not, and especially if the component you’re working on have a cumbersome, legacy layout modeling, you’re in trouble.

Where did that title go????

So I gathered along the way some tips and insights that might be helpful for anyone who wishes to start working with Javascript (within a browser environment or not) and for backend developers that want to make a transition to Frontend in particular:

1. Do not start from React/Angular/whatever.js. These all are wonderful, but I do not recommend to start by learning them for 3 reasons: First, they are nothing like one another, each has it’s own designation and own methodology. Second, its masking a lot of the internals of javascript which may result in misuse. Third and IMO the most important, it’s not here to stay. The Frontend world is very dynamic and every couple of years there is a ‘new kid on the block’ that everyone runs to. Make sure you’ll be able to adjust by knowing the fundamentals.
2. Understand the event loop. here is a good reference. do not proceed until you fully understand it. I can’t empathise enough it’s importance. In general it’ll help you understand the asynchronous nature of the language, which is nothing like Java or similar multi-threaded environments.
3. The ‘this’ keyword is not exactly what you think it is. You can read more about it here. Make sure you understand why you have to ‘bind’ in order to use ‘this’ in another scope, and when you do, use arrow functions instead :)
4. class-based vs prototype-based. javascript differs from languages such as Java or C++ in the way that it has a prototype-based inheritance model. Each object has one link to another object (which is it’s prototype) and this object also has a prototype and so on until you get to the ‘null’ prototype which means that this is the end of the prototype-chain. read more about it, especially if you’re coming from a class-based language.
5. Use (and write) a lot of open-sourced libraries. the javascript open source community is very strong and every day there are hundreds of new open source libraries added which most probably you can find what you’re looking for there.
6. Beware of open-sourced libraries :) for the exact same reasons as I suggested on the bullet above, beware of them! most of it was written and not tested by developers who wanted to do some open-source project because they think its cool. That doesn't mean you want to rely on it for your production code. Use open-source, but use it wisely: a lot of Github stars, an honoured license etc.
7. Manage your dependencies wisely. you can use the latest versions of every package you install but, because of the very dynamic nature of the community, you’re builds are bound to break every now and then, or even worse, your code, due to non backward compatible changes. In order to keep your code up to date and avoid (or at least try) those cases use ‘minor’ latest automatic upgrades. When a major version comes up, go to it’s change-log and understand if you can or should upgrade.
8. CSS is hard - don’t be hard on yourself :) again, here, do not start from scss/sass/someothervariation-ss. Start from pure CSS, then try to work on the specificity (yes, its an actual word:)), then understand why margin is different than padding and then you’re a top notch layout builder. OK, almost :)

That’s it for now!

Feel free to follow, contact me for questions or just say hi :)

Twitter, Github, Facebook and Email .