JavaScript Rising Stars 2017

Pendahuluan

Berikut ini proyek paling populer tahun 2017 dari semua kategori.

Vue.js kembali lagi

Sekali lagi, Vue.js menjadi proyek paling trendi tahun 2017 dengan lebih dari 40.000 bintang ditambahkan di GitHub sepanjang tahun.

Pencapaian jumlah bintang ini lebih tinggi dari tahun 2016 yang hanya 26.000 bintang dan jarak ke penantang berikutnya (React) menjadi lebih besar.

Jadi apa yang membuat Vue.js spesial?

• Pertama, ia memiliki kurva belajar yang rendah dengan pendekatan penggunaan komponen yang mirip dengan React tapi menggunakan sintaks yang lebih familiar.
• Ekosistemnya didefinisikan dengan baik dimana terdapat standar yang dipakai dimana router: vue-router, State management library: Vuex
• Konsep penggunaan single-file component dimana ada template, logic dan styles di satu file .vue merupakan konsep yang menarik.
• Dipakai oleh salah satu framework PHP paling populer, Laravel, sebagai view engine bawaannya.
• Tidak didekengi oleh perusahaan besar di Internet seperti Facebook atau Google tapi dimaintain oleh Evan You sebagai proyek open-source yang disponsori oleh crowd-sourcing.

Poin ini mungkin mirip dengan point terakhir di atas, tapi Vue.js sangat populer diantara developer Tiongkok. Ia dipakai oleh platform e-commerce paling besar di Tiongkok (Alibaba), juga dipakai oleh perusahan lain seperti GitLab atau Adobe.

React, nomor 2, lagi!

Seperti di tahun 2016, React menjadi nomor 2, dengan lebih dari 27.000 bintang yang ditambahkan ke GitHub (catat bahwa kita hanya melihat bintang yang ditambahkan sepanjang tahun, bukan jumlah bintang keseluruhan).

Create React App, proyek yang ketiga, menjadi cara yang paling direkomendasikan untuk membuat proyek web baru dengan React dan sukses membuat banyak boilerplate React menjadi tidak relevan seperti sebelumnya.

Dan Abramov (pembuat Redux, sekarang bekerja untuk Facebook) melakukan kerja yang sangat bagus dalam mencari keseimbangan antara kesederhanaan dan fitur. Contoh tidak ada styling yang aneh-aneh (hanya CSS biasa), tidak ada server-side rendering, tapi semua dipaketkan dengan baik sehingga pengalaman developer menjadi sangat asik.

Axios

Pustaka Axios menjadi klien HTTP yang paling banyak dipakai.

Ia dapat bekerja baik di sisi klien (rikues AJAX dari klien) atau di server-side (rikues HTTP di lingkungan Node.js).

Kesuksesannya mungkin berhubungan dengan Vue.js juga karena banyak tutorial Vue.js menggunakannya untuk mengakses API melalui HTTP.

Puppeteer

Puppeteer adalah cerita paling akbar tahun 2017. Dibuat oleh tim Google Chrome, ia adalah sebuah peramban headless Chrome alias perambah yang berjalan di belakang layar dan dapat diakses lewat kode.

Ia dapat dipakai untuk melakukan:

• Pengujian antarmuka aplikasi web secara otomatis di peramban web asli (bukan virtual).
• Mengambil snapshots halaman web untuk melakukan server-side rendering.
• Membuat file PDF dengan kelebihan Chrome untuk menyimpan halaman web sebagai file PDF.

Kategori "front-end framework" sudah menjadi medan perang dalam beberapa waktu terakhir, namun akhirnya medan perang ini lambat laun mulai mendingin dimana kita dapat melihat dengan jelas 3 pemain paling dominan.

The Big-3: Vue, React dan Angular

Bukan sebuah kejutan bahwa tiga framework UI paling populer adalah Vue.js, React dan Angular

Meski secara umum ketiganya bisa dipanggil sebagai frameworks, namun akan lebih akurat jika hanya Angular saja yang mendapat sebutan itu, dan kita harus menyebut Vue.js dan React sebagai libraries alias pustaka.

Sebelumnya kita sudah membahas kesuksesan Vue.js dan pendekatan terintegrasinya.

