ความรู้สึกเมื่อเรียนรู้ JavaScript ในปี 2016

ไม่มี เฟรมเวิร์ก JavaScript ที่ถูกสร้างขึ้นในระหว่างการเขียนบทความนี้

ข้อความต่อไปนี้ได้รับแรงบันดาลใจจากบทความ “It's the future” จาก Circle CI คุณสามารถอ่านต้นฉบับได้ ที่นี่ บทความนี้เป็นเพียงความคิดเห็น และเช่นเดียวกับเฟรมเวิร์ก JavaScript อื่นๆ ไม่ควรนำไปคิดจริงจังจนเกินไป

เฮ้ ฉันมีโปรเจ็กต์เว็บใหม่ แต่พูดตามตรง ฉันไม่ได้เขียนโค้ดเว็บมาหลายปีแล้ว และฉันได้ยินมาว่าภูมิทัศน์เปลี่ยนไปเล็กน้อย คุณเป็นนักพัฒนาเว็บที่ทันสมัยที่สุดที่นี่ใช่ไหม

- จริงๆ แล้ว คำว่าวิศวกร Front End ก็คือวิศวกรด้าน Front End นั่นแหละ แต่ใช่แล้ว ฉันเป็นคนที่เหมาะสมที่สุด ฉันทำงานด้านเว็บในปี 2016 ไม่ว่าจะเป็นการสร้างภาพ การเล่นเพลง โดรนบินได้ที่ใช้เล่นฟุตบอล ฯลฯ ฉันเพิ่งกลับมาจาก JsConf และ ReactConf ดังนั้น ฉันจึงรู้ดีถึงเทคโนโลยีล่าสุดในการสร้างเว็บแอป

เจ๋ง ฉันต้องสร้างเพจที่แสดงกิจกรรมล่าสุดจากผู้ใช้ ดังนั้นฉันเพียงแค่ต้องรับข้อมูลจากจุดสิ้นสุด REST และแสดงในตารางที่กรองได้ และอัปเดตหากมีการเปลี่ยนแปลงใดๆ ในเซิร์ฟเวอร์ ฉันกำลังคิดว่าอาจใช้ jQuery เพื่อดึงและแสดงข้อมูลหรือไม่

โอ้พระเจ้า ไม่มีใครใช้ jQuery อีกต่อไปแล้ว คุณควรลองเรียนรู้ React ดูนะ ตอนนี้ปี 2016 แล้ว

โอเค React คืออะไร?

- เป็นไลบรารี่เจ๋งๆ ที่สร้างโดยคนบางคนใน Facebook ซึ่งเพิ่มการควบคุมและประสิทธิภาพให้กับแอพพลิเคชันของคุณอย่างแท้จริง ด้วยการอนุญาตให้คุณจัดการการเปลี่ยนแปลงมุมมองต่างๆ ได้อย่างง่ายดาย

ฟังดูดีเลย ฉันสามารถใช้ React เพื่อแสดงข้อมูลจากเซิร์ฟเวอร์ได้ไหม

-ใช่ แต่ก่อนอื่นคุณต้องเพิ่ม React และ React DOM เป็นไลบรารีในเว็บเพจของคุณก่อน

เดี๋ยวก่อน ทำไมถึงมีสองห้องสมุด?

-อันหนึ่งคือไลบรารีจริง และอันที่สองไว้จัดการ DOM ซึ่งตอนนี้คุณสามารถอธิบายได้ใน JSX แล้ว

JSX? JSX คืออะไร?

-JSX เป็นเพียงส่วนขยายไวยากรณ์ JavaScript ที่มีลักษณะคล้ายกับ XML มากทีเดียว ถือเป็นอีกวิธีหนึ่งในการอธิบาย DOM หรืออาจกล่าวได้ว่ามันเป็น HTML ที่ดีกว่า

HTML มีอะไรผิดปกติ?

- ตอนนี้เป็นปี 2016 ไม่มีใครเขียนโค้ด HTML โดยตรงอีกต่อไป

ใช่แล้ว ถ้าฉันเพิ่มไลบรารี่ทั้งสองนี้เข้าไป ฉันจะสามารถใช้ React ได้ไหม

-ไม่ค่อยใช่ คุณต้องเพิ่ม Babel ก่อนจึงจะใช้ React ได้

ห้องสมุดอีกแห่งเหรอ? บาเบลคืออะไร?

