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.
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?
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?
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.
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?
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.