Membuat module di Nuxt

Berkomunikasi dengan API secara efektif

Masih dalam proses panjang pengembangan versi baru KelasKita, khusus nya perombakan besar-besaran di Frontend, memilih libraries & tools yang tepat sangat penting untuk masa depan produk web app. Seperti yang kita tau, hal pertama yang sangat berpengaruh dari sebuah web app adalah Frontend.

SEO.

Client-side security.

Performance.

UX.

UX.

UX.

UX.

Dan UX.

Kami memilih Nuxt untuk presentation layer. Selain karena ‘lightweight’ nya (dibangun diatas Vue), juga karena fleksibilitas dalam proses development. Membuat route baru se-simple membuat Vue Single-file Component di directory pages

Semakin modern nya teknologi web — dan juga semakin kompleks — terlebih yang menggunakan konsep SPA, bukan hanya presentation layer saja yang ada di frontend. Services dan Store juga. “Frontend” sudah bukan sekedar menjadi perantara “yang server berikan” berdasarkan apa “yang user minta”.

Frontend, lebih tepat nya JavaScript, sekarang bukan hanya sekedar untuk manipulasi DOM dan mengirim request ke server secara asinkronous. Dan agar client bisa berkomunikasi dengan server, kita memerlukan API. Dan sekarang, menggunakan REST API sangat populer karena untuk request menggunakan URL (dan HTTP Verb). Beda dengan SOAP yang harus menggunakan XML.

Meskipun business logic berada (dan memang harus) di server-side, sekarang sudah beberapa business logic yang ada di client, validasi; transaksi, kalkulasi, process & page flow, transformasi data, dll. Yang pasti nya harus di validasi di server-side juga.


Setiap component memiliki lifecycle nya tersendiri, yang paling krusial adalah ketika component akan di mount. Alias keadaan ketika user sedang membuka halaman yang mengandung component-component yang sudah kita buat.

Hal utama yang paling penting, terlebih untuk halaman yang dinamis adalah meminta data dari server, lalu memberikan nya ke client. Biasanya kita membuat directory services , lalu mengeksekusi methods berdasarkan model yang diminta. Misal:

Kode diatas hanyalah contoh, namun kurang lebih seperti itulah yang kita (Frontend dev) lakukan.

Kita perlu meng-import methods yang ingin kita panggil. Di setiap page yang membutuhkan, atau di sebuah component. Dan ini bukanlah masalah, karena mengetik import { getPopularClass } from '~/services/Kelas' tidak sampai 6 detik.

Tapi nulis import terus-terusan di pages yang membutuhkan capek juga. Beruntung jika frontend dev nya membuat sebuah services, bagaimana bila setiap halaman bila ingin me-request ke server, langsung ditulis disitu?

Nuxt Module for the rescue

Terima kasih Nuxt berkat API nya yang di desain fleksibel. Kita bisa dengan mudah membuat plugin di Nuxt. Meskipun plugin & module di Nuxt hampir mirip, perbedaan yang paling jelas adalah di-fleksibilitas dalam konfigurasi.

Untuk bisa menggunakan module di Nuxt, sama seperti plugin, kita perlu mendefinisikan nya di nuxt.config.js . Jika property plugin hanya membutuhkan src: stringdan ssr: boolean , dengan module kita bisa membuatnya lebih fleksibel. Ini contohnya:

Dan property apiKey tersebut, bisa diakses via options . Module FTW!

Membuat module

Hal yang perlu kita lakukan adalah membuat file/directory di top-level project bernamamodules . Contoh: modules/kelaskita . Kita membutuhkan 2 file disini: kelaskita.js dan plugin.js .

kelaskita.js berisi untuk meng-handle registrasi module di Nuxt, dan plugin.js berisi “bagaimana module kita bekerja”.

Lalu di file plugin.js nya berisi:

Constructor dari KelaskitaSDK hanyalah { apiKey: string, apiSecret: string } yang didapat dari nuxt.config.js . Karena sudah di-inject ke Nuxt, jadi kita bisa menggunakan nya dengan:

No more import!

Mengapa melakukan ini?

Bila UX Designer selalu memfikirkan tentang User user user dalam sebuah produk digital, yang terlewatkan di sebuah tim yang membuat produk digital — produk yang dibuat dengan code khususnya — adalah pengalaman developer. DX, Developer Experience.

Salah satu nya menerapkan module di Nuxt (dan membuat sdk khususnya), Frontend developer tinggal fokus membuat & me-maintanance User Interface. Tidak perlu memfikirkan Service Layer di Presentation Layer. Separation of concerns

KelasKita is hiring Frontend Developer!

Bantu kami membantu user dalam proses belajar-mengajar disisi Frontend. Jika kamu seseorang yang tertarik dengan teknologi web, JavaScript, familiar dengan ES6, React, Vue, dan Webpack; Kirim email ke jobs@kelaskita.com.

Kami menggunakan Stylus untuk styling, Nuxt sebagai framework, StandardJS untuk coding standard, dan set textwidth=120 .