It is common knowledge that the best method to tackle any software issue is to disassemble the problem. Whether it be by rewriting your code to create functions that are more manageable and clear, there are multiple ways to accomplish this.

Why use Micro Frontends?

Large applications have profited in multiple ways from the development of microservices, which have advanced in recent years. It is helpful in the process of efficiently developing, deploying, and scaling the separate components of the application backend.

Nevertheless, many developers have become aware that similar difficulties exist for the front-end as well. It is at this stage that the breaking up of the frontend monolith into individual micro front-ends usually begins.

Module federation (Module Federation | webpack)

Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin

I’ll create 2 apps in this article:

• First: Container app that will be used as a base for the micro frontends.

• Second: The counter app that will get rendered inside the container app.

Let’s update the webpack.config.js file inside the Counter app. Add ModuleFederationPlugin to the plugins array with the following configuration:

webpack.config.js

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "counter",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Counter": "./src/components/Counter",
      },
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),

Let’s update the webpack.config.js file inside the Container app.

plugins: [ // This is important part
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        counter: "counter@http://localhost:8081/remoteEntry.js",
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
    new HtmlWebPackPlugin({
      template: "./src/index.html",
    }),
  ],

Now in src/App.js

import React from "react";
import ReactDOM from "react-dom";
import { Counter } from 'counter/Counter';
import "./index.css";
const App = () => (
  <div className="container">
    <h1>Container App</h1>
    <Counter /> // Micro frontend app
  </div>
);
ReactDOM.render(<App />, document.getElementById("app"));

If we run both apps, we should see Counter app inside of Container app working as it should.

Notice: both apps need to be running for Microfrontends to work.

Also in production you can update the app deploy url’s to remote server url.

That’s it.

Now you can split your apps into smaller, more manageable chunks.

Thanks for reading!

Working with web apps we have to render tables or lists of data often. Most times lists do not contain many records and it is fine. However problems arise when app scales and now lists have thousands of records.

To solve this problem we can implement a paradigm called Virtualization

For starters let’s create a simple component which fetches 1000 records of photos.

usePhotos.tsx

import { useEffect, useState } from 'react';
import Photo from './Photo';
 
function usePhotos() {
  const [photos, setPhotos] = useState<Photo[] | null>(null);
 
  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/photos?_limit=1000')
      .then((response) => response.json())
      .then((photosData) => {
        setPhotos(photosData);
      });
  }, []);
 
  return {
    photos,
  };
}
 
export default usePhotos;

And another component PhotosList to render each photo

import React from 'react';
import styles from './styles.module.scss';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <div className={styles.wrapper}>
      {photos.map((photo) => (
        <PhotoCard key={photo.id} photo={photo} />
      ))}
    </div>
  );
};
 
export default PhotosList;

While the above solution works, it is far from optimal.

Rendering 1000 div’s in DOM is not optimal at all.
This is where Virtualization comes in handy.

If we render a large list, the user does not see all its contents at once and uses a scrollbar. When we implement virtualization, we don’t render the elements of the list that are not currently visible. By doing that, we make the DOM tree creation a lot faster. Besides that, the browser does not need to fetch all the images simultaneously.

To implement virtualization in this article, we use the react-window library.

npm install react-window @types/react-window

PhotosList.tsx

import React from 'react';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
import { FixedSizeList } from 'react-window';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <FixedSizeList height={800} width={600} itemCount={photos.length} itemSize={155}>
      {({ index, style }) => {
        const photo = photos[index];
        return <PhotoCard key={photo.id} photo={photo} style={style} />;
      }}
    </FixedSizeList>
  );
};
 
export default PhotosList;

Before & After Virtualization web site performance

Notice FixedSizeList has a defined row item width and height.

But it does not have to.

We can make it dynamic using another helper library.

npm install react-virtualized-auto-sizer @types/react-virtualized-auto-sizer

PhotosList.tsx

import React from 'react';
import usePhotos from './usePhotos';
import PhotoCard from './PhotoCard/PhotoCard';
import { FixedSizeList } from 'react-window';
import AutoSizer from 'react-virtualized-auto-sizer';
 
const PhotosList = () => {
  const { photos } = usePhotos();
 
  if (!photos) {
    return null;
  }
 
  return (
    <AutoSizer>
      {({ height, width }) => (
        <FixedSizeList
          height={height}
          width={width}
          itemCount={photos.length}
          itemSize={155}
        >
          {({ index, style }) => {
            const photo = photos[index];
            return <PhotoCard key={photo.id} photo={photo} style={style} />;
          }}
        </FixedSizeList>
      )}
    </AutoSizer>
  );
};
 
