Bagaimana rasanya mempelajari JavaScript pada tahun 2016

Tiada rangka kerja JavaScript dibuat semasa penulisan artikel ini.

Perkara berikut diilhamkan oleh artikel "Ia adalah masa depan" daripada Circle CI. Anda boleh membaca yang asal di sini . Sekeping ini hanyalah pendapat, dan seperti mana-mana rangka kerja JavaScript, ia tidak boleh diambil terlalu serius.

Hei, saya mendapat projek web baharu ini, tetapi sejujurnya saya tidak banyak mengekodkan web dalam beberapa tahun dan saya telah mendengar landskap berubah sedikit. Anda adalah pembangun web yang paling terkini di sini bukan?

-Istilah sebenar ialah jurutera Front End, tetapi ya, saya orang yang betul. Saya membuat web pada tahun 2016. Visualisasi, pemain muzik, dron terbang yang bermain bola sepak, sebut sahaja. Saya baru pulang dari JsConf dan ReactConf, jadi saya tahu teknologi terkini untuk mencipta apl web.

Sejuk. Saya perlu membuat halaman yang memaparkan aktiviti terkini daripada pengguna, jadi saya hanya perlu mendapatkan data daripada titik akhir REST dan memaparkannya dalam beberapa jenis jadual boleh ditapis, dan mengemas kininya jika ada perubahan dalam pelayan. Saya berfikir mungkin menggunakan jQuery untuk mengambil dan memaparkan data?

-Ya tuhan tidak, tiada siapa yang menggunakan jQuery lagi. Anda harus cuba belajar React, sekarang 2016.

Oh, OK. Apa React?

-Ia adalah perpustakaan yang hebat yang dibuat oleh beberapa lelaki di Facebook, ia benar-benar membawa kawalan dan prestasi kepada aplikasi anda, dengan membolehkan anda mengendalikan sebarang perubahan paparan dengan mudah.

Kedengaran kemas. Bolehkah saya menggunakan React untuk memaparkan data daripada pelayan?

-Ya, tetapi pertama sekali anda perlu menambah React dan React DOM sebagai perpustakaan dalam halaman web anda.

Tunggu, kenapa dua perpustakaan?

-Jadi satu adalah perpustakaan sebenar dan yang kedua adalah untuk memanipulasi DOM, yang kini anda boleh terangkan dalam JSX.

JSX? Apakah JSX?

-JSX hanyalah sambungan sintaks JavaScript yang kelihatan seperti XML. Ini adalah cara lain untuk menerangkan DOM, anggap ia sebagai HTML yang lebih baik.

Apa yang salah dengan HTML?

-Sudah tahun 2016. Tiada siapa yang mengekod HTML secara langsung lagi.

Betul. Bagaimanapun, jika saya menambah dua perpustakaan ini maka saya boleh menggunakan React?

-Tidak cukup. Anda perlu menambah Babel, dan kemudian anda boleh menggunakan React.

Perpustakaan lain? Apa itu Babel?

-Oh, Babel ialah transpiler yang membolehkan anda menyasarkan versi JavaScript tertentu, sementara anda mengekod dalam mana-mana versi JavaScript. Anda tidak PERLU memasukkan Babel untuk menggunakan ReactJS, tetapi melainkan anda melakukannya, anda terjebak dengan menggunakan ES5, dan mari kita nyata, ini 2016, anda sepatutnya mengekod dalam ES2016+ seperti yang dilakukan oleh kanak-kanak hebat yang lain.

ES5? ES2016+? Saya semakin sesat di sini. Apakah itu ES5 dan ES2016+?

-ES5 adalah singkatan kepada ECMAScript 5. Ia adalah edisi yang disasarkan oleh kebanyakan orang kerana ia telah dilaksanakan oleh kebanyakan pelayar pada masa kini.

ECMAScript?

-Ya, anda tahu, JavaScript standard skrip berdasarkan pada tahun 1999 selepas keluaran awalnya pada tahun 1995, ketika itu apabila JavaScript dinamakan Livescript dan hanya dijalankan dalam Netscape Navigator. Itu sangat kucar-kacir ketika itu, tetapi syukurlah sekarang keadaannya sangat jelas dan kami mempunyai, seperti, 7 edisi pelaksanaan ini.

