Frontend 2019: hasil tahun ini

Pada tahun 2019, dunia pengembangan front-end, seperti yang sudah terjadi, berkembang dengan sangat cepat. Bahannya, terjemahan yang kami terbitkan hari ini, dikhususkan untuk tinjauan peristiwa penting, berita, dan tren tahun 2019.



Dan di sini , omong-omong, adalah bahan serupa yang diterbitkan oleh kami pada tahun 2018. Di sana, pada akhirnya, ada bagian perkiraan untuk 2019. Menurut pendapat kami, banyak dari mereka dibenarkan. Artikel ini tidak akan melakukan tanpa perkiraan, tetapi kami tidak akan maju.

Tentang mengunduh kerangka kerja dan perpustakaan frontend populer dari npm

Perpustakaan Bereaksi lagi mengambil telapak tangan dan terus tumbuh, dan jQuery, anehnya, datang di tempat kedua. Tidak jauh dari para pemimpin pergi Angular dan Vue. Kedua kerangka kerja ini memiliki basis kuat pengembang yang antusias. Kerangka Svelte telah menikmati perhatian publik yang cukup besar tahun ini, tetapi implementasinya belum sangat aktif.


Unduh kerangka kerja frontend dan pustaka dari npm ( sumber )

WebAssembly menjadi bahasa keempat web, bergabung dengan HTML, CSS, dan JavaScript

Setelah tahun yang agak sepi, teknologi WebAssembly, pada awal Desember, sudah dikenal semua orang. Faktanya adalah bahwa secara resmi direkomendasikan untuk pengembangan web W3C. W3C (World Wide Web Consortium) adalah organisasi internasional pusat yang didedikasikan untuk menstandarisasi teknologi web.

Teknologi WebAssembly, sejak diperkenalkan pada tahun 2017, telah menarik perhatian luas. Banyak yang sudah menggunakannya. Pada tahun-tahun sebelumnya, spesifikasi WebAssembly 1.0 dirilis, dukungan untuk teknologi ini diintegrasikan ke dalam semua browser utama.

Lain 2019 berita terkait dengan WebAssembly terkait dengan pembentukan Aliansi Bytecode . Tujuan dari organisasi aliansi adalah untuk mengamankan masa depan WebAssembly di luar browser, bekerja bersama untuk menerapkan standar dan mengusulkan standar baru.

Kami masih menunggu saat ketika posisi WebAssembly benar-benar diperkuat, ketika teknologi ini akan diimplementasikan dalam jumlah besar. Setiap peningkatan dalam WebAssembly membawa kita lebih dekat ke titik ini. Pernyataan W3C, tentu saja, merupakan langkah besar menuju legitimasi teknologi ini di dunia korporat. Kita perlu terus menurunkan hambatan masuk ke dunia pemrograman WebAssembly, yang akan menyederhanakan pengembangan proyek WebAssembly baru.

Penggunaan TypeScript berkembang pesat, banyak pengembang mengakui cinta untuk bahasa ini

2019 bisa disebut tahun TypeScript. Bahasa ini tidak hanya menjadi standar de facto dalam menyelesaikan masalah mengetik kode-JS. Banyak pengembang juga lebih suka itu daripada JavaScript biasa baik dalam proyek pribadi maupun di tempat kerja.

Dalam studi StackOverflow yang diterbitkan awal tahun ini, TypeScript, dalam peringkat bahasa yang paling disukai oleh pengembang, berbagi tempat kedua dengan Python, di belakang hanya Rust. Dan tidak akan mengejutkan jika TypeScript naik lebih tinggi dalam studi yang sama, yang hasilnya diharapkan pada awal 2020.


Banyak pengembang menyukai TypeScript

TypeScript telah benar-benar mengambil alih dunia pengembangan web. Ini berlaku untuk frontend dan backend. Beberapa programmer mencoba untuk mengabaikan TypeScript sebagai tren jangka pendek lainnya. Mereka pikir dia akan berbagi nasib sedih dengan Coffeescript. Tapi TypeScript telah membuktikan nilainya dalam memecahkan masalah yang mendasari pengembangan JS. Ada perasaan bahwa seiring waktu popularitasnya hanya meningkat.