- Babel คือโปรแกรมแปลภาษาที่ให้คุณกำหนดเป้าหมายไปยังเวอร์ชันเฉพาะของ JavaScript ได้ ในขณะที่คุณเขียนโค้ดในเวอร์ชันใดก็ได้ของ JavaScript คุณไม่จำเป็นต้องรวม Babel เพื่อใช้ ReactJS แต่ถ้าคุณไม่ทำเช่นนั้น คุณก็จะติดอยู่กับการใช้ ES5 และพูดตามตรงว่าตอนนี้เป็นปี 2016 แล้ว คุณควรเขียนโค้ดใน ES2016+ เช่นเดียวกับเด็กเจ๋งๆ คนอื่นๆ

ES5? ES2016+? ฉันเริ่มสับสนแล้วล่ะ ES5 และ ES2016+ คืออะไร?

-ES5 ย่อมาจาก ECMAScript 5 ซึ่งเป็นรุ่นที่ได้รับความนิยมจากผู้ใช้งานส่วนใหญ่ เนื่องจากปัจจุบันมีการใช้งานในเบราว์เซอร์ส่วนใหญ่แล้ว

ECMAScript คืออะไร?

-ใช่ คุณคงทราบดีว่ามาตรฐานสคริปต์ JavaScript นั้นมีพื้นฐานมาจากปี 1999 หลังจากเปิดตัวครั้งแรกในปี 1995 ในสมัยที่ JavaScript ยังมีชื่อว่า Livescript และทำงานเฉพาะใน Netscape Navigator เท่านั้น ซึ่งในตอนนั้นยังยุ่งวุ่นวายมาก แต่โชคดีที่ตอนนี้ทุกอย่างชัดเจนขึ้นแล้ว และเรามีการใช้งานแบบนี้มาแล้วประมาณ 7 รุ่น

7 รุ่นจริงๆ ครับ แล้ว ES5 กับ ES2016+ ละครับ?

-พิมพ์ครั้งที่ 5 และ 7 ตามลำดับ

เดี๋ยวก่อน เกิดอะไรขึ้นกับอันที่ 6?

-คุณหมายถึง ES6 ใช่ไหม ใช่แล้ว ฉันหมายถึงว่าแต่ละรุ่นเป็นซูเปอร์เซ็ตของรุ่นก่อนหน้า ดังนั้นหากคุณใช้ ES2016+ แสดงว่าคุณกำลังใช้คุณสมบัติทั้งหมดของรุ่นก่อนหน้า

ใช่แล้ว แล้วทำไมต้องใช้ ES2016+ แทน ES6 ล่ะ?

-คุณสามารถใช้ ES6 ได้ แต่หากต้องการใช้ฟีเจอร์เจ๋งๆ เช่น async และ await คุณจะต้องใช้ ES2016+ มิฉะนั้น คุณจะต้องใช้ตัวสร้าง ES6 ที่มีโครูทีนเพื่อบล็อกการเรียกแบบอะซิงโครนัสเพื่อการควบคุมการไหลที่เหมาะสม

ฉันไม่เข้าใจเลยว่าคุณเพิ่งพูดอะไรไป และชื่อเหล่านี้ก็ทำให้สับสน ดูสิ ฉันแค่กำลังโหลดข้อมูลจำนวนมากจากเซิร์ฟเวอร์ ฉันเคยรวม jQuery จาก CDN และรับข้อมูลด้วยการเรียก AJAX ได้ ทำไมฉันถึงทำแบบนั้นไม่ได้

- ตอนนี้ปี 2016 แล้ว ไม่มีใครใช้ jQuery อีกต่อไปแล้ว สุดท้ายก็กลายเป็นโค้ดสปาเก็ตตี้ ทุกคนรู้เรื่องนี้

ถูกต้อง ดังนั้นทางเลือกของฉันคือโหลดไลบรารีสามแห่งเพื่อดึงข้อมูลและแสดงตาราง HTML

-คุณรวมไลบรารีทั้งสามนี้ไว้ แต่รวมเข้ากับตัวจัดการโมดูลเพื่อโหลดไฟล์เพียงไฟล์เดียว

เข้าใจแล้วครับ แล้วตัวจัดการโมดูลคืออะไร?

- คำจำกัดความขึ้นอยู่กับสภาพแวดล้อม แต่ในเว็บเราปกติจะหมายถึงสิ่งใดก็ตามที่รองรับโมดูล AMD หรือ CommonJS

ถูกต้องแล้ว แล้ว AMD กับ CommonJS คือ…?

