Behind the Scenes: The Technical Magic that Powers our WYSIWYG Webpage Builder / WYSIWYGウェブページビルダーを支える技術的マジックの裏側

We will share our journey on how we built a WYSIWYG Webpage Builder, from concept to launch.
With a flexible component system and conditional rendering functionality, our WYSIWYG page builder streamlined workflows, eliminated the need for coding and technical skills to create beautiful and responsive webpages, and allowed our company to create 150% more webpages than without it. We will describe our practices for building a WYSIWYG page builder, such as finding a balance between versatility and complexity. Attendees will leave with a deeper understanding of how to leverage shared knowledge to create an efficient and effective page builder.

WYSIWYGウェブページビルダーをどのように構築したか、コンセプトから立ち上げまでの道のりをご紹介します。
柔軟なコンポーネントシステムと条件付きレンダリング機能を備えたWYSIWYGページビルダーは、ワークフローを合理化し、美しくレスポンシブなウェブページを作成するためのコーディングや技術的スキルを不要にしました。WYSIWYGページビルダーを構築する上で、汎用性と複雑性のバランスを取るなど、私たちが実践していることを説明します。参加者は、効率的で効果的なページビルダーを作成するために、共有された知識を活用する方法について理解を深めることができます。

------
Merpay & Mercoin Tech Fest 2023は3日間のオンライン技術カンファレンスです。
IT企業で働くソフトウェアエンジニアおよびメルペイ・メルコインの技術スタックに興味がある方々を対象に2023年8月22日（火）、23日（水）、24日（木）の3日間、開催します。 Merpay & Mercoin Tech Fest は事業との関わりから技術への興味を深め、プロダクトやサービスを支えるエンジニアリングを知ることができるお祭りです。

今年のテーマは「Unleash Fintech」。 メルペイ・メルコインのこれまでの技術的な取り組みはもちろん、メルカリグループのFintech事業における新たな挑戦をお伝えします。 セッションでは事業を支える組織・技術・課題などへの試行錯誤やアプローチなど多面的にご紹介予定です。

メルペイ・メルコインが今後どのようにUnleash（解放）していくのか、ぜひ見に来てください。

■イベント関連情報
- 公式ウェブサイト：https://events.merpay.com/techfest-2023/
- 申し込みページ：https://mercari.connpass.com/event/286670/
- Twitterハッシュタグ： #MerpayMercoinTechFest
■リンク集
- メルカリ・メルペイイベント一覧：https://mercari.connpass.com/
- メルカリキャリアサイト：https://careers.mercari.com/
- メルカリエンジニアリングブログ：https://engineering.mercari.com/blog/
- メルカリエンジニア向けTwitterアカウント：https://twitter.com/mercaridevjp
- 株式会社メルペイ：https://jp.merpay.com/

Transcript

