DEV Community: Oleksandr Khivrych

My talk at the CityJS London (Micro Frontends Summit)

Oleksandr Khivrych — Thu, 20 Jul 2023 15:25:08 +0000

JS Fwdays Europe - Micro Frontends

Oleksandr Khivrych — Mon, 20 Feb 2023 10:18:39 +0000

Designing micro frontends can be a daunting task. While a well-planned micro frontends strategy can offer numerous advantages for businesses , an improperly designed system can result in a host of issues , including poor performance, increased complexity, and excessive cognitive load.

This presentation will delve into the best practices for keeping things streamlined with Module Federation , which enables autonomous release flows for cutting-edge web applications.

Intro to Micro Front Ends

Oleksandr Khivrych — Fri, 02 Dec 2022 21:02:18 +0000

Architecting micro-frontends can be challenging. The right micro-frontends approach can provide many benefits for organisations. But the poorly architected system can sometimes lead to many critical issues (performance, complexity, big cognitive load).

In this talk, I will explore how we can keep micro frontends simple with the help of Module Federation and enable independent release flows in modern web applications.

This talk will cover the following:

What are micro frontends?
Benefits and risks
Overview of modern modular monolith web apps
Enabling distributed frontends using Module Federation
Live Demo of Client Side Rendering with Module Federation
Live Demo Server Side Rendering with Module Federation

https://www.youtube.com/watch?v=lV-X6byaE2E

Bridging the gap between technical & non-technical teams

Oleksandr Khivrych — Tue, 22 Nov 2022 00:01:57 +0000

Last month I participated in a panel discussion at Reviving London's Tech Scene event from London Tech Network. A lot of professionals from Meta, The Economist, Osedea, Beamery were present at this event.

Our discussion focused on bridging the gap between technical and non-technical teams. Here are my key takeaways from this discussion.

Why is there a gap between technical and non-technical teams?

To a certain extent, this gap is caused by a relatively low priority that soft skills are given among tech employees. I find this problematic because in my view soft skills are equally important to technical skills when you are building a digital product.

According to my research, there are at least 13 categories of soft skills: adaptability, communication, compromise, creative thinking, dependability, leadership, listening, work ethic, teamwork, positivity, critical thinking, conflict resolution, and negotiation. As you can see, each category is related to interacting with different people (managers, stakeholders, teammates, junior developers, product owners, etc.) on different levels.

In any case, if you want to positively impact your organisation and build high-quality products, you definitely should not underestimate the importance of soft skills. This is even more important if you are a Senior Software Engineer and want to grow your career and move to the next level.

How to bridge this gap and improve soft skills

So, you made the decision to improve your soft skills. It might sound daunting, and a lot of introverted software engineers I know struggle with this. However, there are proven techniques that you can employ to improve your communication skills. They can be broadly divided into those that you can do during working hours and outside working hours.

Leverage your company resources

My advice is to have regular 1:1 conversions with your line manager and look for ways of improving your soft skills together. I can share some personal examples from my current employer, Beamery. These are four activities that I find helpful for improving my soft skills.

Mentoring Program

Beamery has an internal Mentorship program that employees can participate in as mentors and mentees, and uses our internal product called Beamery Grow. Since I joined this program, I have been mentoring a Senior QA Engineer whose goal it is to become a Full Stack Engineer, in the format of weekly sessions. Being a mentor has been an enriching experience and helped me improve my communication, listening and mentoring skills.

Internal events

We host a lot of internal events at Beamery, in various formats and for various audiences. I particularly enjoy Launch and Learn sessions where engineers give presentations about some cool piece of technology or an interesting architecture proposal they have made at work. I think taking part in internal events like this can be a great way to improve your public speaking skills in a supportive environment.

Publications

If you have something to share with the tech community, you can write an article for your company blog. It might be on a technical or a non-technical topic. While writing, you will begin to pay more attention to word choice, sentence structure and tone. As with everything, the more you write, the more your writing skills will improve.

Donut buddies

I find the Donut app for Slack to be a great way to meet new people in Slack: this app regularly matches you with a random colleague and encourages you to make a connection and organise a chat. It helps break the ice by suggesting some initial topics for conversation. I usually have a few meetings organised by Donut each month, during which Im matched to a non-technical person within the Customer Success department or product department. This is a great way to meet people you probably wouldnt meet otherwise, learn about other parts of the business and improve your communication skills. And you dont have to speak only about work!

Outside of working hours

