Mercari ปรับปรุงประสิทธิภาพการพัฒนา UI ได้ 56% ด้วย Jetpack Compose
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
Mercari ช่วยให้ผู้คนนับล้านเลือกซื้อและขายสินค้าได้เกือบทุกอย่าง บริษัทก่อตั้งขึ้นในปี 2013 ในญี่ปุ่น และปัจจุบันเป็นตลาดกลาง C2C ที่เน้นสมาร์ทโฟนที่ใหญ่ที่สุดในญี่ปุ่น ทีมสถาปนิกไคลเอ็นต์ของ Mercari เริ่มใช้ Jetpack Compose ในปี 2020 โดยมีเป้าหมายที่จะใช้โซลูชันและเทคโนโลยีที่ทันสมัยซึ่งปรับขนาดได้ในระยะยาวเพื่อสร้างกลุ่มเทคโนโลยีสำหรับแอปพลิเคชันใหม่ๆ
สิ่งที่พวกเขาทำ
ทีม Mercari ต้องการใช้ระบบการออกแบบที่มีการจัดการสถานะและการจัดรูปแบบที่ซับซ้อนใน Android Views ซึ่งเป็นงานที่ซับซ้อนมาก การใช้ Jetpack Compose ไม่เพียงช่วยให้ทีมสามารถติดตั้งใช้งานระบบที่ซับซ้อนนี้ได้ แต่ยังช่วยให้ใช้เวลาในการพัฒนาแต่ละหน้าจอน้อยลงด้วย
นอกจากนี้ Jetpack Compose ยังช่วยให้ทีมเขียนโค้ด UI สำหรับแอปใหม่โดยใช้ระบบการออกแบบ ทำให้โค้ด UI กระชับและเข้าใจง่าย ด้วยเหตุนี้ ทีมจึงมีเวลามากขึ้นในการเขียนหน้าจอและตรรกะทางธุรกิจ เช่น การรองรับธีมสีเข้มในทางปฏิบัติ
นอกจากนี้ ทีม Mercari ยังเขียนเครื่องมือพิสูจน์แนวคิดสำหรับการผสานรวม Figma กับระบบการออกแบบ ซึ่งจะสร้างโค้ด UI จากการออกแบบคอมโพเนนต์โดยอัตโนมัติ ทีมงานกล่าวว่าการพัฒนาเครื่องมือนี้ด้วย Compose นั้นง่ายกว่าเนื่องจากลักษณะการประกาศ
"เมื่อนักพัฒนาแอป Android คุ้นเคยกับการเขียนโค้ด Jetpack Compose แล้ว ก็คงไม่อยากกลับไปใช้แบบเดิม" - Anthony Allan Conda, Android Tech Lead ที่ Mercari
ผลลัพธ์
Mercari ใช้โค้ดน้อยลงมากในการเขียนหน้าจอด้วย Jetpack Compose และระบบการออกแบบใหม่ ในหน้าจอที่มีเนื้อหาที่เลื่อนได้ไม่สิ้นสุด ซึ่งเป็นกรณีการใช้งานทั่วไป นักพัฒนาแอปได้ลดโค้ดลงประมาณ 56% ด้วยเหตุนี้ นักพัฒนาจึงเขียนหน้าจอได้มากขึ้นในเวลาเท่าเดิม ทำให้มีเวลามากขึ้นในการเขียนตรรกะทางธุรกิจและส่วนอื่นๆ ของโค้ด
นอกจากนี้ ยังทำสิ่งต่างๆ ได้มากขึ้นด้วย UI เอง เช่น การใส่ภาพเคลื่อนไหวและการใช้ API ที่ใช้งานง่าย เช่น AnimatedVisibility, Crossfade และ Animatable
Mercari วางแผนที่จะใช้ Jetpack Compose ในแอปพลิเคชันใหม่ต่อไปจนกว่าจะเปิดตัว ระบบการออกแบบของแอปซึ่งมี Android SDK ที่เขียนด้วย Jetpack Compose ยังออกแบบมาให้ทำงานร่วมกับแอปพลิเคชันหลายรายการภายใน Mercari ได้ด้วย
เริ่มต้นใช้งาน
ดูข้อมูลเพิ่มเติมเกี่ยวกับ Jetpack Compose
ตัวอย่างเนื้อหาและโค้ดในหน้าเว็บนี้ขึ้นอยู่กับใบอนุญาตที่อธิบายไว้ในใบอนุญาตการใช้เนื้อหา Java และ OpenJDK เป็นเครื่องหมายการค้าหรือเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2021-05-19 UTC
[[["เข้าใจง่าย","easyToUnderstand","thumb-up"],["แก้ปัญหาของฉันได้","solvedMyProblem","thumb-up"],["อื่นๆ","otherUp","thumb-up"]],[["ไม่มีข้อมูลที่ฉันต้องการ","missingTheInformationINeed","thumb-down"],["ซับซ้อนเกินไป/มีหลายขั้นตอนมากเกินไป","tooComplicatedTooManySteps","thumb-down"],["ล้าสมัย","outOfDate","thumb-down"],["ปัญหาเกี่ยวกับการแปล","translationIssue","thumb-down"],["ตัวอย่าง/ปัญหาเกี่ยวกับโค้ด","samplesCodeIssue","thumb-down"],["อื่นๆ","otherDown","thumb-down"]],["อัปเดตล่าสุด 2021-05-19 UTC"],[],[],null,["# Mercari improves UI development productivity by 56% with Jetpack Compose\n\n[Mercari](https://play.google.com/store/apps/details?id=com.kouzoh.mercari) allows millions of people to shop and sell almost anything. The company was founded in 2013 in Japan, and it now is the largest smartphone-focused C2C marketplace in Japan. Mercari's Client Architect Team started using [Jetpack Compose](https://developer.android.com/jetpack/compose) in 2020 with the goal of using modern solutions and technologies that can scale for the long term to build their tech stack for new applications.\n\nWhat they did\n-------------\n\nThe Mercari team needed to implement a design system with complex state management and styling on Android Views --- a very complex task. Using Jetpack Compose, they were not only able to implement this complex system, it helped them spend less time developing each screen.\n\nJetpack Compose also helped the team write UI code for their new app utilizing the design system, making their UI code concise and easy to understand. As a result, the team can spend more time writing screens and business logic, such as practical support for the dark theme.\n\nIn addition, the Mercari team wrote a proof-of-concept tool for integrating Figma with the design system, which automatically generates UI code from the component designs. The team said that developing this tool was easier with Compose due to its declarative nature.\n\n*\"Once Android developers get used to writing Jetpack Compose code, they wouldn't wish to go back.\" - Anthony Allan Conda, Android Tech Lead at Mercari*\n\nResults\n-------\n\nBetween Jetpack Compose and their new design system, Mercari was able to use far less code to write screens. On screens with infinitely-scrollable content --- a common use case --- they actually reduced their code by about 56%. As a result, they were able to write more screens in the same amount of time, giving them more time to write business logic and other parts of the code.\n\nAlso, they were able to do more with the UI itself, such as incorporating animations and using intuitive APIs such as *AnimatedVisibility* , *Crossfade* , and *Animatable*.\n\nMercari is planning to continue using Jetpack Compose in their new application until its release. Their design system, with the Android SDK written in Jetpack Compose, is also designed to work with multiple applications within Mercari.\n\nGet started\n-----------\n\nLearn more about [Jetpack Compose](https://developer.android.com/jetpack/compose)."]]