export default PhotosList;

We can use AutoSizer to manage only width or height instead of both. To do that, we need to use the disableHeight or disableWidth  attributes.

That’s it.

Now you can render endless lists without worrying about performance.

We live in a world that changes every day. Technology has built a dynamic society, and keeping up with its rhythm can become a challenging endeavour. If you own a business, adapting to changes becomes a matter of life and death. Every entrepreneur knows the importance of staying relevant, and to be so you should learn how to embrace new technologies and leverage trends before it’s too late.
That is how great companies have managed to sail through changes, surf through tough times and make it to the shore as a safer, fresher and better version of themselves.

But how can you adapt to these new trends? First, you have to identify them. Then you have to make a clear distinction between trends and short-lived sensations.

Sensations become old news in a blink of an eye. One day they’re the hot thing of the moment, the next day they already belong to the past.
Trends, on the other hand, can define our future. They emerge as a response to our basic human needs and they mature with the passing of time. They don’t affect just one specific industry but all industries at the same time.  

The greatest driving force of trends is big changes, the ones that touch all life areas, and between change and trend, there is the technology that serves as a connector.
So, when businesses are faced with big changes, technology comes to the rescue to help them float on the surface and survive the storm;

Think about Covid-19, the major force that changed the world as we knew it. It was thank to technology that businesses managed to continue working remotely and keep going through this unprecedented event. History proved us that those businesses that weren’t ready to embrace the trend when the storm hit them, didn’t make it.

So, as a business owner, you should be constantly observing for signs, even during calm times. Signs signal changes. They help you stay alert while at the same time they inform you about things that are happening in your industry.
Some signs are easy to spot. They’ve been there for some time now and everyone has started to notice them.

Some other signs though are not so easy to spot. They’re the early indicators; the whispers that are difficult to interpret. But if you’re a keen observer you won’t miss them. Recognize the trends in time; take advantage of them a turn them into a treasure. It will give your business a competitive edge.

By being able to forecast the changes that your industry will go through, you’re acting as a market leader. It will help you stay relevant, and be ready for when the changes will come. It will help you and your business mature.

Users worldwide spend almost 90% of their “phone time” on mobile apps. As a result of the usage increase compared to the last few years, app development is the fastest-growing field in the software industry. Although a developer has several choices, when it comes to native app development, they’re faced with a choice between iOS or Android.
Both platforms are clearly excellent choices to build great seamless apps, but both platforms have as many advantages as disadvantages.
So, any professional developer would have made an informed decision based on a few basic facts about each platform’s pros and cons. 

ANDROID PLATFORM PROS

• Flexible and easily adaptable
  Android’s environment is not very limited, making the process, from development to distribution, very resilient. There are few chances for the app to have hardware compatibility issues since it can virtually run on any Android device.
  Java, a versatile programming language, permits developers to work on any kind of device even though they’re developing an Android App.

• Access to resources
  Whether you’re a beginner or an experienced developer that is seeking some professional answers, Google helps you consult professional materials, get free training, and access a very extensive knowledge base.

• Easy to publish
  Although today it takes more time for the Android platform to reconsider an app before publishing it on Google Play, it is still quite easy and cheap to get in. You just need to make sure that your product doesn’t violate any of the company’s content policies, and it will most likely be approved.

• Easy to expand to other devices
  With Android, you have the opportunity to develop an app that can extend to an entire ecosystem of devices. Your app’s functionalities can be adapted to your user’s car, smartwatch, TV, headset, etc.

ANDROID PLATFORM CONS

• Quality Assurance
  A developer can develop multiple applications at the same time on the Android platform, but this can complicate the quality assurance process. Also, most Android users have stuck for many years with the same old operating system, making it difficult for every simple app to function properly.

• Cost
  Developing on the Android platform requires additional time and quality assurance compared to iOS; therefore, it has increased costs.

• Users spend less
  Most Android users are spending less on apps. They’re prone to use free apps and they make fewer in-app purchases compared to iOS users.

• Security issues
  Being an open source makes Android more vulnerable and increases the chance of cyber attacks and viruses.

iOS PLATFORM PROS