There are plenty of opportunities to improve your soft skills outside the working hours as well. You can start speaking at meetups and conferences. You can also start volunteering, which I find very enjoyable. There are lots of communities where you can be a teacher or a coding mentor, which can be a huge boost to your soft skills: you will communicate with different people with different skills, from different cultures, etc. On top of that, your contribution will actually help people to start an engineering career! I currently mentor and teach people at Codebar, Meet a Mentor, and Code Your Future, which are all great organisations I can vouch for.

Parting thoughts

I hope you found this article interesting and motivating, and I hope it gave you some ideas for starting working on the soft skills.

What is the most effective method for improving soft skills in your experience?

Hack For Peace — Cross-European Hackathon

Oleksandr Khivrych — Sat, 05 Nov 2022 11:46:35 +0000

About the hackathon

Following up on one of my earlier articles on the benefits of participating in hackathons, I wanted to share my experience participating in yet another hackathon.

This time I participated in Hack For Peace Cross-European Hackathon (21-23 October 2022). During this event, developers, entrepreneurs, mentors, and investors from across the UK, Sweden, Portugal, Poland, and Ukraine came together to build innovative products and tech solutions to solve war issues and promote peace across Europe.

My team became semi-finalists in this hackathon and got to give a speech in the finals. There were four stages that we went through during this event:

Building a team and defining roles

I invited a few people that I knew before this hackathon to join my team: my colleague from Beamery Dmitry and my mentee Karim (I mentor IT professionals through Meet a Mentor platform). I met the remaining members of my team, Hannah and Amrutta, through the Slack workspace of this event.

I became a team leader since I organized this team and have a lot of experience leading software teams. Dmitry and Hannah joined as Software Engineers. Amrutta was our graphic designer and Karim was a UI/UX designer. In the end, we had a pretty strong team with a wide range of skills and were ready to kick off the three days of hackathon.

Hackathon in progress #hackforpeace #teambotsboo pic.twitter.com/YSqwsiQhwQ
— Oleksandr (Sasha) Khivrych🇺🇦 (@sasha_khivrych) October 22, 2022

Brainstorming and defining Idea

Hackathon had four work streams:

Information security - Info hygiene, media war, cybersecurity.
Mental health - Self-support, matching with therapists, group therapy.
Kids education - Pre-school and school education.
Logistics - Humanitarian aid delivery, evacuation of people, and the hazard of human trafficking.

Prior to the event, I was thinking of building something related to kids' education. However, after team discussions on the first day of the hackathon, we decided to pivot and create an app related to info hygiene/media war. We had two ideas: a news fact checker and a bot detection tool.

By the end of the first day, we agreed to focus on a bot detection tool. The final vision was to build a Chrome extension that would blur/unblur posts from bots and show match scores. We decided to start with a Twitter integration for our MVP version.

Research and Developing a prototype

After defining our idea and having minimal requirements on the first day of the event, the next day, we started building a working prototype that we could demo for the jury.

Hannah and I started researching existing tools that can detect bots on Twitter and found Botomenr API, which was perfect for our prototype. We developed a Node.js service with one endpoint, which receives an array of user names, pulls data from Twitter API and then passes this data to Botomenr API to detect potential bots and return a match score.

Meanwhile, Dmitry was working on the implementation of the frontend part. Amrita and Karim were working on the design of the app logo and creating wireframes for the demo.

By the end of the day, we had a prototype: BotsBoo chrome extension that can detect bots on Twitter

Presentations and demo

On the last day of the hackathon we had to record a 3 minute presentation and demo of our app. The entire team was involved in preparing and reviewing the presentation slides. Karim and I recorded a video and uploaded it for jury review.

Fantastic teamwork! #hackforpeace #teambotsboo pic.twitter.com/XV4ihVOf3m
— Oleksandr (Sasha) Khivrych🇺🇦 (@sasha_khivrych) October 23, 2022

After a selection process, we became semi-finalists and entered the finals with 12 other teams (out of 22 teams that took part).

#teambotsboo is SemiFinalist. Going to do the final talk in the finals🤟 #hackforpeace pic.twitter.com/F9Uvj2B5ni
— Oleksandr (Sasha) Khivrych🇺🇦 (@sasha_khivrych) October 23, 2022

It was exciting to see how many great projects were built during the hackathon. My favorite project was "BeesAgainstMines".

On the evening of the last day, we made a live speech in the final and a Q&A session from the jury.

Conclusion

These three days were intense, but I enjoyed the experience so much! Yet again, I saw that a hackathon is a great opportunity to improve my leadership and public speaking skills and of course sharpen my technical skills. I also met a lot of new people in the industry and made friends with my teammates. These are the connections that I cherish so much as an immigrant in London.

