Articles tagged with
frontend
01 Jul 2024
Site performance is very important, first of all, from the perspective of users, who expect a good experience when visiting the site.
The user should not wait too long for the page to load. We all know how annoying it can be when we want to press an element
and it jumps to another place on the page or when we click on a button and then nothing happens for a very long time. The state of a
site’s performance in these aspects is measured by Web Vitals performance metrics and most importantly by a set of three major
Core Web Vitals metrics (LCP — Largest Contentful Paint, CLS — Cumulative Layout Shift, INP — Interaction to Next Paint). They are
responsible for measuring the 3 things: loading time, visual stability and interactivity. These metrics are also important for the
websites themselves because, in addition to the user experience, they are also taken into account in terms of the website’s positioning
in search engines (SEO), which is crucial for most websites on the Internet, Allegro included.
10 Nov 2022
Building a complex web platform can be a real challenge, especially when parts of it are delivered by independent teams.
Picking out the correct architecture is crucial, but maintaining it can be even more challenging.
Frontend microservices, aka microfrontends, is an architecture that gives a lot of flexibility, but can cause
performance issues in the future, if not managed well. This article presents an approach to the microfrontends
architecture to keep the frontend technology stack efficient based on the complexity of user interface.
10 Feb 2022
Everyone repeats like a mantra that tests are an indispensable element of development work. Is there anything to it?
Well, I need to admit that as a developer, I rather often want to skip the test writing stage. I assume I’m not the
only one. I’m aware that it’s a mistake, even with testers on board. Effective and efficient testing of your own
code can help with catching bugs in new functionalities, as well as in changes to already existing ones. It cannot
be questioned. Sometimes tests also help to understand how some long-unused functionality or component works. And
that’s a small bonus too. Can a large project cope without testing? Probably so. But the number of errors and
their severity will probably be much higher. That’s why in Allegro Ads we pay attention to writing tests.
26 Oct 2021
This article describes a classic case of refactoring a search form UI component, a critical part of every e-commerce
platform. In it I’ll explain the precursor of change, analysis process, as well as aspects to pay attention to and
principles to apply while designing a new solution. If you are planning to conduct refactoring of a codebase or just
curious to learn more about frontend internals at Allegro, you might learn a thing or two from
this article. Sounds interesting? Hop on!
23 Sep 2021
The main goal of boosting website performance is to improve the user experience. In theory,
a satisfied customer is more likely to use a particular company’s services, which is then reflected in business results.
However, from my own experience I can say that not every change can be easily converted into money.
I would like to tell you how to reconcile these two worlds, how to convince the business that the benefits of
better performance are a long-term investment, and how to streamline the development process during the design or code writing process.
29 Jul 2021
It’s been over 5 years since the introduction of the article describing the ongoing transformation of Allegro’s frontend architecture — an approach that was later formalized by the industry under the name of Micro Frontends. I think that after all this time we can safely say that this direction was correct and remained almost entirely unchanged in relation to the original idea. Still, some of the challenges foreseen in the publication soon became the reality. In this article I would like to focus on the CSS part of the whole adventure to tell you about how we manage consistency and frontend performance across over half a thousand components, and what it took us to get to where we stand today.
21 Jul 2021
Almost every modern web application somehow interacts with a backend - be it loading data, doing background sync, submitting a form, or publishing the metrics.
Making API requests is not an easy task - we have to consider multiple outcomes and handle them properly. Otherwise, we might end up with confused users and
decreased conversion. Although the stakes are high, it is still very likely to encounter an application designed with only a happy path scenario in
mind. The question is - how can we improve it?
08 Jun 2021
Some time ago we announced that Allegro passes Core Web Vitals assessment and thanks to that we were awarded in “Core Web Vitals Hall of Fame”.
It means that Allegro is in the group of the 27% fastest websites in Polish Internet.
23 Nov 2020
JavaScript Frameworks play an important role in creating modern web applications.
They provide developers with a variety of proven and well-tested solutions for creating efficient and scalable applications.
Nowadays, it’s hard to find a company that builds its frontend products without using any framework,
so knowing at least one of them is a necessary skill for every frontend developer.
To truly know a framework, we need to understand not only how to create applications using it, but also how to test them.
11 Aug 2020
Let me start with a story. Once upon a time I stumbled upon an excellent
article by Philip Walton where he describes how expensive
script evaluations could (and should!) be deferred until the browser is idle or they are actually needed. One of the
examples that awakened my interest was creating an instance of the Intl.DateTimeFormat object, as I was using this
great API quite often but never thought it can cause real performance problems. Turns out it can, especially if
used inside loops. Apart from the technique
described in Philip’s article, another solution is to simply reuse Intl.DateTimeFormat instances instead of creating
them every time.
08 Nov 2019
One of the coolest features added in just announced TypeScript
3.7 is optional chaining syntax. It promises a
much shorter and more readable code for dealing with deeply nested data structures. How may this nice new feature affect
the performance of your project?
02 Sep 2019
When we measure the page loading speed from the user’s perspective, we pay attention to the appearance of subsequent
elements on the screen. Metrics such as First Contentful Paint, First Meaningful Paint and Visually Complete directly
reflect what the user sees and when. But what if the page is invisible, when it loads in the background, for example in
a different tab? Should we consider such views interesting for us? Don’t the collected metrics distort the results?
12 Mar 2016
Microservices
are now the mainstream approach for scalable systems architecture.
There is little controversy when we are talking about designing backend services.
Well-behaved backend microservice should cover one
BoundedContext
and communicate over the REST API.
Things get complicated when we need to
use microservices as building blocks for a frontend solution.
How to build a consistent website or a mobile app
using tens or sometimes hundreds of microservices?
18 Mar 2015
Hello stranger. It’s your first day as a fronted developer. Here is your brand new desk, computer and stuff.
Enjoy your work! Oh, I’ve almost forgotten! You’ll need to read this 500-page Design Manual to know what are we aiming for.
Don’t worry, it’s really simple — there are a lot of examples there. It’s written in two languages, every line is commented
and we will occasionally ask you about some random padding — just to be sure — that you have learnt everything well… — is there any company still working like this out there?
04 Mar 2015
Any website finds identification of visitors crucial.
Usually, cookie files are used, but they have several drawbacks,
as users can delete or block them (e.g. by activating the “incognito” mode in web browsers).
Besides, cookies fail to identify a user who uses several different web browsers, even if he or she connects using the same device.
Hence the idea of a browser fingerprint — a unique user identifier
which does not change between successive sessions and which does not depend on selected web browser.