-คำจำกัดความ มีวิธีต่างๆ ในการอธิบายว่าไลบรารีและคลาส JavaScript หลายรายการควรโต้ตอบกันอย่างไร คุณรู้ไหมว่าการส่งออกและความต้องการคืออะไร คุณสามารถเขียนไฟล์ JavaScript หลายไฟล์โดยกำหนด API ของ AMD หรือ CommonJS และคุณสามารถใช้บางอย่างเช่น Browserify เพื่อรวมไฟล์เหล่านี้เข้าด้วยกัน

โอเค เข้าใจแล้ว… ฉันคิดว่า Browserify คืออะไร?

- เป็นเครื่องมือที่ช่วยให้คุณรวมการอ้างอิงที่อธิบายโดย CommonJS เข้ากับไฟล์ที่สามารถรันในเบราว์เซอร์ได้ สร้างขึ้นเนื่องจากคนส่วนใหญ่เผยแพร่การอ้างอิงเหล่านี้ในรีจิสทรี npm

รีจิสทรี npm?

- มันเป็นที่เก็บข้อมูลสาธารณะขนาดใหญ่ที่ผู้คนฉลาดๆ ใส่โค้ดและสิ่งที่ต้องมีเป็นโมดูล

เหมือน CDN หรือเปล่า?

-ไม่จริงหรอก มันเหมือนฐานข้อมูลรวมศูนย์มากกว่า ซึ่งใครๆ ก็สามารถเผยแพร่และดาวน์โหลดไลบรารีได้ ดังนั้นคุณจึงสามารถใช้ไลบรารีเหล่านั้นในเครื่องเพื่อการพัฒนาได้ จากนั้นจึงอัปโหลดไปยัง CDN หากคุณต้องการ

โอ้ เหมือนบาวเวอร์!

-ใช่ แต่ตอนนี้ปี 2016 แล้ว ไม่มีใครใช้ Bower อีกแล้ว

โอ้ ฉันเห็นแล้ว... ดังนั้นฉันจำเป็นต้องดาวน์โหลดไลบรารีจาก npm ใช่ไหม?

ใช่ ตัวอย่างเช่น หากคุณต้องการใช้ React ให้คุณดาวน์โหลดโมดูล React และนำเข้าในโค้ดของคุณ คุณสามารถทำเช่นนั้นได้กับไลบรารี JavaScript ยอดนิยมเกือบทุกไลบรารี

โอ้ เหมือนแองกูลาร์!

Angular นั้นเป็นไลบรารีของปี 2015 จริงๆ แต่ใช่ Angular จะต้องมีอยู่เคียงข้างกับ VueJS หรือ RxJS และไลบรารีเจ๋งๆ อื่นๆ ในปี 2016 อยากเรียนรู้เกี่ยวกับไลบรารีเหล่านี้ไหม

มาต่อกันที่ React ดีกว่า ตอนนี้ฉันเรียนรู้หลายสิ่งหลายอย่างแล้ว ดังนั้น หากฉันต้องการใช้ React ฉันจะดึงข้อมูลจาก npm นี้แล้วใช้ Browserify แทน

-ใช่.

ดูเหมือนจะซับซ้อนเกินไปที่จะรวบรวมสิ่งที่ต้องพึ่งพาจำนวนหนึ่งแล้วเชื่อมโยงเข้าด้วยกัน

- นั่นคือเหตุผลที่คุณใช้ตัวจัดการงานเช่น Grunt หรือ Gulp หรือ Broccoli เพื่อทำให้การรัน Browserify เป็นแบบอัตโนมัติ คุณยังสามารถใช้ Mimosa ได้ด้วย

กรันท์? อึก? บร็อคโคลี่? มิโมซ่า? เรากำลังพูดถึงอะไรอยู่เนี่ย?

- ตัวจัดการงาน แต่ตอนนี้มันไม่เท่แล้ว เราเคยใช้ตัวจัดการงานเมื่อปี 2015 จากนั้นเราก็ใช้ Makefiles แต่ตอนนี้เราห่อทุกอย่างด้วย Webpack

Makefiles หรือเปล่า ฉันคิดว่าส่วนใหญ่มักใช้กับโปรเจ็กต์ C หรือ C++

-ใช่ แต่ดูเหมือนว่าในเว็บ เราชอบทำให้สิ่งต่างๆ ซับซ้อนขึ้น จากนั้นก็กลับไปที่พื้นฐาน เราทำแบบนั้นทุกปีหรือประมาณนั้น รอก่อน เราจะเริ่มประกอบในเว็บภายในหนึ่งหรือสองปี