7 edisi. Sebenarnya. Dan ES5 dan ES2016+ adalah?

-Masing-masing edisi kelima dan ketujuh.

Tunggu, apa yang berlaku dengan yang keenam?

-Maksud anda ES6? Ya, maksud saya, setiap edisi adalah superset daripada yang sebelumnya, jadi jika anda menggunakan ES2016+, anda menggunakan semua ciri versi sebelumnya.

Betul. Dan mengapa menggunakan ES2016+ berbanding ES6?

-Nah, anda BOLEH menggunakan ES6, tetapi untuk menggunakan ciri hebat seperti async dan menunggu, anda perlu menggunakan ES2016+. Jika tidak, anda terperangkap dengan penjana ES6 dengan coroutine untuk menyekat panggilan tak segerak untuk aliran kawalan yang betul.

Saya tidak tahu apa yang anda katakan tadi, dan semua nama ini mengelirukan. Lihat, saya hanya memuatkan sekumpulan data dari pelayan, dahulu saya hanya boleh memasukkan jQuery dari CDN dan hanya mendapatkan data dengan panggilan AJAX, mengapa saya tidak boleh melakukannya?

-Ini 2016 kawan, tiada siapa yang menggunakan jQuery lagi, ia berakhir dengan sekumpulan kod spageti. Semua orang tahu itu.

Betul. Jadi alternatif saya ialah memuatkan tiga perpustakaan untuk mengambil data dan memaparkan jadual HTML.

-Nah, anda memasukkan ketiga-tiga perpustakaan itu tetapi menggabungkannya dengan pengurus modul untuk memuatkan hanya satu fail.

saya nampak. Dan apakah pengurus modul?

-Takrifan bergantung pada persekitaran, tetapi dalam web kami biasanya bermaksud apa sahaja yang menyokong modul AMD atau CommonJS.

Riiight. Dan AMD dan CommonJS adalah…?

-Takrifan. Terdapat cara untuk menerangkan cara berbilang perpustakaan dan kelas JavaScript harus berinteraksi. Anda tahu, eksport dan memerlukan? Anda boleh menulis berbilang fail JavaScript yang mentakrifkan API AMD atau CommonJS dan anda boleh menggunakan sesuatu seperti Browserify untuk menggabungkannya.

OK, itu masuk akal... saya rasa. Apakah itu Browserify?

-Ia adalah alat yang membolehkan anda menggabungkan kebergantungan yang diterangkan CommonJS kepada fail yang boleh dijalankan dalam penyemak imbas. Ia dicipta kerana kebanyakan orang menerbitkan kebergantungan tersebut dalam pendaftaran npm.

pendaftaran npm?

-Ia adalah repositori awam yang sangat besar di mana orang pintar meletakkan kod dan kebergantungan sebagai modul.

Seperti CDN?

-Tidak juga. Ia lebih seperti pangkalan data terpusat di mana sesiapa sahaja boleh menerbitkan dan memuat turun perpustakaan, jadi anda boleh menggunakannya secara tempatan untuk pembangunan dan kemudian memuat naiknya ke CDN jika anda mahu.

Oh, seperti Bower!

-Ya, tetapi sekarang 2016, tiada siapa yang menggunakan Bower lagi.

Oh, saya faham... jadi saya perlu memuat turun perpustakaan daripada npm kemudian?

-Ya. Jadi sebagai contoh, jika anda ingin menggunakan React , anda memuat turun modul React dan mengimportnya dalam kod anda. Anda boleh melakukannya untuk hampir setiap perpustakaan JavaScript yang popular.

Oh, seperti Angular!

-Angular begitu 2015. Tetapi ya. Angular akan berada di sana, di samping VueJS atau RxJS dan perpustakaan 2016 yang hebat yang lain. Ingin belajar tentang mereka?

Mari kekal dengan React, saya sudah belajar terlalu banyak perkara sekarang. Jadi, jika saya perlu menggunakan React saya mengambilnya dari npm ini dan kemudian menggunakan perkara Browserify ini?

