101 advice for frontend engineers
What languages, frameworks & tech do you need to succeed in Germany?
The following is an excerpt from a conversation between Ahmed, frontend engineer at Zalando.de and Johann, Founder & CEO of Imagine. This event was hosted by Egyptian Techies in Berlin & Imagine Foundation e.V.
Johann: Welcome Ahmed and great to have you here. Who are you, and what do you do?
Ahmed: Hi. I’m Ahmed and I’m a software engineer at a company here called Zalando. We’re working in fashion.
Johann: What are the skills required, skills, technologies, languages, tools to find and do a great job here in Germany?
Ahmed: Yeah, where can I start from? Right now the ecosystem for frontend is growing and evolving so fast…
My first advice for front end is learn how to write JavaScript, that’s it. Everyone knows, everyone thinks he knows how to write JavaScript, I still think that I know how to write JavaScript but… No one knows.
So the first advice is to deep dive into JavaScript itself. Don’t focus on CSS and HTML because we have a misconception in some non-European companies that front-end development is UI development, and these are two different things.
front-end development is not UI development. these are two different things.
UI development can be done by a designer. Experienced designers can do UI front-end development, but front-end development is kind of real development. You deal with building API’s, understanding RESTful API’s, understanding HTTP responses and stuff like this. It goes way beyond design and developing the UI.
Here’s a list of skills and stuff and the technical side that you guys need to master in order first to pass the interviews and in order to pass your first 6 months in your company and shine.
Johann: Go ahead!
Ahmed: So, Javascript is very, very important. If you are experienced in ES6, this is a big plus. Another thing in front-end development is critical path rendering. I believe most front-end developers know about it, but you have to be prepared for this, you have to be able to answer questions like one is blocking, which one is not, like CSS is blocking or not, Javascript files are blocking or not, these kinds of questions. Next: Basic or medium Node.js knowledge like for example, we need to deal with authentication as a front-end web developer, not as a back-end developer, and also package management and bundles, stuff like this. Like now we a lot of bundlers that help you to ship your application. You might need to learn at least one of them and understand your needs and which one fits in your needs.
Going further into the testing, any one of us can talk about testing for years, but please, yes exactly, please, please, please give a very careful and very much attention to testing, specifically unit and function testing.
Integration testing, end-to-end testing for front-end is super important. Things like Docker right now is a requirement for my company. As a front-end developer I have to use Docker. I have to ship my application into it.
Functional programming is also trending, if you know some functional programming this will help you. By functional programming, we mean simple functional programming, not really, really functional programming, Haskellor something like this. I’m trying to be brief here, but these are the things I personally touch in my daily work.
Reactive programming is a big big plus. If you know RX.js it’s very good. You can use RX.js with Angular, or even Node.js. Try to do pair programming a lot with your pairs because it’s required here in Germany to explain and express your ideas and to do pair programming with your colleagues. Maybe in your native language, in your home country, you can talk with your native language but you have to practice to talk with people who are from a different culture and try to ship and deliver the idea that you have to them through code or just through articulating your idea.
Next: Static code analysis. This is a thing I’ve never touched before I came to Germany and then I figured out that it’s super important and that it helped a lot in standardizing the way the team writes code. GraphQL is a plus, server-side rendering is a plus if you know about it and in the end, monitoring and communication skills. You have to focus on communication skills and maybe you can take another question regarding this. Try to practice on Codility for front-end development, for simple algorithms, stuff like this will also help you to reach the level of passing the interviews.
Johann: Any other tips on learning and growing? Resources online?
Ahmed: I have several tips. Whenever you have a problem and you want to understand something, try to read about it and then try to watch a video about it. Just exchange reading and watching videos towards one thing that you tried to learn gives you a different perspective of how do you learn it. So, if you’re a video person, try to read, if you’re a video person try to read. This was super helpful for me.
Also, try to look into open sources. Try to find any open sources that you can at least participate in by answering questions or updating read-me and something like this, and one by one you will evolve in this. The very important point here is to see some code from people, to see how other people think, to see how they solve the problem. Whatever the complexity of the problem, try to take your time, even if you take like a week to understand how one function goes and something like this. Insist to understand the input and output of this function, try to understand it correctly and try to provide a better report or proposal to improve this function to improve this function from a tiny speck perspective or a space perspective, whatever.
Johann: Nice, thank you! Next question: What if I have the basics of front-end engineering, doing some Angular 1, and now I’m choosing between newer technologies. How can I decide?”
Ahmed: It doesn’t matter which framework you are using but eventually you are going to choose one of them. If you feel that you are 100, and really, really 100 in JavaScript and you really want to look into a specific framework and continue in this framework…I would recommend first to go further in the JavaScript. Web API’s… Go to Mozilla and read the Web API’s. Go to some front-end challenges and then choose. If you want to choose, I would say between React and Angular, and I was in this decision…It depends, right? It depends what is the problem that you are trying to solve, what is your level of dealing with bootstrapping an application. React application is harder to bootstrap than Angular, this is what I’ve heard from people because of bundling and stuff like this…The Angular canvas was a predefined command line that you can bootstrap your application. I personally would vote for React right now. But this is very, very opinionated. This doesn’t mean that you should not go with Angular. But in general, please don’t focus on a specific platform, focus what is behind these platforms. At the end these platforms are JavaScript. Sorry, frameworks not platforms… Please work harder in the JavaScript side. I believe you, Leandro, can also add to this.
[Side comment from Leandro, an engineering manager]: Let me jump in as well. A word about front-end. I’m part of some decisions we have here at the company and it’s funny because maybe two weeks ago we were like defining the architecture of our web traveler front-end which is a new project that we are starting, and there was this fight between Vue and React. And they get to ask my opinion about it. My answer was exactly like your answer. Why are you focusing on the framework itself? What is behind that? What is the best practice and how are you going to breed this to the front-end? And I told them it doesn’t matter. You can do good things…Like, focus on design patterns. Although I would say most engineers didn’t want React, so it was not consistent. The decision that was done in the past somehow and now we have more engineers in the company and somehow the view was already in progress. Let’s see, for React you need to use another proof of concept and other things. The focus is not the framework.
Ahmed: Yeah, exactly. For example, just understand what is the virtual DOM. You try to understand and why some libraries sell the virtual DOM in their core and how can you as a developer use a virtual DOM in a very simple implementation to understand what’s going on. Something like this is helpful to decide which framework.
Don’t limit yourself to a certain framework because maybe a job requires to learn Angular and React. It’s a plus but I don’t recommend to focus on one platform or a specific platform.
Learn both, learn JavaScript and you will learn any other framework.
Johann: Thanks. Any final words of advice?
Ahmed: Believe in yourself. All of us failed in interviews. We failed in a lot of interviews but we made it at one interview. So don’t judge yourself based on one interview, just keep doing it.
Johann: Ahmed, thanks for your time and detailed advice. Thank you very much.
—
A special thanks to our partner Egyptian Techies in Berlin for their contributions to this article.
This post is part of a longer series. For more visit us here: https://medium.com/imagine-foundation