เฮ้อ คุณพูดถึงอะไรบางอย่างที่เรียกว่า Webpack ใช่ไหม?

- เป็นเครื่องมือจัดการโมดูลสำหรับเบราว์เซอร์อีกตัวหนึ่ง โดยทำหน้าที่จัดการงานด้วย ถือเป็นเวอร์ชันที่ดีกว่าของ Browserify

โอเค ทำไมมันถึงดีกว่าล่ะ?

- อาจจะไม่ดีกว่าก็ได้ แค่มีความคิดเห็นมากขึ้นว่าควรเชื่อมโยงสิ่งที่ต้องพึ่งพาอย่างไร Webpack ช่วยให้คุณใช้ตัวจัดการโมดูลต่างๆ ได้ ไม่ใช่แค่ CommonJS เท่านั้น แต่รวมถึงโมดูลที่รองรับ ES6 ดั้งเดิมด้วย

ฉันสับสนมากเกี่ยวกับเรื่อง CommonJS/ES6 นี้

-ทุกคนเป็นแบบนั้น แต่คุณไม่ควรสนใจ SystemJS อีกต่อไป

พระเยซูคริสต์ คำนามอีกคำหนึ่ง โอเค แล้ว SystemJS คืออะไร?

- แตกต่างจาก Browserify และ Webpack 1.x, SystemJS เป็นตัวโหลดโมดูลแบบไดนามิกที่ช่วยให้คุณรวมโมดูลหลายตัวไว้ในไฟล์หลายไฟล์แทนที่จะรวบรวมไว้ในไฟล์ใหญ่ไฟล์เดียว

เดี๋ยวก่อน แต่ฉันคิดว่าเราอยากสร้างไลบรารีของเราในไฟล์ขนาดใหญ่หนึ่งไฟล์และโหลดมัน!

-ใช่ แต่เนื่องจาก HTTP/2 กำลังมา การร้องขอ HTTP หลายรายการจึงดีกว่าจริงๆ

เดี๋ยวก่อน แล้วเราจะเพิ่มไลบรารีต้นฉบับทั้งสามสำหรับ React ไม่ได้เหรอ?

-ไม่จริงหรอก ฉันหมายถึง คุณสามารถเพิ่มพวกมันเป็นสคริปต์ภายนอกจาก CDN ได้ แต่คุณยังต้องรวม Babel เข้าไปด้วย

เฮ้อ ไม่ดีเลยใช่ไหมล่ะ?

-ใช่แล้ว คุณจะต้องรวม Babel-core ทั้งหมด และมันจะไม่มีประสิทธิภาพสำหรับการผลิต ในการผลิต คุณต้องทำชุดงานเตรียมการล่วงหน้าเพื่อให้โครงการของคุณพร้อม ซึ่งจะทำให้พิธีกรรมเรียกซาตานดูเหมือนสูตรไข่ต้ม คุณต้องย่อทรัพยากร ทำให้ดูน่าเกลียด ใส่ CSS ลงในบรรทัดเหนือส่วนพับ เลื่อนสคริปต์ และ-

ฉันเข้าใจแล้ว ฉันเข้าใจแล้ว ดังนั้น หากคุณไม่รวมไลบรารีโดยตรงใน CDN คุณจะทำได้อย่างไร

- ฉันจะแปลข้อมูลจาก TypeScript โดยใช้ Webpack + SystemJS + Babel ร่วมกัน

TypeScript? ฉันคิดว่าเราเขียนโค้ดด้วย JavaScript ซะอีก!

-Typescript คือ JavaScript หรือจะพูดให้ดีกว่านั้นก็คือเป็นซูเปอร์เซ็ตของ JavaScript โดยเฉพาะ JavaScript ในเวอร์ชัน ES6 คุณรู้ไหมว่าเวอร์ชันที่ 6 ที่เราพูดถึงก่อนหน้านี้คืออะไร?

ฉันคิดว่า ES2016+ เป็น superset ของ ES6 อยู่แล้ว ทำไมเราถึงต้องการสิ่งที่เรียกว่า TypeScript ตอนนี้?

-โอ้ เพราะมันช่วยให้เราใช้ JavaScript เป็นภาษาแบบพิมพ์ได้ และลดข้อผิดพลาดระหว่างรันไทม์ลง ตอนนี้เป็นปี 2016 แล้ว คุณควรเพิ่มประเภทต่างๆ ลงในโค้ด JavaScript ของคุณ