Sementara itu, dunia React masih terpecah belah dan developer harus membuat menentukan sendiri hal-hal yang akan ada di view layer:

• Routing antar halaman.
• Bagaimana mengambil data.
• Bagaimana menautkan form ke data.
• Bagaimana menyimpan state aplikasi.

Sebaliknya, ekosistem Angular sudah lebih terkontrol dan lebih stabil. Selalu ada Angular Way (atau cara yang Angular banget) untuk melakukan sesuatu.

Standar yang dimilikinya merupakan salah satu alasan mengapa Angular lebih memiliki imej sebuah "corporate" (atau "enterprise" gitu lah ya). Imej ini sudah diperlihatkan dengan penggunaan static type oleh TypeScript dimana sintaksnya mirip dengan bahasa C# atau Java yang biasa dipakai backend developer.

Less is more

Dibelakang Big-3, sangat menarik untuk melihat bahwa Preact menduduki posisi 4. Preact adalah alternatif yang lebih kecil dari React: dengan API yang sama tapi ukuran kurang dari 3KB.

Penantang lain di kategori ini sebagin besar mengambil kelebihan dengan memperkecil ukuran untuk mendapatkan performa yang lebih baik dibandingkan tiga framework di atas.

Contoh terbaik untuk moto di atas adalah Hyperapp, sebuah proyek yang masih berumur minggu. Ia merupakan pendekatan campuran antara sintaks JSX dari React dan sebuah sistem manajemen state yang terinspirasi oleh Redux dalam ukurang kurang dari 1KB!

JavaScript tentu saja tidak terbatas di sisi front-end sebuah aplikasi web saja, JavaScript juga dapat dipakai di backend, dan Mikeal Rogers, seorang member komunitas node.js yang cukup berpengaruh memprediksi bahwa Node.js Akan Mengalahkan Java dalam Satu Tahun.

Namun tidak seperti bahasa lain yang sudah memiliki standar de-facto selama bertahun-tahun (pikirkan Ruby on Rails untuk Ruby, Django untuk Python atau Laravel untuk PHP), tidak ada aturan khusus atau arsitektur yang direkomendasikan saat akan membuat sebuah server node.js baru.

Meskpun sudah cukup tua, Express masih tidak hanya masih menjadi framework paling trendi untuk node.js di tahun 2017, tapi ia juga measih menjadi tulang punggung banyak framework atau CMS lain, termasuk Feathers, Keystone atau Nest.

Sepertinya pendekatan minimalis ala Express cocok untuk tren micro-service yang mempromosikan pembuatan beberapa aplikasi yang lebih kecil daripada membuat satu aplikasi yang super besar.

Dibandingkan tahun lalu, 3 pendatang baru bergabung di TOP 10 framework node.js:

• Fastify dibuat sebagai web framework general-purpose, terinspirasi oleh hapi, tapi lebih cocok untuk membangun API HTTP berbasis JSON.
• Server.js bertujuan untuk memberikan pengalaman ‘everything works out of the box’.
• Nest memberikan arsitektur yang cukup familiar bagi developer Angular, terdiri atas module dan controller, ditulis dalam TypeScript.

Pustaka React hanya memiliki layer view, memberiakn ruang bagi keseluruhan ekosistemnya yang bergerak dengan sangat cepat. Dalam kategori ini, kami mengikutsertakan proyek ayng dibuat di atas pustaka React dan React Native.

Tahun 2016 Create React App menyelesaikan permasalahan untuk mulai membuat sebuah aplikasi React yang baru dengan template yang sudah diatur dengan baik. Facebook terus merilis versi baru dan sampai hari ini menjadi proyek paling populer di tahun 2017.

Sebagai contoh kesuksesannya, kami dapat menyebut StackBlitz, sebuah IDE online yang memungkinkan kita menjalankan aplikasi yagn dibuat dari Create React App, langsung dari browser dalam hitungan detik.

Namun meskipun Create React App sering disebut sebagai "starter kit" bawaan untuk React, developer mungkin masih memerlukan starter kit lain seperti: React boilerplate yang juga menjadi proyek paling populer dikategori inidengan memberikan banyak fitur seperti integrasi dengan GraphQL.