No matter where you are in your journey in tech, taking part in a hackathon is a great way to take your career and skills to the next level and have a great time while doing it.

What about your hackathon experience? Let me know in the comments down below.

Next.js with Module Federation: the Future of Micro Frontends?

Oleksandr Khivrych — Thu, 27 Oct 2022 20:03:17 +0000

Micro Frontends are a popular topic in the frontend community these days, and I have been fascinated with micro frontends for several years now. Micro Frontends architecture provides many benefits for organisations such as increased delivery speed and more independent release cycles, and more.

One of the popular options to implement Micro Frontends architecture is to use the Webpack Module Federation Plugin.

If you are unfamiliar with Module Federation Plugin, you can read my article at Beamery Hacking Talent Blog Module Federation for distributed front ends the best of both worlds. In this article I talk about Module Federation and its benefits in greater detail.

Webpack Module Federation with Next.js?

This approach works great with client-side rendering. But what about server-side rendering (SSR)? Its not as straightforward. Moreover, when we are talking about SSR, we need to consider the support of the most popular React.js SSR framework, Next.js.

Introducing nextjs-mf

Currently, there are the nextjs-mf and nextjs-ssr plugins created by Module Federation Team. However, they are not open source and are available with a paid subscription on PrivJs.

The good news is that the Module Federation Team has decided to move all work to open source.

https://twitter.com/ScriptedAlchemy/status/1567253027312246784?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1567253027312246784%7Ctwgr%5Ebd7f500401e055807c2e92327e58f5b6a657f9f4%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FScriptedAlchemy2Fstatus2F1567253027312246784widget%3DTweet

Repo: https://github.com/module-federation/nextjs-mf

However, SSR support is still a work in progress and available only via a paid subscription.

Example

Following this example: https://github.com/module-federation/module-federation-examples/blob/master/nextjs-ssr:

Using the @module-federation/nextjs-mf package you can split your monolith application into multiple Next.js micro-apps and enable micro frontends during the software development life cycle. However, at runtime, it will work as a monolith app with a the single ReactDOM tree and remote/shared modules loading logic handled by Module Federation on server and client.

Basically you just need to add @module-federation/nextjs-mf plugin to nextjs.config:

const NextFederationPlugin = require('@module-federation/nextjs-mf');
// this enables you to use import() and the webpack parser
// loading remotes on demand, not ideal for SSR
const remotes = isServer => {
  const location = isServer ? 'ssr' : 'chunks';
  return {
    home: `home@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
    shop: `shop@http://localhost:3002/_next/static/${location}/remoteEntry.js`,
    checkout: `checkout@http://localhost:3000/_next/static/${location}/remoteEntry.js`,
  };
};
module.exports = {
  webpack5: true,
  webpack(config, options) {
    config.plugins.push(
      new NextFederationPlugin({
        name: 'home',
        filename: 'static/chunks/remoteEntry.js',
        exposes: {
          './nav': './components/nav.js',
          './home': './async-pages/index.js',
          './pages-map': './pages-map.js',
        },
        remotes: remotes(options.isServer),
        shared: {},
      }),
    );

    return config;
  },
};

Using Module Federation on the server utilizes proprietary software, commonly known as "Software Streaming". So basically, it loads remote chunks at runtime, and it does the same on the client side.

Security

This plugin creates a remote container for the server side. By default, it is written to _next/static/ssr.

The goal of this software is to make federation "just work" with one single plugin and as little setup as possible.