และ TypeScript ก็ทำเช่นนั้นอย่างชัดเจน

-Flow เช่นเดียวกัน แม้ว่าจะตรวจสอบการพิมพ์เท่านั้นในขณะที่ TypeScript เป็นซูเปอร์เซ็ตของ JavaScript ที่จำเป็นต้องคอมไพล์

เฮ้อ…แล้ว Flow คือ?

- เป็นเครื่องมือตรวจสอบประเภทข้อมูลแบบคงที่ที่สร้างโดยคนบางคนใน Facebook พวกเขาเขียนโค้ดใน OCaml เพราะ การเขียนโปรแกรม เชิงฟังก์ชัน นั้นยอดเยี่ยมมาก

OCaml? การเขียนโปรแกรมเชิงฟังก์ชัน?

- นั่นคือสิ่งที่เด็กเจ๋งๆ ใช้กันในปัจจุบันนะ คุณรู้ไหม ปี 2016 นะ โปรแกรมเชิงฟังก์ชัน ฟังก์ชันลำดับสูง การเคอร์รี่ ฟังก์ชันบริสุทธิ์เหรอ

ฉันไม่ทราบว่าคุณเพิ่งพูดอะไร

-ไม่มีใครทำในตอนแรก ดูสิ คุณแค่ต้องรู้ว่าการเขียนโปรแกรมเชิงฟังก์ชันนั้นดีกว่า OOP และนั่นคือสิ่งที่เราควรใช้ในปี 2016

เดี๋ยวก่อน ฉันเรียน OOP ตอนเรียนมหาวิทยาลัย ฉันคิดว่ามันดีใช่ไหม?

Java ก็เป็นแบบเดียวกันก่อนที่ Oracle จะซื้อมา ฉันหมายถึงว่า OOP นั้นดีในสมัยก่อนและยังคงใช้งานได้จนถึงทุกวันนี้ แต่ตอนนี้ทุกคนเริ่มตระหนักแล้วว่าการแก้ไขสถานะนั้นเทียบเท่ากับการเตะเด็ก ดังนั้นตอนนี้ทุกคนจึงหันไปใช้อ็อบเจ็กต์ที่ไม่เปลี่ยนแปลงและการเขียนโปรแกรมเชิงฟังก์ชัน นักพัฒนา Haskell เรียกใช้สิ่งนี้มาหลายปีแล้ว -และอย่าให้ฉันเริ่มพูดถึงนักพัฒนา Elm เลย- แต่โชคดีที่ตอนนี้บนเว็บมีไลบรารีอย่าง Ramda ที่ให้เราใช้การเขียนโปรแกรมเชิงฟังก์ชันใน JavaScript ธรรมดาได้

คุณแค่เอ่ยชื่อเฉยๆ เหรอ? รามนดาเป็นอะไรรึเปล่า?

-ไม่นะ รามดา เหมือนกับแลมบ์ดา คุณรู้ไหม ห้องสมุดของเดวิด แชมเบอร์สน่ะเหรอ?

เดวิดคือใคร?

-เดวิด แชมเบอร์ส ผู้ชายสุดเท่ เล่นเกม Coup ได้เก่งมาก เขาเป็นหนึ่งในผู้ร่วมเขียนบทความให้กับ Ramda หากคุณจริงจังกับการเรียนรู้การเขียนโปรแกรมเชิงฟังก์ชัน คุณควรลองอ่านผลงานของเอริก ไมเยอร์ดู

แล้วเอริค ไมเยอร์คือ…?

-คนเขียนโปรแกรมเชิงฟังก์ชันก็เจ๋งมาก เขามักจะทำพรีเซนเทชั่นโดยวิจารณ์ Agile ด้วยการใช้เสื้อสีแปลกๆ ตัวนี้ คุณควรลองดูผลงานบางส่วนจาก Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani ด้วย

โอเค ฉันจะหยุดคุณตรงนั้น ทั้งหมดนั้นดีและดี แต่ฉันคิดว่าทั้งหมดนั้นซับซ้อนและไม่จำเป็นสำหรับการดึงข้อมูลและแสดงข้อมูล ฉันค่อนข้างแน่ใจว่าฉันไม่จำเป็นต้องรู้จักคนเหล่านี้หรือเรียนรู้สิ่งเหล่านั้นทั้งหมดเพื่อสร้างตารางที่มีข้อมูลแบบไดนามิก กลับไปที่ React กัน ฉันจะดึงข้อมูลจากเซิร์ฟเวอร์ด้วย React ได้อย่างไร