TypeScript memberi pengembang web kenyamanan luar biasa melalui integrasi dengan semua editor kode utama. Pengembang JavaScript melihat TypeScript sebagai alat yang penggunaannya menyebabkan lebih sedikit kesalahan. TypeScript di mata mereka adalah kode yang diketik yang lebih mudah dibaca daripada kode JavaScript. Ini adalah antarmuka objek yang berkontribusi pada pembuatan program self-documenting.

Jika kita berbicara tentang popularitas TypeScript, perlu dicatat bahwa pada 2019 itu mengungguli Bereaksi dalam jumlah unduhan dari NPM. Dia juga memiliki lebih banyak unduhan daripada pesaingnya - proyek seperti Flow dan Reason.

Saya ingin menarik perhatian Anda pada kenyataan bahwa TypeScript dan Bereaksi adalah teknologi yang sama sekali berbeda yang dirancang untuk memecahkan masalah yang berbeda. Oleh karena itu, perbandingan seperti itu seperti membandingkan hangat ke lembut. Ini hanya demonstrasi dari popularitas TypeScript.


TypeScript memintas Bereaksi di NPM

TypeScript 3.0 dirilis pada akhir 2018. Pada 2019, ia sampai ke versi 3.7, yang mencakup fitur-fitur terbaru dari standar ECMAScript, seperti rantai opsional dan hanya memeriksa nilai-nilai null dan undefined . Versi baru dari TypeScript telah meningkatkan fungsionalitas yang terkait dengan bekerja dengan tipe.

Bereaksi terus memimpin, pengembang bersemangat tentang kait

Vue dan Angular telah mendedikasikan komunitas pengguna. Vue bahkan mengungguli Bereaksi dalam jumlah bintang di GitHub. Tetapi dalam hal penggunaan praktis, baik itu proyek pribadi programmer, atau pekerjaan mereka, React dengan yakin memegang tempat pertama.

Pada akhir 2018, tim React merilis apa yang disebut pengait. Pada 2019, kait benar-benar menangkap dunia Bereaksi. Sebagian besar pengembang Bereaksi menggunakannya sebagai mekanisme utama untuk mengelola keadaan komponen dan untuk bekerja dengan peristiwa dalam siklus hidup mereka. Sepanjang tahun ini, banyak artikel tentang kait telah ditulis, pola penggunaannya menjadi lebih jelas, paket React yang paling penting telah mulai menyediakan kait kustom yang dapat digunakan untuk bekerja dengan paket-paket ini.

Hooks memberi programmer cara untuk mengelola status siklus hidup dan komponen fungsional menggunakan sintaksis yang sederhana dan ringkas. Selain itu, Bereaksi memungkinkan Anda untuk membuat kait kustom yang membantu pengembang menulis kode yang cocok untuk digunakan kembali, membantu membuat logika yang dapat digunakan bersama. Ini menghilangkan kebutuhan untuk komponen tingkat tinggi atau properti rendering.

Tim pengembang React memberikan perhatian khusus pada kenyamanan programmer dan alat yang membantu bekerja lebih produktif. Setelah penampilan kait yang keras di React 16.8, saat perpustakaan sampai ke versi 16.4 pada 2019, sisa inovasi tidak begitu besar.

Dapat dikatakan bahwa setelah rilis kait, tim pengembangan Bereaksi berfokus pada kenyamanan programmer dengan menciptakan alat bantu. Kenyamanan programmer, sensasi yang ia alami saat mengembangkan aplikasi React, menjadi topik utama konferensi React Conf 2019. Tom Ochchino, Leading Conference Speaker dan React Team Manager, mengatakan bahwa perasaan pengembang tentang penggunaan React didasarkan pada tiga ide: input rendah penghalang, produktivitas tinggi, skalabilitas solusi. Lihatlah apa yang dirilis (atau direncanakan akan dirilis) oleh tim React untuk mendukung ide-ide ini:

• Versi baru Alat Bereaksi Pengembang.
• Profiler kinerja baru.
• Buat React App v3.
• Pembaruan utilitas untuk pengujian.
• Mode kompetitif (diharapkan).
• Sistem CSS-in-JS yang digunakan oleh Facebook (diharapkan).
• Persiapan progresif / selektif dari kode halaman yang ditentukan sebelumnya untuk pekerjaan (diharapkan).
• Bereaksi peningkatan inti tentang ketersediaan (diharapkan).

Diyakini bahwa jika seorang programmer bekerja dengan baik, maka ia akan berhasil dalam sesuatu yang akan menimbulkan kesan positif pada pengguna. Akibatnya, React Developer Initiative yang dijelaskan di atas adalah kemenangan untuk semua orang. Ini adalah pembicaraan dari React Conf 2019 tentang fitur Bereaksi yang diharapkan, dan di sini ada tautan ke semua pembicaraan dari acara ini.

Vue framework sedang bersiap untuk rilis versi 3, penggunaannya semakin berkembang

Mungkin, sementara Vue tidak bisa disebut kerangka kerja yang paling umum, tetapi sulit untuk tidak melihat bahwa sebuah komunitas telah terbentuk di sekitarnya, yang anggotanya bersemangat tentang bisnis mereka tidak seperti yang lain. Vue diketahui telah mengambil yang terbaik dari React dan Angular, tetapi lebih mudah untuk dibuat daripada mereka. Keuntungan penting lain dari Vue adalah keterbukaannya yang lebih besar, dan tidak dikendalikan oleh perusahaan besar seperti Facebook (Bereaksi adalah gagasannya) atau Google (perusahaan ini mendukung Angular).

Berita utama di dunia Vue adalah rilis 3.0 mendatang. Versi alpha diharapkan pada akhir tahun. Tahun ini, Vue 2.x hanya menerima beberapa pembaruan, lebih dekat ke awal tahun. Faktanya adalah bahwa semua kekuatan pengembang ditujukan untuk rilis Vue 3.0.

Fakta bahwa Vue tidak memiliki banyak rilis tahun ini tidak berarti tidak ada yang menarik yang terjadi dengan kerangka kerja ini. Ketika Ewan Yu merilis RFC untuk Vue versi ketiga, ada diskusi luas di masyarakat tentang perubahan. Misalnya, Anda dapat membacanya di sini dan di sini .

Masalah utama yang mengganggu pengembang Vue adalah perubahan besar pada kerangka API. Namun, setelah munculnya reaksi negatif seperti itu, dikatakan bahwa API baru akan ditambahkan ke yang lama dan bahwa mereka akan kompatibel dengan Vue 2. Banyak pengembang mengatakan bahwa jika rilis Vue baru tidak terlihat seperti yang mereka inginkan, mereka akan mempertimbangkan kemampuan untuk beralih ke Svelte. Orang-orang takut perubahan Vue akan membuat kerangka kerja ini terlihat terlalu mirip React. Meskipun banyak anggota masyarakat masih khawatir tentang masa depan kerangka kerja, ada perasaan bahwa kebisingan telah mereda dan semua orang hanya menunggu rilis baru.

Di Vue 3, selain fungsi kontroversial, beberapa fitur menarik dan perubahan yang berguna diharapkan muncul:

• Komposisi API.
• Perubahan pada konfigurasi dan mount API.
• Fragmen.
• Dukungan untuk teknologi Time Slicing (percobaan).
• Dukungan untuk beberapa v-model.
• Portal
• API arahan khusus baru.
• Reaktivitas meningkat.
• DOM virtual yang ditulis ulang.
• Meningkatkan sifat statis.
• Dukungan API Hook (percobaan).
• Optimalisasi pembuatan slot (pemisahan rendering untuk komponen induk dan anak).
• Dukungan TypeScript yang ditingkatkan.