1. Session Title From Concept to Launch: Accelerating Marketing Workflows with a WYSIWYG Page Builder Merpay Growth Platform Frontend
2. Today’s speakers
3. Arvin Huang / @arvinhv Arvin is a frontend tech lead at Mercari, with a passion for empowering internal users and delivering value to customers. He has experience in Taiwan and Japan, and his main focus is on CRM tools, productivity strategies, and enhancing user experience. Since joining Merpay in 2023, Arvin has been a valuable member of the CRM platform team, ensuring seamless workflow processes for internal teams. Merpay, Inc. Tech Lead Ben Hsieh / @wkh237 Merpay, Inc. Software Engineer Ben joined Mercari in February 2020 after moving from Taiwan to Japan. Having worked for startups, multinationals like Alibaba, and also as a freelancer in Taiwan. Ben has gained extensive experience in video streaming, Fintech, and e-commerce. Currently, he is part of a Merpay team building a cross-platform marketing operations system and also contributing to the company's LLM-based applications.
4. Jas Chen / @jas-chen Jas is a frontend engineer at Mercari since February 2022. He started as a full-stack web engineer but found his passion in creating beautiful user interfaces. Jas is now a specialist in frontend engineering, constantly updating his skills and writing clean code. Merpay, Inc. Software Engineer Hal Amano / @hfavisado Merpay, Inc. Engineering Manager Hal is the manager of the growth platform frontend and growth platform mobile teams. He has a strong background in software development, including project management, Android app development, C++ development, and embedded systems using C and other programming languages. Since joining Mercari in October 2021, Hal has been focused on driving growth and innovation while mentoring and developing his teams.
5. About this talk Today this talk will focus on our web page builder, which is one of the most ワクワク (exciting) parts of our day-to-day work Exciting points • It’s challenging • It allows us to deep-dive into the fundamentals of front-end technologies
6. How we started Before, marketers would design promotions and ask designers to use HTML/CSS to create campaign pages for it. Then frontend engineers would put Javascript into the page to make it interactive. But on average we needed to create 30 campaign pages per month. That’s one page every day! When we had to create pages involving three separate parties, it would require lots of back-and-forth, creating strain on us all. How can we make everyone’s life easier?
7. The 1st Gen CMS ✨
8. A tool that does the job • We created a tool that helps designers minimize the amount of coding required. • It encapsulates the JS/HTML/CSS into components • Engineers initiated this project and made it part of the team's roadmap.
15. A tool that does the job • Marketers and designers can create pages by themselves • It’s straightforward • It solves the problem
16. Challenges in usability as it scales As we added more components to the system, it becomes increasingly cumbersome • Gigantic form • Still required engineering effort to support new requirements
17. Sluggish development pace Component-based CMS system takes more time to adapt changes, even the smallest ones 👇
18. Communication gap Spec mutates at different stage resulting in incorrect output Track impression when it is visible code onVisible => impression(‘item’) ? How can we make sure the result is exactly what 　 wants? Can we reuse this process? PM Eng
19. Dependencies between teams We have spent so much time and effort on the back-and-forth of the feedback loop Source of Requirements Product & Marketing Engineer & Designer
20. Empower our marketers Source of Requirements CMS Why don’t we focus on the tool and empower our colleagues instead? Empowers Enhancement Bug fix Engineer & Designer
21. Standardize the process Trigger Repeated No What if we offer reusable process that clearly fulfills the requirements? 🤔 Track impression when it is visible -- Select event -- visible invisible click hover -- Select action -- Track - impression Track - event Send API Open link Create action
22. 🔥 Presentations, demos, and docs
23. The 2nd Generation CMS ✨
24. The key changes in the new system Composability Flexible layout creation 02 01
25. Composability - Finer granularity brings more flexibility
26. Challenges FTA Button Link Button Listing Button Entry Button • Creating components for each feature separately is neither scalable nor efficient. • Can only support single column layout.
27. Smaller visual elements with flexible style control • Layout • Text • Image • Markdown
28. Smaller visual elements with flexible style control • Powered by TailwindCSS
29. Logic control components • When • Each
30. Action component • Make HTTP requests • Communicate with webview
31. How does it look and feel?
43. Powerful, but complex 🫠
44. 󰷺 Challenge: When Flexibility Hinders Usability
45. Flexibility vs Usability The tool was initially designed and built by engineers with flexibility in mind, with the aim of empowering marketers. After releasing the first few versions, we discovered that non-technical users found it challenging to learn and navigate the system. It seemed that the more flexibility we incorporated, the more technical knowledge was required. Was there a way to find the sweet-spot between them? 🤔
46. Case Study - Layout System The Layout System One of the most flexible parts of the Layout System is that it leverages Tailwind CSS so that page creators have immediate access to most CSS styles out-of-box ー as long as they know CSS 😨 Developers: Shouldn’t be too hard to understand Users: Seriously?
47. The First Attempt - breakdown the “classname” The team quickly build a prototype that broke down the notorious classname field down to smaller ones The team: Maybe they just don’t know where to start it 🤔 Case Study - Layout System
48. Feedback 󰢃 (as confused as the previous one) It’s not surprising that our users and stakeholders still got really confused as it required the same knowledge (CSS) to use it 😵 Takeaway → Learning Tailwind and CSS is overwhelming to our users Case Study - Layout System
49. The Second Attempt - IntelliSense 🦄 If learning Tailwind and CSS is difficult for our users, what if we bring IntelliSense to our users? The team came up with another prototype • An input control with a Trie-based approach that can provide suggestions out of hundreds-thousands of combinations in a few milliseconds • It also supports Zen Coding Case Study - Layout System
50. The Result 󰢃 (Not so impressed) While the code-completion might haven seemed to be a brilliant solution and developers really enjoyed building it. It’s still very hard to get started for people that have zero understanding of CSS or even programming. Case Study - Layout System
51. Successful Attempt - Embrace the Common Practices As we know our users use Figma, we built a GUI wrapper on top of the classname so that they don’t necessarily need to deal with it (they still have the access to it). Two-way conversion Case Study - Condition System
52. The condition system In our new page builder, we leverage ES6 tagged template literals to allow marketers to create dynamic content. Here’re some practical examples 👉 A text uses value from user’s profile data 01 Page content that renders conditionally based on certain conditions 02 Case Study - Condition System
53. Case Study - Condition System Real-world problems Conditions are too complicated so marketers have no idea how to write it 󰷺 Copy-pasting is too convenient so the maintenance effort increases linearly with the number of conditions 🫠 And many more lines goes here …
54. Case Study - Condition System Componentize the page content Maintain templates with marketers 01 02 Our attempts
55. Takeaways & Lessons Build small prototypes and test with your users to get feedback 02 Starting with a high level of flexibility is still a favorable choice, as we can still offering different levels of flexibility on demand 01 Get ready for an exciting adventure in WYSIWYG editor development, where obstacles lead to growth and innovation 03
56. Takeaways & Lessons Repeatedly build software ❌ Work on interesting projects that scale ✅ 05 Increase efficiency by using automation 04
57. Problem found? ⇨ Build a solution! 01 Scalability issues? ⇨ Improve the tool. Huge architectural differences? Consider rebuilding the tool. 02 Build on top of the solid foundation that was created 03 Summary