- จริงๆ แล้วคุณไม่ได้ดึงข้อมูลด้วย React แต่คุณเพียงแสดงข้อมูลด้วย React

โธ่เอ้ย แล้วคุณใช้โปรแกรมอะไรในการดึงข้อมูลล่ะ

-คุณใช้ Fetch เพื่อดึงข้อมูลจากเซิร์ฟเวอร์

ขอโทษที คุณใช้ Fetch เพื่อดึงข้อมูลเหรอ ใครก็ตามที่ตั้งชื่อสิ่งเหล่านี้ต้องมีพจนานุกรมศัพท์เหมือนกัน

- ฉันรู้ใช่ไหม? ดึงข้อมูลมาคือชื่อของการใช้งานดั้งเดิมสำหรับดำเนินการ XMLHttpRequests กับเซิร์ฟเวอร์

โอ้ AJAX

-AJAX เป็นเพียงการใช้ XMLHttpRequests เท่านั้น แต่แน่นอน Fetch ช่วยให้คุณใช้ AJAX ได้โดยอิงตาม Promise ซึ่งคุณสามารถแก้ไขเพื่อหลีกเลี่ยงปัญหาการเรียกกลับได้

โทรกลับนรกเหรอ?

- ใช่แล้ว ทุกครั้งที่คุณดำเนินการร้องขอแบบอะซิงโครนัสกับเซิร์ฟเวอร์ คุณต้องรอการตอบกลับจากเซิร์ฟเวอร์ ซึ่งจะทำให้คุณต้องเพิ่มฟังก์ชันภายในฟังก์ชัน ซึ่งเรียกว่าพีระมิดคอลแบ็กจากนรก

โอเค แล้วเรื่องสัญญานี่จะแก้ปัญหาได้ไหม

- จริงอยู่ การจัดการคอลแบ็กของคุณผ่านคำมั่นสัญญาทำให้คุณสามารถเขียนโค้ดที่เข้าใจง่ายขึ้น จำลองและทดสอบโค้ดได้ รวมไปถึงดำเนินการคำขอพร้อมกันและรอจนกว่าโค้ดทั้งหมดจะโหลดเสร็จ

แล้วสามารถทำกับ Fetch ได้ใช่ไหม?

- ใช่ แต่เฉพาะในกรณีที่ผู้ใช้ของคุณใช้เบราว์เซอร์ที่ไม่ล้าสมัย มิฉะนั้น คุณจะต้องรวม Fetch polyfill หรือใช้ Request, Bluebird หรือ Axios

ฉันจำเป็นต้องรู้จักห้องสมุดกี่แห่งเพื่อพระเจ้า มีกี่แห่ง?

- มันคือ JavaScript ต้องมีไลบรารีหลายพันแห่งที่ทำงานเหมือนกันหมด เราทราบดีว่าไลบรารีของเรามีไลบรารีที่ดีที่สุด ไลบรารีของเรามีขนาดใหญ่ และบางครั้งเราก็ใส่รูปภาพของ Guy Fieri ไว้ด้วย

คุณเพิ่งพูดถึง Guy Fieri ใช่ไหม มาจัดการเรื่องนี้กันเลยดีกว่า ไลบรารี Bluebird, Request, Axios เหล่านี้ทำอะไรได้บ้าง

- เป็นไลบรารีที่ใช้ดำเนินการ XMLHttpRequests เพื่อส่งคืนคำสัญญา

แล้ววิธี AJAX ของ jQuery ก็เริ่มส่งคืนคำสัญญาเช่นกันใช่หรือไม่?

- เราจะไม่ใช้คำว่า "J" ในปี 2016 อีกต่อไป เพียงแค่ใช้ Fetch และ polyfill เมื่อไม่ได้อยู่ในเบราว์เซอร์ หรือใช้ Bluebird, Request หรือ Axios แทน จากนั้นจัดการ Promise ด้วย await ภายในฟังก์ชั่นแบบอะซิงค์ แล้วคุณก็จะมีการควบคุมการไหลที่เหมาะสม

เป็นครั้งที่สามที่คุณพูดถึงการรอ แต่ฉันไม่มีไอเดียว่ามันคืออะไร