• High performance
  iOS apps are fast, reliable, and easy to use. They perform very well and have very few bugs in the final product.

• Apple Ecosystem
  A secluded platform like iOS might be inconvenient for users when they need to transfer files from one device to another. On the other hand, it offers the developer the chance to build an app for a whole ecosystem and not just for a phone.

• great user experience.
  Thanks to Apple’s detailed instructions on how to create the interface of an iOS app, users can enjoy a user-friendly app.

iOS PLATFORM CONS

• Rigid and not so flexible
  To develop a native iOS app, a developer needs to use the XCode software and he can do it only on Mac.

• Difficult to publish
  Although the reviewing process only takes 2-3 days, many iOS apps get rejected for not being relevant or useful enough.

• Customization
  The detailed guidelines on the app’s interface give several options to customize it and add features in case they are needed.

So?
Which platform is best for developing the best product? To answer this question, you need to carefully evaluate the above arguments and add a few. Start by considering your audience, your budget, and the app’s features.
Overall, both platforms can serve you perfectly to create a great app. All you have to do is to decide which one suits your specific project the most.

Why hire a quality assurance engineer when you can hire more highly experienced developers? Many think that the task of a QA engineer is solely to track bugs in the development process of software. Even though humans are more prone to making mistakes, that is not the only reason every developing team must have a QA engineer in the squad. So, what exactly does a tester do, and why is it such a significant role?

1. They save money
Fixing a bug detected in the preliminary stages of the development process costs much less than fixing it when it’s too late. That is why every company should hire QA engineers at the very beginning stages of a project.

2. They also provide security.
Security is one of the key things that any user or client looks for when using software. If the product goes under testing at all stages, the chances are higher that it will be a reliable product.

3. They ensure the quality of the product.
When a team is working on a project, numerous requirements are clear only to somebody or are spread in documents and chats. The tester makes sure that nothing slips into production and that every unit or system developed meets the overall goal of the product based on the client’s requirements.

The work process of a QA engineer is crucial for the software to fully function, provide a good user experience, and have full compatibility with various operating systems and devices.

4. They ensure customer satisfaction.
The overall success of any project stands on its quality and the customer experience it supplies. That is the number one requirement of every client. But if the developed software has glitches and doesn’t work, the client will lose faith and won’t trust your team anymore. Hiring a professional QA engineer is a prerequisite for every professional company to succeed and deliver a great final product.

5. Improves the process development
When a developer works on a specific feature, all his efforts are concentrated on making it work perfectly. But somehow, the developer might slip the fact that these changes might impact previously developed features. The tester must work in parallel with the developing tea to track changes and fix them in the preliminary stages.

6. They determine the software performance.
QA engineers are the ones that evaluate the product inside-out. They check everything from integration to UI, data, and security and ensure nothing has slipped through the development process. That makes their role particularly important to determine if the product to be released will work well in any condition and meet all the requirements.

Having good interviewing skills can offer developers an opportunity to advance in their careers. Unfortunately, many skilled professionals focus more on what they are really passionate about, technology and programming, but they forget to do their homework and prep for their interview skills. So here are some practical tips on how to get ready to land your best job interview.

DO SOME COMPANY RESEARCH
Even if you like the vacant position, you should research the company you are applying to. You are putting all your effort into convincing the interviewer that you are a good fit. But at the same time, you should make sure that this company is a good fit for you. Start by doing some prior background checks. Visit their website, check out their social media, and don’t leave out Instagram. All these channels will give you enough insights into the company, its founders and of course, the people that you might be working with. Try to get an understanding of the company culture, its values and overall work environment.

Plus, showing that you’ve done your homework will surely make a fine impression on the person conducting your interview.

INTRODUCE YOURSELF
Prepare a short description of yourself, your past experiences and training as a developer, and your future ambitions. Add some extra details regarding your passions and what you enjoy most when doing this job. How you introduce yourself will most probably demonstrate your communication skills as well.

GIVE THOUGHTFUL ANSWERS. 
Avoid one-word answers or textbook sentences. Chances are that the interviewer is looking for passionate candidates. So, start by fully understanding the question. Then give an answer based on your experience. By showcasing passion and expertise, you show them that you are a great addition to their team.

However, it is OK to stop talking if you feel you have been going on for too long and the interviewer has lost attention.

