From a5e176ff098b6a34f4dc2608763359db2bd78a8d Mon Sep 17 00:00:00 2001 From: dtinth on MBP M1 Date: Wed, 30 Oct 2024 00:23:01 +0700 Subject: [PATCH] https://help.happyscribe.com/en/articles/9174614-what-are-subtitle-gaps --- .../jsbkk1/reusable-web-components_th.vtt | 474 +++++++++--------- 1 file changed, 237 insertions(+), 237 deletions(-) diff --git a/data/videos/jsbkk1/reusable-web-components_th.vtt b/data/videos/jsbkk1/reusable-web-components_th.vtt index 8d05605..719cabd 100644 --- a/data/videos/jsbkk1/reusable-web-components_th.vtt +++ b/data/videos/jsbkk1/reusable-web-components_th.vtt @@ -3,10 +3,10 @@ WEBVTT - Auto-generated by https://github.com/dtinth/autosub 00:00:00.040 --> 00:00:02.680 เรามาเริ่มกันเลยแล้วกันค่ะ section แรกของเรานะคะ -00:00:02.960 --> 00:00:05.269 +00:00:02.960 --> 00:00:05.236 ถ้าเกิดว่าระบบของเราใหญ่ขึ้นเนี่ย -00:00:05.319 --> 00:00:06.880 +00:00:05.319 --> 00:00:06.877 เชื่อว่าหลายท่านอาจจะสงสัย 00:00:06.960 --> 00:00:09.719 @@ -21,22 +21,22 @@ A Journey of Building Large Scale Reusable Web Components ค่ะ 00:00:17.359 --> 00:00:20.359 โดยคุณวรายุทธ เลิศกลยานวัฒน์นะคะ -00:00:20.640 --> 00:00:23.590 +00:00:20.640 --> 00:00:23.557 เป็น software development engineer จาก Amazon 00:00:23.640 --> 00:00:24.880 ที่เยอรมนีนะคะ -00:00:25.359 --> 00:00:28.870 +00:00:25.359 --> 00:00:28.837 So first section is going to be the topic of -00:00:28.920 --> 00:00:32.629 +00:00:28.920 --> 00:00:32.596 A Journey of Building Large Scale Reusable Web -00:00:32.679 --> 00:00:36.550 +00:00:32.679 --> 00:00:36.517 Components by Mr. Varayut Lerdkanlayanawat, -00:00:36.600 --> 00:00:39.390 +00:00:36.600 --> 00:00:39.357 software development engineer from Amazon Germany. 00:00:39.440 --> 00:00:52.639 @@ -45,31 +45,31 @@ Please a big round of applause to welcome him. 00:00:53.239 --> 00:00:54.640 สวัสดีครับทุกคนนะครับ -00:00:55.120 --> 00:00:58.110 +00:00:55.120 --> 00:00:58.077 ก็วันนี้ก็ตื่นเต้นมาก ได้รับเกียรติมาในงานนี้นะครับ -00:00:58.160 --> 00:01:00.790 +00:00:58.160 --> 00:01:00.757 ก่อนอื่นเลยผมอยากขอบคุณทางด้าน organizers 00:01:00.840 --> 00:01:02.920 ที่จัดงานดีๆอย่างนี้ให้กับพวกเรานะครับ -00:01:03.160 --> 00:01:06.310 +00:01:03.160 --> 00:01:06.277 โดยวันนี้ครับผมอยากจะมาแชร์ประสบการณ์เกี่ยวกับ 00:01:06.360 --> 00:01:10.600 การสร้าง components ขนาดใหญ่ให้กับทีมจำนวนหลายๆ -00:01:10.720 --> 00:01:12.590 +00:01:10.720 --> 00:01:12.557 ทีมนะครับ ที่ Amazon ได้ใช้นะครับ -00:01:12.640 --> 00:01:14.790 +00:01:12.640 --> 00:01:14.757 ว่าจะมีขั้นตอนการทำอย่างไรบ้างนะครับ -00:01:14.840 --> 00:01:19.030 +00:01:14.840 --> 00:01:18.997 แล้วก็มี process หรือว่าวิธีการใดที่เราต้องคำนึงถึง -00:01:19.080 --> 00:01:19.270 +00:01:19.080 --> 00:01:19.237 นะครับ 00:01:19.320 --> 00:01:26.000 @@ -78,46 +78,46 @@ Please a big round of applause to welcome him. 00:01:26.680 --> 00:01:29.840 ครับ ผมชื่อวรายุทธ เลิศกลยานวัฒน์นะครับ -00:01:30.119 --> 00:01:34.389 +00:01:30.119 --> 00:01:34.356 ก็ตอนนี้ก็เคยทำงานที่บริษัท Amazon เป็น software -00:01:34.439 --> 00:01:36.029 +00:01:34.439 --> 00:01:35.996 development engineer นะครับ -00:01:36.079 --> 00:01:37.470 +00:01:36.079 --> 00:01:37.437 ตอนนี้ก็กลับมาไทยแล้วครับ -00:01:37.520 --> 00:01:41.630 +00:01:37.520 --> 00:01:41.597 แล้วก็เป็น consult เป็น trainer ด้าน web development -00:01:41.680 --> 00:01:42.000 +00:01:41.680 --> 00:01:41.996 ครับ -00:01:42.079 --> 00:01:46.069 +00:01:42.079 --> 00:01:46.036 ก่อนอื่นเลยผมอยากให้ทุกคนมาดูตัวระบบ AWS นะครับ -00:01:46.119 --> 00:01:49.590 +00:01:46.119 --> 00:01:49.557 หรือว่า Amazon Web Services ซึ่งเป็นระบบ cloud -00:01:49.640 --> 00:01:51.870 +00:01:49.640 --> 00:01:51.837 ที่ใหญ่มากๆของ Amazon นะครับ 00:01:51.920 --> 00:01:53.719 หรือว่าใหญ่ที่สุดในโลกเลยก็ว่าได้ -00:01:53.960 --> 00:01:57.669 +00:01:53.960 --> 00:01:57.636 โดย Amazon เนี่ยก็มีระบบ cloud เยอะแยะมากมายครับ 00:01:57.719 --> 00:02:00.840 ที่ provide ให้กับผู้ใช้งานได้ใช้นะครับ -00:02:01.240 --> 00:02:05.230 +00:02:01.240 --> 00:02:05.197 แต่ว่าระบบที่ดังๆที่เราอาจจะรู้จักกันก็จะมีอย่างเช่น -00:02:05.280 --> 00:02:06.749 +00:02:05.280 --> 00:02:06.716 ระบบ Lambda ใช่มั้ยครับ -00:02:06.799 --> 00:02:09.549 +00:02:06.799 --> 00:02:09.516 ที่ทำให้เราสามารถที่จะ upload โค้ดแล้วก็ run 00:02:09.599 --> 00:02:10.520 @@ -126,49 +126,49 @@ development engineer นะครับ 00:02:10.759 --> 00:02:13.800 โดยที่ไม่ต้องใช้ตัว server เลยนะครับ -00:02:14.080 --> 00:02:18.230 +00:02:14.080 --> 00:02:18.197 อีกระบบนึงก็คือระบบ S3 เป็นระบบคล้ายๆกับ Dropbox -00:02:18.280 --> 00:02:19.630 +00:02:18.280 --> 00:02:19.597 หรือว่า Google Drive นะครับ 00:02:19.680 --> 00:02:21.720 ทำให้เราสามารถ upload ไฟล์ขึ้นไปได้ -00:02:22.360 --> 00:02:25.559 +00:02:22.360 --> 00:02:25.557 ถึงแม้ว่า Amazon จะมีระบบ cloud ต่างๆมากมายครับ -00:02:25.640 --> 00:02:32.469 +00:02:25.640 --> 00:02:32.436 แต่ว่าทุกๆปีนั้น Amazon ก็มีการซื้อระบบต่างๆเข้ามา 00:02:32.519 --> 00:02:32.919 นะครับ -00:02:34.080 --> 00:02:37.510 +00:02:34.080 --> 00:02:37.477 โดยในปี 2019 เนี่ยครับ ก็มีระบบต่างๆที่ Amazon -00:02:37.560 --> 00:02:39.870 +00:02:37.560 --> 00:02:39.837 ซื้อเข้ามาประมาณ 10 บริษัทใหญ่นะครับ 00:02:39.920 --> 00:02:41.760 ยังไม่รวมบริษัทย่อยๆอื่นๆ -00:02:41.959 --> 00:02:45.990 +00:02:41.959 --> 00:02:45.957 โดย Amazon หวังว่าการที่ซื้อบริษัทต่างๆเข้ามานะครับ -00:02:46.040 --> 00:02:49.909 +00:02:46.040 --> 00:02:49.876 ก็เพื่อที่จะให้พัฒนาความพึงพอใจนะครับ 00:02:49.959 --> 00:02:52.000 ให้ลูกค้าเนี่ยมีความพึงพอใจสูงขึ้น -00:02:52.280 --> 00:02:53.909 +00:02:52.280 --> 00:02:53.876 แต่ว่า feedback ที่ได้รับครับ 00:02:53.959 --> 00:02:56.400 กลับเป็นไปในทางตรงกันข้ามนะครับ -00:02:56.720 --> 00:02:59.070 +00:02:56.720 --> 00:02:59.037 โดยอันนี้เป็น webboard webboard นึงที่ดังมาก 00:02:59.120 --> 00:02:59.920 @@ -177,19 +177,19 @@ development engineer นะครับ 00:03:00.080 --> 00:03:05.000 กลับมีคนบ่นว่าทำไมระบบ AWS มันถึงไม่ค่อยดีเลยนะครับ -00:03:05.280 --> 00:03:09.030 +00:03:05.280 --> 00:03:08.997 โดยหนึ่งใน comment อันนั้นที่มีคน comment ไว้นะครับ -00:03:09.080 --> 00:03:11.909 +00:03:09.080 --> 00:03:11.876 ก็บอกว่า เนื่องจาก Amazon นะครับ -00:03:11.959 --> 00:03:14.720 +00:03:11.959 --> 00:03:14.716 ใช้ระบบทีมแบบ two-pizza team นะครับ -00:03:14.799 --> 00:03:19.390 +00:03:14.799 --> 00:03:19.357 ก็คือถ้าทีมไหนที่ใหญ่เกินกว่าที่จะกินพิซซ่า 2 ถาดอิ่ม -00:03:19.440 --> 00:03:19.870 +00:03:19.440 --> 00:03:19.837 แล้วนะครับ 00:03:19.920 --> 00:03:22.199 @@ -198,31 +198,31 @@ development engineer นะครับ 00:03:22.400 --> 00:03:27.119 ผลสุดท้ายก็คือ เรามีทีมย่อยๆเยอะแยะมากมายเลย -00:03:27.319 --> 00:03:31.189 +00:03:27.319 --> 00:03:31.156 แล้วแต่ละทีมนั้นก็ทำตัว product ของตัวเองนะครับ -00:03:31.239 --> 00:03:33.800 +00:03:31.239 --> 00:03:33.796 แล้วก็ดีไซน์ UI ของตัวเอง -00:03:33.879 --> 00:03:38.070 +00:03:33.879 --> 00:03:38.037 สุดท้ายแล้วแต่ละ service เนี่ยก็มี UI 00:03:38.120 --> 00:03:39.479 ที่แตกต่างกันมากนะครับ -00:03:40.080 --> 00:03:42.829 +00:03:40.080 --> 00:03:42.796 เดี๋ยวเรามาลองดูนะครับว่าจริงมั้ยนะครับ -00:03:42.879 --> 00:03:46.070 +00:03:42.879 --> 00:03:46.037 ตัวที่ customer complain เข้ามานะครับ 00:03:46.120 --> 00:03:49.400 โดยเราจะมาดู Lambda กับ S3 ที่เราพูดถึงกัน -00:03:50.439 --> 00:03:56.549 +00:03:50.439 --> 00:03:56.516 ซึ่งตัว Lambda นะครับ ก็คือถ้าสมมุติเราลองดูที่ตัว -00:03:56.599 --> 00:04:00.070 +00:03:56.599 --> 00:04:00.037 หน้าจอจะเห็นว่าตัว Lambda เนี่ยจะออกเป็นธีมสีส้ม 00:04:00.120 --> 00:04:00.839 @@ -237,19 +237,19 @@ development engineer นะครับ 00:04:09.159 --> 00:04:09.800 จะเห็นว่า -00:04:10.879 --> 00:04:14.870 +00:04:10.879 --> 00:04:14.837 ขอโทษนะครับ ก็จะเห็นว่าตัว 2 ระบบเนี้ย -00:04:14.920 --> 00:04:17.309 +00:04:14.920 --> 00:04:17.276 มันค่อนข้างแตกต่างกันมากนะครับ 00:04:17.359 --> 00:04:21.559 โดยถ้าสมมุติเราสังเกตตรงเมนู ตรง button ด้านบนนะครับ -00:04:21.919 --> 00:04:25.110 +00:04:21.919 --> 00:04:25.077 ตัว Lambda เนี่ยก็จะมีปุ่ม create -00:04:25.160 --> 00:04:27.149 +00:04:25.160 --> 00:04:27.116 ซึ่งวางไว้ด้านขวาบนใช่มั้ยครับ 00:04:27.199 --> 00:04:30.760 @@ -261,46 +261,46 @@ development engineer นะครับ 00:04:33.000 --> 00:04:37.120 นอกจากนั้นนะครับก็ยังมีตัว breadcrumb ด้านบน -00:04:37.960 --> 00:04:42.030 +00:04:37.960 --> 00:04:41.997 ซึ่ง breadcrumb ด้านบนนั้นจะของ Lambda เนี่ย 00:04:42.080 --> 00:04:44.080 ก็คือเป็นลิงก์ใช่มั้ยครับ สามารถคลิกได้ -00:04:44.320 --> 00:04:48.799 +00:04:44.320 --> 00:04:48.797 ส่วนของ S3 เนี่ยก็จะเป็น text ธรรมดา คลิกไม่ได้นะครับ -00:04:48.880 --> 00:04:52.079 +00:04:48.880 --> 00:04:52.077 แล้วนอกจากนั้นสุดท้ายแล้วก็คือด้านข้างจะเป็น -00:04:52.160 --> 00:04:53.760 +00:04:52.160 --> 00:04:53.757 navigation ใช่มั้ยครับ -00:04:53.840 --> 00:04:56.830 +00:04:53.840 --> 00:04:56.797 โดยถึงแม้ว่าทั้ง 2 ระบบเนี้ยมันคล้ายกันมากนะครับ 00:04:56.880 --> 00:05:00.880 แต่ว่าก็ยังมีการทำงานที่แตกต่างกันอยู่ดีนะครับ -00:05:01.199 --> 00:05:04.470 +00:05:01.199 --> 00:05:04.437 ซึ่งสิ่งเหล่านี้เองครับก็ทำให้ user complain -00:05:04.520 --> 00:05:05.149 +00:05:04.520 --> 00:05:05.116 เข้ามานะครับ -00:05:05.199 --> 00:05:08.790 +00:05:05.199 --> 00:05:08.757 ทีนี้ผมลองพูดถึงเรื่องสีไปในระดับนึงใช่มั้ยครับ 00:05:08.840 --> 00:05:11.520 เดี๋ยวผมจะลองมาเจาะลึกเรื่องสีเพิ่ม -00:05:11.759 --> 00:05:15.270 +00:05:11.759 --> 00:05:15.237 โดยถ้าสมมุติผมคลิกตัว create bucket นะครับ 00:05:15.320 --> 00:05:17.320 มันก็จะขึ้นตัว pop-up ขึ้นมา -00:05:17.479 --> 00:05:20.989 +00:05:17.479 --> 00:05:20.956 แล้วตัว pop-up นี้นะครับด้านขวาเนี่ยมันก็จะมี field 00:05:21.039 --> 00:05:23.359 @@ -309,37 +309,37 @@ navigation ใช่มั้ยครับ 00:05:23.720 --> 00:05:26.880 แต่ว่าตรง field bucket name จะมี icon เล็กๆอันนึง -00:05:27.240 --> 00:05:30.429 +00:05:27.240 --> 00:05:30.396 ซึ่งมันเล็กมากครับก็มองไม่ออกว่ามันคืออะไรกันแน่ -00:05:30.479 --> 00:05:34.269 +00:05:30.479 --> 00:05:34.236 ถ้าสมมุติผมซูมเข้าไปนะครับก็จะเห็นว่ามันเป็นเหมือน 00:05:34.319 --> 00:05:36.639 icon เหมือน information นะครับ -00:05:37.240 --> 00:05:39.989 +00:05:37.240 --> 00:05:39.956 โดยที่ contrast มันต่ำมากๆ 00:05:40.039 --> 00:05:42.400 มันเลยทำให้ตัวเนี้ยดูยากมากนะครับ -00:05:42.600 --> 00:05:45.470 +00:05:42.600 --> 00:05:45.437 ถ้าสมมุติผมลองไปดูตัว Web Content Accessibility -00:05:45.520 --> 00:05:49.429 +00:05:45.520 --> 00:05:49.396 Guidelines ที่เป็นตัวที่ระบุว่า contrast ratio 00:05:49.479 --> 00:05:51.359 ควรจะอยู่ที่เท่าไหร่นะครับ -00:05:51.520 --> 00:05:54.149 +00:05:51.520 --> 00:05:54.116 โดยตัว contrast ratio เนี่ยมีอยู่ 2 level 00:05:54.199 --> 00:05:56.520 ก็คือ double A แล้วก็ triple A -00:05:56.960 --> 00:05:59.230 +00:05:56.960 --> 00:05:59.197 โดย double A เป็น minimum contrast 00:05:59.280 --> 00:06:02.440 @@ -348,7 +348,7 @@ Guidelines ที่เป็นตัวที่ระบุว่า contrast 00:06:03.240 --> 00:06:06.400 Triple A เนี่ยก็ต้องมีค่าอย่างต่ำ 7 นะครับ -00:06:06.720 --> 00:06:11.310 +00:06:06.720 --> 00:06:11.277 โดยถ้าสมมุติผมลองเช็คตัวไอคอนตัวนี้ที่เราพูดถึงนะครับ 00:06:11.360 --> 00:06:14.078 @@ -357,7 +357,7 @@ Triple A เนี่ยก็ต้องมีค่าอย่างต่ 00:06:14.360 --> 00:06:16.680 แล้วก็เราก็คลิกตัว color ที่อยู่ด้านขวา -00:06:17.080 --> 00:06:19.630 +00:06:17.080 --> 00:06:19.597 มันจะขึ้นเป็น color picker ขึ้นมานะครับ 00:06:19.680 --> 00:06:21.920 @@ -366,34 +366,34 @@ Triple A เนี่ยก็ต้องมีค่าอย่างต่ 00:06:22.280 --> 00:06:26.239 ตัว contrast ของ element ตัวนี้นะครับมีค่าเท่าไหร่ -00:06:26.520 --> 00:06:29.869 +00:06:26.520 --> 00:06:29.836 โดยค่าที่ปรากฏออกมาก็คือ 1.98 นะครับ 00:06:29.919 --> 00:06:30.998 ซึ่งต่ำมากๆ -00:06:31.520 --> 00:06:35.589 +00:06:31.520 --> 00:06:35.556 ดังนั้น คนที่เป็นคนที่มีปัญหาด้านสายตา -00:06:35.639 --> 00:06:37.110 +00:06:35.639 --> 00:06:37.077 หรือว่าคนตาบอดสีนะครับ 00:06:37.160 --> 00:06:40.280 อาจจะมองไม่เห็นปุ่มปุ่มนี้เลยก็ได้นะครับ -00:06:40.960 --> 00:06:43.030 +00:06:40.960 --> 00:06:42.997 นอกจากเรื่องสีที่เราพูดไปแล้วครับ 00:06:43.080 --> 00:06:46.680 ก็ยังมีอีกเรื่องนึงคือเรื่องการใช้งานคีย์บอร์ด -00:06:46.960 --> 00:06:48.030 +00:06:46.960 --> 00:06:47.997 user ส่วนใหญ่ครับ -00:06:48.080 --> 00:06:51.989 +00:06:48.080 --> 00:06:51.956 โดยเฉพาะคนที่เป็น developers หรือว่าคนที่ใช้งาน AWS นะครับ -00:06:52.039 --> 00:06:56.230 +00:06:52.039 --> 00:06:56.197 เค้าไม่อยากที่จะใช้งานเมาส์นะครับ 00:06:56.280 --> 00:06:59.320 @@ -405,7 +405,7 @@ user ส่วนใหญ่ครับ 00:07:03.400 --> 00:07:05.920 มันก็จะโฟกัสตัว input fields -00:07:06.240 --> 00:07:08.310 +00:07:06.240 --> 00:07:08.277 อันนี้คือโฟกัสถูกต้องใช่มั้ยครับ 00:07:08.360 --> 00:07:10.480 @@ -414,13 +414,13 @@ user ส่วนใหญ่ครับ 00:07:10.919 --> 00:07:14.559 ผมคาดหวังว่ามันควรจะไปโฟกัสที่ dropdown ด้านขวา -00:07:15.120 --> 00:07:16.670 +00:07:15.120 --> 00:07:16.637 แต่ว่าพอผมกด tab แล้วนะครับ 00:07:16.720 --> 00:07:19.360 มันกลับไปโฟกัสที่ตัว create bucket -00:07:19.720 --> 00:07:22.709 +00:07:19.720 --> 00:07:22.676 อันนี้หมายความว่าถ้าสมมุติคนที่ต้องการใช้งานคีย์บอร์ด 00:07:22.759 --> 00:07:25.760 @@ -435,7 +435,7 @@ user ส่วนใหญ่ครับ 00:07:35.520 --> 00:07:37.920 สีเนี่ยครับเป็นเรื่องที่สำคัญมากๆ -00:07:38.840 --> 00:07:41.149 +00:07:38.840 --> 00:07:41.116 แล้วก็นอกจากสีที่ดีนะครับ 00:07:41.199 --> 00:07:45.160 @@ -444,7 +444,7 @@ user ส่วนใหญ่ครับ 00:07:45.520 --> 00:07:49.079 สีนั้นยังทำให้บริษัทสามารถสร้าง branding ของตัวเองได้ด้วย -00:07:49.599 --> 00:07:53.950 +00:07:49.599 --> 00:07:53.917 นอกจากนั้นเวลาเราสร้างตัวแอปพลิเคชัน feature อะไรก็แล้วแต่นะครับ 00:07:54.000 --> 00:07:56.639 @@ -453,10 +453,10 @@ user ส่วนใหญ่ครับ 00:07:57.159 --> 00:08:00.879 เราต้องลองเทสต์ดูว่าคีย์บอร์ดทำงานได้เหมือนเมาส์หรือเปล่า -00:08:01.479 --> 00:08:03.479 +00:08:01.479 --> 00:08:03.477 ซึ่งถ้าเราทำ 2 อันนี้ได้ดีนะครับ -00:08:03.560 --> 00:08:05.750 +00:08:03.560 --> 00:08:05.717 เราก็สร้าง customer satisfaction 00:08:05.800 --> 00:08:08.560 @@ -465,28 +465,28 @@ user ส่วนใหญ่ครับ 00:08:09.240 --> 00:08:10.920 เมื่อกี้เราดูไปใช่มั้ยครับว่า -00:08:11.280 --> 00:08:14.750 +00:08:11.280 --> 00:08:14.717 เรา 2 ระบบเนี่ยมันมีปุ่มที่แตกต่างกัน 00:08:14.800 --> 00:08:16.960 มี side navigation ที่แตกต่างกัน -00:08:17.280 --> 00:08:20.230 +00:08:17.280 --> 00:08:20.197 นั่นหมายความว่า 2 ทีมเนี้ยครับ -00:08:20.280 --> 00:08:25.750 +00:08:20.280 --> 00:08:25.717 ก็ต้องทำการดีไซน์แล้วก็ทำการ develop ตัวปุ่ม 2 ปุ่มนี้แยกกันนะครับ 00:08:25.800 --> 00:08:28.399 ทำการ develop side navigation แยกกัน -00:08:29.479 --> 00:08:32.669 +00:08:29.479 --> 00:08:32.636 ถ้าสมมุติผมลองคำนวณ cost เล่นๆ นะครับ 00:08:32.719 --> 00:08:37.200 ของการ develop แล้วก็ดีไซน์ตัว feature เหล่านี้นะครับ -00:08:37.640 --> 00:08:40.750 +00:08:37.640 --> 00:08:40.717 ผมลองคิดว่าถ้าสมมุติการดีไซน์ feature เหล่านี้ 00:08:40.800 --> 00:08:43.400 @@ -501,16 +501,16 @@ user ส่วนใหญ่ครับ 00:08:50.120 --> 00:08:54.040 ผมคิดว่าสมมุติให้เป็น 60 ดอลลาร์นะครับ -00:08:54.480 --> 00:08:58.349 +00:08:54.480 --> 00:08:58.316 แล้วแต่ละทีมเนี่ยก็ต้องดีไซน์ feature เหล่านี้ซ้ำๆ ใช่มั้ยครับ -00:08:58.399 --> 00:09:01.710 +00:08:58.399 --> 00:09:01.677 ถ้าสมมุติว่าทุกทีมมี 5 ทีมหรือ 5 product 00:09:01.760 --> 00:09:03.518 ที่ต้องดีไซน์ feature เหล่านี้ซ้ำๆ -00:09:03.839 --> 00:09:05.909 +00:09:03.839 --> 00:09:05.876 อันนี้ก็จะใช้ cost สูงมากนะครับ 00:09:05.959 --> 00:09:09.480 @@ -522,7 +522,7 @@ user ส่วนใหญ่ครับ 00:09:12.519 --> 00:09:15.800 ดังนั้นครับ การดีไซน์ feature อะไรก็แล้วแต่ซ้ำๆ -00:09:16.399 --> 00:09:20.390 +00:09:16.399 --> 00:09:20.357 นอกจากจะสิ้นเปลืองพลังงาน สิ้นเปลือง resource ของบริษัทแล้วนะครับ 00:09:20.440 --> 00:09:23.280 @@ -537,7 +537,7 @@ user ส่วนใหญ่ครับ 00:09:30.760 --> 00:09:34.960 ให้กับบริษัทของเราให้ทุกทีมสามารถ share components ร่วมกันได้ -00:09:35.720 --> 00:09:38.390 +00:09:35.720 --> 00:09:38.357 ตอนนี้คำถามแรกครับ สำหรับทุกคนอาจจะถามว่า 00:09:38.440 --> 00:09:40.839 @@ -546,22 +546,22 @@ user ส่วนใหญ่ครับ 00:09:40.959 --> 00:09:44.680 เราต้องใช้ frameworks หรือว่า libraries อะไรนะครับ -00:09:45.360 --> 00:09:47.361 +00:09:45.360 --> 00:09:47.357 โดย framework ตัวแรกที่ผมนึกถึง -00:09:47.440 --> 00:09:50.430 +00:09:47.440 --> 00:09:50.397 สิ่งที่ผมทำก็คือผมเข้าไปใน npm trends ครับ 00:09:50.480 --> 00:09:55.920 แล้วก็ดูว่า framework ที่ดังๆ อย่างเช่น React, Angular, Vue -00:09:56.440 --> 00:10:00.469 +00:09:56.440 --> 00:10:00.436 ตัวไหนที่มีคน install เยอะที่สุดในรอบ 2 ปีที่ผ่านมานะครับ 00:10:00.519 --> 00:10:04.241 ก็จะเห็นว่ากราฟสีน้ำเงินเป็นตัว React นั่นเอง -00:10:04.440 --> 00:10:06.750 +00:10:04.440 --> 00:10:06.717 ดังนั้น React จึงเป็น framework ตัวแรกครับ 00:10:06.800 --> 00:10:09.880 @@ -573,7 +573,7 @@ user ส่วนใหญ่ครับ 00:10:14.800 --> 00:10:18.759 ต่อมาผมก็พบว่ามีทีมบางทีมครับในบริษัท -00:10:19.120 --> 00:10:21.550 +00:10:19.120 --> 00:10:21.517 ที่พอ Vue มันเริ่ม popular มากขึ้น 00:10:21.600 --> 00:10:24.560 @@ -585,10 +585,10 @@ user ส่วนใหญ่ครับ 00:10:28.839 --> 00:10:31.120 เพื่อมา support ตัว Vue นะครับ -00:10:31.360 --> 00:10:34.199 +00:10:31.360 --> 00:10:34.196 กลายเป็นว่าตอนนี้ผมต้องมี components 2 ชุด -00:10:34.279 --> 00:10:37.750 +00:10:34.279 --> 00:10:37.717 ที่ support ตัวนึง support React อีกตัวนึง support Vue 00:10:37.800 --> 00:10:39.879 @@ -597,16 +597,16 @@ user ส่วนใหญ่ครับ 00:10:40.480 --> 00:10:43.280 จึงเกิดเป็นคำถามครับว่าจะมีวิธีไหนมั้ย -00:10:43.720 --> 00:10:47.670 +00:10:43.720 --> 00:10:47.637 ที่เราสามารถที่จะ reuse ตัว components เหล่านี้ได้นะครับ 00:10:47.720 --> 00:10:52.320 โดยที่เราเขียนครั้งเดียวเราสามารถใช้งานได้ในทุก framework -00:10:52.440 --> 00:10:54.510 +00:10:52.440 --> 00:10:54.477 ก็จากการทำ research ครับ -00:10:54.560 --> 00:10:57.589 +00:10:54.560 --> 00:10:57.556 ก็ไปพบตัวนึงชื่อว่า web components 00:10:57.639 --> 00:11:01.560 @@ -615,7 +615,7 @@ user ส่วนใหญ่ครับ 00:11:01.720 --> 00:11:03.480 จากนั้นนะครับเราสามารถที่จะใส่ได้ -00:11:03.680 --> 00:11:06.349 +00:11:03.680 --> 00:11:06.316 เอาไปใส่ใน framework ต่างๆ นะครับ 00:11:06.399 --> 00:11:09.399 @@ -627,7 +627,7 @@ user ส่วนใหญ่ครับ 00:11:14.600 --> 00:11:17.079 อย่างเช่น Chrome, Firefox, Safari -00:11:17.480 --> 00:11:20.070 +00:11:17.480 --> 00:11:20.037 ตัว web components นี้ก็ทำงานได้ดีนะครับ 00:11:20.120 --> 00:11:25.720 @@ -645,25 +645,25 @@ user ส่วนใหญ่ครับ 00:11:43.040 --> 00:11:45.799 แต่ว่าเรายังมี IE นะ -00:11:46.639 --> 00:11:48.270 +00:11:46.639 --> 00:11:48.237 ผมก็เลยไปหาวิธีแก้ครับ 00:11:48.320 --> 00:11:50.400 ลองทำ research ต่อว่าจะมีวิธีไหนมั้ย -00:11:51.000 --> 00:11:54.270 +00:11:51.000 --> 00:11:54.237 ที่เราสามารถที่จะทำให้ตัว web components เนี่ย 00:11:54.320 --> 00:11:55.759 สามารถ run บน IE ได้ -00:11:56.040 --> 00:11:58.310 +00:11:56.040 --> 00:11:58.277 ผลปรากฏว่าสิ่งที่ผมเจอครับ 00:11:58.360 --> 00:12:02.360 ก็คือเป็น polyfill ตัวนึงชื่อว่า web-component-polyfill -00:12:02.839 --> 00:12:06.349 +00:12:02.839 --> 00:12:06.316 ที่เราสามารถเอาไป drop ในตัว source code ของเรา 00:12:06.399 --> 00:12:10.560 @@ -672,16 +672,16 @@ user ส่วนใหญ่ครับ 00:12:11.200 --> 00:12:15.279 แต่ว่าตัว polyfill ตัวนี้ก็ยังมีปัญหาต่างๆ -00:12:15.959 --> 00:12:18.190 +00:12:15.959 --> 00:12:18.157 ตัวอย่างเช่น ปัญหาที่สำคัญมากๆ เลยครับ 00:12:18.240 --> 00:12:22.000 ก็คือ CSS encapsulation นะครับ -00:12:22.399 --> 00:12:25.830 +00:12:22.399 --> 00:12:25.797 เป็นการที่ปกติแล้วตัว web components เนี่ย -00:12:25.880 --> 00:12:28.599 +00:12:25.880 --> 00:12:28.597 มันจะ encapsulate ตัว CSS ไว้นะครับ 00:12:28.680 --> 00:12:32.320 @@ -690,10 +690,10 @@ user ส่วนใหญ่ครับ 00:12:32.440 --> 00:12:33.600 ของ component ของเรา -00:12:34.079 --> 00:12:36.040 +00:12:34.079 --> 00:12:36.037 แต่ว่าตัว polyfill เนี่ยทำไม่ได้ -00:12:36.120 --> 00:12:38.589 +00:12:36.120 --> 00:12:38.556 นั่นหมายความว่าถ้าเราสร้าง components 00:12:38.639 --> 00:12:41.319 @@ -711,37 +711,37 @@ user ส่วนใหญ่ครับ 00:12:50.000 --> 00:12:51.279 ตัวเลือกสุดท้ายครับ -00:12:51.560 --> 00:12:56.270 +00:12:51.560 --> 00:12:56.237 อาจจะต้องใช้ pure JavaScript หรือว่า vanilla JavaScript 00:12:56.320 --> 00:12:59.040 ซึ่งเราต้องเขียนเป็น component definitions ขึ้นมา -00:12:59.560 --> 00:13:02.390 +00:12:59.560 --> 00:13:02.357 จากนั้นครับเราก็สร้าง wrapper ของแต่ละ framework -00:13:02.440 --> 00:13:05.789 +00:13:02.440 --> 00:13:05.756 มา wrap ตัว component definition ตัวนี้นะครับ 00:13:05.839 --> 00:13:09.680 แล้วทำให้มันใช้งานได้กับ framework เหล่านั้นครับ -00:13:10.360 --> 00:13:13.750 +00:13:10.360 --> 00:13:13.717 โดยวิธีนี้แน่นอนว่าเราเป็นคนควบคุมทุกอย่างครับ 00:13:13.800 --> 00:13:14.880 มัน flexible มากๆ -00:13:15.639 --> 00:13:18.510 +00:13:15.639 --> 00:13:18.477 ดังนั้นเราจะสามารถทำให้มัน support 00:13:18.560 --> 00:13:19.960 ในทุก browser ได้ -00:13:20.720 --> 00:13:23.310 +00:13:20.720 --> 00:13:23.277 ดังนั้นครับข้อสรุปของการเลือก framework -00:13:23.360 --> 00:13:26.070 +00:13:23.360 --> 00:13:26.037 ถ้าทีมเรามีขนาดไม่ใหญ่มากนะครับ 00:13:26.120 --> 00:13:28.800 @@ -753,25 +753,25 @@ user ส่วนใหญ่ครับ 00:13:31.639 --> 00:13:33.999 แต่ว่าถ้าสมมุติทีมเรามีขนาดใหญ่ขึ้นมา -00:13:34.560 --> 00:13:37.029 +00:13:34.560 --> 00:13:36.996 แล้วก็มีใช้งาน framework หลายตัวนะครับ -00:13:37.079 --> 00:13:38.909 +00:13:37.079 --> 00:13:38.876 เราอาจจะใช้เป็น web components 00:13:38.959 --> 00:13:41.039 แต่ก็ต้องดูด้วยว่าเราต้อง support IE มั้ย -00:13:41.959 --> 00:13:43.870 +00:13:41.959 --> 00:13:43.837 ถ้าทีมเรามีขนาดใหญ่มากครับ -00:13:43.920 --> 00:13:45.319 +00:13:43.920 --> 00:13:45.316 แล้วก็ทีมแตกต่างกันมาก -00:13:45.399 --> 00:13:47.789 +00:13:45.399 --> 00:13:47.756 เราอาจจะต้องสร้างเป็น component definitions -00:13:47.839 --> 00:13:49.750 +00:13:47.839 --> 00:13:49.717 โดยใช้ pure JavaScript 00:13:49.800 --> 00:13:53.120 @@ -783,13 +783,13 @@ user ส่วนใหญ่ครับ 00:13:56.680 --> 00:13:58.519 เราก็ต้อง คำถามต่อไปก็คือ -00:13:59.160 --> 00:14:01.909 +00:13:59.160 --> 00:14:01.876 แล้วเราจะ design ตัว API หรือตัว properties 00:14:01.959 --> 00:14:03.600 ของ component อย่างไร -00:14:04.680 --> 00:14:06.190 +00:14:04.680 --> 00:14:06.157 การ design API นะครับ 00:14:06.240 --> 00:14:07.960 @@ -798,10 +798,10 @@ user ส่วนใหญ่ครับ 00:14:08.560 --> 00:14:11.560 ผมต้อง support ทีมเป็นจำนวนมากใช่มั้ยครับ -00:14:12.040 --> 00:14:16.029 +00:14:12.040 --> 00:14:15.996 ดังนั้นจะทำยังไงก็ได้ให้ component ของเราเนี่ย -00:14:16.079 --> 00:14:19.190 +00:14:16.079 --> 00:14:19.157 สามารถที่จะใช้งานได้ในทุกกรณีนะครับ 00:14:19.240 --> 00:14:22.879 @@ -810,7 +810,7 @@ user ส่วนใหญ่ครับ 00:14:23.079 --> 00:14:25.280 สมมุติว่าเรามีปุ่มขึ้นมาปุ่มนึง -00:14:26.040 --> 00:14:29.750 +00:14:26.040 --> 00:14:29.717 ในปุ่มนี้นะครับเราก็จะมี style เป็น property 00:14:29.800 --> 00:14:31.360 @@ -819,25 +819,25 @@ user ส่วนใหญ่ครับ 00:14:31.600 --> 00:14:33.240 โดยผมรับเป็น object -00:14:33.600 --> 00:14:37.390 +00:14:33.600 --> 00:14:37.357 จากนั้นก็ pass ตัว style property ตัวนี้ครับ 00:14:37.440 --> 00:14:40.719 เข้าไปในปุ่มนะครับ -00:14:41.399 --> 00:14:44.589 +00:14:41.399 --> 00:14:44.556 หลังจากนั้นครับ ตอนนี้คือเรา pass ทั้ง object เข้ามาเลย -00:14:44.639 --> 00:14:46.390 +00:14:44.639 --> 00:14:46.357 ไม่ว่า user จะใส่ CSS เป็นอะไร -00:14:46.440 --> 00:14:48.279 +00:14:46.440 --> 00:14:48.277 เราก็ pass เข้าไปใน button -00:14:48.360 --> 00:14:52.200 +00:14:48.360 --> 00:14:52.196 ผลปรากฏว่าพอทีมใช้งานครับ -00:14:52.279 --> 00:14:53.789 +00:14:52.279 --> 00:14:53.756 แรกๆ ก็ยังใช้ได้ดีอยู่ 00:14:53.839 --> 00:14:56.480 @@ -849,16 +849,16 @@ user ส่วนใหญ่ครับ 00:14:59.320 --> 00:15:02.360 จากนั้นครับ ก็พอมีทีมใช้งานมากขึ้น -00:15:02.839 --> 00:15:05.990 +00:15:02.839 --> 00:15:05.957 ปรากฏว่าก็มีทีมที่มี creativity สูงขึ้นใช่มั้ยครับ -00:15:06.040 --> 00:15:08.057 +00:15:06.040 --> 00:15:08.023 เค้าก็ pass ตัว border-radius 00:15:08.107 --> 00:15:10.399 ทำให้ปุ่มนั้นมันโค้งมนมากขึ้นนะครับ -00:15:10.880 --> 00:15:13.469 +00:15:10.880 --> 00:15:13.436 พอมีทีมใช้งานขึ้นอีก เพิ่มขึ้นอีกนะครับ 00:15:13.519 --> 00:15:14.720 @@ -867,13 +867,13 @@ user ส่วนใหญ่ครับ 00:15:15.040 --> 00:15:17.639 สุดท้ายครับเราได้ปุ่มแบบนี้เลย -00:15:18.399 --> 00:15:20.630 +00:15:18.399 --> 00:15:20.597 ซึ่งเป็นผลเสียใช่มั้ยครับที่เราพูดไปตอนแรก -00:15:20.680 --> 00:15:23.430 +00:15:20.680 --> 00:15:23.397 ว่ามันทำให้ตัว UI เนี่ยมันแตกต่างกัน -00:15:23.480 --> 00:15:25.750 +00:15:23.480 --> 00:15:25.717 ในแต่ละ application ของบริษัทนะครับ 00:15:25.800 --> 00:15:28.559 @@ -882,10 +882,10 @@ user ส่วนใหญ่ครับ 00:15:29.480 --> 00:15:33.079 ดังนั้นครับผมจึงเปลี่ยนรูปแบบนะครับ -00:15:33.639 --> 00:15:35.789 +00:15:33.639 --> 00:15:35.756 จากการที่ทำเป็น flexible -00:15:35.839 --> 00:15:37.390 +00:15:35.839 --> 00:15:37.357 ผมทำเป็นรูปแบบ rigid 00:15:37.440 --> 00:15:39.440 @@ -894,7 +894,7 @@ user ส่วนใหญ่ครับ 00:15:40.120 --> 00:15:43.319 โดยรูปแบบ rigid จากตอนแรกที่รับเป็น style -00:15:43.519 --> 00:15:45.349 +00:15:43.519 --> 00:15:45.316 เป็น property object เข้ามานะครับ 00:15:45.399 --> 00:15:47.520 @@ -903,7 +903,7 @@ user ส่วนใหญ่ครับ 00:15:47.639 --> 00:15:51.479 ซึ่งรับแค่ primary secondary success แล้วก็ danger -00:15:51.959 --> 00:15:55.390 +00:15:51.959 --> 00:15:55.357 โดยผู้ใช้งานเนี่ยไม่สามารถ pass ค่าอื่นๆ เข้ามาได้ 00:15:55.440 --> 00:15:56.840 @@ -915,10 +915,10 @@ user ส่วนใหญ่ครับ 00:16:00.880 --> 00:16:04.159 แล้วก็ใช้ CSS ของเราในการใส่ style เข้าไป -00:16:05.519 --> 00:16:09.830 +00:16:05.519 --> 00:16:09.797 โดยวิธีนี้นะครับก็ทำให้การทำงานเนี่ย -00:16:09.880 --> 00:16:11.070 +00:16:09.880 --> 00:16:11.037 มันง่ายมากขึ้นนะครับ 00:16:11.120 --> 00:16:14.478 @@ -927,7 +927,7 @@ user ส่วนใหญ่ครับ 00:16:15.000 --> 00:16:17.519 เราไม่จำเป็นต้องกลัว breaking change ใช่มั้ยครับ -00:16:17.680 --> 00:16:20.589 +00:16:17.680 --> 00:16:20.556 เพราะว่าถ้าสมมุติเราใช้รูปแบบ flexible 00:16:20.639 --> 00:16:22.721 @@ -939,7 +939,7 @@ user ส่วนใหญ่ครับ 00:16:24.560 --> 00:16:27.679 ถ้าสมมุติผู้ใช้งานเนี่ยใส่ style เข้ามา -00:16:27.880 --> 00:16:30.349 +00:16:27.880 --> 00:16:30.316 API ใหม่ที่เรา add เข้าไปอาจจะไป conflict 00:16:30.399 --> 00:16:31.120 @@ -948,25 +948,25 @@ API ใหม่ที่เรา add เข้าไปอาจจะไป c 00:16:31.319 --> 00:16:33.320 แต่การที่เราทำ component ให้เล็กๆ -00:16:33.600 --> 00:16:34.750 +00:16:33.600 --> 00:16:34.717 เริ่มจากเล็กๆ ก่อน 00:16:34.800 --> 00:16:37.280 แล้วค่อยๆ เพิ่ม feature เพิ่ม API ขึ้นมา -00:16:37.519 --> 00:16:38.721 +00:16:37.519 --> 00:16:38.717 มันจะปลอดภัยมากกว่า -00:16:38.800 --> 00:16:41.310 +00:16:38.800 --> 00:16:41.277 แล้วก็เราจะสามารถ maintain ตัว component 00:16:41.360 --> 00:16:43.360 ของเราได้ง่ายกว่าครับ -00:16:44.040 --> 00:16:44.589 +00:16:44.040 --> 00:16:44.556 สุดท้ายแล้วครับ -00:16:44.639 --> 00:16:46.070 +00:16:44.639 --> 00:16:46.037 พอเราได้ component ของเรามาแล้ว 00:16:46.120 --> 00:16:49.239 @@ -978,7 +978,7 @@ API ใหม่ที่เรา add เข้าไปอาจจะไป c 00:16:54.240 --> 00:16:56.759 โดย component ของเราเนี่ยเราต้องมั่นใจว่า -00:16:56.959 --> 00:16:59.589 +00:16:56.959 --> 00:16:59.556 ตัว component มี quality ที่สูงกว่า 00:16:59.639 --> 00:17:01.439 @@ -990,22 +990,22 @@ product quality ของบริษัท 00:17:03.319 --> 00:17:05.880 ถ้าทีมในบริษัทนำ component ไปใช้ -00:17:06.360 --> 00:17:08.590 +00:17:06.360 --> 00:17:08.557 เราจะมั่นใจว่า component ของเราเนี่ย 00:17:08.640 --> 00:17:12.239 ไม่ทำให้ product quality ของบริษัทนั้นต่ำลงนะครับ -00:17:12.919 --> 00:17:15.430 +00:17:12.919 --> 00:17:15.397 อันนี้เป็นสิ่งที่เรา make sure ได้ว่า -00:17:15.480 --> 00:17:18.789 +00:17:15.480 --> 00:17:18.756 คนที่นำไปใช้เนี่ยเค้าจะมั่นใจที่จะนำ system 00:17:18.839 --> 00:17:19.439 ของเราไปใช้ -00:17:19.880 --> 00:17:21.789 +00:17:19.880 --> 00:17:21.756 ถ้าไม่อย่างงั้นตัวของเราเนี่ย 00:17:21.839 --> 00:17:23.440 @@ -1020,19 +1020,19 @@ product quality ของบริษัท 00:17:30.400 --> 00:17:32.359 ซึ่ง feature ตัวนี้ครับประกอบไปด้วย -00:17:32.840 --> 00:17:36.190 +00:17:32.840 --> 00:17:36.157 ตัว component 2 ตัวนะครับ 00:17:36.240 --> 00:17:39.120 ก็คือ input field กับ button -00:17:39.480 --> 00:17:43.430 +00:17:39.480 --> 00:17:43.397 ถ้าสมมุติผมดู CSS ของตัว button นะครับ -00:17:43.480 --> 00:17:46.230 +00:17:43.480 --> 00:17:46.197 ก็จะสังเกตว่าตัว button เนี่ย -00:17:46.280 --> 00:17:48.310 +00:17:46.280 --> 00:17:48.277 ก็จะมี color background-color 00:17:48.360 --> 00:17:51.320 @@ -1041,13 +1041,13 @@ product quality ของบริษัท 00:17:51.600 --> 00:17:54.760 คราวนี้ผมก็ลอง test ตัว feature นี้ครับ -00:17:55.440 --> 00:17:58.150 +00:17:55.440 --> 00:17:58.117 โดยการใช้ test ที่เราคุ้นเคยกัน 00:17:58.200 --> 00:18:01.480 unit test integration test แล้วก็ test อื่นๆ -00:18:03.159 --> 00:18:06.310 +00:18:03.159 --> 00:18:06.277 ต่อมาครับ designer ก็นำตัวนี้ไป test 00:18:06.360 --> 00:18:10.840 @@ -1062,43 +1062,43 @@ unit test integration test แล้วก็ test อื่นๆ 00:18:20.320 --> 00:18:22.520 แต่ผลปรากฏว่าตัว search field เนี่ย -00:18:23.400 --> 00:18:27.040 +00:18:23.400 --> 00:18:27.037 มันไม่ขึ้นตัว outline หรือว่า border นะครับ -00:18:27.120 --> 00:18:29.590 +00:18:27.120 --> 00:18:29.557 ทำให้ user เนี่ยไม่สามารถรู้ได้ว่า 00:18:29.640 --> 00:18:31.280 ตอนนี้ focus อยู่ตรงไหนแล้ว -00:18:31.919 --> 00:18:33.070 +00:18:31.919 --> 00:18:33.037 ก็คืนนั้นเองครับ -00:18:33.120 --> 00:18:35.509 +00:18:33.120 --> 00:18:35.476 ก็ designer ก็บอก developer -00:18:35.559 --> 00:18:38.270 +00:18:35.559 --> 00:18:38.237 แล้ว developer ก็ทำการเปลี่ยนแปลง code นะครับ 00:18:38.320 --> 00:18:42.840 โดยเค้า add ตัว border เข้าไป 1 pixel -00:18:43.360 --> 00:18:44.710 +00:18:43.360 --> 00:18:44.677 เป็นสีฟ้าอ่อนครับ 00:18:44.760 --> 00:18:47.440 คราวนี้ designer ก็มาลอง test ใหม่ -00:18:48.120 --> 00:18:49.790 +00:18:48.120 --> 00:18:49.757 ตอนที่ designer test ใหม่ครับ 00:18:49.840 --> 00:18:51.480 ก็กด tab 2 ทีแล้วก็ไป focus -00:18:51.960 --> 00:18:54.230 +00:18:51.960 --> 00:18:54.197 ตอนนี้นะครับมันก็จะขึ้นเป็นคล้ายๆ กับ -00:18:54.280 --> 00:18:56.790 +00:18:54.280 --> 00:18:56.757 ตัว outline border สีฟ้าอ่อนแล้วนะครับ 00:18:56.840 --> 00:18:58.720 @@ -1113,16 +1113,16 @@ unit test integration test แล้วก็ test อื่นๆ 00:19:05.159 --> 00:19:09.560 แล้วก็เข้านอนครับ -00:19:10.240 --> 00:19:15.310 +00:19:10.240 --> 00:19:15.277 คราวนี้คืนนั้นเอง เขาก็โดนเรียกครับ โดนโทรเรียก -00:19:15.360 --> 00:19:17.160 +00:19:15.360 --> 00:19:17.157 เราก็ต้องตื่นขึ้นมาครับ 00:19:17.240 --> 00:19:21.120 เหตุผลก็คือ ตัว component ที่ deploy ไปมันใช้งานไม่ได้ -00:19:21.360 --> 00:19:25.150 +00:19:21.360 --> 00:19:25.117 มันทำให้ฟอร์มของบริษัทเนี่ย ของ product บาง product 00:19:25.200 --> 00:19:26.680 @@ -1131,40 +1131,40 @@ unit test integration test แล้วก็ test อื่นๆ 00:19:27.360 --> 00:19:31.840 คราวนี้ developer ก็ต้องตื่นมาดูครับว่าเกิดอะไรขึ้น -00:19:34.000 --> 00:19:37.509 +00:19:34.000 --> 00:19:37.476 อันนี้คือฟอร์มก่อนที่เราจะ add ตัว border เข้าไปนะครับ 00:19:37.559 --> 00:19:40.799 สังเกตตรงปุ่มจะยังไม่มีตัว outline ตัว border ของเรา -00:19:41.520 --> 00:19:49.710 +00:19:41.520 --> 00:19:49.677 แล้วก็ตัวนี้นะครับก็คือเป็นตัวฟอร์มที่เรา add border -00:19:49.760 --> 00:19:50.310 +00:19:49.760 --> 00:19:50.277 เข้าไปแล้วนะครับ -00:19:50.360 --> 00:19:53.830 +00:19:50.360 --> 00:19:53.797 ก็จะมี outline อยู่นิดนึง ซึ่งมันเล็กน้อยมากๆ -00:19:53.880 --> 00:19:54.910 +00:19:53.880 --> 00:19:54.877 ถ้าเราดู 2 ตัวนี้นะครับ 00:19:54.960 --> 00:19:58.520 เราแทบจะมองไม่เห็นเลยใช่มั้ยครับว่ามันแตกต่างกันยังไงบ้าง -00:20:00.360 --> 00:20:02.749 +00:20:00.360 --> 00:20:02.716 โดยจริงๆแล้วเนี่ย สิ่งที่มันแตกต่างกัน 00:20:02.799 --> 00:20:05.879 ถ้าสมมุติผมดูสไลด์ก่อนกับอันนี้นะครับ -00:20:06.039 --> 00:20:09.040 +00:20:06.039 --> 00:20:09.037 จะเห็นว่ามันเหมือนขยายขึ้นมา 1 pixel ใช่มั้ยครับ 00:20:09.120 --> 00:20:11.042 เนื่องจาก border ที่เรา add เข้านั่นเอง -00:20:12.520 --> 00:20:15.869 +00:20:12.520 --> 00:20:15.836 ถึงแม้ว่าตัว component เหล่านี้จะมี test ต่างๆ 00:20:15.919 --> 00:20:18.600 @@ -1173,13 +1173,13 @@ unit test integration test แล้วก็ test อื่นๆ 00:20:18.919 --> 00:20:22.640 แต่ว่า test เหล่านี้เนี่ย ไม่สามารถที่จะจับ bug ตัวนี้ได้ -00:20:23.240 --> 00:20:26.239 +00:20:23.240 --> 00:20:26.237 เนื่องจาก function search ก็ยังใช้งานได้อยู่นะครับ 00:20:26.320 --> 00:20:27.800 ทุกอย่างใช้งานได้ตามปกติ -00:20:28.799 --> 00:20:32.639 +00:20:28.799 --> 00:20:32.637 แต่ว่ามี test อยู่ตัวนึงครับที่จะเป็นประโยชน์มากๆ 00:20:32.720 --> 00:20:34.960 @@ -1194,13 +1194,13 @@ unit test integration test แล้วก็ test อื่นๆ 00:20:42.600 --> 00:20:45.400 โดย tool ที่ผมใช้ครับก็คือชื่อว่า Percy -00:20:45.840 --> 00:20:49.310 +00:20:45.840 --> 00:20:49.277 เป็น tool ที่เราสามารถที่จะ run ตัว command line -00:20:49.360 --> 00:20:52.710 +00:20:49.360 --> 00:20:52.677 จากนั้น tool ตัวนี้ครับก็จะ take screenshot -00:20:52.760 --> 00:20:53.910 +00:20:52.760 --> 00:20:53.877 ของหน้า UI ของเรา 00:20:53.960 --> 00:20:55.479 @@ -1212,7 +1212,7 @@ unit test integration test แล้วก็ test อื่นๆ 00:20:58.720 --> 00:21:01.880 ก็คือเป็น UI ของเราก่อนที่จะทำการเปลี่ยนแปลงโค้ด -00:21:02.640 --> 00:21:04.470 +00:21:02.640 --> 00:21:04.437 หลังจากนั้นครับ พอได้ requirement มา 00:21:04.520 --> 00:21:06.520 @@ -1224,13 +1224,13 @@ developer ก็ add border เข้าไป 00:21:11.120 --> 00:21:13.560 ในการอัพโหลด screenshot ขึ้นไปนะครับ -00:21:14.039 --> 00:21:16.629 +00:21:14.039 --> 00:21:16.596 ก็จะมีทั้ง 2 ด้านแล้วตอนนี้ก็คือ -00:21:16.679 --> 00:21:19.270 +00:21:16.679 --> 00:21:19.237 ก่อนเปลี่ยนแปลงและหลังเปลี่ยนแปลงนะครับ -00:21:19.320 --> 00:21:22.430 +00:21:19.320 --> 00:21:22.397 มองด้วยตาเราอาจจะมองไม่เห็นใช่มั้ยครับ 00:21:22.480 --> 00:21:24.160 @@ -1239,22 +1239,22 @@ developer ก็ add border เข้าไป 00:21:24.799 --> 00:21:29.600 แต่ว่าวิธีทำเราสามารถที่จะคลิกที่ตัว UI อันใหม่ได้ -00:21:30.360 --> 00:21:33.470 +00:21:30.360 --> 00:21:33.437 จากนั้นมันจะโชว์เป็นกรอบสีแดงๆนะครับ 00:21:33.520 --> 00:21:37.320 อันนี้ก็คือสิ่งที่เปลี่ยนแปลงไปจากเวอร์ชั่นก่อน -00:21:38.000 --> 00:21:41.070 +00:21:38.000 --> 00:21:41.037 อันนี้ทำให้เรามั่นใจได้ว่าเราสามารถมองเห็นได้ว่า -00:21:41.120 --> 00:21:44.070 +00:21:41.120 --> 00:21:44.037 สิ่งที่เราใส่โค้ดเข้าไปมันมีอะไรเปลี่ยนแปลงไปบ้างนะครับ -00:21:44.120 --> 00:21:50.017 +00:21:44.120 --> 00:21:49.983 อันนี้ก็คือ 1 pixel ที่เราใส่เข้าไปเป็น border นั่นเอง -00:21:50.067 --> 00:21:52.710 +00:21:50.067 --> 00:21:52.677 นอกจาก Percy จะสามารถ run ผ่าน command line แล้ว 00:21:52.760 --> 00:21:56.479 @@ -1284,7 +1284,7 @@ developer ก็ add border เข้าไป 00:22:23.039 --> 00:22:25.960 quality ของ components นั้นต้องสูงมากๆนะครับ -00:22:26.080 --> 00:22:28.030 +00:22:26.080 --> 00:22:27.997 โดยวิธีการทำให้สูงได้นั้น 00:22:28.080 --> 00:22:30.878 @@ -1293,34 +1293,34 @@ quality ของ components นั้นต้องสูงมากๆนะ 00:22:31.080 --> 00:22:36.080 และ test อันนึงที่ขาดไม่ได้เลยก็คือ screenshot test -00:22:36.600 --> 00:22:38.749 +00:22:36.600 --> 00:22:38.716 โดยการทำ component จริงๆแล้วนะครับ 00:22:38.799 --> 00:22:43.159 เราไม่จำเป็นต้องให้ทีมใดทีมหนึ่งมีหน้าที่ในการรับผิดชอบ -00:22:43.400 --> 00:22:47.109 +00:22:43.400 --> 00:22:47.076 ในการสร้าง components แต่เราควรจะสร้างครับ 00:22:47.159 --> 00:22:50.519 เป็น community ภายในบริษัทของเรา -00:22:50.640 --> 00:22:53.550 +00:22:50.640 --> 00:22:53.517 ที่หลายๆทีมมีส่วนร่วมในการ design -00:22:53.600 --> 00:22:55.989 +00:22:53.600 --> 00:22:55.956 แล้วก็สร้าง components 00:22:56.039 --> 00:22:58.359 พอเราสร้าง components ไปหลายๆตัวครับ -00:22:58.559 --> 00:23:00.670 +00:22:58.559 --> 00:23:00.637 สุดท้ายแล้วเราจะได้ component 00:23:00.720 --> 00:23:03.720 ที่เราสามารถ reuse ได้ภายในบริษัทของเรา -00:23:04.000 --> 00:23:08.030 +00:23:04.000 --> 00:23:07.997 ซึ่งจะประหยัดทั้งทรัพยากรด้านเวลา ด้านค่าใช้จ่ายนะครับ 00:23:08.080 --> 00:23:11.920 @@ -1332,40 +1332,40 @@ quality ของ components นั้นต้องสูงมากๆนะ 00:23:21.640 --> 00:23:23.280 ซึ่ง design system เนี่ย -00:23:23.480 --> 00:23:26.670 +00:23:23.480 --> 00:23:26.637 จะนอกจากเราจะดูเรื่อง components แล้ว -00:23:26.720 --> 00:23:28.629 +00:23:26.720 --> 00:23:28.596 ยังดูเรื่องสี การที่มีสีที่ดี 00:23:28.679 --> 00:23:31.440 เราสร้าง strong branding ให้กับบริษัทนะครับ -00:23:31.760 --> 00:23:34.350 +00:23:31.760 --> 00:23:34.317 ตอนนี้ครับทั่วโลกก็มีบริษัทมากมายนะครับ -00:23:34.400 --> 00:23:36.950 +00:23:34.400 --> 00:23:36.917 อันนี้เป็นแค่ตัวอย่างของบริษัทที่ใช้ -00:23:37.000 --> 00:23:39.360 +00:23:37.000 --> 00:23:39.357 แล้วก็ develop ตัว design system ของตัวเอง -00:23:39.440 --> 00:23:41.830 +00:23:39.440 --> 00:23:41.797 จริงๆแล้วก็มีบริษัทเล็กๆอื่นๆอีกมากมาย 00:23:41.880 --> 00:23:44.119 ที่มี design system ของตัวเองนะครับ -00:23:44.799 --> 00:23:47.509 +00:23:44.799 --> 00:23:47.476 ถ้าสมมุติบริษัทคุณตอนนี้ยังไม่มีนะครับ -00:23:47.559 --> 00:23:49.790 +00:23:47.559 --> 00:23:49.757 ผมขอแนะนำว่าให้เริ่มทำเลย 00:23:49.840 --> 00:23:52.160 เพราะว่ามีประโยชน์มากๆนะครับ -00:23:54.039 --> 00:23:57.109 +00:23:54.039 --> 00:23:57.076 อันนี้ก็คือประสบการณ์ที่ผมลองสร้าง components 00:23:57.159 --> 00:24:00.760 @@ -1374,10 +1374,10 @@ quality ของ components นั้นต้องสูงมากๆนะ 00:24:01.279 --> 00:24:04.200 ก็หวังว่าจะเป็นประโยชน์สำหรับทุกๆคนนะครับ -00:24:04.880 --> 00:24:07.070 +00:24:04.880 --> 00:24:07.037 ถ้าใครมีคำถามหรือว่าต้องการพูดคุย -00:24:07.120 --> 00:24:08.830 +00:24:07.120 --> 00:24:08.797 ก็สามารถมาเจอผมได้นะครับ 00:24:08.880 --> 00:24:10.920 @@ -1392,70 +1392,70 @@ quality ของ components นั้นต้องสูงมากๆนะ 00:24:16.919 --> 00:24:20.839 แอ โอ้โห แค่หัวข้อแรกก็มีประโยชน์แล้วนะคะ -00:24:21.120 --> 00:24:23.390 +00:24:21.120 --> 00:24:23.357 ท่านไหนที่อยากคุยกับคุณวรายุทธเพิ่มเติม -00:24:23.440 --> 00:24:25.430 +00:24:23.440 --> 00:24:25.397 เรามีทุกๆช่วง section นะคะ -00:24:25.480 --> 00:24:27.150 +00:24:25.480 --> 00:24:27.117 หลังจากที่จบ section นั้นแล้วเนี่ย 00:24:27.200 --> 00:24:29.679 วิทยากรจะไปประจำอยู่ที่โซน Q&A -00:24:30.159 --> 00:24:32.550 +00:24:30.159 --> 00:24:32.517 โซน Q&A จะเป็นห้องที่เราสมมุติว่า 00:24:32.600 --> 00:24:33.959 เราออกไปจากห้องนี้ใช่มั้ยคะ -00:24:34.080 --> 00:24:36.550 +00:24:34.080 --> 00:24:36.517 หันขวามือจะมีห้องอยู่ทางโซนทางขวานะคะ 00:24:36.600 --> 00:24:37.760 ก็เรียกว่าเป็นห้อง Q&A -00:24:38.159 --> 00:24:39.629 +00:24:38.159 --> 00:24:39.596 ท่านไหนมีคำถามสงสัยอะไร -00:24:39.679 --> 00:24:42.070 +00:24:39.679 --> 00:24:42.037 หรืออยากร่วมพูดคุยกับวิทยากรท่านไหนเนี่ย -00:24:42.120 --> 00:24:44.509 +00:24:42.120 --> 00:24:44.476 หลังจบ section นั้นสามารถเดินออกไปถามได้ 00:24:44.559 --> 00:24:47.959 แล้วกลับเข้ามานั่งฟังในหัวข้อถัดไปต่อได้นะคะ -00:24:49.279 --> 00:24:51.509 +00:24:49.279 --> 00:24:51.476 After every section ladies and gentlemen, -00:24:51.559 --> 00:24:53.950 +00:24:51.559 --> 00:24:53.917 our speaker of each sections, 00:24:54.000 --> 00:24:57.920 they are he or she will be going out to the Q&A room. -00:24:58.640 --> 00:25:01.710 +00:24:58.640 --> 00:25:01.677 In the case you would like to talk to them personally 00:25:01.760 --> 00:25:03.920 or do you have any questions for them, -00:25:04.159 --> 00:25:07.950 +00:25:04.159 --> 00:25:07.917 please proceed to outside of this theater and turn right, -00:25:08.000 --> 00:25:10.470 +00:25:08.000 --> 00:25:10.437 you will see the Q&A room on the right hand side 00:25:10.520 --> 00:25:11.800 of the entrance. -00:25:12.000 --> 00:25:15.710 +00:25:12.000 --> 00:25:15.677 And please feel free to talk to them personally. -00:25:15.760 --> 00:25:17.670 +00:25:15.760 --> 00:25:17.637 Once you finish and then come back to listen 00:25:17.720 --> 00:25:19.639