How to define Frontend? Is it just arranging elements on the web page or in the app and maintaining their appearance? Maybe it’s improving the user experience and optimization, or maybe it’s a set of functionalities and logic that allows the user to perform complex operations?
In most cases, the answer will be “All of the above“. Today I want to talk about my career path in Frontend – a journey that began with a simple but significant “arrangement of elements”.
Before you become a Junior
Being a Junior front-end developer is not easy. Finding your first job can be quite a challenge, filled with doubts about yourself and the career path you have chosen. Besides, today even Juniors are expected to have at least basic knowledge about the framework or the JS libraries, which we cannot always offer.
However, as long as you want to expand your knowledge and diversify your portfolio, there is nothing to fear, because these are the small steps that will allow you to stand out from a large number of candidates and become noticeable on the job market. My case was similar: although I knew Vanilla JS at most, I stood out thanks to other skills, which made me a UI developer, unknowingly heading towards the Angular framework.
Who is a UI developer?
UI developer is a term representing a frontend developer who only creates User Interface. Such a person is responsible for the appearance of a website or an app, its responsiveness, and the general user perception. Logic (in the form of Javascript or Typescript) is mostly left to Angular developers.
Such a UI dev mainly uses CSS, HTML, and UI libraries that are appropriate for a given framework or library. Although it seems trivial and simple, it can be challenging at times, because the job does not end with the writing styles and tags. The Optimization, sense of style, colors, and knowledge of popular UI / UX solutions and which of them to avoid also have a significant meaning. Moreover, it is crucial to mention accessibility and SEO.
The UI developer should know the UI libraries intended for Angular,e.g. Angular Material or PrimeNG, should be familiar with the included components, and know exactly when and how to use them properly. Larger UI components and even features, where the *.ts file will mostly remain untouched, are created from such small blocks.
From beginner to Angular developer
Even though I had experience in Javascript, most of my work consisted of creating UI in web and mobile apps based on Angular. This required learning Angular basis, as well as Angular Material, and understanding the rules behind Material Design.
Even though I deliberately did not learn Angular, I progressively increased my knowledge. I immediately began to learn the fundamental mechanisms of this framework: components, modules, two-way binding, dependency injection, as well as less fundamental ones, such as forms, directives, RxJS, etc.
Thanks to the fact that I worked with developers from House of Angular, I had constant access to high-quality code filled with good practices. As a result of working in Angular projects and using basic elements of this framework, I learned it inevitably. Gaining knowledge this way is very pleasant because it proceeds slowly and gradually, but it is not very effective.
A few words about creating a UI
The first and most important step in creating a UI is the layout. Creating such a layout must be well-thought-out so that the application looks correct even with more features and data. The layout must also be flexible so that a large refactor would not be necessary for the event of any changes. The code should be thought out as well so that it is easy to maintain.
Fortunately, the tasks of the UI developer don’t include the creation of the design, but only its implementation. Before writing the application, a mock-up or design is created, for which both, the UI/UX Designer and the client, are responsible. Mock-ups, design, and specifications are the basis for UI developers’ work.
Of course, the layout of the application itself may require the usage of components from UI libraries: mock-ups with a sidebar appear regularly. This means that – in my field of work – mat-sidenav is the foundation of the entire application. If the design foresees the navbar at the top of the app, a mat-toolbar will be needed. On top of that, all the menus would be implemented using mat-menu.
The components in Angular Material have been perfectly selected: the vast majority of them are often used, and the way they are implemented allows easy use and equally simple modification.
Beginnings
I have started the first project as a UI developer d by styling separated components from the application, in a temporary module, from which an Angular dev could later move this component to the right place and continue working on it by providing proper routing, injecting the right services, and generally connecting it with the rest of the application. In short: his job was to revive the mocked component, or sometimes even the entire feature.
This approach is very “clean” – it separates my work from somebody else’s. Thanks to that it usually leaves no room for errors because I work on a component that I create myself. Unfortunately, it is also extremely inefficient: I have to finish working on the component in order for an Angular developer to start creating the logic. Often, such logic can cause changes in the component, such as hiding an existing part of it or showing a new one, which may require corrections on my part.
Therefore, this approach quickly changed, and I started working on components that already existed and were a part of the application. Unlike other frontend solutions, Angular has an advantage here: several files create the whole component. While the other developer works on the logic of the component in the *.ts file, I can work on the *.scss file. The only point of contact – that is prone to conflicts – is the *.html file, where solving is relatively simple, because my work concerns tags, their attributes, and classes, while another developer deals mainly with Angular “inserts”.
The change of approach was a success, thanks to which I created UI in many large and medium-sized projects for a long time. Over time, I started creating components in the right places, connecting the right route, and adding basic logic. Before I knew it, I was customizing or expanding a lot of features, creating Nx libraries, and generating NgRx’s stores.
That’s not all
However, if your goal is to become an Angular developer this won’t be enough. Previously mentioned examples are only single, irregular tasks, that are often based on existing codes. To evolve into an Angular developer, it is necessary to learn how to do it independently using: tutorials, documentation, articles, newsletters, and above all – practice.
Nothing will teach us better than our own projects: creating something from scratch or solving problems that we have never encountered before. That’s why it is worth starting your own projects, simple and small: ToDo App, Pomodoro, Calculator. Just to encounter unusual problems (because in the learning process we want to find as many of them as possible). A good idea would also be a game, for example, Memory.
Over time, projects such as a time login system or a customer management application will no longer pose a great challenge. Finally, I highly recommend creating your own, simplified implementations of projects from work – in case of difficulties, we have the opportunity to see how the problem was “originally” solved. No matter what technology you want to write in, you have to practice it, in order to learn it.
What’s next?
Such learning can often go on and on. In my case, however, thanks to the fact that I worked in a place that focused on development and allowed me to meet helpful developers, the culmination of learning was the verification of my knowledge by an experienced Angular developer. The feeling of a “job interview”, as well as a specific, rigid deadline, motivated me very much.
Next in line was the first commercial project in which my role was no longer limited to the preparation of the UI. Such a project shows very clearly that there is still a lot to learn. After all, there is a huge gap between a “home” and a commercial project. However, at the same time, this allows us to discover more tools that will make us want to rewrite our own projects. Finally, how much easier is it to write a ToDo App having NgRx at our disposal?
No matter what path we take, there are no shortcuts in Angular, there are only more or less steep roads. I find the path – that I was given – fantastic. For many, the Angular entry threshold is too high, but for me – thanks to my work as a UI developer – this threshold was significantly lowered. The workplace is also a very important factor, which sets expectations and proactively helps to meet them. I can’t imagine a better place to start your career than in House of Angular.
Leave a Reply