Geekly articles weekly

Frontend 2018: hasil tahun ini

Dunia pengembangan web berkembang sangat cepat. Apa yang kemarin adalah berita hari ini mungkin sudah ketinggalan zaman, tetapi apa yang hampir tidak ada yang tahu hari ini, besok bisa menjadi mesin kemajuan. Materi, terjemahan yang kami terbitkan hari ini, akan mempertimbangkan semua hal paling menarik yang terjadi di frontend sphere pada tahun 2018. Kami akan berbicara tentang pengembangan kerangka kerja dan alat bantu, tentang tren JavaScript, serta tentang arah tujuan frontend pada 2019.



Web Standardisasi Perakitan


WebAssembly sering dianggap sebagai salah satu teknologi di mana web masa depan akan dibangun. Teknologi ini ditujukan untuk memaksimalkan kinerja kode, mengurangi ukurannya, dan kemungkinan pengembangan web menggunakan bahasa yang berbeda dengan mengubah program yang ditulis di dalamnya menjadi format biner tunggal yang didukung oleh browser web.

Pada paruh kedua 2017, pengembang semua browser terkemuka melaporkan dukungan untuk WebAssembly. Kemudian, pada bulan Februari 2018, 3 peristiwa penting terjadi: versi pertama spesifikasi WebAssembly dirilis, spesifikasi antarmuka JavaScript dan API web yang sesuai diterbitkan.

Tentang mengunduh pustaka frontend populer dari npm


Empat modul front-end pertama yang paling populer diunduh dari npm termasuk React, jQuery, Angular, dan Vue. Di bawah ini kita akan berbicara tentang situasi dengan perpustakaan untuk pengembangan web secara lebih rinci.


2018 unduhan perpustakaan front-end dari npm

Bereaksi terus mendominasi dunia perpustakaan front-end dan terus berkembang


Bereaksi telah menjadi pemimpin dalam pengembangan web selama bertahun-tahun. Ruang lingkup penggunaannya terus tumbuh pada tahun 2018. Perpustakaan ini tetap menjadi salah satu yang paling dicintai di antara programmer, menurut survei yang dilakukan oleh Stack Overflow.

Tim pengembang inti Bereaksi sangat aktif dalam mengembangkan perpustakaan dan menambahkan fitur baru ke dalamnya. Selama 2018, banyak tambahan untuk React v16 dapat dilihat, termasuk metode siklus hidup komponen baru, API Konteks baru , peristiwa penunjuk mouse baru , fungsi malas , dan komponen tingkat tinggi React.memo baru. Perlu dicatat bahwa sebagian besar perhatian diberikan pada kait React and Suspense API .

React hooks bertemu dengan minat yang besar, mereka menulis banyak tentang mereka, banyak yang menyukainya. Teknologi ini memungkinkan Anda untuk menambahkan status ke komponen fungsional dengan menggunakan fungsi useState , memungkinkan untuk mengelola peristiwa siklus hidup komponen.

Berikut adalah video yang menunjukkan bagaimana menggunakan kait dapat secara signifikan meningkatkan kode aplikasi Bereaksi.

Fitur baru lain yang menarik dari perpustakaan ini adalah React Suspense. Ini dirancang untuk mengontrol pemuatan data dalam komponen Bereaksi sendiri. Suspense API memungkinkan Anda untuk menjeda output data sambil menunggu penyelesaian operasi asinkron menerimanya dari sumber apa pun. Ini adalah API Suspense yang digunakan dalam fungsi malas untuk mengimplementasikan pemisahan kode komponen. Tujuan utama penerapan teknologi ini adalah kemampuan untuk mengelola unduhan data asinkron apa pun, seperti permintaan ke berbagai API. Selain itu, Suspense API memungkinkan Anda untuk menyimpan permintaan tanggapan.

Ada contoh yang dirancang khusus yang menunjukkan banyak indikator untuk memuat data pada halaman, ditampilkan selama flag isFetching disetel ke true . Berkat Suspense API, pengembang memiliki kontrol antarmuka pengguna, khususnya, alat-alat ini dapat digunakan untuk menunjukkan apa yang harus ditampilkan di layar sambil menunggu data dimuat, untuk mengatur batas waktu, dan untuk mengkonfigurasi navigasi. Bahkan ada kepercayaan luas bahwa Suspense API dapat menghilangkan kebutuhan akan Redux. Dari pidato oleh Dan Abramov ini, Anda dapat belajar tentang pengembangan aplikasi menggunakan API ini.