Peristiwa penting di dunia Vue adalah rilis Vue CLI versi ke-4 tahun ini, di mana fokus utamanya adalah memperbarui alat-alat dasar.

Ini pembicaraan Ewan Yu tentang Vue.

Versi 8 dan 9 Angular akan keluar, serta mesin kompilasi / rendering Ivy baru

Filosofi Angular, ketika kerangka kerja menetapkan skema tindakan tertentu untuk pengembang, membantu alat ini mendapatkan basis pengguna yang besar. Angular memberi tahu pengembang apa yang benar dan apa yang tidak, tetapi menyediakan semua alat yang dibutuhkan pengembang.

Ini menghilangkan banyak alasan untuk mendiskusikan perpustakaan dan dependensi mana yang harus dimasukkan dalam proyek. Perlu dicatat bahwa masalah seperti itu sering muncul dalam tim menggunakan Bereaksi. Selain itu, aplikasi Angular menulis dalam TypeScript. Karena orang yang memilih Angular harus setuju bahwa banyak keputusan telah dibuat untuknya, kerangka kerja ini sangat populer di berbagai perusahaan. Keadaan ini memungkinkan pengembang untuk fokus pada pengembangan produk perangkat lunak, daripada membuang waktu untuk memikirkan paket.

Pada 2019, versi 8 Angular dirilis. Pada tahun yang sama, mesin kompilasi / rendering Ivy baru dirilis. Kekuatan utama Ivy adalah mengurangi ukuran bundel. Tetapi, pada kenyataannya, itu membawa ke Angular dan banyak kegunaan lainnya. Sekarang, sebelum rilis Angular 9, Ivy adalah fitur opsional. Di sini Anda dapat membaca detail tentang apa yang baru di Angular 8. Saya terutama ingin mencatat yang berikut:

• Pemuatan diferensial kode JavaScript modern.
• Kesempatan untuk berkenalan dengan teknologi Ivy.
• Memastikan kompatibilitas mundur dari router Angular.
• Perakitan pekerja web yang ditingkatkan.
• Kemampuan menyampaikan informasi tentang cara menggunakan CLI Angular ke pengembang Angular.
• Pembaruan ketergantungan.

Selama Desember 2019, tim Angular sedang bersiap untuk merilis Angular 9. Tampaknya versi kerangka ini akan dirilis baik pada akhir tahun ini atau pada awal berikutnya. Inovasi terbesar dalam Angular 9 adalah bahwa Ivy akan menjadi mesin rendering standar. Berikut adalah video dengan menonton yang dapat Anda ketahui lebih lanjut tentang Angular 9.

Sekarang lebih banyak perhatian diberikan pada aksesibilitas (a11y) dan internasionalisasi (i18n) daripada sebelumnya

Web harus menjadi ruang terbuka untuk semua orang dan dapat digunakan oleh semua orang. Akibatnya, aksesibilitas front-end dan internasionalisasi telah menjadi prioritas. Setelah perkembangan cepat JavaScript dan web, yang dimulai pada 2015, pola dan kerangka kerja akhirnya mulai stabil. Saat ini, ketika teknologi lebih stabil daripada beberapa tahun yang lalu, situasinya memungkinkan pengembang untuk lebih memperhatikan alat untuk melokalisasi aplikasi dan untuk meningkatkan ketersediaannya. Ini menjadikan web tempat yang lebih ramah untuk semua kategori pengguna. Kita harus bangga dengan jalan ke arah ini yang sudah kita lalui, tetapi masih banyak yang akan datang.

Inilah yang mereka katakan tentang aksesibilitas di MDN : “Aksesibilitas adalah praktik yang memungkinkan situs Anda digunakan oleh sebanyak mungkin orang. Kami secara tradisional menganggap ini sebagai aksesibilitas bagi penyandang cacat, tetapi pada kenyataannya, jumlah ini termasuk kelompok pengguna lain yang menggunakan perangkat seluler atau memiliki koneksi jaringan yang lambat. "