-Ya.

Itu nampaknya terlalu rumit untuk hanya mengambil sekumpulan kebergantungan dan mengikatnya bersama-sama.

-Itulah sebabnya anda menggunakan pengurus tugas seperti Grunt atau Gulp atau Brokoli untuk mengautomasikan menjalankan Browserify. Heck, anda juga boleh menggunakan Mimosa.

merengus? Teguk? Brokoli? Mimosa? Apa yang kita bincangkan sekarang?

-Pengurus tugas. Tetapi mereka tidak lagi keren. Kami menggunakannya seperti, 2015, kemudian kami menggunakan Makefiles, tetapi kini kami membungkus semuanya dengan Webpack.

Makefiles? Saya fikir ia kebanyakannya digunakan pada projek C atau C++.

-Ya, tetapi nampaknya dalam web kami suka membuat perkara menjadi rumit dan kemudian kembali kepada asas. Kami melakukan itu setiap tahun atau lebih, tunggu sahaja, kami akan melakukan pemasangan dalam web dalam satu atau dua tahun.

Mengeluh. Anda menyebut sesuatu yang dipanggil Webpack?

-Ia adalah pengurus modul lain untuk penyemak imbas sambil menjadi jenis pelari tugas juga. Ia seperti versi Browserify yang lebih baik.

Oh, Ok. Mengapa ia lebih baik?

-Nah, mungkin tidak lebih baik, ia hanya lebih berpendirian tentang bagaimana kebergantungan anda harus diikat. Webpack membolehkan anda menggunakan pengurus modul yang berbeza, dan bukan sahaja yang CommonJS, jadi contohnya modul yang disokong ES6 asli.

Saya amat keliru dengan keseluruhan perkara CommonJS/ES6 ini.

-Semua orang begitu, tetapi anda tidak perlu peduli lagi dengan SystemJS.

Jesus christ, kata nama lain-js. Ok, dan apakah SystemJS ini?

-Nah, tidak seperti Browserify dan Webpack 1.x, SystemJS ialah pemuat modul dinamik yang membolehkan anda mengikat berbilang modul dalam berbilang fail dan bukannya menggabungkannya dalam satu fail besar.

Tunggu, tetapi saya fikir kami mahu membina perpustakaan kami dalam satu fail besar dan memuatkannya!

-Ya, tetapi kerana HTTP/2 akan datang sekarang berbilang permintaan HTTP sebenarnya lebih baik.

Tunggu, jadi tidak bolehkah kita menambah tiga perpustakaan asal untuk React??

-Tidak juga. Maksud saya, anda boleh menambahkannya sebagai skrip luaran daripada CDN, tetapi anda masih perlu memasukkan Babel.

Mengeluh. Dan itu buruk bukan?

-Ya, anda akan memasukkan keseluruhan babel-core, dan ia tidak akan cekap untuk pengeluaran. Semasa pengeluaran, anda perlu melakukan satu siri pra-tugas untuk menyediakan projek anda yang menjadikan ritual untuk memanggil Syaitan kelihatan seperti resipi telur rebus. Anda perlu mengecilkan aset, memburukkannya, css sebaris di atas lipatan, menangguhkan skrip, serta-

Saya dapat, saya dapat. Jadi jika anda tidak akan memasukkan perpustakaan secara langsung dalam CDN, bagaimanakah anda akan melakukannya?

-Saya akan mentranspilenya daripada Typescript menggunakan kombo Webpack + SystemJS + Babel.

Skrip taip? Saya fikir kami mengekod dalam JavaScript!

-Typescript IS JavaScript, atau lebih baik kata, superset JavaScript, lebih khusus JavaScript pada versi ES6. Anda tahu, versi keenam yang kita bincangkan sebelum ini?

Saya fikir ES2016+ sudah pun menjadi superset ES6! MENGAPA kita memerlukan perkara ini yang dipanggil Typescript?

-Oh, kerana ia membolehkan kami menggunakan JavaScript sebagai bahasa yang ditaip, dan mengurangkan ralat masa jalan. Sekarang tahun 2016, anda sepatutnya menambah beberapa jenis pada kod JavaScript anda.