Vue Terus Tumbuh Bypassing Bereaksi Dengan Jumlah Bintang Di GitHub


Setelah pertumbuhan eksplosif Vue pada 2017, hal yang sama berlanjut pada 2018. Kerangka ini bahkan mengungguli React dalam hal jumlah bintang di GitHub.

Meskipun pengembang web menyukai Vue, kerangka ini masih cukup baik di belakang React dan Angular dalam hal penggunaan aktualnya. Namun, Vue menawarkan basis pengguna aktif yang terus tumbuh, yang memberi harapan bahwa Vue akan memainkan peran penting dalam pengembangan web di masa depan.

Ewan Yu (pencipta Vue) banyak berbicara tentang Vue 3


Vue sedang menuju untuk merilis versi 3.0. Pada tahun 2018, pencipta kerangka itu, Ewan Yu, berbicara di berbagai acara tentang kemampuan yang diharapkan dari kerangka itu dan menulis tentangnya.

Kerangka sudut tetap sangat populer, rilis ketujuh


Pada Oktober 2018, rilis ketujuh Angular dirilis. Kerangka kerja ini telah mengalami perkembangan yang signifikan hingga saat ini, setelah beralih dari arsitektur MVC ke sistem modern menggunakan komponen. Popularitasnya juga terus meningkat.

Meskipun Angular tidak memiliki pendukung yang sama semangatnya yang membedakan React dan Vue, kerangka ini masih populer di proyek-proyek profesional. Banyak pengembang bosan React, karena ketika menggunakan perpustakaan ini mereka harus membuat banyak keputusan mengenai pilihan alat tambahan, merancang arsitektur aplikasi, membangun proses membangun proyek. Sudut, di sisi lain, menghilangkan dari pengembang kebutuhan untuk membuat banyak keputusan, menempatkan padanya template arsitektur yang banyak digunakan. Angular adalah kerangka kerja yang kapabilitasnya mencakup semua kebutuhan pengembang aplikasi web, dan alat baris perintah yang sesuai sepenuhnya menangani proses pembangunan proyek. Tentu saja, banyak hal dengan pendekatan ini diatur dalam kerangka kerja agak ketat. Keuntungan lain menggunakan Angular dalam lingkungan profesional adalah fakta bahwa ia dirancang untuk menggunakan TypeScript. Sebagai hasil dari Angular, kita dapat mengatakan bahwa kerangka kerja ini menciptakan nama untuk dirinya sendiri di lingkungan pengembangan web dan terus memperkuat posisinya.

Perlu dicatat bahwa paket @angular/core npm adalah Angular baru, dan paket angular adalah AngularJS lama.

Berikut adalah data npm pada unduhan paket @angular/core , angular , react dan vue pada tahun 2018, serta informasi tentang status proyek-proyek ini dari GitHub.


Data proyek untuk sudut / inti, sudut, bereaksi, dan vue

Semakin banyak pengembang ingin mempelajari GraphQL, tetapi teknologi ini belum melewati REST.


Teknologi GraphQL telah menemukan aplikasi dalam beberapa proyek besar seperti GitHub , tetapi belum menyebar secara luas. Menurut penelitian State of JS, hanya sedikit lebih dari 20% pengembang front-end yang menggunakan teknologi GraphQL, tetapi indikator yang menggambarkan mereka yang telah mendengar tentang hal itu dan berencana untuk menggunakannya adalah 62,5% yang mengesankan.


Teknologi GraphQL

Teknologi CSS-in-JS menjadi lebih umum


Saat menganalisis lingkungan pengembangan web, orang merasa bahwa ia berada di jalur untuk menyatukan semuanya dengan menggunakan JavaScript. Tren ini juga terlihat ketika diterapkan pada teknologi CSS-in-JS, menggunakan gaya mana yang dibuat menggunakan alat string JS. Ini memungkinkan Anda untuk bekerja dengan gaya dan dependensi menggunakan sintaks JS biasa dan mekanisme impor dan ekspor. Selain itu, ini menyederhanakan penataan dinamis, karena komponen yang menggunakan CSS-in-JS dapat mengonversi properti menjadi gaya. Berikut ini adalah contoh CSS reguler dan CSS-in-JS.