Dan inilah yang dikatakan tentang internasionalisasi di w3.org : “Jika Anda menginternasionalkan suatu proyek, itu berarti Anda merancang atau membuat bahan, aplikasi, spesifikasi, dan sumber daya sejenis Anda sendiri sehingga memungkinkannya bekerja secara normal untuk pengguna yang memiliki budaya apa pun. tinggal di wilayah mana pun, berbicara bahasa apa pun, atau membuatnya mudah untuk beradaptasi dengan pengguna tersebut. "

Fitur ES2019

ECMAScript (spesifikasi yang menjadi dasar JavaScript) terus mengikuti siklus pembaruan tahunan tahun ini. Standar ES2019 memiliki banyak fitur baru . Inilah beberapa di antaranya:

• Metode Object.fromEntries() .
• Metode String.trimStart() dan String.trimEnd() .
• Dukungan unicode yang ditingkatkan dalam metode JSON.stringify() .
• Array.flat() .
• Array.flatMap() .
• Pekerjaan yang ditingkatkan dengan try/catch .
• description properti objek Symbol .

Meskipun fitur-fitur baru yang sangat menarik telah muncul di ES2019, hal - hal yang mungkin muncul dalam standar ES2020 mendatang yang mungkin paling diantisipasi sejak ES6 / ES2015:

• Bidang kelas pribadi.
• Rantai opsional adalah obj.field?.maybe?.exists .
• Memeriksa nilai hanya pada item ?? 'use this only if item is null/undefined' null dan undefined item ?? 'use this only if item is null/undefined' item ?? 'use this only if item is null/undefined' .
• BigInt data besar.

Popularitas Flutter eksplosif

Flutter keluar 2 tahun setelah React Native, tetapi dengan cepat memperoleh popularitas. Proyek ini sangat dekat dengan React Native dalam hal jumlah bintang di GitHub. Dan jika popularitas proyek terus tumbuh pada kecepatan yang sama, itu akan segera menyusul React Native. Flutter bersaing dengan React dan merupakan alat pengembangan aplikasi seluler lintas platform hebat lainnya.

Menimbang bahwa Flutter tidak dapat membanggakan komunitas pengembang ramah yang sama dengan React Native dan diwakili oleh pengembang web menggunakan React, keberhasilan tersebut terlihat sangat mengesankan. Tujuan Flutter adalah menjadi kerangka pengembangan seluler lintas platform terbaik.

Ini adalah tabel di mana React Native dan Flutter cocok untuk beberapa indikator.

Node.js Foundation dan JS Foundation bergabung untuk membentuk OpenJS Foundation; Node.js 12 akan menjadi rilis LTS

Untuk mendukung ekosistem JavaScript dan mempercepat pertumbuhan bahasa, Node.js Foundation dan JS Foundation bergabung untuk membentuk OpenJS Foundation . Gagasan utama dari langkah ini adalah membangun kerja sama dan pengembangan teknologi di bawah naungan organisasi netral, yang sekarang menyatukan 31 proyek sumber terbuka. Proyek-proyek ini termasuk Node, jQuery, dan Webpack. Inisiatif ini dapat dilihat sebagai gerakan positif untuk seluruh komunitas JS. Ini didukung oleh perusahaan teknologi terkemuka seperti Google, IBM dan Microsoft.

Versi 12 Node.js, yang dirilis tahun ini, sesuai dengan tradisi yang ada, akan menerima dukungan jangka panjang (LTS, dukungan jangka panjang) hingga April 2023. Node.js 12 menawarkan banyak fitur baru, pembaruan keamanan, dan peningkatan kinerja. Beberapa inovasi penting termasuk dukungan asli untuk import/export konstruksi, dukungan untuk bidang kelas swasta, kompatibilitas dengan mesin V8 versi 7.4, dukungan untuk TLS 1.3, dan munculnya alat diagnostik tambahan. Berikut adalah materi tentang inovasi Node.js 12.

Kerangka Svelte menarik banyak perhatian, tetapi belum banyak digunakan.