It is highly recommended that network access to _next/static/SSR/* is restricted to servers/machines inside the VPN or internal infrastructure.

If access to that route is not restricted, you could risk exposing server code to the public internet!

Conclusion

It is an exciting effort from the Module Federation Team to provide Next.js support, and I look forward to seeing the final version of the nextjs-mf and how the community will use it and build on top of it.

There is more to look forward to in this space! For example, there were a lot of exciting announcements made recently at Next.js Conf, one of them introducing Turbopack (now in alpha). Providing support for Turbopack will be another challenge for the Module Federation Team.

Im hopeful about that though. I received a very positive answer from Zack (Author of Module Federation). And they already have a plan to integrate with Turbopack in the future.

https://github.com/module-federation/nextjs-mf/issues/332

To learn more

You can check out my talk about this topic as well as four more talks by amazing speakers:

Getting started with Next.js by Ilesh Mistry
Pre-build scripts and why we need them in Next.js by Ondrej Polesny
An Introduction to On-Demand Incremental Static Regeneration by Tom Marshall
Micro frontends with Next.js and Module Federation by Oleksandr Khivrych
Serverless And Edge Functions in Next.js by Shivay Lamba

https://twitter.com/IM_TechMeetup/status/1580679855024541696?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1580679855024541696%7Ctwgr%5E5ef371fa60167933ab41890696a836b13215de49%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FIM_TechMeetup2Fstatus2F1580679855024541696widget%3DTweet

What are your thoughts on micro frontends? Have you used them?

Why should you attend hackathons?

Oleksandr Khivrych — Sun, 16 Oct 2022 16:32:37 +0000

My story

Hey, folks. I have experience participating in hackathons and being a mentor at such events. Back in 2019, I attended SmallBizHack by Intuit in London. This was an amazing event with more than 100 attendees. With this article, I wanted to share my experience, talk about my insights, and hopefully motivate you to attend hackathons in the future.

1. You improve your soft skills, quickly

If Im honest, the main challenge of this hackathon for me was not related to engineering: it was about building a team. This required a lot of communication with many people at the event, while trying to build relationships and trust quickly. I managed to organize a team of 4 people. With each team member being from a different country (Kazakhstan, Ukraine, India, Turkey), I had a chance to improve my intercultural communication skills on top of learning more about managing a team in an intense and fast moving environment of a hackathon.

https://twitter.com/sasha_khivrych/status/1099703955842629634?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1099703955842629634%7Ctwgr%5Eb675798ec57ccc1760b84b6f6b18e67c5ab01d1b%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2Fsasha_khivrych2Fstatus2F1099703955842629634widget%3DTweet

It was a great opportunity for me to become better at listening to others, giving feedback, and accepting criticism. I feel like this experience made me a better leader.

2. You learn to brainstorm and make better product decisions

I did not have a clear idea of what I wanted to build during the hackathon. A day before the event, I started brainstorming and decided it should be something for the hiring process. I then spent the first day of the hackathon refining product ideas with my team, starting with the problem definition and finishing with potential impact and benefits for our future clients.

The final product vision was to create a platform that would automate and improve the hiring experience for companies and candidates. With a single platform, candidates would go through the entire interview process and eventually even be able to accept their job offer via our platform. From the company's side, they can build out interview stages with initial screen calls, quizzes, tasks, and scheduling face-to-face interviews. Moreover, this platform would contain a lot of templates for building interview stages and automation processes to analyze CVs, collect candidate progress and build leader boards with candidates with the best results.

As you can see, we came up with an interesting product to solve important hiring problems.

A hackathon can teach you a lot about the product development process, just within the space of a few days.

3. You get exposed to new technologies

One of the conditions of the event was to use QuickBooks API and Clarifai API or Vonage API (formerly, Nexmo) to be able to win partner nomination. We were using all of the three APIs in our MVP. For example, we were using Nexmo to perform phone and video calls for interviews.

One of the exciting features was to perform an initial screening phone call using Nexmo API, and have a bot ask all the screening questions. Then the recording with answers was sent to Clarify API to analyze the interview result. It is quite a new experience to be interviewed by a bot, but we will probably see something similar in the future.

Moreover, we were using Quickbooks API as an accounting solution for our platform.

I had not used any of these three technologies before the event, so I enjoyed exploring them and learnt quite a lot! Representatives from each company were there to support us and help us master the APIs quickly, which was another benefit of the hackathon.

A hackathon can be a great excuse to play with cool and exciting tech that you arent exposed to in your everyday work life.

4. You meet new people in the industry

Like with all public events, a hackathon is a great way to expand your professional network. I met many professionals from different business areas. It was exciting to speak with CEOs, software engineers, designers, and learn from them. I cherish the relationships I built during the hackathon, and look forward to expanding my network even further during future events.

5. You (might) win

Im not going to lie: it feels nice to win! I was so happy when my team became the Nexmo (now called Vonage) winning team.

https://twitter.com/IntuitDev/status/1099728634896703490?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1099728634896703490%7Ctwgr%5E8ca4b2f881a41bdf1e7fd983e10eb0796f1e0ddf%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FIntuitDev2Fstatus2F1099728634896703490widget%3DTweet

Winning at this hackathon was an important milestone for me professionally and I became even more motivated to improve my skills as a software engineer and a leader and keep working towards my dreams.

By the way, you can also expect to win really amazing prizes at most hackathons (it can be money, tech gadgets, etc.). Moreover, I won a gadget just by taking part in a survey. There are plenty of opportunities to win prizes and cool swag at a hackathon. 😉

https://twitter.com/IntuitDev/status/1099726219338223617?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1099726219338223617%7Ctwgr%5E2b784b62e4dd0a142337b1a2ce7b83ba054e0f88%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fpublish.twitter.com%2F%3Fquery%3Dhttps3A2F2Ftwitter.com2FIntuitDev2Fstatus2F1099726219338223617widget%3DTweet

Conclusion

Learning from my experience, you can see that attending a hackathon is a powerful way to improve professional skills, build your career and expand your network. If you have never taken part in a hackathon, I hope this article convinces you to give it a try.

Module Federation Lifehack - Custom Container Name

Oleksandr Khivrych — Sun, 02 Oct 2022 20:14:12 +0000

Intro

I have been using Module Federation Plugin for almost two years and have successfully used them for implementing micro-frontend architectures for many organisations. I decided to start sharing lifehacks related to module federation, which may save some time for other engineers trying to integrate Module Federation into their projects.

If you are not familiar with Module Federation Plugin, you can read my article at Beamery Hacking Talent Blog Module Federation for distributed front ends the best of both worlds?

Problem statement

If you use monorepo for your micro-frontends, coupled with tools such as Yarn Workspaces, NX or Turborepo, you probably use package scope for your monorepo. Scopes are a way of grouping related packages together. For example: @somescope/somepackagename

Let's say you have monorepo with two micro-frontend apps. The name of each micro app in package.json will be:

@my-micro-fe/app1- host.
@my-micro-fe/app2- remote container

And in the host @my-micro-fe/app1, you want to import the module with the Button component from remote container @my-micro-fe/app2, example:

const RemoteButton = React.lazy(() => import('@my-micro-fe/app2/Button'));

Sounds good! However, to make it work, we need to configure Module Federation Plugin correctly.

Flowing documentation, we should specify such a Module Federation config for @my-micro-fe/app2:

new ModuleFederationPlugin({
  name: '@my-micro-fe/app2',
  filename: 'remoteEntry.js',
  exposes: {
     './Button': './src/Button',
   },
   shared: ['react', 'react-dom'],
 }),

If you then run webpack build command, you will receive an error:

Error: Library name base (@my-micro-fe/app2) must be a valid identifier when using a var 
declaring library type. Either use a valid identifier (e. g. _my_micro_fe_app2) or use a 
different library type (e. g. 'type: "global"', which assign a property on the global scope
 instead of declaring a variable). Common configuration options that specific library names
are 'output.library[.name]', 'entry.xyz.library[.name]', 'ModuleFederationPlugin.name' and 'ModuleFederationPlugin.library[.name]'.

Solution

The problem is Module Federation plugin under the hood uses variable declaration for remote container scope. To fix this issue, you need to sanitize your app name to remove /,-,@ special characters and add a few more lines in the configuration with library.name and library.type properties:

new ModuleFederationPlugin({
   name: '@my-micro-fe/app2',
    filename: 'remoteEntry.js',
    exposes: {
      './Button': './src/Button',
    },
    library: {
      type: 'global',
      name: '_micro_fe_app2'
    },
    shared: ['react', 'react-dom'],
}),

The same fix you need to do in the host app:

    new ModuleFederationPlugin({
      name: '@my-micro-fe/app1',
      library: {
        type: 'global',
        name: '_micro_fe_app1'
      },
      remotes: {
        "@my-micro-fe/app2": `promise new Promise(resolve => {
          const remoteUrlWithVersion = 'http://localhost:3002/remoteEntry.js'
          const script = document.createElement('script')
          script.src = remoteUrlWithVersion
          script.onload = () => {
            // the injected script has loaded and is available on window
            // we can now resolve this Promise
            const proxy = {
              get: (request) => window._micro_fe_app2.get(request),
              init: (arg) => {
                try {
                  return window._micro_fe_app2.init(arg)
                } catch(e) {
                  console.log('remote container already initialized')
                }
              }
            }
            resolve(proxy)
          }
          // inject this script with the src set to the versioned remoteEntry.js
          document.head.appendChild(script);
        })
        `
      },
      shared: ['react', 'react-dom'],
    }),

As you can see, for our @my-micro-fe/app2 host app, I have also sanitized the name. Moreover, I am using pormise new Promise syntax to load remoteEntry.js file from the remote container @my-micro-fe/app1. That is why I also use the sensitized name to save the result of a request to the window object.

In addition

This was just a simple example and you can instead create a base webpack config where you can sanitize the app name and generate correct remotes config using pormise new Promise to reduce code duplication.

I hope this tip was helpful for you!

Cheers! 🍺