-Await ช่วยให้คุณสามารถบล็อกการเรียกแบบอะซิงโครนัส ทำให้คุณควบคุมได้ดีขึ้นว่าข้อมูลจะถูกดึงเมื่อใด และเพิ่มความสามารถในการอ่านโค้ดโดยรวม วิธีนี้ยอดเยี่ยมมาก คุณเพียงแค่ต้องแน่ใจว่าคุณได้เพิ่มการตั้งค่าล่วงหน้าขั้นที่ 3 ใน Babel หรือใช้ปลั๊กอิน syntax-async-functions และ transform-async-to-generator

นี่มันบ้าไปแล้ว

- ไม่ใช่เลย มันบ้าไปแล้วที่คุณต้องคอมไพล์โค้ด TypeScript ล่วงหน้าแล้วจึงทรานสไพล์ด้วย Babel เพื่อใช้ await

คืออะไรครับ มันไม่ได้รวมอยู่ใน TypeScript เหรอครับ?

- มันทำได้ในเวอร์ชั่นถัดไป แต่ในเวอร์ชั่น 1.7 มันกำหนดเป้าหมายที่ ES6 เท่านั้น ดังนั้น หากคุณต้องการใช้ await ในเบราว์เซอร์ ก่อนอื่นคุณต้องคอมไพล์โค้ด TypeScript ที่กำหนดเป้าหมายที่ ES6 จากนั้นก็สร้าง Babel ขึ้นมาเพื่อกำหนดเป้าหมายที่ ES5

ณ จุดนี้ฉันไม่รู้จะพูดอะไร

- ดูสิ มันง่ายมาก เขียนโค้ดทุกอย่างใน TypeScript โมดูลทั้งหมดที่ใช้ Fetch จะคอมไพล์เพื่อกำหนดเป้าหมายเป็น ES6 ทรานสไพล์ด้วย Babel ในพรีเซ็ตขั้นที่ 3 แล้วโหลดด้วย SystemJS หากคุณไม่มี Fetch ให้โพลีฟิล หรือใช้ Bluebird, Request หรือ Axios แล้วจัดการคำสัญญาทั้งหมดของคุณด้วย await

เราต่างก็มีคำจำกัดความของคำว่า "ง่าย" ที่แตกต่างกันมาก ดังนั้น เมื่อทำพิธีกรรมดังกล่าวแล้ว ในที่สุดฉันก็สามารถดึงข้อมูลออกมาได้ และตอนนี้ฉันสามารถแสดงข้อมูลนั้นด้วย React ได้ใช่ไหม

-แอปพลิเคชั่นของคุณจะจัดการกับการเปลี่ยนแปลงสถานะใดๆ หรือไม่?

เอ่อ ไม่คิดอย่างนั้นหรอก ฉันแค่ต้องการแสดงข้อมูลเท่านั้น

-โอ้ ขอบคุณพระเจ้า ไม่เช่นนั้น ฉันคงต้องอธิบาย Flux และการใช้งานต่างๆ เช่น Flummox, Alt, Fluxible ให้คุณฟัง แม้ว่าจะบอกตามตรงว่าคุณควรใช้ Redux

ฉันจะข้ามชื่อเหล่านั้นไป อีกครั้ง ฉันแค่ต้องแสดงข้อมูล

-โอ้ ถ้าคุณแค่แสดงข้อมูล คุณก็ไม่จำเป็นต้องใช้ React อยู่แล้ว คุณจะใช้โปรแกรมสร้างเทมเพลตได้สบายๆ

คุณล้อเล่นกับฉันอยู่หรือเปล่า คุณคิดว่าเรื่องนี้ตลกไหม คุณปฏิบัติกับคนที่คุณรักแบบนั้นหรือเปล่า

-ฉันแค่กำลังอธิบายว่าคุณสามารถใช้สิ่งใดได้บ้าง

หยุดเถอะ หยุดเลย

-ฉันหมายความว่า แม้จะใช้เครื่องมือสร้างเทมเพลต ฉันก็ยังคงใช้ Typescript + SystemJS + Babel ร่วมกันถ้าฉันเป็นคุณ

ฉันต้องการแสดงข้อมูลบนหน้า ไม่ใช่แสดงฉากจบของ MK ดั้งเดิมของ Sub Zero เพียงบอกฉันว่าต้องใช้โปรแกรมสร้างเทมเพลตตัวใด แล้วฉันจะจัดการเอง

-มีเยอะแยะครับ คุณรู้จักอันไหนเป็นพิเศษไหม?