Ant Design, Ant Design Pro dan Material UI merupakan kumpulan komponen React yang telah diatur style-nya sehingga membantu developer yang ingin membuat aplikasi web yang repot memikirkan styling aplikasinya.

Popularitas Recompose memberikan salah satu fitur yang paling diinginkan developer dari React: pendekatan "functional"-nya, semua hanyalah sebuah fungsi dan Recompose memberikan kumpulan helper untuk melakukan hal ini.

Guest Writer: Evan You

Meski begitu mengagumi Vue.js, kami harus akui bahwa kami belum begitu familiar dengan ekosistemnya.

Oleh karena itu lah kami mencari seorang ahli untuk memberiakn opini mereka tentang statistik tahun ini dan siapa yang lebih baik dari pembuat Vue.js itu sendiri?

Dengan popularitas yang meningkat dari Vue itu sendiri, banyak proyek di ekosistem Vue juga memperoleh perkembangan yang cepat di tahun 2017.

Element dan iView adalah dua component UI kit yang paling populer. Mint UI dan vux, disisi lain adalah dua UI kit yang fokus di ranah mobile dan paling populer.

Vuetify adalah framework komponen Material Design yang dapat dipakai baik untuk mobile maupun aplikasi web desktop dan mungkin menjadi fitur paling kaya dengan server-side rendering, PWA dan dukungan CLI template. Ada juga Vue material yang fokus lebih untuk memberikan kumpulan komponen yang secara ketat mengikuti aturan Material Design.

Nuxt adalah sebuah higher-level framework dibuat di atas Vue, memberikan pengalaman development yang sangat halus untuk membuat aplikasi server-rendering Vue universal. Ia juga sangat serbaguna - kodenya bisa dipakai untuk membuat SPA biasa atau malah membuat static site.

Weex adalah framework yang memungkinkan pengguna untuk membuat aplikasi native-rendering mobile menggunakan sintaks dan API Vue yang sudah cukup familiar. Dikembangkan oleh Alibaba dan dipakai di production di beberapa aplikasi mobile yang cukup besar didunia dengan fokus pada performa.

JavaScript sangat serbaguna sehingga ia juga bisa dipakai untuk membuat aplikasi mobile, artinya kita bisa menggunakan kompoenen yang sama antara aplikasi web dengan aplikasi mobile.

Di kategori ini, kita kembali menemukan tiga pemain utama dari kategori "Front-end frameworks":

• React dengan React Native
• Vue dengan Weex dan Quasar
• Angular dengan Ionic dan NativeScript

Seperti di tahun 2016, React Native menjadi solusi paling trendi yang berbasis JavaScript untuk membangun aplikasi mobile yang native baik itu untuk iOS, Android atau Windows systems.

Seperti yang dibahas di video ini Cross platform apps with React Native, janji untuk "Write Once, Run Everywhere" dapat dipenuhi!

Disini kita membahas bahasa yang dikompilasi menjadi kode JavaScript biasa.

Pembaca mungkin membutuhkan sebuah compiler untuk building workflow kita karena dua alasan berikut:

• Pembaca ingin mendapatkan semua fitur dari bahasa JavaScript paling baru (ES7) sembari membuat kode yang ditulis dapat berjalan dari mayoritas peramban web yang ada. Fitur ini yang membuat Babel begitu sukses dimana banyak proyek bergantung padanya.
• Pembaca ingin menambah fitur baru ke bahasa tersebut misalnya sebuah "type checking".

Satu pertanyaan masa kini yang membagi developer menjadi dua kubu: menggunakan type atau tidak menggunakan type?

JavaScript memiliki tipe yang dinamis (dynamic type) tapi bukan tipe statik (static type). Banyak developer merasa mereka membutuhkan sebuah type di kodenya, terutama di code base yang besar untuk membuat code base tersebut menjadi lebih lebih kokoh dan mudah dibaca/dipahami.

Sehingga, jika merasa membutuhkan type, ada dua solusi utama yaitu: TypeScript, dari Microsoft dan Flow, dari Facebook (dan dipakai di proyek mereka yang lain: React, React Native, Jest...)

