2/3 From JavaScript to TypeScript: How We Enhanced Code Reliability in SAPUI5 Development

[PetrBecka]

In the first post of this series, I introduced the reasoning behind our team’s decision to transition from JavaScript to TypeScript for developing SAPUI5 applications. Now, in this second installment, I’ll walk through the process of adapting our team to this shift, a change that went beyond mere code refactoring. It was a structured transformation that required every team member to embrace new tools and methodologies. Here’s how we planned, communicated, and implemented TypeScript as our new standard.

The Initial Research and Planning Phase

The journey began with in-depth research and consideration of TypeScript’s advantages. While we were initially drawn by the technical benefits - like type safety, error reduction, and improved tooling - we also saw this transition as an opportunity to invigorate our team with a fresh technology. After weighing the pros and cons, we moved forward with a clear goal: to enhance both our development process and the quality of our applications by modernizing our stack.

Aligning the Team with a Unified Vision

Before diving into any technical changes, we held a team meeting to align everyone on the vision. We explained how TypeScript would benefit not just the applications but each developer, providing them with tools to produce cleaner, more reliable code. By showing how this change would make their work easier, more rewarding, and aligned with industry standards, we helped our team see the transition as a personal and professional growth opportunity.

During the meeting, we discussed the modern programming features TypeScript would introduce, including static typing, interfaces, and modules, which improve productivity and maintainability. This conversation helped everyone understand the “why” behind the transition and set the stage for their active participation in the process.

OpenAI. (2024). A cartoon illustration of a software web developers having a meeting regarding TypeScript technology [AI-generated image]. DALL-E

Defining a Step-by-Step Road Map

Adopting TypeScript as our new standard required a structured approach. To ensure a smooth transition, we defined a road map divided into three key phases, each designed to build upon the last and to support developers at every experience level.

Phase 1: Learning and Exploration

The first phase focused on education. We provided a curated set of learning materials that covered fundamental TypeScript constructs, such as type annotations, interfaces, and modules, and set up regular “learning hours” for developers to engage with this material without other project pressures. Senior developers were on hand to provide mentorship, answer questions, and offer guidance, ensuring that even junior developers had the support they needed to navigate the new language.

Phase 2: Hands-On Practice with a Sample Application

Once the team was comfortable with the basics, we introduced a sample SAPUI5 application written in TypeScript. This exercise gave everyone a safe environment to experiment with TypeScript in a familiar SAPUI5 setting. Each developer was tasked with enhancing this application following a step-by-step guide that covered project setup, code organization, and deployment scripts.

This practical experience not only helped our team solidify their understanding of TypeScript but also gave them an appreciation of how it simplifies complex tasks. At the end of this phase, all team members had contributed to the project repository, adding features and learning to handle the full development pipeline with TypeScript.

Phase 3: Moving to Production with Confidence

With hands-on experience under their belts, the team was ready to start implementing TypeScript in live projects. We structured this phase around agile teams, each led by a senior developer well-versed in TypeScript. These team leads helped guide less experienced developers through the nuances of production-grade TypeScript code, providing insights into handling edge cases and optimizing application performance.

This approach helped us balance learning with production needs. Developers became confident in their ability to leverage TypeScript’s features to build reliable applications and saw firsthand how it improved their code quality.

OpenAI. (2024). A cartoon illustration of a software web developer having a hard time learning TypeScript technology [AI-generated image]. DALL-E

Empowering Developers with Modern Tools

Throughout the transition, we focused on making this experience both educational and empowering. By moving to TypeScript, we aimed to instill a growth mindset within our team. The introduction of a modern toolset helped developers not only improve their coding skills but also approach their daily work with renewed enthusiasm.

OpenAI. (2024). A cartoon illustration of a junior software web developer having a success creating TypeScript solutions together with senior developer [AI-generated image]. DALL-E

Conclusion: A Team Transformed by TypeScript

Transitioning to TypeScript was a deliberate, structured journey that strengthened both our team and our codebase. By taking a thoughtful approach, we ensured that developers felt supported and empowered, turning a challenging shift into an opportunity for growth and learning. The success of this transition has set us up for the final step: applying these lessons to build even more robust SAPUI5 applications, as we’ll explore in the last post.

We’d love to hear your experiences and insights! Have you adopted TypeScript in your team, or are you considering it? How have you managed the transition, and what challenges or successes have you encountered? Please feel free to share your thoughts, ideas, or any advice you might have for our team as we continue on this journey. Let’s learn together and make the TypeScript journey smoother for everyone in the SAPUI5 community!