About Our Front-End Study Group

Introduction

Hello!
I'm high-g (@high_g_engineer) from the New Car Subscription Development Group at the Osaka Tech Lab.
In this article, I'd like to introduce the front-end study group that we started within the company.

Background

One day, I had the opportunity to show my supervisor the TSKaigi 2024 timetable during a one-on-one meeting in the New Vehicle Subscription Development Group. He responded positively, saying, "This covers a wide range of topics and is a great teaching material. It'd be great if we could use this to hold study sessions where front-end engineers across departments to share insights and build horizontal connections."

Those words prompted me to reach out to front-end engineers who seemed eager to join, and I began planning an in-house study group.

Purposes of the Study Group

This study group has three goals:

1. Learning: Deepen our understanding by discussing and sharing presentations from external conferences and web standards
2. Applying: Take what we learn and put it to use in real projects
3. Sharing: Share the outcomes, challenges, and insights from real-world applications to accumulate knowledge across the organization

This is a practical study group that aims not to simply acquire knowledge, but to get to the point where we can actually use it on the job. We set aside a one-hour time slot once a week and conduct the sessions in a format appropriate to the content, such as read-along, mob programming, hands-on sessions.

Main Themes and Development History

Since September 30, 2024, 34 events have been held to date, and the following topics have been addressed:

Sharing insights from conferences and tech events (Session 1 to 17)

To get things rolling, we focused on the latest trends in front-end technologies using presentations from events like TSKaigi 2024 and JSConf JP 2024 as starting points.

• Thinking about the Future of Prettier (Session 1): The future direction of code formatters
• Improving TypeScript Performance (Session 2): Comparing with issues in actual business code
• **This is What Happened When We Unified Everything with TypeScript! ** (Session 3): A full-stack development case study
• TypeScript Journey: Helpfeel's journey of trials and errors on the road to success (Session 5)
• Type-Safe and Efficient Routing with TanStack Router (Session 7)
• ** Storybook-Driven Development: Reproducibility and Efficiency of UI Development ** (Session 9)
• Setting Trust Boundaries Instead of Blindly Relying on TypeScript Type Declarations (Session 10)
• LAPRAS Open Performance Tuning by Mizchi-san (Sessions 12-13): Performance improvement learned from external case studies
• ** Micro-Frontends on the Top Page of Yahoo! JAPAN** (Session 15): A development example from a large organization
• JavaScript Module Resolution Interoperability (Session 16)
• You Don't Know Figma Yet - Hacking Figma with JS (Session 17)

Cross-Team Knowledge Sharing & Understanding (Sessions 18-24)

As more people joined, we started sharing personal skills and the status of each division's front-end team. This helped shape the future direction of the study group and gave us a chance to review different projects at the code level. It also allowed us to identify common front-end challenges across KINTO Technologies.

• Looking Back So Far (Session 18): Discussing the direction of the study group
• Self-Introductions with Career Backgrounds (Session 19): Promoting mutual understanding among members
• Frontend Development Status Sharing Session for Each Team (Sessions 20-24): A five-session series in which each team shares their tech stack, ongoing challenges, and current initiatives in detail

Understanding and Applying Web Standards (Sessions 25-28)

At the retrospective session, some expressed interest in better understanding web specifications. Therefore, we decided to dive into the Baseline project together.

https://web.dev/baseline?hl=ja

• Dive into Baseline (Sessions 25-27): A systematic study of web standards in a three-session series
• Baseline Review and Discussion of Next Steps (Session 28): Summarizing what we learned and discussing what to explore next

Practical Performance Improvement (Sessions 29-Present)

Using Mizchi-san's public performance tuning video as a reference, we began applying performance improvements to actual products.

https://www.youtube.com/watch?v=j0MtGpJX81E

• ** FACTORY Performance Improvement** (Sessions 29-30): A two-session series sharing specific optimization strategies and the results
• TSKaigi 2025 Presentation Sharing Session (Session 31): Preview of presentation content by internal members
• ** KINTO ONE Performance Improvement** (Sessions 32-34): A three-session series where everyone worked on real performance improvements through mob programming, resulting in our most hands-on learning experience

The Impact of Ongoing Sessions

Increasing and Retaining Participants

We kicked off the study group with just 5 members, but over time and with consistent sessions, it's grown into a group of over 10 regular members. Participants are not only from the New Vehicle Subscription Development Group but also from other groups, realizing horizontal connections. Many of the original members are still actively involved and the retention rate of new members is also high, proving that this study group has become a truly valuable space for everyone.

Gradual Improvement of Organizational Technical Capabilities

Knowledge gained from conferences and tech events often stays at the individual level, but by learning simultaneously with front-end engineers from each department who have different perspectives on issues, not only does it benefit the entire organization, but it also leads to insights that are hard to gain alone.

Members who consistently took part in the Baseline series now understand web standards at a specification level, rather than just using the technology vaguely, which helps them make more well-founded decisions when choosing tools for their work.

Acquiring Practical Problem-Solving Skills

In the most recent sessions, we used a mob programming format to work on improving the performance of actual products such as KINTO ONE and KINTO FACTORY.

By applying the knowledge gained in the workshop directly to the product and actually doing it, the participants were able to overcome their aversion to performance tuning. This was a practical and valuable initiative that also led to increased sales.

Deepening Technical Collaboration Between Teams

Through the development status sharing sessions, we've had more chances to learn about the technical efforts and challenges of other teams that we hadn't fully understood before. As a result, there's been a growing number of cases where teams with similar issues follow up individually after sessions to consult and collaborate.

The study group is no longer just a place for learning; it's becoming a hub for solving real business challenges.

Conclusion

This study group, which was started with the aim of strengthening horizontal connections between front-end engineers within the company, began by sharing knowledge at external conferences and has now evolved into performance improvement based on actual products.

We plan to keep it going, fostering collaboration while helping raise the overall technical proficiency of the organization.