Better Front-End for Better Results

In the first days of May 2022, Lemon.io organized the online meetup called Better Front-End for Better Results. 

Here are its four participants:

Nazar Tokar (organizer) is a front-end developer and blogger. He’s also a founder of Tokar.ua — an independent Ukrainian online media writing about tech, culture, cybersecurity, and global trends.

Dávid Lévai is an indie web developer, content creator, and digital nomad. He is writing about IT businesses and app production. Since his teenage years, he’s worked as a freelance full-stack developer, primarily for startups and small businesses. In 2020, he scaled his knowledge and now builds businesses. 

Yurii Lubynets is a Senior web developer (React) at Lemon.io. He’s got over six years of experience developing, implementing, and supporting cutting-edge projects. 

Eliran Natan is a R&D software architect.

The main topics were front-end improvements and their implementation. Its format was quite informal. All the participants shared their insights with one another and answered questions from the YouTube chat. The whole discussion went live). 
The first question was about the improvement of web page performance.

According to David Levai, the key factors influencing the answer are the technologies used for page creation and the components of UI/interface we want to improve. 

One of the winning options is Node.js which lets you handle static site generation for front-end progress. Considering low-level React code, memorization and call-back hooks help resolve the extensive lists and performance-heavy calculations. 

Yuri Lubynets underlined the role of front-end optimization and spoke in favor of: 

• substitution of heavy and slow Moment.js with lighter performant counterparts (e.g., Day.js);
• package refactoring that reduces bundle size;
• working with the Tailwind framework that reduces app loading time. 

Eliran Natan advised using dynamic importing (importing things only when you need them) and extensively covered the essential role of AI (particularly the Tensor.js library) for predictive analytics. Artificial intelligence helps you predict user moves and use dynamic imports. You can import stuff right before the user navigates the page using all this. It’s like getting into users’ minds — the more they use the app, the more trained model they will get. According to Natan, this model is beneficial even despite the need for data collecting that increases downloading time.

One more intriguing issue that was in Natan’s focus is that of perceived performance. What does it mean? If it’s hard to speed up your app (making it faster), you can always make it seem faster. What are the tools for that? Use loaders, don’t show elements that are not immediately needed, or load staff in the background using the WebWalkers. 

Speaking about perceived performance techniques, David Levai mentioned optimistic rendering. You render out stuff before sending it to the server, and it’s downloaded faster. Currently, Facebook uses this technique in its Messenger app. 

The following question was about libraries for building fast and secure web apps and sites with dynamic content.

Dávid Lévai spoke about JAMstack (standing for JS, API, and Markup) — not quite an architecture, but rather a methodology. JAMStack is built on mostly static sites. That’s why you don’t need an API connection when you add a new post or edit something on your website. Your users don’t have to wait for the site to load first to call the API, for the servers to call the database and send it back together.

 Instead, all your pages will generate statically. The browser only has to render and send the user a static HTML page. There are technological differences — for example if you use any React-based solution right after sending a static HTML page, React’s gonna kick in and load all JS stuff from React. On the other hand, several site generation libraries, frameworks like Eleventy, some new ones like Astro, or some older ones like Jackall don’t need to load all JS stuff. 

So, it’s a good point to use any JamStack technology bundle, headless CMS (e.g., Sanity), and third-party services like Stripe for payments or Cloudinary. That’s another level of site building Cloudinary or another static file service for your files. 

According to Yuri Lubynets, if you’re working with B2C and your product depends on search engines, you should worry about Google guidelines on how to top your website or app ranking. The Lighthouse library helps you ensure your app or site satisfies Google requirements (page speed, SEO accessibility). 

Tackling the topic of the inside architecture and front-end, Eliran Natan highlighted the concept of domain-driven design (besides, it was the focus topic of his lecture before the meetup). In DDD, the code is self-explanatory. The more you apply DDD, the fewer documents you need. TypeScript can help you a lot. Some documentation is crucial to describe the architecture, but still, most of your apps should be self-explanatory. Part of the architect’s job is to supply good frameworks and constraints on your code so everyone can understand it without extra effort. 

The next module of discussion was about TypeScript language and React library. Per Eliran Natan, there’re no reasons not to use React in front-end development. Nevertheless, it’s essential to remember that it has its limitations. For instance, it won’t help you build the architecture of your front-end since it’s only applied to the visual components.

To optimize the experience of working with React components, Yuri Lubynets suggested cashing the most reusable, the most complicated, or the most crucial component. In a heavy workload, memorizing everything is redundant. 

Eliran Natan highlighted that TypeScript converts runtime errors into compilation time errors and helps avoid 90% of bugs during code writing. It gives you headaches at writing but saves you from production troubles later.

Seniors loved TS at once. For Juniors and Middles, it took a couple of months to love it. However, they still do, realizing it saves them from many problems in the long run.

Ten years ago, front-end development was still a relatively unknown concept. As of now, it’s become a crucial part of web development, just as back-end development. What is the future of front-end development?

Eliran Natan underlines the current crucial role of the added value your product gives users. AR/VR and AR/VR-based games have been pushing front-end design to the next level — where it should provide more added value. How to achieve that? 

For Natan, there are three possible solutions: domain-driven design, clean architecture, and micro frontend. To add value, we can take architectures and patterns that solve many problems in back-end development and apply them to the front end to make scalable systems. FE development and framework usage can substitute whole departments of people and boost your professional growth: front-end developers with GitHub accounts are DevOps in five minutes.

TL;DR:

If you are a front-end developer in 2022, you should:

• know TypeScript;
• work in Redax and React;
• have VS Code as IDE.

Explore our stacks and pages: Android SDK, API, NoSQL, NX, Kanban