อืม จำชื่อไม่ได้แล้ว นานมากแล้ว

-jTemplates? jQote? PURE?

เอ่อ ไม่คุ้นเลย ขออีกได้มั้ย

-Transparency? JSRender? MarkupJS? KnockoutJS? อันนั้นมีการผูกแบบสองทาง

อีกอันนึงเหรอ?

-PlatesJS? jQuery-tmpl? Handlers? บางคนยังคงใช้มันอยู่

อาจจะนะ มีแบบเดียวกับอันสุดท้ายมั้ย?

-หนวดเหรอ ฉันคิดว่าตอนนี้แม้แต่โลดาชก็มีแล้ว จริงๆ นะ แต่นี่มันปี 2014 แล้วนะ

เอ่อ..อาจจะใหม่กว่าก็ได้

-เจด? ดัสต์เจเอส?

เลขที่

-DotJS? EJS?

เลขที่

-นันจุก? ECT?

เลขที่

-ห๊ะ ไม่มีใครชอบไวยากรณ์ของ Coffeescript อยู่แล้วเหรอ เจด?

ไม่หรอก คุณพูดเจดไปแล้ว

-ฉันหมายถึงปั๊ก ฉันหมายถึงเจด ฉันหมายถึงตอนนี้เจดเป็นปั๊กแล้ว

เฮ้อ จำไม่ได้แล้ว ใช้ตัวไหนดีคะ

- อาจเป็นแค่สตริงเทมเพลตดั้งเดิมของ ES6

ขอเดาดูก่อนนะ ต้องใช้ ES6

-ถูกต้อง.

ซึ่งขึ้นอยู่กับเบราว์เซอร์ที่ฉันใช้ซึ่งจำเป็นต้องมี Babel

-ถูกต้อง.

ซึ่งหากฉันต้องการรวมโดยไม่เพิ่มไลบรารีหลักทั้งหมด ฉันจะต้องโหลดมันเป็นโมดูลจาก npm

-ถูกต้อง.

ซึ่งต้องใช้ Browserify หรือ Wepback หรืออย่างอื่นที่น่าจะเรียกว่า SystemJS

-ถูกต้อง.

ซึ่ง เว้นแต่ว่าจะเป็น Webpack โดยหลักการแล้ว ควรได้รับการจัดการโดยผู้เรียกใช้งาน

-ถูกต้อง.

แต่เนื่องจากฉันควรใช้การโปรแกรมเชิงฟังก์ชันและภาษาพิมพ์ ฉันจึงต้องคอมไพล์ TypeScript ล่วงหน้าหรือเพิ่มสิ่งที่เรียกว่า Flow นี้ก่อน

-ถูกต้อง.

แล้วส่งไปที่ Babel หากฉันต้องการใช้รอ

-ถูกต้อง.

ดังนั้นฉันก็สามารถใช้ Fetch, Promises, Control Flow และเวทมนตร์อื่นๆ เหล่านั้นได้

- เพียงอย่าลืมเติม polyfill ใน Fetch หากยังไม่รองรับ เพราะ Safari ก็ยังจัดการไม่ได้

คุณรู้ไหม ฉันคิดว่าเราเสร็จกันที่นี่แล้ว จริงๆ แล้ว ฉันคิดว่าฉันเสร็จเรียบร้อยแล้ว ฉันเสร็จเรื่องเว็บแล้ว ฉันเสร็จเรื่อง JavaScript ทั้งหมดแล้ว

-ไม่เป็นไร ในอีกไม่กี่ปีข้างหน้า เราทุกคนจะสามารถเขียนโค้ดใน Elm หรือ WebAssembly ได้

ฉันจะย้ายกลับไปที่แบ็กเอนด์ ฉันไม่สามารถจัดการกับการเปลี่ยนแปลง เวอร์ชัน รุ่น คอมไพเลอร์ และทรานสไพเลอร์จำนวนมากเหล่านี้ได้ ชุมชน JavaScript นั้นบ้าคลั่งมากหากคิดว่าจะมีใครสักคนที่ทำตามสิ่งนี้ได้

-ฉันเข้าใจคุณ คุณควรลองใช้ชุมชน Python ดูนะ

ทำไม

เคยได้ยินเรื่อง Python 3 บ้างไหม?

อัปเดต: ขอบคุณสำหรับการชี้ข้อผิดพลาดและการพิมพ์ ฉันจะอัปเดตบทความตามที่ระบุ การสนทนา ใน HackerNews และ Reddit