Baca darikel ini dari James Kyle untuk memahami perbedaannya: A Comparison Between Adopting Flow or TypeScript

Kategori ini mungkin menjadi yang paling menarik di tahun 2017 dengan building tool paling trendi yaitu Parcel, proyek baru yang mendapatkan bintang lebih dari 14.000 sejak proyek ini dirilis pada bulan Agustus di GitHub.

Parcel menawarkan semua kelebihan modern web development dengan satu fitur keren: tanpa konfigurasi!

Itu kelebihan utamanya dengan Webpack yang bergantung pada sebuah ekosistem plugin yang disebut dengan "loaders".

Jangan terkecoh oleh angkanya, Webpack masih menjadi bundler paling populer untuk aplikasi modern dengan jumlah total bintang sebanyak 35,000 di GitHub dan lebih dari 500 kontributor.

Banyak proyek menggunakannya termasuk Create React App dan Gatsby, salah dua proyek paling populer tahun 2017.

Webpack terus berkembang dengan versi 2 yang menawarkan fitur "code splitting" dengan sangat mudah melalui dynamic imports.

Sementara Webpack dan Parcel keduanya menargetkan building process dari aplikasi web, Rollup menargetkan building process dari pustaka. Ia fokus pada performa yang mengambil keuntungan dari modul ES6.

Rollup dipakai oleh beberapa pustaka besar diantaranya tim React yang mengganti build system mereka dari Browserify ke Rollup tahun 2017.

Sumber dari React blog

Rollup sangat cocok untuk pustaka seperti React yang dapat melakukan pre-built lalu mengintegrasinya ke dalam aplikasi.

Poi memiliki tujuan yang sama dengan Parcel: sebuah build tool untuk aplikasi dan pustaka web modern, ia juga hadir tanpa konfigurasi namun memungkinkan kita untuk menambahnya lewat presets.

Seperti yang kami prediksi tahun lalu (pertama kalinya kami memprediksi sesuatu dengan tepat!), Jest menjadi testing framework paling trendi tauhn 2017.

Ia pertama kali dibuat oleh Facebook untuk menjalankan test komponen React, namun evolusinya ternyata terjadi dengan sangat cepat di beberapa bulan terakhir (sudah ada 22 major version yang dirilis) dan ia juga dapat dipakai untuk menulis test baik kode front-end maupun back-end.

Jest bersinar karena beberapa hal ini:

• Tanpa konfigurasi, pengaturan bawaan sudah mencukupi
• Memberikan pengalaman yang menyenangkan untuk developer (intelligent watch mode, error reporting yang sangat baik...)
• Sintaks mirip dengan Mocha, banyak developer sudah familiar dengan keyword describe dan it
• Tidak memerlukan pustaka tambahan untuk melakuakn assertions, ia termasuk kategori "battery included".
• Memiliki fitur unik bernama mode "snapshot" yang mencatat respon untuk test di masa mendatang secara otomatis.

AVA, nomor satu tahun lalu, masih mendapat perhatian.

Ia dibuat oleh Sindre Sorhus yang menggunakannya diseluruh proyek yang ia buat dan itu artinya pustaka ini dipakai di banyak sekali proyek besar!

Ava menekankan kecepatan saat melakuakn test secara parallel, ia juga memiliki footprint yang lebih kecil dan sangat dekat dengan standar melakukan testing dengan sintaks yang mirip dengan Tape.

Disini kita membahas editor teks dari dunia open source, dibangun dengan teknologi web (maaf untuk pengguna Sublime!).

Tahun 2016, VS Code, dikeluarkan oleh Microsoft dan Atom, dikeluarkan oleh GitHub menjadi penguasai kategori ini.

mereka juga masih berkuasai di tahun 2017 tapi VS Code mendapatkan keuntungan yang lebih besar dibanding rivalnya.

Setiap bulan, versi baru VS Code dirilis yang membanyak fitur-fitur yang lebih banyak dan lebih membatu tanpa mengorbankan performanya. Tanpa memasang apapun lagi, kita sudah langsung mendapat fitu-fitur ini:

