 kerangka kerja    Tidak ada JavaScript yang dibuat saat artikel ini ditulis.       Berikut ini terinspirasi oleh artikel “It's the future” dari Circle CI. Anda dapat membaca versi aslinya di sini . Tulisan ini hanyalah sebuah opini, dan seperti kerangka kerja JavaScript lainnya, tulisan ini tidak boleh dianggap terlalu serius.  Hai, saya punya proyek web baru, tetapi sejujurnya saya sudah tidak banyak membuat kode web selama beberapa tahun dan saya dengar lanskapnya sudah sedikit berubah. Anda pengembang web paling mutakhir di sini, bukan?   -Istilah sebenarnya adalah Front End Engineer, tapi ya, saya orang yang tepat. Saya bekerja di bidang web pada tahun 2016. Visualisasi, pemutar musik, menerbangkan drone yang bermain sepak bola, dan lain sebagainya. Saya baru saja kembali dari JsConf dan ReactConf, jadi saya tahu teknologi terbaru untuk membuat aplikasi web.  Keren. Saya perlu membuat halaman yang menampilkan aktivitas terbaru dari pengguna, jadi saya hanya perlu mengambil data dari titik akhir REST dan menampilkannya dalam semacam tabel yang dapat difilter, dan memperbaruinya jika ada perubahan di server. Saya berpikir mungkin menggunakan jQuery untuk mengambil dan menampilkan data?   -Ya ampun, tidak ada yang menggunakan jQuery lagi. Anda harus mencoba mempelajari React, sekarang sudah tahun 2016.  Oh, oke. Apa itu React?   -Ini adalah pustaka super keren yang dibuat oleh beberapa orang di Facebook, pustaka ini benar-benar memberikan kontrol dan kinerja pada aplikasi Anda, dengan memungkinkan Anda menangani setiap perubahan tampilan dengan sangat mudah.  Kedengarannya menarik. Bisakah saya menggunakan React untuk menampilkan data dari server?   -Ya, tetapi pertama-tama Anda perlu menambahkan React dan React DOM sebagai pustaka di halaman web Anda.  Tunggu, kenapa dua perpustakaan?   -Jadi yang satu adalah pustaka sebenarnya dan yang kedua untuk memanipulasi DOM, yang sekarang dapat Anda jelaskan di JSX.  JSX? Apa itu JSX?   -JSX hanyalah ekstensi sintaksis JavaScript yang tampak seperti XML. Ini adalah cara lain untuk mendeskripsikan DOM, anggap saja sebagai HTML yang lebih baik.  Apa yang salah dengan HTML?   -Sekarang tahun 2016. Tidak ada orang yang mengkode HTML secara langsung lagi.  Baik. Ngomong-ngomong, jika saya menambahkan kedua pustaka ini, maka saya dapat menggunakan React?   -Tidak juga. Anda perlu menambahkan Babel, lalu Anda dapat menggunakan React.  Perpustakaan lain? Apa itu Babel?   -Oh, Babel adalah transpiler yang memungkinkan Anda menargetkan versi JavaScript tertentu, saat Anda membuat kode dalam versi JavaScript mana pun. Anda tidak HARUS menyertakan Babel untuk menggunakan ReactJS, tetapi jika tidak, Anda akan terjebak dengan penggunaan ES5, dan mari kita hadapi kenyataan, sekarang tahun 2016, Anda harus membuat kode dalam ES2016+ seperti yang dilakukan anak-anak keren lainnya.  ES5? ES2016+? Saya jadi bingung. Apa itu ES5 dan ES2016+?   -ES5 adalah singkatan dari ECMAScript 5. Edisi ini merupakan edisi yang paling banyak diincar orang karena telah diterapkan oleh sebagian besar peramban saat ini.  Skrip ECMA?   -Ya, Anda tahu, standar skrip JavaScript dibuat pada tahun 1999 setelah peluncuran awalnya pada tahun 1995, saat itu JavaScript bernama Livescript dan hanya berjalan di Netscape Navigator. Dulu sangat berantakan, tetapi untungnya sekarang semuanya sudah sangat jelas dan kita memiliki, seperti, 7 edisi implementasi ini.  7 edisi. Sungguh. Dan ES5 dan ES2016+?   -Edisi kelima dan ketujuh.  Tunggu, apa yang terjadi dengan yang keenam?   -Maksud Anda ES6? Ya, maksud saya, setiap edisi merupakan superset dari edisi sebelumnya, jadi jika Anda menggunakan ES2016+, Anda menggunakan semua fitur dari versi sebelumnya.  Benar. Lalu mengapa menggunakan ES2016+ ketimbang ES6?   -Yah, Anda BISA menggunakan ES6, tetapi untuk menggunakan fitur-fitur keren seperti async dan await, Anda perlu menggunakan ES2016+. Jika tidak, Anda akan terjebak dengan generator ES6 dengan coroutine untuk memblokir panggilan asynchronous agar alur kontrolnya tepat.  Saya tidak mengerti apa yang baru saja Anda katakan, dan semua nama ini membingungkan. Begini, saya baru saja memuat sekumpulan data dari server, saya biasanya cukup memasukkan jQuery dari CDN dan langsung mendapatkan data dengan panggilan AJAX, mengapa saya tidak bisa melakukannya?   -Sekarang tahun 2016, tidak ada yang menggunakan jQuery lagi, kodenya jadi berantakan. Semua orang tahu itu.  Benar. Jadi alternatif saya adalah memuat tiga pustaka untuk mengambil data dan menampilkan tabel HTML.   -Baiklah, Anda menyertakan ketiga pustaka tersebut, tetapi menggabungkannya dengan manajer modul untuk memuat satu berkas saja.  Begitu ya. Dan apa itu module manager?   -Definisi bergantung pada lingkungan, tetapi di web biasanya yang kami maksud adalah apa pun yang mendukung modul AMD atau CommonJS.  Benar juga. Dan AMD dan CommonJS adalah…?   - Definisi. Ada beberapa cara untuk menjelaskan bagaimana beberapa pustaka dan kelas JavaScript harus berinteraksi. Anda tahu, exports dan requires? Anda dapat menulis beberapa file JavaScript yang mendefinisikan API AMD atau CommonJS dan Anda dapat menggunakan sesuatu seperti Browserify untuk menggabungkannya.  Oke, itu masuk akal… menurutku. Apa itu Browserify?   -Ini adalah alat yang memungkinkan Anda untuk menggabungkan dependensi yang dijelaskan CommonJS ke dalam file yang dapat dijalankan di browser. Alat ini dibuat karena kebanyakan orang menerbitkan dependensi tersebut di registri npm.  registri npm?   -Ini adalah repositori publik yang sangat besar tempat orang-orang pintar meletakkan kode dan dependensi sebagai modul.  Seperti CDN?   -Tidak juga. Ini lebih seperti basis data terpusat tempat siapa pun dapat menerbitkan dan mengunduh pustaka, sehingga Anda dapat menggunakannya secara lokal untuk pengembangan dan kemudian mengunggahnya ke CDN jika Anda mau.  Oh, seperti Bower!   -Ya, tetapi sekarang tahun 2016, tidak ada yang menggunakan Bower lagi.  Oh, begitu… jadi saya perlu mengunduh pustaka dari npm?   -Ya. Jadi misalnya, jika Anda ingin menggunakan React, Anda mengunduh modul React dan mengimpornya ke dalam kode Anda. Anda dapat melakukannya untuk hampir setiap pustaka JavaScript yang populer.  Oh, seperti Angular!   -Angular sudah ketinggalan zaman. Tapi ya. Angular akan tetap ada, bersama VueJS atau RxJS dan pustaka keren 2016 lainnya. Ingin mempelajarinya?  Mari kita tetap menggunakan React, saya sudah belajar banyak hal sekarang. Jadi, jika saya perlu menggunakan React, saya mengambilnya dari npm ini dan kemudian menggunakan Browserify ini?   -Ya.  Tampaknya terlalu rumit untuk sekadar mengambil sekumpulan dependensi dan menggabungkannya.   -Ya, itulah sebabnya Anda menggunakan pengelola tugas seperti Grunt atau Gulp atau Broccoli untuk mengotomatiskan Browserify. Bahkan, Anda dapat menggunakan Mimosa.  Mendengkur? Menelan? Brokoli? Mimosa? Apa yang sedang kita bicarakan sekarang?   - Pengelola tugas. Namun, hal itu tidak lagi keren. Kami menggunakannya sekitar tahun 2015, lalu kami menggunakan Makefile, tetapi sekarang kami membungkus semuanya dengan Webpack.  Makefile? Saya pikir itu lebih banyak digunakan pada proyek C atau C++.   -Ya, tetapi tampaknya di web kita senang membuat hal-hal menjadi rumit dan kemudian kembali ke hal-hal mendasar. Kita melakukannya setiap tahun atau lebih, tunggu saja, kita akan melakukan perakitan di web dalam satu atau dua tahun.  Huh. Anda menyebutkan sesuatu yang disebut Webpack?   -Ini adalah pengelola modul lain untuk peramban sekaligus semacam pengelola tugas. Ini seperti versi Browserify yang lebih baik.  Oh, oke. Kenapa lebih baik?   -Yah, mungkin tidak lebih baik, hanya saja lebih beropini tentang bagaimana dependensi Anda harus dikaitkan. Webpack memungkinkan Anda menggunakan manajer modul yang berbeda, dan tidak hanya yang CommonJS, jadi misalnya modul asli yang didukung ES6.  Saya benar-benar bingung dengan keseluruhan hal CommonJS/ES6 ini.   -Semua orang begitu, tetapi Anda seharusnya tidak peduli lagi dengan SystemJS.  Ya Tuhan, kata benda-js lainnya. Oke, apa itu SystemJS?   -Tidak seperti Browserify dan Webpack 1.x, SystemJS adalah pemuat modul dinamis yang memungkinkan Anda mengikat beberapa modul dalam beberapa file, bukan menggabungkannya dalam satu file besar.  Tunggu, tapi saya pikir kita ingin membangun perpustakaan kita dalam satu berkas besar dan memuatnya!   -Ya, tetapi karena HTTP/2 sekarang hadir, beberapa permintaan HTTP sebenarnya lebih baik.  Tunggu, jadi tidak bisakah kita menambahkan tiga pustaka asli untuk React??   -Tidak juga. Maksud saya, Anda dapat menambahkannya sebagai skrip eksternal dari CDN, tetapi Anda tetap perlu menyertakan Babel.  Duh. Itu buruk, kan?   -Ya, Anda akan menyertakan seluruh inti babel, dan itu tidak akan efisien untuk produksi. Pada tahap produksi, Anda perlu melakukan serangkaian tugas awal untuk menyiapkan proyek Anda yang membuat ritual pemanggilan Setan tampak seperti resep telur rebus. Anda perlu mengecilkan aset, membuatnya tampak jelek, menambahkan css sebaris di atas lipatan, menunda skrip, serta-  Saya paham, saya paham. Jadi, jika Anda tidak menyertakan pustaka secara langsung dalam CDN, bagaimana Anda melakukannya?   -Saya akan mentranspilasinya dari TypeScript menggunakan kombinasi Webpack + SystemJS + Babel.  TypeScript? Saya pikir kita sedang membuat kode dalam JavaScript!   -Typescript ADALAH JavaScript, atau lebih tepatnya, superset dari JavaScript, lebih khusus lagi JavaScript pada versi ES6. Tahukah Anda, versi keenam yang kita bicarakan sebelumnya?  Saya pikir ES2016+ sudah merupakan superset dari ES6! MENGAPA kita butuh TypeScript sekarang?   -Oh, karena ini memungkinkan kita menggunakan JavaScript sebagai bahasa yang diketik, dan mengurangi kesalahan saat dijalankan. Sekarang tahun 2016, Anda harus menambahkan beberapa tipe ke kode JavaScript Anda.  Dan TypeScript jelas melakukan itu.   -Flow juga, meskipun hanya memeriksa pengetikan sementara TypeScript merupakan superset JavaScript yang perlu dikompilasi.  Huh… dan Flow itu apa?      fungsional  -Ini adalah pemeriksa tipe statis yang dibuat oleh beberapa orang di Facebook. Mereka mengodekannya dalam OCaml, karena pemrograman itu hebat.  OCaml? Pemrograman fungsional?   -Itu yang digunakan anak-anak keren zaman sekarang, lho, 2016? Pemrograman fungsional? Fungsi tingkat tinggi? Currying? Fungsi murni?  Saya tidak mengerti apa yang baru saja Anda katakan.   -Tidak ada yang melakukannya di awal. Lihat, Anda hanya perlu tahu bahwa pemrograman fungsional lebih baik daripada OOP dan itulah yang seharusnya kita gunakan pada tahun 2016.  Tunggu, saya belajar OOP di perguruan tinggi, saya pikir itu bagus?   -Begitu pula dengan Java sebelum dibeli oleh Oracle. Maksud saya, OOP bagus di masa lalu, dan masih berguna sampai sekarang, tetapi sekarang semua orang menyadari bahwa mengubah status sama saja dengan menendang bayi, jadi sekarang semua orang beralih ke objek yang tidak dapat diubah dan pemrograman fungsional. Orang-orang Haskell telah menyebutnya selama bertahun-tahun, -dan jangan mulai dengan orang-orang Elm- tetapi untungnya di web sekarang kita memiliki pustaka seperti Ramda yang memungkinkan kita menggunakan pemrograman fungsional dalam JavaScript biasa.  Apakah kamu hanya menyebut nama-nama orang tanpa alasan? Apa sih Ramnda itu?   -Tidak. Ramda. Seperti Lambda. Kau tahu, perpustakaan milik David Chambers?  David siapa?   -David Chambers. Pria yang keren. Memainkan permainan Coup yang hebat. Salah satu kontributor untuk Ramda. Anda juga harus memeriksa Erik Meijer jika Anda serius ingin mempelajari pemrograman fungsional.  Dan Erik Meijer adalah…?   -Ahli pemrograman fungsional juga. Orang yang hebat. Dia punya banyak presentasi di mana dia menjelek-jelekkan Agile sambil menggunakan kaus berwarna aneh ini. Anda juga harus melihat beberapa hal dari Tj, Jash Kenas, Sindre Sorhus, Paul Irish, Addy Osmani-  Oke. Saya akan berhenti di situ. Semua itu bagus dan baik, tetapi menurut saya semua itu terlalu rumit dan tidak perlu untuk sekadar mengambil data dan menampilkannya. Saya cukup yakin saya tidak perlu mengenal orang-orang ini atau mempelajari semua hal itu untuk membuat tabel dengan data dinamis. Mari kita kembali ke React. Bagaimana cara mengambil data dari server dengan React?   -Yah, Anda sebenarnya tidak mengambil data dengan React, Anda hanya menampilkan data dengan React.  Astaga. Jadi, apa yang Anda gunakan untuk mengambil datanya?   -Anda menggunakan Fetch untuk mengambil data dari server.  Maaf? Anda menggunakan Fetch untuk mengambil data? Siapa pun yang menyebutkan hal-hal itu membutuhkan tesaurus.   -Saya tahu, kan? Fetch adalah nama implementasi asli untuk menjalankan XMLHttpRequests terhadap server.  Oh, jadi AJAX.   -AJAX hanyalah penggunaan XMLHttpRequests. Namun tentu saja. Fetch memungkinkan Anda untuk melakukan AJAX berdasarkan promises, yang kemudian dapat Anda selesaikan untuk menghindari callback hell.  Panggilan balik neraka?   -Ya. Setiap kali Anda melakukan permintaan asinkron terhadap server, Anda perlu menunggu responsnya, yang kemudian membuat Anda menambahkan fungsi di dalam fungsi, yang disebut piramida panggilan balik dari neraka.  Oh, oke. Dan janji ini menyelesaikannya?   -Benar. Dengan memanipulasi callback melalui promises, Anda dapat menulis kode yang lebih mudah dipahami, meniru dan mengujinya, serta menjalankan permintaan secara bersamaan sekaligus dan menunggu hingga semuanya dimuat.  Dan itu dapat dilakukan dengan Fetch?   -Ya, tetapi hanya jika pengguna Anda menggunakan browser evergreen, jika tidak, Anda perlu menyertakan polyfill Fetch atau menggunakan Request, Bluebird, atau Axios.  Demi Tuhan, berapa banyak perpustakaan yang perlu saya ketahui? Berapa jumlahnya?   -Itu JavaScript. Pasti ada ribuan pustaka yang semuanya melakukan hal yang sama. Kami tahu pustaka, bahkan, kami punya pustaka terbaik. Pustaka kami sangat besar, dan terkadang kami menyertakan gambar Guy Fieri di dalamnya.  Apakah Anda baru saja mengatakan Guy Fieri? Mari kita selesaikan ini. Apa yang dilakukan pustaka Bluebird, Request, Axios ini?   -Ini adalah pustaka untuk melakukan XMLHttpRequests yang mengembalikan janji.  Bukankah metode AJAX jQuery juga mulai mengembalikan janji?   -Kami tidak lagi menggunakan kata "J" pada tahun 2016. Cukup gunakan Fetch, dan polyfill saat tidak ada di browser atau gunakan Bluebird, Request, atau Axios sebagai gantinya. Kemudian kelola promise dengan await dalam fungsi async dan bum, Anda memiliki alur kontrol yang tepat.  Ini ketiga kalinya Anda menyebutkan menunggu tetapi saya tidak tahu apa itu.   -Await memungkinkan Anda untuk memblokir panggilan asinkron, yang memungkinkan Anda memiliki kontrol yang lebih baik saat data diambil dan secara keseluruhan meningkatkan keterbacaan kode. Ini luar biasa, Anda hanya perlu memastikan untuk menambahkan preset tahap-3 di Babel, atau menggunakan plugin sintaks-asinkron-fungsi dan transformasi-asinkron-ke-generator.  Ini gila.   -Tidak, gila sekali faktanya Anda perlu mengkompilasi terlebih dahulu kode TypeScript lalu mentranspilasinya dengan Babel untuk menggunakan await.  Apa? Itu tidak termasuk dalam TypeScript?   -Itu dilakukan pada versi berikutnya, tetapi pada versi 1.7 hanya menargetkan ES6, jadi jika Anda ingin menggunakan await di peramban, pertama-tama Anda perlu mengompilasi kode TypeScript yang menargetkan ES6 dan kemudian Babel hingga menargetkan ES5.  Pada titik ini, saya tidak tahu harus berkata apa.   -Lihat, ini mudah. Kodekan semuanya dalam Typescript. Semua modul yang menggunakan Fetch mengompilasinya untuk menargetkan ES6, mentranspilasinya dengan Babel pada preset tahap-3, dan memuatnya dengan SystemJS. Jika Anda tidak memiliki Fetch, buat polyfill, atau gunakan Bluebird, Request atau Axios, dan tangani semua promise Anda dengan await.  Kita punya definisi yang sangat berbeda tentang mudah. Jadi, dengan ritual itu akhirnya saya mengambil data dan sekarang saya bisa menampilkannya dengan React, kan?   -Apakah aplikasi Anda akan menangani perubahan status apa pun?  Eh, saya rasa tidak. Saya hanya perlu menampilkan datanya.   -Oh, syukurlah. Kalau tidak, saya harus menjelaskan Flux dan implementasi seperti Flummox, Alt, Fluxible. Meskipun sejujurnya Anda seharusnya menggunakan Redux.  Saya akan langsung melewati nama-nama itu. Sekali lagi, saya hanya perlu menampilkan data.   -Oh, jika Anda hanya menampilkan data, Anda tidak memerlukan React sejak awal. Anda akan baik-baik saja dengan mesin templating.  Apakah Anda bercanda? Apakah menurut Anda ini lucu? Apakah begitu cara Anda memperlakukan orang yang Anda cintai?   -Saya hanya menjelaskan apa yang bisa Anda gunakan.  Berhenti. Berhenti saja.   -Maksudku, meski hanya menggunakan mesin templat, aku tetap akan menggunakan kombinasi TypeScript + SystemJS + Babel kalau aku jadi kamu.  Saya perlu menampilkan data pada halaman, bukan melakukan fatality MK asli Sub Zero. Beri tahu saya mesin templating apa yang harus digunakan dan saya akan melanjutkannya dari sana.   -Banyak sekali, yang mana yang kamu kenal?  Ugh, saya tidak ingat namanya. Itu sudah lama sekali.   -jTemplate?jQote?MURNI?  Eh, nggak kedengaran familiar. Yang satu lagi?   -Transparansi? JSRender? MarkupJS? KnockoutJS? Yang itu punya pengikatan dua arah.  Yang satu lagi?   -PlatesJS? jQuery-tmpl? Handlebars? Beberapa orang masih menggunakannya.  Mungkin. Apakah ada yang mirip dengan yang terakhir?   -Kumis, garis bawah? Kurasa sekarang bahkan lodash juga punya, jujur saja, tapi itu sudah tahun 2014.  Err.. mungkin itu lebih baru.   -Giok? DebuJS?  TIDAK.   -DotJS?  TIDAK.   -Nunjucks? Dll?  TIDAK.   -Ah, toh tidak ada yang suka sintaksis Coffeescript. Giok?  Tidak, kamu sudah mengatakan Jade.   -Maksudku Pug. Maksudku Jade. Maksudku, Jade sekarang Pug.  Huh. Tidak. Tidak ingat. Mana yang akan kamu gunakan?   -Mungkin hanya string templat asli ES6.  Biar saya tebak. Dan itu memerlukan ES6.   -Benar.  Yang mana, bergantung pada browser yang saya gunakan, membutuhkan Babel.   -Benar.  Yang mana, jika saya ingin menyertakannya tanpa menambahkan keseluruhan pustaka inti, saya perlu memuatnya sebagai modul dari npm.   -Benar.  Yang membutuhkan Browserify, atau Wepback, atau kemungkinan besar hal lain yang disebut SystemJS.   -Benar.  Yang, kecuali Webpack, idealnya seharusnya dikelola oleh pelari tugas.   -Benar.  Tetapi, karena saya akan menggunakan pemrograman fungsional dan bahasa ketik, pertama-tama saya perlu mengkompilasi TypeScript terlebih dahulu atau menambahkan Flow ini.   -Benar.  Dan kemudian mengirimkannya ke Babel jika saya ingin menggunakan await.   -Benar.  Jadi saya kemudian dapat menggunakan Fetch, promises, dan mengontrol alur dan semua keajaiban itu.   -Jangan lupa untuk melakukan polyfill pada Fetch jika tidak didukung, Safari masih belum dapat menanganinya.  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 sepenuhnya.   -Tidak apa-apa, dalam beberapa tahun ke depan kita semua akan membuat kode di Elm atau WebAssembly.  Saya akan kembali ke backend saja. Saya tidak bisa menangani begitu banyak perubahan, versi, edisi, kompiler, dan transpiler. Komunitas JavaScript gila jika mereka berpikir ada orang yang bisa mengikuti ini.   -Saya mengerti. Kalau begitu, Anda harus mencoba komunitas Python.  Mengapa?   -Pernah dengar Python 3?           Pembaruan: Terima kasih telah menunjukkan kesalahan ketik dan kesalahan lainnya, saya akan memperbarui artikel tersebut sebagaimana disebutkan. Diskusi di HackerNews dan Reddit .

Flow

Alongside

Assembly

BUNCH

Community Is

Facebook

Fetch

Oracle

Super

Target

Read My Stories

Audio ini diproduksi dalam bahasa asli cerita!

Terlalu panjang; Untuk membaca

Bagaimana rasanya mempelajari JavaScript pada tahun 2016

Bagaimana rasanya mempelajari JavaScript pada tahun 2016

About Author

KOMENTAR

HANG TAG

ARTIKEL INI DISAJIKAN PADA

Related Stories

Why do you need JWT in your ASP.NET Core project?

The Magic Shop

Stocks will be More Profitable than Crypto - Interview With Bryan Applegate

IdeaOps: Why Every Request is a Company Asset in Product Development

Why do you need JWT in your ASP.NET Core project?

The Magic Shop

Stocks will be More Profitable than Crypto - Interview With Bryan Applegate

IdeaOps: Why Every Request is a Company Asset in Product Development

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps