ประสบการณ์ทดลองใช้ React-Sketchapp ในกระบวนการทำงานจริงๆ
หลังจากบทความที่แล้ว ก็ทดลองใช้ React-Sketchapp มาเรื่อยๆ เลยอยากจะมาเล่าสิ่งที่ได้ทดลองทำ และข้อจำกัดต่างๆ ที่เจอระหว่างทาง
โดยโจทย์ที่จะลองทำคือ อยากจะทำฟีเจอร์สักหนึ่งฟีเจอร์ และอยากใช้ Styleguide ด้วย โดยทั้งหมดต้องจบจาก React-Sketchapp ล้วนๆ ช่วงนั้นมีตัวเลือกที่รออยู่คือ Jitta Portfolio ซึ่งหลังจากได้ลองทำแล้วก็รู้สึกตัดสินใจไม่ผิด ที่เลือกอะไรที่มีรายละเอียดพอสมควรแบบนี้
จุดเริ่มต้น
เริ่มต้นโครงสร้างจากโปรเจค Styleguide ที่เป็นตัวอย่างจาก Airbnb ที่เลือกตัวอย่างนี้เพราะในโปรเจคนี้อยากจะให้มี Style ตรงกลางให้ทุกๆที่สามารถเรียกไปใช้ได้ และอยากทำ component ที่หน้าไหนต้องการใช้ก็สามารถเรียกไปใช้ได้เหมือนกัน
หลังจาก Setup เสร็จแล้วก็มาถึงจุดเริ่มต้นแรกคือสร้าง Artboard สำหรับอันแรกไม่ติดขัดอะไรเพราะตัว React-Sketchapp เค้า support อยู่แล้ว ปัญหาต่อไปคืออยากจะมี Artboard เยอะๆ ตามภาษา Designer ซึ่งในเวอร์ชั่นที่ใช้ ยังสร้างได้แค่อันเดียว ก็เลยต้องทำ Artboard ปลอมๆขี้นมา ตั้งชื่อว่า <VisualArtboard>
คราวนี้แหละ จะมี Artboard สักสิบอันก็เพิ่มมาเลย ส่วนโครงสร้างข้างหลัง จริงๆแล้วไม่ได้มี Artboard เกิดขึ้นใน Sketch เลย ส่วนตัว Artboard ที่ทำขึ้นมาใครชอบแบบไหนจะ theme ยังไงอันนี้ก็ปรับได้ตามสบาย
ส่วนข้อเสียที่เจอของการทำแบบนี้คือ ใครที่ใช้ service ที่ต้อง Sync โดยยึด Artboard เป็นหลัก เช่น Invision หรือ zeplin ก็จะไม่สามารถทำได้ วิธีแก้ที่ใช้คือเอา <Artboard> จริงๆไปคลุมอีกทีก่อน sync แต่สุดท้ายก็จะเป็น Artboard เดียวอยู่ดี
แนวคิดโครงสร้าง
หลังจากที่ได้ Artboard ไว้ใช้แล้ว ตอนนี้ก็พร้อมที่จะเริ่มลงมือแล้ว โดยการลองครั้งนี้จะเริ่มที่ Desktop version ก่อน โดยจะมีเงื่อนไขเล็กน้อย ปกติเวลาออกแบบส่วนตัวจะชอบให้มี Space ข้างๆสักหน่อย และอยากจะให้ทำงานได้คล้ายๆ Responsive ด้วย ย่อ-ขยายได้ ก็เลยเริ่มจากสร้าง Viewport ก่อน ตามด้วย Container ข้างใน
ซึ่งก็จะกลายเป็นตัวแปร 2 ตัวตามนี้ viewPort และ container ก็อยากให้เวลาที่ปรับตัวแปรทั้งสอง แล้วของอยู่ข้างในก็เปลี่ยนขนาด ย่อ-ขยาย ตามไปด้วย เพื่อที่จะสามารถดูได้ว่า การแสดงผลของแต่ละ Breakpoint จะแสดงผลออกมาเป็นแบบไหน
การทำงานกับรูปภาพ
ใน React-Sketchapp การที่จะใช้รูปสักรูป จะเป็นการเรียกไปที่ url ของรูปนั้นๆ และต้องกำหนดขนาดความกว้างและสูงให้กับรูปที่เราใช้ด้วย โดยจะสามารถเลือกการแสดงผลของรูปต่อขนาดที่เรากำหนดเข้าไป (ตรง resizeMode) อารมณ์จะประมาณว่าเวลาที่เรา Fill พวก Shape เป็นรูปภาพบน Sketch
ส่วนอีกเรื่องคือ ใน Sketch ปกติแล้วเราจะสามารถทำงานกับ SVG ได้เลย ลากมาใช้งาน, แก้ Path, เปลี่ยนสี ทำได้แทบทุกอย่าง หรือถ้าเราใช้พวก icon ที่เป็น PNG ก็สามารถ Fill สีได้เลย
ส่วนบน React-Sketchapp เท่าที่ลองดูไม่สามารถแสดงผล SVG ได้ จะใช้ได้ก็เป็นไฟล์ทั่วไป พวก JPG, PNG ทำให้เวลาจะใช้ ต้องคอยเตรียม Assets ต่างๆ ออกมาต่างหาก
และยังไม่จบ ยังเจอปัญหาที่อีกเล็กน้อย คือไม่สามารถเรียกไฟล์จากโปรเจคตัวเองตรงๆได้อีก เลยต้องหาวิธีทำ File Server เพิ่มขึ้นมา เพื่อที่จะเรียกใช้ผ่าน localhost
แต่ถ้าไม่รู้จะใช้อันไหนละก็ ใช้ http-server เหมือนกันก็ได้ ถ้าง่ายๆ ก็สร้างโฟล์เดอร์ /public ไว้ใน Project เลย (เวลาเอาขึ้น Git ก็จะได้ไปด้วยกันเลย) ทำให้เวลาที่จะทำก็ต้องรัน 2 terminal พร้อมๆ กัน ทั้ง yarn run render ทั้งhttp-server เลย
เริ่มสร้าง Component
หลังจากที่ทุกอย่างพร้อมแล้ว ก็ถึงเวลาที่จะเริ่มสร้างกัน(สักที) โดยจะค่อยๆสร้างไปทีละชิ้น ตอนแรกเริ่มจาก Navbar ก่อนเลย เพื่อที่จะลองดูว่าสิ่งที่คิด พอทำออกมาจริงๆแล้วจะเป็นยังไง โดย Navbar นี้จะมีค่าของ viewPort และ container ส่งเข้าไปเป็นตัวแปรที่ทำงานใน component ที่เราทำด้วย
โดยผลลัพท์ที่ได้ คือเมื่อเราเปลี่ยนค่า viewPort และ container การแสดงผลก็จะถูกปรับตามค่าที่เราใส่เข้าไป
พอทุกอย่างดูพอทำงานได้ ก็ต่อด้วย Subnavbar ซึ่งใช้ 2 ตัวแปรข้างบนเหมือนกัน แต่จะเพิ่มชื่อหน้ากับมีเมนูเพิ่มเข้ามา ซึ่งตรงเมนู ก็ทำได้ด้วยว่าอันไหน Active
อีกข้อดีของการที่ทำผ่าน React-Sketchapp ก็คือ เราจะสามารถทำเมนูที่มี Padding ทั้งสองข้างเท่ากันได้ โดยไม่สนว่าชื่อเมนูจะยาวไม่เท่ากัน สามารถเพิ่มเมนูได้ง่าย ซึ่งถ้าใช้ Sketch Symbol ทำแบบนี้ก็น่าจะใช้พลังพอสมควรหรือไม่ก็ต้องมีการปรับขนาดของแต่ละเมนูเองอยู่ดี
ทะลุข้อจำกัดของ Sketch Symbol
สิ่งที่อยากได้มานานแล้ว คือ Symbol ที่สามารถเปลี่ยนแปลงอะไรได้มากกว่าปกติอีกนิด ตามข้อมูลหรือเงื่อนไขต่างๆ เคยลองทำที่บทความก่อน (JSON + Sketch symbol อีกทางเลือกสำหรับคนชอบดีเทล)
ซึ่งจริงๆแล้ว sketch-data-populator ก็ค่อนข้างทำงานได้ดี แต่แอบรู้สึกยากที่ต้องตั้งชื่อหรือเงื่อนไขที่ชื่อ element นั้นๆ รู้สึกไม่ค่อยสะดวกเวลาจะแก้อะไร แต่พอได้มาลองบน React-Sketchapp ยังไม่เจออะไรที่ทำไม่ได้ (สุดยอด!) และอย่างที่บอกไปตอนแรกว่า คิดไม่ผิดที่เลือก Jitta Portfolio มาลองทำ เพราะมีอะไรให้ลองทำเยอะเลย
ที่จะลองทำไปก็จะมี การแสดงผลค่า YTD Return (กำไรตั้งแต่ต้นปีจนถึงปัจจุบัน) โดยจะแสดงผลเป็น % บวกและลบ สมมติเราส่งค่าไปเป็นตัวเลข เช่น 18.28 หรือไม่ก็ -5.37 แต่ในตอนแสดงผลต้องการให้มีบวกและลบอยู่หน้าค่าที่ส่งเข้าไปและต่อท้ายด้วย % ก็จะได้ออกมาประมาณนี้
อีกอันคือ Jitta Factor (กราฟที่แสดงผลการวิเคราะห์ปัจจัยที่สำคัญของธุรกิจใน 5 มิติ) ซึ่งจะมีลักษณะเป็น Bar chart โดยจะมีค่าสูงสุดที่ 100 และแต่ละช่วงจะมีการแสดงสีที่แตกต่างกัน ซึ่งพอเราใช้ React-Sketchapp ทำก็สามารถทำได้อย่างสบาย
ซึ่งพอทำส่วนนี้ก็ ได้คุยกับพี่ๆ เพื่อนๆ น้องๆ Engineer เยอะมาก คุยแล้วคุยอีก ขอคำแนะนำกันเป็นว่าเล่น ว่าถ้าอยากได้แบบนู้นทำยังไง ถ้าเป็นแบบนี้ทำได้รึเปล่า ได้ความรู้ใหม่ๆเยอะมาก ค่อยๆเรียนรู้เพิ่มไปเรื่อยๆ .. สนุกมาก!
ร่วมร่างกับ JSON .. ที่สุดของความเนียน
หลังจากที่ทำ component ไปสักพักก็พอทำให้ที่จะประกอบ เป็นของใหญ่ๆได้แล้ว ก็ไปถึงอีกจุดที่ทำให้สนใจ React-Sketchapp เพราะสามารถที่จะทำงานรวมกับ JSON หรือ API ต่างๆได้เลย
เลยลองใช้ตัวอย่าง JSON ของ Portfolio ตรงนี้ก็ไม่พ้นรบกวน Engineer เหมือนเดิม เพราะต้องชี้ หรือ Map ข้อมูลส่วนต่างๆให้ถูกต้อง .. แต่พอทำเสร็จแล้วผลลัพท์ที่ได้ประทับใจมาก ออกมาตรงใจที่อยากได้
ข้อมูลเนียนๆ แถมไม่ต้องมาคอยปรับ override ของแต่ละ Symbol ให้ตรงตามข้อมูล และไม่ว่า Data จะเยอะน้อยแค่ไหน ก็สามารถแสดงผลออกมาได้ เวลาที่ได้ทำงานบนข้อมูลที่สมบูรณ์ คิดไปคิดมาก็เพิ่มความสุขเล็กๆ น้อยๆ ได้เหมือนกัน
และเราอาจจะพบปัญหาเพิ่มเติม เวลาที่ใช้ข้อมูลจริง เช่น บาง Field ตอนออกแบบเผื่อไว้นิดเดียว แต่พอข้อมูลจริงๆ ที่ส่งมาให้ยาวมาก ก็จะเห็นปัญหาตรงนี้เพิ่มเติมอีก
ปรับขนาดง่ายมาก
เกิดอยากจะรู้ว่าถ้า ย่อ-ขยาย การแสดงผลจะเป็นยังไง ก็สามารถทำได้โดยที่เปลี่ยนตัวแปร viewPort และ container ก็จะเห็นได้ทันที
ซึ่งจริงๆแล้วบน Sketch เองก็สามารถทำได้โดยใช้ Fix Resizing เวลาที่เราปรับขนาด Group หรือ Symbol ส่วน React-Sketchapp นั้นจะมีพื้นฐานการปรับขนาดที่ดีกว่า ตามที่เคยเขียนไว้ (จาก mouse สู่ code ลองใช้ react-sketchapp ออกแบบบน Sketch) ซึ่งแบบนี้จะคงพวก Padding หรือ Margin ของทุกๆ Elements ไว้
หรือถ้าจะเปลี่ยนความสูงของ Row ในตารางก็ไม่ต้องคอยปรับคอยย้ายอะไรเลย แก้ค่าก็จะเห็นการเปลี่ยนแปลงทันที ทำให้เวลาเราปรับส่วนต่างๆ โดยไม่ต้องเป็นห่วงว่าจะกระทบอะไรกับของที่เราวางต่อไว้รึเปล่า ต้องย้ายอะไรรึเปล่า หมดห่วงไปเลย
Reuse ..ใช้ซ้ำแล้วซ้ำอีก
หลังจากได้สร้าง components ไปเรื่อยๆแล้ว ก็เริ่มเข้าใจว่า Element ชิ้นเล็กๆ นี้สุดท้ายจะถูกประกอบออกมาเป็นอะไรสักอย่างนึง พอคิดแบบนั้นแล้ว ก็มักจะย่อยของลงไปอีกระดับ อย่างเช่น changedValue ตัวอย่างข้างบน นอกจากได้ไปใช้บน YTD Return แล้ว ก็ยังได้เอาไปใช้ใน Gain % ของ Portfolio อีกด้วย
กระบวนการคิดแบบนี้พอทำบน React-Sketchapp ส่วนตัวรู้สึกว่า ค่อนข้างแตกต่างกับตอนที่ทำ Symbol ตอนที่ใช้ Symbol บางครั้งจะรู้สึกว่าใช้ยาก ค่อนข้างวุ่นวาย เวลาที่อยากจะทำ Component ที่เกิดขึ้นจากการรวมร่างของ Symbol หลายๆอัน
แต่พอไปแก้ Symbol ข้างในของ Component ถ้าแก้ไม่เยอะจะไม่ค่อยกระทบ แต่ถ้ามีการแก้ไขเรื่องขนาด ก็ต้องมาปรับขนาดใน Component ที่ใช้ symbol นั้นๆ อยู่ดี และถ้าเกิดมีหลาย Component ที่ใช้อยู่ละก็ ต้องไล่ปรับกันให้ครบทุกอันเลย สุดท้ายเลยรู้สึกว่าจะ Reuse แบบจริงๆจังๆ บน Symbol นี้ก็แอบรู้สึกยากเหมือนกัน
กลับกันบน React-Sketchapp กลับรู้สึกสนุก ต่อเติมความสามารถให้หลายๆที่เรียกไปใช้งานได้ เปลี่ยนที่เดียว ทุกที่เปลี่ยนหมด รู้สึกตัวอีกทีก็มี Element เล็กๆ อยู่หลายๆที่เต็มไปหมด
สิ่งที่คิด
- ใช้พื้นฐานการเขียนโปรแกรมค่อนข้างเยอะ ในมุมของ Designer คนนึง แต่โชคดีที่มีคนรอบข้าง ที่ไปขอความช่วยเหลือได้เวลาเจอปัญหา
- พื้นที่การทำงาน เนื่องจากที่ต้องเปิด Sketch ไปพร้อมกับ Editor ด้วย ถ้าจอพื้นที่น้อยก็จะค่อนข้างอึดอัด เท่าที่ลองแนะนำให้ใช้ 2 จอ จะสนุกขึ้น จะ Notebook ต่อจอหรือจะ 2 จอเต็มๆเลยก็ได้
- ยังไม่เจอรูปแบบดีๆในการส่งงานให้กับเพื่อนๆในทีม ที่ทำให้คนที่เขียน React-Sketchapp และคนที่ใช้ Sketch อย่างเดียว ทำงานต่อกันได้
- อาจจะเจอปัญหาเวลา Debug เพราะไม่สามารถ
console.logได้ สิ่งที่พอทำได้คือพ่นJSON.stringifyออกมาดูว่ามีอะไรส่งมาบ้าง - จะเจอข้อจำกัดบ้างเพราะบางอย่างจะทำได้ไม่เท่ากับ Sketch เพียวๆ
- ยังใช้พื้นฐานการวาดไม่ได้ เช่นจะวาดกราฟเส้น เท่าที่ลองยังทำไม่ได้
- ก่อนจะทำก็เห็น Airbnb บอกไว้ว่า Painting with Code ก็แอบคิดว่าจะเป็นยังไง แต่พอทำไปสักพักก็รู้สึกใช้เมาส์น้อยลงจริงๆ ใช้ Trackpad มากกว่าเดิม ส่วนหน้าต่าง Sketch จะไปใช้ตอนจะเลื่อนดู Artboard อื่นๆก็แค่นั้น