Dan Typescript jelas melakukannya.

-Flow juga, walaupun ia hanya menyemak untuk menaip manakala Typescript ialah superset JavaScript yang perlu disusun.

Sigh… dan Flow adalah?

-Ia adalah penyemak jenis statik yang dibuat oleh beberapa lelaki di Facebook. Mereka mengodkannya dalam OCaml, kerana pengaturcaraan berfungsi adalah hebat.

OCaml? Pengaturcaraan berfungsi?

-Ia yang digunakan oleh kanak-kanak yang hebat pada masa kini, anda tahu, 2016? Pengaturcaraan berfungsi? Fungsi pesanan tinggi? Karipap? Fungsi tulen?

Saya tidak tahu apa yang awak katakan tadi.

-Tiada sesiapa pun pada mulanya. Lihat, anda hanya perlu tahu bahawa pengaturcaraan berfungsi lebih baik daripada OOP dan itulah yang sepatutnya kami gunakan pada tahun 2016.

Tunggu, saya belajar OOP di kolej, saya fikir itu bagus?

-Begitu juga Java sebelum dibeli oleh Oracle. Maksud saya, OOP adalah baik pada zaman dahulu, dan ia masih mempunyai kegunaannya hari ini, tetapi kini semua orang menyedari keadaan mengubah suai adalah bersamaan dengan menendang bayi, jadi kini semua orang beralih ke objek tidak berubah dan pengaturcaraan berfungsi. Lelaki Haskell telah memanggilnya selama bertahun-tahun, -dan jangan buat saya bermula dengan lelaki Elm- tetapi bernasib baik di web sekarang kami mempunyai perpustakaan seperti Ramda yang membolehkan kami menggunakan pengaturcaraan berfungsi dalam JavaScript biasa.

Adakah anda hanya membuang nama untuk kepentingannya? Apa kejadahnya Ramnda?

-Tidak. Ramda. Seperti Lambda. Anda tahu, perpustakaan David Chambers itu?

David siapa?

-David Chambers. Lelaki yang keren. Memainkan permainan Coup yang kejam. Salah seorang penyumbang untuk Ramda. Anda juga harus menyemak Erik Meijer jika anda serius untuk mempelajari pengaturcaraan berfungsi.

Dan Erik Meijer adalah…?

-Lelaki pengaturcaraan berfungsi juga. Lelaki yang hebat. Dia mempunyai banyak pembentangan di mana dia membuang Agile semasa menggunakan baju berwarna pelik ini. Anda juga harus menyemak beberapa barangan daripada Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-

Ok. Saya akan menghalang anda di sana. Semua itu bagus dan baik, tetapi saya fikir semua itu sangat rumit dan tidak perlu untuk hanya mengambil data dan memaparkannya. Saya agak pasti saya tidak perlu mengenali orang ini atau mempelajari semua perkara itu untuk membuat jadual dengan data dinamik. Mari kita kembali ke React. Bagaimanakah saya boleh mengambil data daripada pelayan dengan React?

-Nah, anda sebenarnya tidak mengambil data dengan React, anda hanya memaparkan data dengan React.

Oh, sial saya. Jadi apa yang anda gunakan untuk mengambil data?

-Anda menggunakan Ambil untuk mengambil data daripada pelayan.

saya minta maaf? Anda menggunakan Ambil untuk mengambil data? Sesiapa yang menamakan perkara itu memerlukan tesaurus.

-Saya tahu betul? Ambil itu nama pelaksanaan asli untuk melaksanakan XMLHttpRequests terhadap pelayan.

Oh, jadi AJAX.

-AJAX hanyalah penggunaan XMLHttpRequests. Tetapi pasti. Fetch membolehkan anda melakukan AJAX berdasarkan janji, yang kemudian anda boleh menyelesaikannya untuk mengelakkan neraka panggilan balik.

Panggil balik neraka?

-Ya. Setiap kali anda melakukan permintaan tak segerak terhadap pelayan, anda perlu menunggu responsnya, yang kemudiannya membuatkan anda menambah fungsi dalam fungsi, yang dipanggil piramid panggil balik dari neraka.

