Berikut saya jabarkan secara urut mengenai rekam jejak belajar yang saya lakukan selama 2 minggu, termasuk dengan strategi pembelajaran dan metode yang saya gunakan. Artikel ini dapat digunakan sebagai panduan bagi Anda yang ingin belajar Vue.js. Saya mengkonfirmasi bahwa proses saya belajar mengeluarkan biaya sebesar Rp.0 atau gratis 😃.

Prasyarat

Sebagai syarat utama memulai proses pembelajaran ini ialah menguasai dasar pengembangan frontend web dengan menggunakan HTML dan CSS, serta Javasript tingkat menengah. Selain itu juga mampu mengoperasikan CLI (Command Line Interface). Sebelum saya mempelajari Vue.js, saya telah menguasai penggunaan Javascript tingkat menengah, penggunaan bootstrap, node.js dan express.js.

Sumber Materi

Saya menggunakan materi 100% gratis yang berasal dari Youtube yaitu pada channel The Net Ninja. Saya mengikuti rangkaian video dari playlist Vue.js dan Vuex . Jika Anda adalah tipe orang yang dapat belajar dengan cepat maka Anda bisa mencicipi playlist Vuetify juga.

Strategi Belajar

Belajar dengan santai, belajar selama 2–3 jam per hari atau setidaknya 4 video per hari dianjutkan dengan mengerjakan exercises.

Belajar dengan semangat, belajar selama 3–5 jam per hari atau 5–6 video per hari dilanjutkan dengan mengerjakan exercises.

Saya memperhitungkan hal tersebut dengan menghitung jumlah total video pada playlist yaitu 53 kemudian membagi dengan 14 yang hasilnya 3.7, yang artinya setidaknya kita mempelajari 4 video per hari. Namun Anda harus sadar bahwa video tersebut durasinya berbeda beda, sehingga Anda bisa menyesuaikan sendiri.

Metode Belajar

Saya belajar dengan cara menonton 3–5 video atau 30–40 menit, setelah itu mempraktekan sendiri apa yang telah saya pelajari dengan kasus yang berbeda dari video tutorial. Saya melakukan itu setiap hari dan mendokumentasikan setiap proses ke dalam github repository.

Prinsip belajar saya adalah, jika kita ingin mempelajari pembuatan frontend web dengan Vue.js maka kita harus membuat project sendiri, sama halnya pada saat sekolah. Jika Anda ingin belajar matematika dengan baik, maka Anda menerima penjelasan dari guru lalu mengerjakan soal yang berbeda dari contoh soal, sehingga Anda benar-benar mengerti cara menyelesaikan soal tersebut.

Belajar untuk membuat proyek, membuat proyek untuk belajar

Jangan menggunakan video tutorial sebagai apa yang akan Anda praktekkan secara persis. Karena, pada saat Anda membuat project sendiri, Anda bisa saja menemukan sebuah masalah dimana masalah tersebut tidak dibahas pada video tutorial, dan hal seperti ini biasa kita temukan pada kehidupan nyata. Sehingga kita tidak hanya mengikuti tutorial namun juga harus kreatif dan bisa beradaptasi.

Sering dengar ini ? Teori VS Realita dan Tutorial VS Praktek

Jika Anda semata meniru apa yang dipraktekan di video tutorial, maka Anda adalah seorang anak yang berjalan dituntun oleh ibunya sepanjang jalan. Jadilah orang dewasa, setelah ibu Anda menunjukan arah jalan, berjalanlah sendiri.

Final Project

Membuat aplikasi syntax highlighter untuk berbagai macam bahasa pemrograman dengan API (Application Programming Interface). Aplikasi diharapkan dapat mengubah teks biasa menjadi teks yang sudah di-highlight sesuai dengan syntax bahasa pemrograman yang dipilih. Project harus dibuat menggunakan Vue cli, semantic HTML, komponen Vue, function, dan variabel yang deskriptif, dan menggunakan Vuex.

Proses Belajar

Hari pertama, saya menyusun strategi pembelajaran. Anda tidak perlu melakukannya karena saya telah membuatnya untuk Anda. Saya mempelajari Vue instances, data & methods, data binding, events & event modifiers, keyboard event dan two way data binding. Kemudian saya menerapkan ke dalam project kecil - kecilan sebagai exercise.

Hari kedua, saya meneruskan project pada hari pertama dengan tambahan berupa penerapan dari materi baru yang Saya pelajari yaitu computed properties, dynamic CSS, conditional, dan for loop.

Hari ketiga, saya membuat project halaman portofolio dengan materi baru yang saya pelajari yaitu multiple instances, Vue components, refs, Vue cli, Vue files extension & root component, nesting components, dan scoped CSS components.

Hari keempat, saya masih dengan project yang sama dengan menambahkan fitur baru pada project dengan materi baru yang Saya pelajari yaitu props, primitive vs reference, event (child to parrent), event bus, life-cycle-hooks, slots, dan dynamic components.

Hari kelima, saya tidak belajar apapun, dikarenakan padatnya jadwal kuliah (meskipun online nyatanya capek juga), ditambah badan saya yang sedang tidak fit, sehingga saya memutuskan untuk istirahat sementara.

Hari keenam, saya langsung lompat ke playlist Vuex dan mempelajari central store, computed properties, state, getter, mutation, action, mapping action, dan getter dengan babel.

Hari ketujuh, saya memperbaiki struktur project dan mengimplementasikan mutation dan action serta menggunakan mapping pada project portofolio.

Hari kedelapan hingga hari terakhir, saya tidak meneruskan mempelajari lewat playlist video. Saya mulai membuat final project yaitu syntax highlighter dan dapat menyelesaikannya sebelum hari terakhir. Dalam membuat final project, saya mengalami banyak masalah yang tidak terjadi dalam video tutorial. Saya sempat stuck seharian dengan satu masalah dan bertanya di stackoverflow juga kepada teman kuliah saya.

Materi

Materi playlist dari Youtube yang saya gunakan:

1. Tutorial Vue.js
   https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQcYgjhBoeQH7wiAyZNrYa
2. Tutorial Vuex
   https://www.youtube.com/playlist?list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2
3. Tutorial Vuetify
   https://www.youtube.com/playlist?list=PL4cUxeGkcC9g0MQZfHwKcuB0Yswgb3gA5

Anda juga dapat mengakses repository saya di Github :

1. Proses belajar vue.js selama 14 hari
   https://github.com/PhilipPurwoko/Vuejs-14Hari
2. Final project syntax highlighter
   https://github.com/PhilipPurwoko/CodeHighlighter
3. Hasil deployment syntax highlighter di Vercel
   https://code-highlighter.vercel.app/

Saya mempelajari Vue.js karena tertarik menggunakan Javascript untuk fullstack web development. Jadikanlah cerita ini sebagai hal yang dapat anda pelajari, mari berbagi pengalaman dan keluh kesah di komentar.

Enjoy Learning !