Kerangka kerja Svelte dapat menemukan tempatnya di dunia kerangka kerja front-end yang sudah ramai. Namun, seperti yang telah disebutkan, ini belum menyebabkan penggunaan kerangka ini secara luas. Jika untuk mengungkapkan esensi Svelte secara singkat, maka kita dapat mengatakan bahwa ini adalah alat "sederhana tapi kuat". Situs web proyek memiliki tiga kekuatan utama:

• Pengembang langsing menulis lebih sedikit kode.
• Kerangka kerja ini tidak menggunakan DOM virtual.
• Dia benar-benar reaktif.

Svelte mencoba membawa sebagian besar pekerjaan ke tahap kompilasi, alih-alih melakukan sesuatu di browser saat halaman berfungsi. Svelte memiliki arsitektur berbasis komponen, yang strukturnya dikompilasi menjadi HTML dan JavaScript murni. Ini menjanjikan perlunya kode boilerplate lebih sedikit. Kerangka kerja ini menggunakan ide pemrograman reaktif, yang memungkinkan Anda untuk membuat perubahan langsung ke DOM alih-alih mengubah DOM virtual, dan kemudian merekonsiliasi perubahan dengan yang asli.

Svelte menawarkan pengembang front-end sesuatu yang baru dan menarik, tidak memberi mereka lebih banyak peluang, tetapi lebih sedikit. Pada tahun 2020, akan menarik untuk mengamati pertumbuhan dan perkembangan Svelte. Saya ingin berharap bahwa kita akan dapat melihat contoh penggunaannya dalam proyek skala besar. Ini akan memberi tahu Anda tampilannya dibandingkan dengan pesaingnya yang lebih besar - React, Vue, dan Angular.

Situs statis masih relevan, pengembang memperkenalkan JAMStack

Situs statis telah membuktikan bahwa mereka adalah bagian dari web dan tidak akan menyerah posisi. Pernyataan ini didukung oleh perluasan penggunaan kerangka kerja seperti Gatsby, pertumbuhan hosting situs statis yang cepat seperti Netlify, banyak perusahaan baru yang membuat CMS tanpa antarmuka pengguna.

Situs statis menggabungkan apa yang sudah ada di web dengan alat dan perpustakaan baru. Mereka memungkinkan Anda untuk membuat proyek yang tidak dapat dibandingkan dengan hal lain. Kita dapat membuat situs menggunakan pustaka modern seperti React, dan kemudian kita dapat mengompilasinya menjadi halaman HTML statis selama pembuatan proyek. Karena sekarang semua halaman disimpan jadi, server tidak menghabiskan sumber daya untuk mengisinya dengan data ketika klien mengaksesnya. Halaman dapat dikirim ke klien secara instan, proyek dapat memanfaatkan sepenuhnya manfaat dari caching CDN. Ini memungkinkan Anda untuk menjaga konten situs sedekat mungkin dengan penggunanya.

Saat membuat situs statis, pola JAMStack (JavaScript, API, Markup) sangat populer. Ini adalah pendekatan hybrid yang menggabungkan situs statis dan aplikasi satu halaman. Menggunakan pendekatan ini, halaman diberikan kepada klien dalam bentuk statis, tetapi ketika mereka muncul di klien, mereka berperilaku seperti SPA, yang menggunakan API dan tindakan pengguna untuk mengubah keadaan antarmuka.

Odha semakin meningkat, implementasinya semakin meningkat

Menggunakan situs statis adalah salah satu cara untuk membuat proyek web yang sangat cepat. Tetapi mereka tidak cocok untuk semua kasus. Pilihan menarik lainnya adalah aplikasi web progresif (PWA, aplikasi web progresif). PWA memungkinkan Anda untuk menyimpan sumber daya di browser untuk mempercepat waktu reaksi halaman terhadap pengaruh pengguna dan memastikan efisiensi proyek tanpa koneksi internet. Selain itu, mereka memungkinkan Anda untuk menggunakan alur kerja latar belakang yang membawa aplikasi ini lebih dekat ke aplikasi asli, menerapkan, misalnya, fungsi pemberitahuan push.

