Serg Hospodarets Blog

Serg Hospodarets blog

Front-End frontiers
Serg Hospodarets
Conference Talk- Front-End Micro apps

The complexity of Front-End applications grew past years extensively. That’s the reason big monoliths started being split to separate UI and modules working with different API. After years of using custom solutions and confusion around Micro Front-Ends, we are in the new era of the native support of Module Federation in Webpack 5, and tools, such as Storybook components system, SPA, and others switching to the common standard.

But this gives the tool to build apps which can work with specific microservices, and behind there are different topics- which use cases micro apps are useful for, what about coordination of shared modules interaction, their promotion and deployment of the newer versions, how they scale, how teams and work can be organized.

In this talk, the above areas will be discussed, and together with the live demos, you’ll learn about the current state of the art.

Talk recording is here

Here is the presentation deck

Read full post  >
Conference Talk- Native JavaScript modules

All the modern browsers support native JavaScript modules, and it’s a perfect time to start using them, which will change the way we are bundling the JavaScript using Webpack, Rollup, and other bundlers, and how the code is executed.

We will take a look how they work, what is the level of support in the browsers and Node.js, plus main findings and gotchas on the way of publishing and using them in production.

Looking into examples, we will understand the native modules features, performance details and lazy loading JS modules techniques.

Read full post  >
Conference Talk- CSS Houdini: From CSS Custom Properties to JavaScript Worklets and back

Today CSS Custom Properties are supported in all the major browsers.

Now it’s time to do the next step- to have an ability to register new Custom Properties from JavaScript and setup the browser how to work with them (e.g. real CSS polyfills). They should work with the same performance as the native CSS properties, being animatable and aligned with CSSOM.

Custom Properties can be used as a bridge between CSS and JavaScript. Houdini Task force introduces specs and JavaScript Worklets to expose the interaction with previously fully internal browser rendering mechanisms (during Paint, Layout, Composite stages).

All this brings Front-End development to the next level, parts of which are already available for the developers.

Read full post  >
Chrome DevTools- Performance monitor

How often have you applied the JavaScript or CSS solution considered as an optimization, and after couldn’t find an easy way to measure how effective it was?
Of course, you have the performance timeline recording, but in most cases, it provides the retrospective data, not the life-updated.
For this and other performance-measuring techniques, Chrome DevTools added the “Performance Monitor” tab which represents the real-time app performance metrics:

Read full post  >
Finally the Promise.prototype.finally() is available

Since the Promises were added in JavaScript, one of the biggest concerns was the absence of an ability to easily apply some code after the Promise is fulfilled (after both success and reject actions). There are many examples of such a need: showing a loader when the request to the server is in flight or even a simpler case- when we just want to log the completion of the operation regardless of how it finished.

Previously we had to include the function in both “on-success” and “on-reject” sections, which resulted in the code overhead and clearly showed the need of something like other libraries have, so meet the Promise.prototype.finally!

Read full post  >