Untuk mengelola gaya dinamis menggunakan CSS biasa, Anda perlu bekerja dengan nama kelas di komponen dan memperbaruinya berdasarkan keadaan dan properti. Selain itu, untuk opsi gaya yang berbeda, Anda perlu menggunakan kelas CSS:

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

Berkat CSS-in-JS, kelas-kelas CSS tidak lagi diperlukan. Cukup untuk meneruskan properti terkait ke komponen bergaya yang menerapkan gaya dinamis. Kode keluar jauh lebih bersih, kami mendapatkan pemisahan tugas yang lebih jelas antara gaya dan Bereaksi, memungkinkan CSS melakukan penataan dinamis berdasarkan properti. Di Bereaksi, kode ini terlihat seperti JavaScript yang cukup normal:

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

Untuk mengimplementasikan fitur CSS-in-JS, perpustakaan seperti gaya-komponen dan emosi digunakan terutama. Pustaka komponen yang ditata ada lebih lama dari Emosi, telah menjadi lebih luas, tetapi popularitas Emosi tumbuh dengan cepat, banyak pengembang memilihnya. Perlu dicatat bahwa Kent S. Dodds bahkan berhenti bekerja di perpustakaan Glamorous CSS-in-JS-nya, lebih memilih Emotion. Inilah yang terlihat dari komponen yang ditata dan pustaka Emosi dalam hal npm dan GitHub.


Komponen gaya dan perpustakaan Emosi pada tahun 2018

Kerangka kerja Vue mendukung CSS lokal saat menggunakan komponen file tunggal tanpa menggunakan pustaka tambahan. Untuk melakukan ini, cukup tambahkan properti scoped ke tag komponen style , setelah itu Vue menggunakan teknologi CSS-in-JS untuk mengatur pekerjaan dengan gaya lokal yang tidak melampaui komponen dan tidak jatuh ke komponen lain.

Selain itu, harus dicatat bahwa dalam Angular, secara default, melalui penggunaan teknologi enkapsulasi tampilan , ruang lingkup CSS digunakan.

Pengembang yang berjuang dengan kelelahan teknologi menemukan keselamatan di alat-alat baris perintah


Semua orang tahu betapa melelahkannya untuk memantau perpustakaan yang terus diperbarui, yang sangat penting untuk proyek web, serta memperbarui proyek dengan benar dengan mempertimbangkan pembaruan perpustakaan akun dan membuat keputusan arsitektur yang tepat dalam kondisi seperti itu. Masalah ini telah menjadi katalisator untuk pengembangan alat-alat baris perintah yang memecahkan masalah-masalah seperti itu, yang memungkinkan programmer untuk fokus bekerja pada aplikasi. Semua alat ini telah menjadi sarana utama di mana aplikasi baru dibuat pada tahun 2018. Secara khusus, proyek-proyek berikut dapat dicatat dalam bidang ini: Next.js (SSR untuk React), Create-React-App (membuat aplikasi klien Bereaksi), Nuxt.js (SSR untuk Vue), Vue CLI (aplikasi klien Vue) , Expo CLI untuk React Native, alat Angular standar.

Keinginan pengembang untuk menyederhanakan ujung depan dan untuk meningkatkan produktivitas telah menyebabkan peningkatan popularitas generator situs statis


Selama perkembangan JavaScript yang cepat dan revolusioner, semua orang suka mempelajari perpustakaan terbaru dan mempraktikkannya. Namun, sekarang semuanya lebih atau kurang stabil, pengembang mulai menyadari bahwa tidak semua situs harus menjadi aplikasi satu halaman (SPA) yang kompleks. Pemahaman ini telah menyebabkan munculnya, pertumbuhan, dan pengembangan generator situs statis. Berkat mereka, Anda dapat mengembangkan proyek menggunakan berbagai alat front-end, seperti React atau Vue, yang kemudian, selama perakitan, diubah menjadi file HTML statis. Ini memungkinkan Anda memberikan halaman yang sudah selesai dengan sangat cepat kepada pelanggan.