GET READY TO ANSWER BEHAVIOURAL QUESTIONS
At some point in the interview, you will hear questions like “Tell me about an unexpected issue you had at work and how you fixed it,” or “Tell me about a time when you had to take charge of the problem and lead your team towards the solution.” These behavioural questions help the employee understand how you deal with different situations during work. Talk about a specific development from your own experience. Start by explaining the situation and your task. Then tell them how you acted and, finally, what the outcome of your action was.

DON’T BLUFF
In other words, don’t lie. Chances are that the interviewer is a professional who can easily spot, with a few tricky questions, when you’re bluffing. Be transparent regarding your experience and knowledge. It is OK to admit it when you have little or no experience with a specific technology. After all, you can’t possibly know everything. No one does. So the best thing you could do is be honest about it.

PREPARE TO SOLVE PROBLEMS

Every developer interview includes a simple exercise that aims to test his coding abilities. It never hurts to prepare beforehand and refresh your computer science knowledge. Do some research on basic data structures and make sure you understand their purpose and how they work. Read about the basics of algorithms and recursion. Practice solving problems online. There are other things you could read to refresh your skills, but do this, and you’ll feel much more confident in tackling any task.

ASK QUESTIONS
At the end of the interview, you will have your chance to ask about the things you want to know regarding the company. Write them down beforehand; this way, you won’t forget anything. Ask questions about what you want to know regarding the company culture, ongoing projects, and your potential teammates.

How can we predict a good result in a software development project? Is it a matter of having the best talents? Or is it about making these talents work with each other? In this article, we will explore the meaning and effects teamwork has on what we do daily as software developers.

It goes without saying, but we like to say it on repeat: a well-functioning team is crucial to achieving great results in every software development project. Although teamwork is not the only ingredient to success, it is certainly very important. It can noticeably improve the development process and help obtain higher quality. How to build a dream team? We can start by concentrating on five major pillars.

BUILDING CROSS-DISCIPLINARY TEAMS

At the start of every project, we build a team of developers from different disciplines. Each of them brings a specific set of technical skills to the table based on their role.

But we often start the concept phase by excluding front-end or back-end developers because we think that they can’t contribute much to the initial stages. Then we end up including them later, conditioning each project member to work apart from the others.

Building up a cross-disciplinary team every time we start a new project can help the work move forward faster and better. While some team members brainstorm on software features and technology, the rest of the developers can start working in parallel, writing or conducting tests. And last but not least, the members of a multi-disciplinary team can learn from each other. Constantly consulting colleagues and watching and understanding different parts of the project will make everyone perform better in the present and future tasks.

WORKING INDEPENDENTLY

Another essential feature of a well-functioning development team is the ability to work autonomously at an individual and team level. An independent team is one that continues to operate even if key members, such as the project manager, are missing. Its members can resolve issues on their own or present them properly to other team members to find a solution before it’s too late.

Building such a team is every manager’s challenge, but fortunately, it is not impossible. It might seem easier to tell people what to do, but it is way better to help them find out what they have to do on their own. Team members should not be bossed around but empowered instead. This way, they will improve and grow as professionals and you will make sure they deliver an excellent job. 

GETTING CONSTANT FEEDBACK

Throughout the development process, it is crucial to get constant feedback from the end-user or third parties before you’ve made too much progress. When working on a specific project, the team should present a functioning product as early as possible and receive proper feedback in a timely manner. It will help them improve the software throughout the process and finalize it with the needed improvements.

Even though it might feel as if constant feedback is slowing down the work and holding you back, experience has shown that it is not quite like this. It actually avoids creating waste and helps the team be more efficient.

SETTING CLEAR RESPONSIBILITIES

Every component of a system must perform a specific task and operate independently while still being able to communicate with other components. In other words, it should be able to work even if part of the system is has difficulties. That way, the needed adjustments need to be made only where the system is failing. The same philosophy applies to teamwork.

A well-functioning team is built on smaller components that should carry out specific duties on their own while functioning as one. This happens only if we draw clear roles and responsibilities for every team member. When everyone knows clearly what to do and what is their part in the whole process, teamwork is more efficient. The system as a whole continues to move on even if some members are facing difficulties.

Our culture
Honesty! Being faithful to ourselves and others is the thing we value the most. We believe in individuality. We believe that everyone has their own character and should embrace it.
Our team spirit is rooted in trust and respect for one another.
Diversity and inclusion are the things that make us strong. We at AtraX value other perspectives; we respect differences and embrace cooperation and transparency.