Beberapa bahkan mengklaim bahwa PWA dapat menggantikan aplikasi seluler konvensional. Meskipun demikian, dapat dicatat bahwa tidak ada keraguan bahwa Odha akan lama menjadi bagian penting dari rangkaian teknologi yang digunakan oleh perusahaan dalam pengembangan proyek mereka.

Alat Frontend Menjadi Sangat Tinggi

Pengembang Frontend telah mengeluh tentang kelelahan JavaScript selama beberapa tahun sekarang. Tetapi Anda dapat melihat bagaimana masalah ini secara bertahap menghilang berkat upaya besar dari mereka yang mendukung proyek sumber terbuka.

Sebelumnya, jika Anda perlu membuat SPA, Anda perlu membangun set dependensi Anda sendiri menggunakan Bower atau NPM. Itu perlu untuk memahami bagaimana menerjemahkan kode menggunakan Browserify atau Webpack, Anda harus menulis server Express dari awal dan menjaga aplikasi Anda mengapung dalam badai pembaruan perpustakaan.

, , . , . , , Create React App, Vue CLI, Angular CLI. — Gatsby, , Expo, React Native. Next Nuxt , . GraphQL- Hasura, TypeScript- GraphQL Code Generator. Webpack. — , .

, « -»?

GraphQL ,

GraphQL , , REST. , , GraphQL. , API GitHub GraphQL , .

GraphQL- . , JSON-. API GraphQL , , API .

API GraphQL , , , TypeScript-. GraphQL Code Generator , TypeScript-, .

GraphQL . Apollo .


GraphQL

CSS-in-JS

-, , JavaScript. CSS-in-JS, , JavaScript-.

, , , JavaScript- import/export . , , , , CSS-in-JS , . , , Facebook CSS-in-JS — , .

, CSS CSS-in-JS. CSS , . , CSS-:

 // JS-  const MyComp = ({ isActive }) => {  const className = isActive ? 'active' : 'inactive';  return <div className={className}>HI</div> } // CSS- .active { color: green; } .inactive { color: red; } 

CSS-in-JS CSS- . , . , React, , . JS-, React:

 const Header = styled.div`  color: ${({ isActive }) => isActive ? 'green' : 'red'}; `; const MyComp = ({ isActive }} => (  <Header isActive={isActive}>HI</Header> ) 

styled-components emotion — CSS-in-JS-. emotion 2019 styled-components . , , , CSS-in-JS. , .


CSS-in-JS-

VS Code

IDE . , , , . -, , . , , VS Code. — , , , , .

State of JS Survey 2019 .


VS Code —

Webpack 5 -

Webpack , JavaScript-. — . Webpack , , . 5 Webpack :

• .
• .
• , , Webpack.

Jest Flow TypeScript

Facebook , Jest . Flow — TypeScript. 2019 , Jest Flow TypeScript. , TypeScript JS-. TypeScript 2020 , .

Chrome 72-78

Chrome . , -, . 2019 7 Chrome. Chrome 79 -, Chrome 80 dev-, Chrome 81 — canary-. , Chrome 2019 .

Microsoft Edge Chromium

Internet Explorer, Edge, - . , , . , - . , Microsoft Chromium Google. 2019 -.

Facebook Hermes — JavaScript- Android, React Native

Facebook , JavaScript- Android . — Hermes . Facebook React Native. , , React Native .

2020

, 2020 :

• - . PWA.
• WebAssembly , .
• GraphQL REST, , GraphQL.
• TypeScript .
• , , -. .
• CSS-in-JS , CSS, .
• «» . , . , . 2020 .
• Flutter React Native - .
• , Svelte.
• Deno ( TypeScript, Node.js).
• AR/VR A-Frame , React VR Google VR . AR/VR.
  
• - (Docker, Kubernetes).

Pembaca yang budiman! -2020?