Windmill experts: Front-end development lead Sergii Pashko

This series explores thought leadership at Windmill. It focuses on showcasing the great minds behind Windmill’s award-winning product design and development that our clients love.

Sergii Pashko is Principal Technologist at Topaz, a Windmill Ventures company, and leads the front-end department at Windmill.

What is the structure of the front-end department at Windmill?

Sergii Pashko: In our company, the front-end development department is divided into four parts: HTML/CSS, CMS, React, and Angular teams. Each of them brings irreplaceable value to product development, so each has a separate lead. I lead both the front-end development department as a whole and the Angular team specifically. 

Usually, the HTML/CSS team works together with design teams to bring the most daring designers’ ideas to life and to provide the ideal user interfaces that our company is proud of. The CMS team implements high-quality business websites and landing pages using content management systems like WordPress. They work mainly on PHP, JavaScript, CSS, and search engine optimization. The results of these teams are most visible to a wide range of audiences because they advertise businesses: Windmill Digital and Topaz Digital are brilliant examples of their work.

The case studies on Windmill’s website show the results of the Angular and React teams’ work on client projects.

Angular developers implement the logic of single-page applications. It is not usually publicly available, hidden beyond authorization flows and accessible only after signing up. Such apps solve specific problems of the product’s end-user and bring value to the business.

Front-end developers usually work in squads or project teams together with back-end, mobile devs, product owners, quality assurance engineers etc. Each product has from 1 to 15 front-end engineers, sometimes even more.

What role does Angular play in the front-end development department?

SP: Angular is one of the most used technologies for FinTech, Wellness, and some other domains in Windmill. It is a universal framework. It allows us to naturally transform the interactivity and functionality of web applications to provide the best user experience (UX). We use TypeScript (a superset of JavaScript), Angular’s modularity, routing, event handling, composability, unit testing, and more to bring structure and simplification to the application building process.

It is easy to learn this framework. Some developers implement one website after another in a hurry in most outsourcing companies. They repeat the same forms for many years in different projects, while they don’t even have a good understanding of JavaScript’s core functionality, patterns, and paradigms. It’s not required for small projects.

In our company, it’s different. We usually omit simple projects. Based on our low-code solutions over Angular, customers can create hundreds of various websites almost without coding.

How essential is Angular to the development and design of fintech products? 

SP: In the past, everyone was accustomed to banks requiring Java Applets to access user account details. It was a huge step forward from just in-person banking in boring offices, but still was not a perfect solution. Do you remember when banking software required installing a few levels of certificates and additional applications (like Java JRE) on your Windows PC? The software didn’t support either Linux or Mac, and some banks even required a specific version of Internet Explorer! Of course, that’s far from a great user experience as well as problematic in terms of accessibility and flexibility.

Since then, online finance products have transformed multiple times and nowadays even Google Chrome on your phone supports online banking web apps with no issues.

It’s exactly those cases where Angular is a great choice. Thanks to Angular’s Incremental DOM approach, which involves an optimized bundle size and memory footprint, web applications based on this technology have the best performance on mobile devices.

Performance and UX are significant, but what about security in Angular? Isn’t it the most valuable part for fintech?

SP: The most critical work in terms of security is usually covered at the infrastructure, backend, and transport (TLS) levels. But Angular is one of the best security options required for client apps.

It provides a proper architecture out of the box, built-in protections against common vulnerabilities and attacks such as cross-site scripting (XSS), request forgery (XSRF or CSRF), script inclusion (XSSI), etc. Angular treats all values as untrusted by default; it sanitizes and escapes them. Its HttpClient has built-in support for the client-side half of a common anti-XSRF and anti-XSSI techniques.

What are some key features of Angular? 

SP: Angular has a great modular architecture provided out of the box. There are many well-defined coding standards provided directly by framework creators. It allows you to be relaxed about architecture and spend more time on actual development.

Also, the framework has a command-line interface (CLI) for code generating, updating, scaffolding, etc. We also build our custom Angular Schematics that extend a base CLI functionality to speed up our development process.

Angular has a components approach, RxJS, high testability, a deep usage of TypeScript features that enhance the developer experience and code quality control.

What role does Webpack 5 play in your department? 

SP: Webpack is a static module builder for JavaScript applications. Version 5 with Module Federation was released a year ago and allowed developers to create separate bundles from a single application to build and deploy them separately. It also allows combining multiple apps developed with different technologies in one. We started hacking on it immediately. It wasn’t even officially supported by Angular 11 (the latest release at that moment).

Now, Angular 12 and onwards have the support of Module Federation. While many companies around the world only start proof of concept (PoC) projects on it, Windmill’s Team has finished its framework over Angular that helps to roll out new federated micro-frontends on this technology fast.

Was there any other way to implement Micro-frontends when Webpack 5 didn’t exist?

SP: Yeah, micro-frontend architectures have been around for a long time. I’d split them by integration approach: build-time and run-time integrations. I know many companies that use the first approach — they publish each sub-project as a separate NPM package. Then they use it in the main app as a library. It gives an appropriate level of flexibility: using various library sets allow you to implement a new app by combining packages in a new way. Still, build-time integration in most cases won’t allow the team to follow all the micro-frontend principles such as independent deployment.

Here we come to real-time integrations, which can solve this problem. For instance, the iframe approach is one of them, which existed even when nobody used the term “micro-frontend” for it. Also WebComponents which was presented in 2011. This technology has a native browser’s support. Then there was single-spa, a JavaScript router library for front-end microservices, and they have a few competitors, cannot recall the name of each now.

Nowadays, we can call all these approaches “traditional” while Webpack 5 module federation is the cutting-edge technology at the moment.

Are there any other tools you use in your job?

SP: Micro-frontends are just a hot topic in the front-end world and one of the reasons why good developers choose Windmill for their next job. We use Angular Material, Highcharts, Ag-Grid, Azure, Bitbucket, etc. Technologists always use the right tools for each part of their responsibilities, so the list of tools is almost infinite. In a few weeks, the list could change unrecognizably.

For example, for chats between team members we used Slack for some time, but then moved to Google Meet. A few months ago, we decided to try Microsoft services, migrated all the communication of one project into MS Teams. Now we are deciding to move back or try something else. We are not afraid to make mistakes but we won’t stay on uncomfortable instruments.

How important are tools like Git, Bitbucket, and VS Code/WebStorm compared to others?

SP: Usage of Git is an industry-standard now, just decentralized and one of the fastest and popular version control systems. Bitbucket is a Git repository management solution. In simple words, we store our code there, run builds, git-flow processes, but from project to project Angular team is flexible in choosing alternatives. Some projects may use GitLab, GitHub, or even Azure DevOps.

VS Code and WebStorm are competitors themselves. We build our projects in a way that supports both IDEs with no issues. If someone is more performant on VIM, Emacs, or even Notepad++, they are free to choose.

What expert advice can you offer an engineer that develops features to enhance the user experience?

SP: Usually, it’s not enough to just have strong knowledge of JavaScript, HTML, CSS, and one of the frameworks (like Angular, React, or Vue) to become a good front-end developer. They don’t only have to work on their tasks, but also need to have an understanding of the business reasons of the project, its technology varieties, and needs.

Spending ten years working on some technology doesn’t make you a Senior Developer. It depends on your attitude to work, attention to detail, and communication skills more than just how well you know Angular.

A good developer has to be proactive (developers shouldn’t say that they can’t do a feature because they don’t have a particular tool), understand the pros and cons of different tools, and handle a development process themselves. They have to feel like the project is their own business, as if they pay for its development out of their credit card. Good developers build projects that they are proud of.

Windmill Digital offers high-quality product design services. Our experts are highly skilled in their field and are experienced in creating exceptional products for our broad range of clients. For more information, contact us here.