Teamwork makes the dream work.
We strive for everyone to be an active team member, believe in their ideas, and share them with others. We aim to build conversations because, through communication, we can all achieve true growth.

All for one and one for all.
We believe organizations like ours should be open, with no closed doors and no bossing around. We welcome new initiatives and always listen to our team members. Everybody is responsible for their time, and there is always space to merge work with fun.

Did someone say party?
We work hard and party hard. The days can be long, and we welcome an after-work get-together. A beer, playing sports, or a team retreat are the moments that bring us closer together and create long-lasting relationships.

Do you feel stuck and want to grow?
If you are getting bored with your current role or simply want to learn something new, you’ve come to the right place.
We always want our team members to grow and continuously evolve. Create your new path with us. We will help you rise to the top.

Do you want to take a bite of the apple?
Your equipment is what will take you to your next level, and we are happy to provide it. Mac or Windows is your choice, and yes, you can take it home.

Never stop learning.
If you feel like learning something new, just tell us. We are more than happy to help you.
We can train you internally and create contacts for you with mentors or professional communities.

Certifications.
As mentioned before, we want you to be the best version of yourself. Do you feel like reaching a new level? We are happy to provide you with the tools to obtain your next certification.

Your personal life.
The concept of work-life balance is crucial now more than ever.
We are happy to discuss your preferred work solution, whether you choose in-office, hybrid, or remote. Talk to us about your needs, and we will find a solution. Just ask our team.

Our offices.
Our brand-new offices are based in the centre of Tirana and offer a stunning panoramic view.

And there’s more…
Coffee, tea, soda drinks, and fruits are all available free of charge. Oh, and did we mention lunch is on us?

People everywhere and everyday use apps for all kinds of purposes. They use them for work, leisure, motivation, planning, socializing, learning, and the list could go on like this forever. Therefore, building a successful product that can stand out from the clutter becomes a real challenge. Consumers know right away when they don’t like using an app, and they can easily recognize when they actually love using one. What they fail to understand is that one of the main reasons they love using it, is because the app is intuitive.

So, if you’re a UX/UI designer, a developer, or a project manager, you should know what it means to build an intuitive app. How exactly can you build one when the concept of intuition itself is so vague?

 Every intuitive app revolves around one keyword: easy – easy to understand, easy to use, and easy to love. Although, the fact that it’s easy to use doesn’t mean that it’s simple to achieve.

 Throughout the whole building process, constantly think about one question: how will your consumers use the product. Everything you design or build should exist only to make your customer’s life easier.

 So, let’s take a look at a few things to keep in mind before you start designing a new app.

• EASY TO DISCOVER
  The first interface sets the tone of your relationship with the app. A well-designed interface displays, from the first moment you open the app, all the main features in front of your eyes. Yet, everything looks clean and organized to avoid any chance of being overwhelming. Notifications, messages, settings, and all the main functionalities are within reach of your thumb for you to click and explore.

• EASY TO UNDERSTAND
  You see a button with an envelope icon on top of it. Your intuition tells you that, most probably, that button will lead you to the messages section. You know the purpose of that button without having to click it first. The icon told you everything you needed to know.
  That is why, in an intuitive app, visual representation leads your journey as a user.

• EASY TO PREDICT
  That leads us to the importance of predictability. When you click on a button, you already know that something will follow that action. For instance, if you click on a +, you expect that to give you the chance to add new items. If the prediction doesn’t happen, you become confused, and you are no longer satisfied with the product. Making the design so obvious makes the operation predictable, thus making the app intuitive.

• EASY TO USE
  We’ve all used apps that make us go through tiring user flows, asking questions after questions, and moving us from one interface to another. So before you finish the task, you’re already annoyed and want to quit using the app. An intuitive product makes the flow efficient; it offers you what’s necessary, nothing less than what you need and nothing more. 

• EASY TO INTERACT
  No one wants to click on a button and be left waiting and wondering without feedback. No reaction from the app might frustrate you. It might make you repeat the action over and over again and make you fail to complete it. That is why, for every action, there should be an immediate response that lets you know that the task has been successfully completed.

• EASY TO FIX MISTAKES
  Using an app shouldn’t be so rigid; it should take into consideration your human flaws instead and help you correct them. Take Google, for example. When you search for a specific item and misspell the words, Google suggests the right options and the search engine still offers you the answers you were seeking. An intuitive app always offers solutions and solves your everyday mistakes.