Oh, Ok. Dan perkara janji ini menyelesaikannya?

-Memang. Dengan memanipulasi panggilan balik anda melalui janji, anda boleh menulis kod yang lebih mudah difahami, mengejek dan mengujinya, serta melaksanakan permintaan serentak sekaligus dan menunggu sehingga kesemuanya dimuatkan.

Dan itu boleh dilakukan dengan Ambil?

-Ya, tetapi hanya jika pengguna anda menggunakan penyemak imbas malar hijau, jika tidak, anda perlu memasukkan poliisi Ambil atau gunakan Permintaan, Bluebird atau Axios.

Berapa banyak perpustakaan yang perlu saya ketahui demi tuhan? Berapa ramai daripada mereka?

-Ia JavaScript. Mesti ada beribu-ribu perpustakaan yang semuanya melakukan perkara yang sama. Kami tahu perpustakaan, sebenarnya, kami mempunyai perpustakaan yang terbaik. Perpustakaan kami adalah huuuge, dan kadangkala kami memasukkan gambar Guy Fieri di dalamnya.

Adakah anda baru sahaja berkata Guy Fieri? Mari kita selesaikan perkara ini. Apakah yang dilakukan oleh perpustakaan Bluebird, Request, Axios ini?

-Mereka adalah perpustakaan untuk melaksanakan XMLHttpRequests yang mengembalikan janji.

Bukankah kaedah AJAX jQuery mula mengembalikan janji juga?

-Kami tidak menggunakan perkataan "J" pada tahun 2016 lagi. Hanya gunakan Ambil, dan isi poli apabila ia tiada dalam penyemak imbas atau gunakan Bluebird, Permintaan atau Axios sebaliknya. Kemudian urus janji dengan menunggu dalam fungsi async dan ledakan, anda mempunyai aliran kawalan yang betul.

Ini kali ketiga anda menyebut menunggu tetapi saya tidak tahu apa itu.

-Await membolehkan anda menyekat panggilan tak segerak, membolehkan anda mempunyai kawalan yang lebih baik pada masa data sedang diambil dan meningkatkan kebolehbacaan kod secara keseluruhan. Ia hebat, anda hanya perlu memastikan anda menambah pratetap peringkat-3 dalam Babel, atau menggunakan pemalam syntax-async-functions dan transform-async-to-generator.

Ini gila.

-Tidak, gila adalah hakikat yang anda perlukan untuk menyusun semula kod TypeScript dan kemudian mentranspilenya dengan Babel untuk digunakan menunggu.

Apa? Ia tidak termasuk dalam Typescript?

-Ia berlaku dalam versi seterusnya, tetapi pada versi 1.7 ia hanya menyasarkan ES6, jadi jika anda ingin menggunakan await dalam penyemak imbas, mula-mula anda perlu menyusun kod TypeScript anda yang menyasarkan ES6 dan kemudian Babel yang menyasarkan ES5.

Pada ketika ini saya tidak tahu apa yang perlu saya katakan.

-Lihat, ia mudah. Kodkan semua dalam Typescript. Semua modul yang menggunakan Fetch menyusunnya untuk menyasarkan ES6, mentranspilenya dengan Babel pada pratetap peringkat-3 dan memuatkannya dengan SystemJS. Jika anda tidak mempunyai Ambil, isi poli atau gunakan Bluebird, Permintaan atau Axios, dan kendalikan semua janji anda dengan menunggu.

Kami mempunyai takrifan mudah yang sangat berbeza. Jadi, dengan ritual itu saya akhirnya mengambil data dan kini saya boleh memaparkannya dengan React bukan?

-Adakah permohonan anda akan mengendalikan sebarang perubahan keadaan?

Err, saya rasa tidak begitu. Saya hanya perlu memaparkan data.

-Oh, terima kasih Tuhan. Jika tidak, saya perlu menerangkan kepada anda Flux, dan pelaksanaan seperti Flummox, Alt, Fluxible. Walaupun sejujurnya anda harus menggunakan Redux.

Saya hanya akan terbang atas nama-nama itu. Sekali lagi, saya hanya perlu memaparkan data.