Situs statis bagus karena merupakan kombinasi sempurna antara kesederhanaan dan kinerja. Jika file HTML dihasilkan selama perakitan proyek, ini memungkinkan untuk mengirim halaman jadi ke pengguna yang memuat hampir secara instan, tanpa menggunakan server atau rendering klien. Bersama dengan kode HTML, klien juga memuat file JS yang diperlukan agar halaman berfungsi, yang memberi pengguna kemampuan yang sama dengan aplikasi halaman tunggal biasa.

Generator situs statis sangat bagus untuk membuat sesuatu seperti situs pribadi atau blog, tetapi mereka juga dapat digunakan dalam proyek yang lebih besar. Pada tahun 2018, generator seperti Gatsby dan React Static for React apps, dan alat-alat seperti VuePress untuk proyek-proyek berbasis Vue semakin populer. Bahkan, situs statis telah menjadi sangat populer sehingga proyek open source Gatsby telah tumbuh menjadi perusahaan dan menerima investasi modal ventura.

Arsitektur tanpa server dan JAMStack


Semakin populernya situs-situs statis telah menyebabkan pengembangan teknologi server yang dirancang untuk mendukung mereka. Jadi, beberapa tahun terakhir di bidang pengembangan web telah terus-menerus berbicara tentang arsitektur tanpa server, ini disebabkan oleh fakta bahwa mereka memungkinkan Anda untuk mengatur pemisahan kode server dan klien dan mengurangi biaya proyek servis.

Pergerakan menuju serverlessness diperluas berkat metodologi pengembangan proyek web JAMStack (J adalah JavaScript, A adalah API, M adalah Markup, yaitu markup). JAMStack didasarkan pada konsep pengembangan situs statis, yang telah kita bicarakan di bagian sebelumnya. Teknik ini memungkinkan Anda untuk mencapai kecepatan pemuatan situs yang sangat tinggi karena markup yang telah dibentuk sebelumnya. Pada klien, situs-situs tersebut berubah menjadi SPA dinamis melalui penggunaan API server khusus. Pada 2018, ia bahkan lulus, di bawah naungan freeCodeCamp, Netlify dan GitHub, hackathon JAMStack pertama. Berikut ini adalah bahan yang menunjukkan fitur menggunakan arsitektur JAM di freecodecamp.com, yang memungkinkan Anda untuk mengevaluasi kemungkinan mengembangkan aplikasi skala besar menggunakan metodologi JAMStack.

TypeScript mungkin adalah masa depan JS, tetapi hal yang sama tidak dapat dikatakan untuk Flow


JavaScript sering dikritik karena kurangnya pengetikan statis. Alat utama untuk mengatasi masalah ini adalah TypeScript dan Flow . Pada saat yang sama, TypeScript jauh lebih populer daripada Flow, dan, pada kenyataannya, studi Stack Overflow menunjukkan bahwa pengembang lebih menyukai TypeScript daripada JavaScript sendiri (angka yang sesuai untuk bahasa ini adalah 67% dan 61,9%). Menurut penelitian State of JS, lebih dari 80% pengembang berencana untuk menggunakan TS atau sudah menggunakannya dengan senang hati. Jika kita berbicara tentang Flow, maka hanya 34% pengembang yang menggunakannya, atau ingin menggunakannya.

Dilihat oleh semua indikator, TypeScript adalah solusi standar untuk mengetik statis di JS, banyak yang lebih suka TS daripada JavaScript biasa. Tahun ini, jumlah unduhan TS di npm terus meningkat secara signifikan, sementara jadwal unduhan Flow tetap cukup datar. Orang mendapat perasaan bahwa TypeScript, dari alat yang hanya digunakan oleh penganut mengetik statis yang kuat, menjadi alat yang sangat banyak digunakan untuk pengembangan web. Berikut adalah data TypeScript dan Flow (sebagai babel-preset-flow ) dari npm dan GitHub.


Ketik unduhan Script dan Alir di paruh kedua 2018

Webpack 4 dirilis pada awal 2018


Webpack 4 dirilis hanya 8 bulan setelah rilis Webpack 3. Versi baru Webpack terus bergerak menuju penyederhanaan pekerjaan dan mempercepat proses pembangunan. Terkadang kinerja Webpack 4 dapat melebihi kinerja Webpack 3 hingga 98%. Webpack 4 bertujuan untuk menggunakan parameter default yang dipilih secara wajar, mendukung lebih banyak fitur tanpa memerlukan plug-in, dan untuk mulai menggunakan Webpack, tidak perlu lagi menyiapkan file konfigurasi terlebih dahulu. Selain itu, Webpack sekarang mendukung WebAssembly dan memungkinkan Anda untuk langsung mengimpor file WebAssembly.