• Git integration
• Autocomplete utnuk banyak hal: sintaks JavaScript, local file paths saat menggunakan require atau import sebuah module, nama packager NPM...
• Integrasi sintaks React

Jika menggunakna Prettier didalamnya, kita dapat mengatur editor ini untuk melakukan format file secara otomatis setiap kali melakukan proses simpan, sehingga kita mendapatkan kode yang rapi secara otomatis!

Belum ada kesepakatan umum bagaimana cara terbaik untuk memberikan style komponen React.

Pembaca dapat memakai komponen yang siap pakai seperti Material UI atau Ant Design jika membutuhkan standar yang sudah bagus tanpa perlu melakukan kostumisasi tambahan.

Atau, jika membutuhkan fleksibilitas, pembaca dapat melakukan "cara lama", dengan menggunakan global CSS dari sebuah framework CSS seperti Bootstrap atau Bulma, dan menambahkan className yang sesuai ke komponen yang diinginkan. Namun dengan begitu komponen kita menjadi tidak self-contained lagi (berdiri sendiri), karena style-nya diatur ditempat lain.

Untuk mengatasi permasalahan ini, kategori "CSS in JavaScript" akhirnya dimunculkan.

Konsepnya sederhana: dengan React kita sudah mengatur logic dan template-nya dengan JavaScript. Kenapa tidak sekalian mengatur style langsung di dalam komponen dengan JavaScript untuk styling-nya juga?

Styled Components sejauh ini merupakan proyek paling trendi di kategori ini. Ia memungkinkan developer untuk menambah sintaks CSS iasa didalam komponen React menggunakan fitur baru di bahasa JavaScript: tagged template literals.

CSS Modules, posisi kedua di kategori ini mengadopsi pendekatan hibrida. Ia memungkinkan developer untuk menulis style dalam bahasa pilihan mereka (CSS biasa, Sass, less, stylus), menggunakan file-file yang ada didekat komponen yang diinginkan lalu diimpor ke komponen tersebut.

Mark Dalgleish, salah satu penulis CSS Modules, menulis salah satu artikel paling menarik tentang pendekatan CSS-in-JavaScript: A Unified Styling Language. Artikel ini sangat direkomendasikan untuk orang-orang yang cukup skeptis terhadap teknik yang baru ini.

Static site generators (atau "SSG") adalah tools dan membuatkan file-file .html, .css dan file JavaScript yang dapat dideploy di server web manapun tanpa memikirkan database. Static web sites sangat cepat, dapat diandalkan dan mudah di diurus.

Nomor 2 tahun 2016, Gatsby melakukan balas dendam di tahun 2017. Ia datang dengan fitur-fitur keren yang membantu mengoptimalkan static site kita:

• Fast browsing & exporting
• Aggressive preloading
• Intelligent code splitting (templates + page data)

Gatsby menggunakan React sebagai layer view dan GraphQL untuk melakukan query konten saat building time. Ia memiliki komunitas yang cukup kuat dan React official web site juga dibuat dengan Gatsby.

React Static adalah pendatang baru di kategori ini. Ia bertujuan untuk memberikan alternatif lebih ringan di banding Gatsby, dengan fokus pada performa dan kesederhanaan, terinspirasi oleh proyek Create React App.

Perlu juga disebutkan proyek Next.js dan Nuxt yang dapat dipakai juga sebagai Static Site Generators.

Saat sejarawan masa depan melihat kembali sejarah GraphQL, tahun 2017 mungkin menjadi sebuah titik balik yang penting.

Perusahaan besar seperti the New York Times mulai mengadopsi GraphQL, dan dua pustaka yang paling populer Relay dan Apollo merilis update besar.

Diantara dua pemain ini, perusahaan seperti Graphcool juga merilis banyak tools dan pustaka, juga framework full-stack seperti Vulcan mulai mendapat pasar sendiri.

Perlu disebutkan juga juga bahwa static site generator paling populer tahun ini Gatsby juga menggunakan GraphQL sebagai salah satu bagian pemroses datanya.

Dengan banyak pemain yang ikut berkecimpung di galaksi GraphQL, hanya tinggal menunggu waktu hingga teknologi ini menjadi alternatif yang lebih besar terhadap REST.