-Oh, jika anda hanya memaparkan data yang anda tidak perlukan React untuk bermula. Anda akan baik-baik saja dengan enjin templat.

Adakah anda bergurau? Adakah anda fikir ini lucu? Adakah begitu cara anda melayan orang yang anda sayangi?

-Saya hanya menerangkan apa yang anda boleh gunakan.

Berhenti. Berhenti sahaja.

-Maksud saya, walaupun ia hanya menggunakan enjin templat, saya masih akan menggunakan kombo Typescript + SystemJS + Babel jika saya adalah anda.

Saya perlu memaparkan data pada halaman, bukan melakukan kematian MK asal Sub Zero. Beritahu saya enjin templat yang hendak digunakan dan saya akan mengambilnya dari sana.

-Ada banyak, yang mana satu yang anda kenal?

Ugh, tak ingat nama. Ia adalah masa yang lama dahulu.

-jTemplat? jQote? MURNI?

Err, tidak membunyikan loceng. Satu lagi?

-Ketelusan? JSRender? MarkupJS? KnockoutJS? Yang itu mempunyai ikatan dua hala.

Satu lagi?

-PlatesJS? jQuery-tmpl? Bar hendal? Sesetengah orang masih menggunakannya.

Mungkin. Adakah terdapat yang serupa dengan yang terakhir itu?

-Mimisi, garis bawah? Saya fikir sekarang walaupun lodash mempunyai satu untuk jujur, tetapi itu adalah jenis 2014.

Err.. mungkin lebih baru.

-Jade? DustJS?

Tidak.

-DotJS? EJS?

Tidak.

-Nunjucks? ECT?

Tidak.

-Mah, tiada siapa yang suka sintaks Coffeescript. Jade?

Tidak, anda sudah berkata Jade.

-Maksud saya Pug. Maksud saya Jade. Maksud saya, Jade kini Pug.

Mengeluh. Tidak. Tidak ingat. Yang manakah anda akan gunakan?

-Mungkin hanya rentetan templat asli ES6.

Biar saya teka. Dan itu memerlukan ES6.

-Betul.

Yang mana, bergantung pada pelayar yang saya gunakan memerlukan Babel.

-Betul.

Yang mana, jika saya ingin memasukkan tanpa menambah keseluruhan perpustakaan teras, saya perlu memuatkannya sebagai modul daripada npm.

-Betul.

Yang, memerlukan Browserify, atau Wepback, atau kemungkinan besar perkara lain yang dipanggil SystemJS.

-Betul.

Yang, melainkan Webpack, sebaiknya diuruskan oleh pelari tugas.

-Betul.

Tetapi, memandangkan saya sepatutnya menggunakan pengaturcaraan berfungsi dan bahasa taip, saya perlu terlebih dahulu menyusun TypeScript atau menambah Flow thingy ini.

-Betul.

Dan kemudian hantar itu kepada Babel jika saya mahu menggunakan await.

-Betul.

Jadi saya kemudian boleh menggunakan Ambil, janji, dan mengawal aliran dan semua sihir itu.

-Cuma jangan lupa untuk polyfill Fetch jika ia tidak disokong, Safari masih tidak dapat mengendalikannya.

Anda tahu apa. Saya rasa kita sudah selesai di sini. Sebenarnya, saya rasa saya sudah selesai. Saya sudah selesai dengan web, saya sudah selesai dengan JavaScript sama sekali.

-Tidak mengapa, dalam beberapa tahun kita semua akan mengekod dalam Elm atau WebAssembly.

Saya hanya akan bergerak kembali ke bahagian belakang. Saya tidak boleh mengendalikan banyak perubahan dan versi dan edisi dan penyusun dan transpiler ini. Komuniti JavaScript tidak waras jika berpendapat sesiapa sahaja boleh mengikuti perkembangan ini.

-Saya dengar awak. Anda harus mencuba komuniti Python kemudian.

kenapa?

-Pernah dengar tentang Python 3?

Kemas kini: Terima kasih kerana menunjukkan kesilapan dan kesilapan, saya akan mengemas kini artikel seperti yang dinyatakan. Perbincangan dalam HackerNews dan Reddit .