Babel 7.0 dirilis


Babel 7 dirilis pada tahun 2018 - setelah hampir tiga tahun sejak rilis Babel 6. Babel adalah perpustakaan yang dengannya kode JavaScript ditransformasikan, yang menggunakan kemampuan standar baru (ES6 +), menjadi kode ES5, yang memungkinkan untuk lintas kompatibilitas browser proyek JS. Materi yang menginformasikan tentang rilis versi baru Babel menunjukkan bahwa Babel 7 lebih cepat, lebih modern, mendukung opsi konfigurasi lanjutan, telah meningkatkan fungsionalitas terkait dengan minifikasi, mendukung JSX Fragments dan teknologi TypeScript, konstruksi bahasa baru yang berada pada tahap awal. harmonisasi, dan banyak lagi. Perlu dicatat bahwa paket Babel di npm sekarang menggunakan namespace @babel .

Publikasi penting tahun 2018


Pertimbangkan beberapa publikasi penting yang dirilis pada 2018.

  • Inilah bahan tentang berapa banyak Anda bayar untuk menggunakan JavaScript pada tahun 2018.
  • Berikut adalah posting dari acara React Conf, dari mana Anda dapat belajar tentang masa depan React.
  • Dalam artikel ini , Airbnb berbagi pengalamannya dengan React Native, yang diakuisisi oleh perusahaan selama 2 tahun.
  • Di sini, Google menunjukkan kepada semua orang yang menginginkannya sebagai perangkat UI Foto Web Google.
  • Di sini Anda dapat membaca bahwa Microsoft akan mentransfer browser Edge ke platform Chromium.
  • Dan di sini adalah presentasi yang sangat menarik oleh Ryan Dahl, pencipta Node.js.

Prakiraan untuk 2019


Apa yang menanti frontend pada 2019? Ini ramalan kami:

  • WebAssembly akan menjadi semakin umum dalam proyek web karena pengembangan berkelanjutan dari teknologi ini, standardisasi dan keinginan pengembang untuk produktivitas.
  • Bereaksi masih akan berada di peringkat teratas alat pengembangan web, sementara Vue dan Angular akan terus menumbuhkan basis pengguna mereka.
  • CSS-in-JS dapat menjadi pendekatan gaya standar, menggantikan CSS biasa.
  • Mungkin pengembang akan memperhatikan komponen web standar .
  • Tidak mengherankan, produktivitas akan terus menarik perhatian global. Ini menunjukkan bahwa aplikasi web canggih (PWA) dan teknologi berbagi kode akan digunakan di sebagian besar proyek web.
  • Berkat penyebaran dan pengembangan PWA, proyek-proyek web akan lebih terintegrasi dengan kemampuan perangkat mobile dan desktop, dan akan memberi para pengguna peluang kerja penuh tanpa terhubung ke jaringan.
  • Pertumbuhan dan pengembangan alat-alat baris perintah yang bertujuan membebaskan pengembang dari kebutuhan untuk secara mandiri mengkonfigurasi alat-alat dan memberi mereka kesempatan untuk dengan tenang membuat proyek web akan terus berlanjut.
  • Semakin banyak perusahaan akan mengimplementasikan solusi seluler berdasarkan teknologi standar seperti React Native atau Flutter .
  • Dalam pengembangan front-end, peran containerisasi akan meningkat (khususnya, kita berbicara tentang Docker dan Kubernetes).
  • Promosi signifikan GraphQL akan dilakukan, teknologi ini akan digunakan di lebih banyak perusahaan.
  • TypeScript tidak lagi dianggap sebagai alternatif untuk JavaScript biasa, tetapi sebagai pilihan standar dalam situasi di mana JavaScript biasanya dipilih sebelumnya.
  • Teknologi realitas virtual akan mengambil langkah besar ke depan menggunakan perpustakaan seperti A-Frame , React VR dan Google VR .

Pembaca yang budiman! Apa yang Anda harapkan dari pengembangan front-end pada 2019?

Source: https://habr.com/ru/post/id433396/

More articles:


All Articles